10,000 rows
This example displays 10000 virtual rows.
From
Subject
Date
Bob Wilson
Important announcement
2023-01-01
John Doe
New feature request
2023-01-02
Alice Smith
Sales update
2023-01-03
Mike Johnson
Bug report
2023-01-04
Emily Davis
Feature request
2023-01-05
David Brown
Bug report
2023-01-06
Sophia Wilson
Sales update
2023-01-07
James Smith
Bug report
2023-01-08
Olivia Johnson
Feature request
2023-01-09
Liam Davis
Sales update
2023-01-10
Emma Brown
Bug report
2023-01-11
Noah Wilson
Feature request
2023-01-12
When rows has to be displayed, the grid calls the loadRows callback:
const loadRows = useCallback(async (startIndex: number, size: number) => {
// simulate network delay
await new Promise((resolve) => setTimeout(resolve, 500));
// generate some data on the fly
const result = Array.from(
{ length: size },
(_, index) => index + startIndex
).map(
(_, index) =>
({
type: "row",
values: {
status: false,
from: `Row: ${startIndex + index}`,
favorite: true,
subject: `Feature request ${startIndex + index}`,
attachments: 2,
date: "2023-01-12",
},
}) as DataGridRow
);
return { rows: result };
}, []);
return (
<DataGrid
//...
rows={rows} // the first "static" rows
totalRowCount={10000} // provide the total rows count
loadRows={loadRows} // load rows on demand
//...
/>
);