Skip to main content

dynamic

Description

Optional. Enables dynamic data loading

Usage

dynamic?: { rowsCount: number };

Parameters

  • rowsCount - the number of all rows in the 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 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 { Grid } from "wx-react-grid";
import { getData } from "./common/data";
import { useRef } from "react";

const { allData, columns } = getData();

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

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

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

let rowsCount = 500;

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

Related articles: