React Virtual Grid Component

The VirtualGrid component is a React-based virtualised grid designed to efficiently render large datasets by dynamically loading and displaying only the visible rows. This approach enhances performance and reduces memory usage.

$3

- fetchData (function) - An asynchronous function that fetches data based on startIndex, limit, sortOrder, and sortColumn, returning items and totalCount.
- height (number) - The maximum height of the grid (in pixels).
- rowHeight (number) - The height of each row, used for virtual scrolling calculations.
- sortOrder (string | null) - The order in which data should be sorted (asc or desc). Defaults to null.
- sortColumn (string) - The column by which data should be sorted.
- children (ReactNode) - Used to define columns via PropertyColumn and TemplateColumn.

$3

- Property Column
- Defines columns based on object properties.
- Supports optional formatting (e.g., date, uppercase, lowercase).
- Example:
```
- title
- Sets the column header text that will be displayed in the table UI.
- property
- Specifies the key from the data object to be displayed in this column. property="email" tells the grid to render the value of the email field from each row’s data.
- Format
- "date" → Displays formatted date and time.
- "uppercase" → Converts text to uppercase.
- "lowercase" → Converts text to lowercase.
- TemplateColumn
- Allows custom content (e.g., buttons, icons) inside a column.
- Common Column Property
- Width
- The width property defines how wide each column should be inside the VirtualGrid. The grid component uses this value to calculate and render column widths.
- If a percentage is provided (e.g., width="20%"), the column's width is calculated relative to the total width of the grid.
- If a numeric value is used (e.g., width={80}), the column width is set to a fixed number of pixels.

$3

- Dynamic Data Fetching - Loads only the necessary rows dynamically using the fetchData function.
- Virtual Scrolling - Displays only visible rows based on rowHeight, reducing unnecessary re-renders.
- Sorting Support - Supports dynamic sorting based on sortColumn and sortOrder.
- Refresh Functionality - Provides a refresh method to reload data when needed.

$3

- Large datasets that need efficient rendering.
- Optimized data loading to enhance performance.
- Tables with customizable and interactive content.

Getting started

$3

`npm i react-virtual-grid-table`

$3

`
import { useCallback, useRef, useState } from "react";
import Image from 'next/image'
import { GridHandle, GridRequest, PropertyColumn, TemplateColumn, VirtualGrid } from "react-virtual-grid-table";

export default function Home() {
const gridRef = useRef(null);
const [searchKey, setSearchKey] = useState(null);

const fetchData = useCallback(async (request: GridRequest) => {
try {
const params = new URLSearchParams({
skip: request.startIndex.toString(),
limit: request.limit.toString(),
sortColumn: request.sortColumn ?? '',
sortOrder: request.sortOrder ?? '',
searchKey: searchKey ?? '',
});
const url = http://your-url/brand?${params};
const response = await fetch(url);
if (!response.ok) throw new Error();
const data = await response.json();

const countUrl = http://your-url/brand/count?${searchKey};
const countResponse = await fetch(countUrl);
if (!countResponse.ok) throw new Error();
const count = await response.json();

return {
items: data,
totalCount: count,
};
} catch (error) {
console.error("Error fetching data:", error);
return {
items: [],
totalCount: 0,
};
}
}, [searchKey]);

const handleDelete = (id: string) => {
try {
console.log(id)
gridRef.current?.refresh();
} catch (error) {
console.error("Error deleting item:", error);
}
};

const handleEdit = (id: string) => {
try {
console.log(id);
} catch (error) {
console.error(error);
}
};

const handleSearch = (event: React.ChangeEvent) => {
try {
setSearchKey(event.target.value);
gridRef.current?.refresh();
console.log(searchKey);
} catch (error) {
console.error(error);
}
}

return (

Alhamdulillah

type="text"
className="seacrh-input"
id="seach-input-id"
placeholder="Enter Search Key..."
onChange={handleSearch}
/>

ref={gridRef}
fetchData={fetchData}
height={400}
rowHeight={30}
sortColumn='name'
sortOrder='DESC'
>



onClick={(row) => handleEdit((row as any).id)}
>
src='/images/icons8-edit-64.png'
alt='icons8-edit-64.png'
width={25}
height={23}
/>


onClick={(row) => handleDelete((row as any).id)}
>
src='/images/icons8-delete-128.png'
alt='icons8-delete-128.png'
width={25}
height={23}
/>

);
}
``
Now you're ready to start using the components.

$3

$3

react-virtual-grid has very few dependencies and most are managed by NPM automatically.

$3

react-virtual-grid aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).