Installation and initialization

SVAR DataGrid is an open-source library distributed under the MIT license.

Installing DataGrid

To install the Svelte DataGrid library, you should run the following command:

//npm
npm install wx-svelte-grid

//yarn
yarn add wx-svelte-grid

Working with Svelte 4.x

If you want to use the library with an older version of the Svelte toolkit, you can do so by using the 1.x version of the widget

npm install wx-svelte-grid@1.3.3

Initializing

Import the Grid component and initialize the Grid properties.

The example below shows how to create a simple table with four columns and two rows.

The data array holds data to be displayed in the table and the columns array includes the table columns. It's necessary to define the components inside the Grid tag.

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

const data = [{
        id: 1,
        email: "Leora13@yahoo.com",
        firstName: "Ernest",
        lastName: "Schuppe",
    },
    {
        id: 2,
        email: "Mose_Gerhold51@yahoo.com",
        firstName: "Janis",
        lastName: "Vandervort",
    },
];

const columns = [{
        id: "id",
        width: 50
    },
    {
        id: "firstName",
        header: "First Name",
        footer: "First Name",
        width: 150,
    },
    {
        id: "lastName",
        header: "Last Name",
        footer: "Last Name",
        width: 150,
    },
    {
        id: "email",
        header: "Email",
        footer: "Email"
    },
];
</script>

<Grid {data} {columns} />

Now you can move forward and load data. See Loading data.