Skip to main content

data-request

Description​

Fires while scrolling or at the initialization stage if dynamic data loading is enabled

Usage​

"data-request": CustomEvent;

Parameters​

The callback of the action is the function with the following parameter:

  • CustomEvent - a React custom event which you can bind to the event handler

Example​

In the example below we use the dynamic property to enable dynamic data loading and specify the number of all rows in a dataset. The data-request action is triggered while scrolling and we add the event handler that receives the row.start and row.end values and loads data.

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

const { allData, columns } = getData();
const rowsCount = 500;

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

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

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

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

Related articles: Dynamic data loading