Skip to main content

data

Description​

Optional. An array of objects with data for the Grid

Usage​

data?: {
  rowHeight?: number,
  [key: string]: any;
}[];

Parameters​

The set of parameters is arbitrary in the data array, but each item should have a unique id if the column uses it as a key.

  • rowHeight – (optional) sets a custom height (in pixels) for a specific row, which does not depend on item content. It has a higher priority than sizes.rowHeight. If not defined, the default row height specified in the grid configuration will be used.

Example​

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

    const { columns } = getData();

    const data = [
        {
            id: 1,
            city: "Amieshire",
            country: 6,
            email: "Leora13@yahoo.com",
            firstName: "Ernest",
            lastName: "Schuppe",
            street: "Ratke Port",
            zipCode: "17026-3154",
            date: new Date("2016-09-23T07:57:40.195Z"),
            companyName: "Lebsack - Nicolas",
            stars: 820,
            followers: 70,
            newsletter: true,
            checked: 1,
        },
        {
            id: 2,
            city: "Gust",
            country: 4,
            email: "Mose_Gerhold51@yahoo.com",
            firstName: "Janis",
            lastName: "Vandervort",
            street: "Dickinson Keys",
            zipCode: "43767",
            date: new Date("2017-03-06T09:59:12.551Z"),
            companyName: "Glover - Hermiston",
            stars: 1200,
            followers: 170,
            checked: 1,
        },
    ];

</script>

<Grid {data} {columns} />

Related article: Setting row height