Skip to main content

dynamic

Description​

Optional. Enables dynamic data loading

Usage​

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

Parameters​

  • rowCount - (required) the number of all rows in the dataset
  • columnCount - (required) 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.

<script>
    import { Grid } from "wx-svelte-grid";
    import { getData } from "./common/data";

    const { allData, columns } = getData();

    let rowCount = $state(100);

    let data = $state([]);

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

</script>
  <Grid 
   {data}
   {columns}
   dynamic={{ rowCount }}
   onrequestdata={dataProvider} />

Related articles: