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.

<script>
    import { Grid } from "@wx/svelte-grid";
    import { getData } from "./common/data";
    const { allData, columns } = getData();

    let data = [];

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

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

    let rowsCount = 500;

</script>

<Grid 
data={allData}
{columns}
dynamic={{rowsCount}}
on:data-request={dataProvider} />

Related articles: