Skip to main content

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 @svar-ui/svelte-grid

//yarn
yarn add @svar-ui/svelte-grid
note

The package migrated from wx-svelte-grid to @svar-ui/svelte-grid. We continue publishing wx-svelte-grid until the Svelte SVAR 3.0 update

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 and wx-svelte-grid.

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 data and columns inside the Grid tag.

<script>
    import { Grid } from "@svar-ui/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,
        },
    ];
</script>

<Grid {data} {columns} />

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