Skip to main content

dynamic

Description​

Optional. Enables dynamic data loading

Usage​

dynamic?: { 
    rowCount?: number,
    columnCount?: number,
};

Parameters​

  • rowCount - (optional) the number of all rows in the dataset
  • columnCount - (optional) the number of columns in a dataset

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 request-data action is triggered while scrolling and we add the event handler that receives the row.start and row.end values and loads data.

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

export default function App() {
  const { allData, columns } = getData();

  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: