Loading data dynamically

Dynamic data loading allows loading data on request from the database, which improves performance in case of large datasets. Data will be dynamically loaded each time you scroll up and down the table. To enable dynamic data loading, use the dynamic property by specifying the number of all rows in a dataset. If dynamic is applied, the data-request action is triggered while scrolling and you need to add the event handler that receives the row.start and row.end values and loads data.

Example:

import { Grid } from "wx-react-grid";
import { getData } from "./common/data";

const { allData, columns } = getData();
let rowsCount = 500; // the number of all rows in a dataset

export default function App() {
    const api = useRef(null);
    let data = [];

    function dataProvider(ev) {
        const { requestData } = ev.detail;
        const { row } = requestData;

        if (row) data = allData.slice(row.start, row.end);
    }

    return (
        <Grid 
            data={allData}
            columns={columns}
            dynamic={{ rowsCount }}
            onRequestData={dataProvider} 
        />
    );
}