The VirtualGrid component is a React-based virtualized grid designed to efficiently render large datasets by dynamically loading and displaying only the visible rows. This approach enhances performance and reduces memory usage.
npm install react-virtual-grid-table`
- 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}
/>
);
}
``