Loading data

Preparing data

The following types of information can be loaded into the Grid:

• data - data displayed in the table; it's an array of JSON objects where all properties are arbitrary. The id property is also arbitrary but it should be unique if used.

Example:

const data = [
    {
        id: 1,
        city: "Amieshire",
        firstName: "Ernest",
        lastName: "Schuppe",
    },
    {
        id: 2,
        city: "Gust",
        firstName: "Janis",
        lastName: "Vandervort",
    },
];

• columns - the columns of the table; it's an array of JSON objects with a set of parameters for each object described here: columns parameters

Example:

const columns = [
    { id: "id", width: 50 },
    { id: "city", width: 100, header: "City" },
    { id: "firstName", header: "First Name" },
    { id: "lastName", header: "Last Name" },
];

To pass data and columns to the table, provide above-mentioned data and columns during initialization:

<script>
  import { Grid } from "wx-svelte-grid"; 

  const data = [ ... ];
  const columns = [ ... ]

</script>

  <Grid {data} {columns} />

info

It's also possible to create a table structure automatically with default or basic columns settings using the autoConfig property.

Loading data from a local source

To load the client-side data (e.g., from a separate file), you need to include this file to the application page and pass its data to the Grid component:

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

</script>

<Grid {data} {columns} />

Loading data from the server

To load data from the server, you need to send the request to fetch the data in any suitable way and pass the parsed JSON array to the Grid component:

<script>
    import { Grid } from "wx-svelte-grid";

    let data = $state([]);

    fetch("/https://some-backend-url/data")
        .then(res => { data = res.json(); })
    
</script>

<Grid {data} {columns} {init} />

Alternatively, you can use the built-in DataProvider helper that makes it easier to load and save data to the backend. All detailed instructions you can find here: Working with server.

Loading data dynamically

Dynamic data loading allows loading data on request from the database, which improves performance in case of large datasets. Data will be dynamically loaded each time you scroll up and down the table. To enable dynamic data loading, use the dynamic property by specifying the number of all rows in a dataset. If dynamic is applied, the request-data action is triggered while scrolling and you need to add the event handler that receives the row.start and row.end values and loads data.

Example:

<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} />