Skip to main content

request-data

Description​

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

Usage​

onRequestData: ({
    row: {
        start: number;
        end: number;
    }
}) => boolean|void;

Parameters​

The callback prop receives a function with the following parameter:

  • row - (required) current row position, which includes
    • start - (required) start row index
    • end - (required) end row index

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 onRequestData callback is triggered while scrolling (or at initialization when dynamic loading is enabled). We add the event handler that receives the row.start and row.end values and prepares data according to these indices.

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

const { allData, columns } = getData();

export default function Example() {
  const [rowCount] = useState(100);
  const [data, setData] = useState([]);

  function dataProvider(ev) {
    const { row } = ev;
    if (row) {
      setData(allData.slice(row.start, row.end));
    }
  }

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

Related articles: