Installation and initialization

This DataGrid widget is designed to be incorporated into your Svelte application.

Installing DataGrid

To install the trial version of the Svelte DataGrid library, you should request access to SVAR npm registry by signing up here, and then run the following command:

//npm
npm install @wx/trial-svelte-grid

//yarn
yarn add @wx/trial-svelte-grid

To install commercial license, run:

//npm
npm install @wx/svelte-grid

//yarn
yarn add @wx/svelte-grid

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.