Autoconfiguring columns

The widget allows you to quickly create the table structure by setting only one parameter without the need to define columns configuration manually. The feature is intended to help create a table structure with default settings or applying only basic columns settings (i.e., the columns property parameters that are primitive data types, such as number, boolean or string).

To create a table with a ready-made structure, it's enough to import data and set the autoConfig parameter to true, and all columns will automatically inherit the default columns property settings. All columns will be created based on the first object in the data array.

Example:

<script>
    import { Grid } from "../src/";

    const allData = [
        {
            //columns will be created based on this first object
            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: 6,
            city: "Amieshire",
            country: 2,
            email: "Cody.Schultz56@gmail.com",
            firstName: "Alessandra",
            lastName: "Feeney",
            street: "Mosciski Estate",
            zipCode: "81514",
            date: new Date("2016-06-30T05:23:18.734Z"),
            companyName: "Nikolaus and Sons",
            stars: 3209,
            followers: 2780,
        },
        {
            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,
        },
        {
            id: 3,
            city: "Amieshire",
            country: 3,
            email: "Frieda.Sauer61@gmail.com",
            firstName: "Makenzie",
            lastName: "Bode",
            street: "Legros Divide",
            zipCode: "54812",
            date: new Date("2016-12-08T13:44:26.557Z"),
            companyName: "Williamson - Kassulke",
            stars: 610,
            followers: 170,
            checked: 1,
        },
    ];
</script>

<Grid data="{allData}" autoConfig="true" />

It's also possible to redefine the default columns settings and set basic columns settings in the autoConfig object (i.e., set the columns property parameters that are primitive data types, such as number, boolean or string). All these settings will be applied to all columns.

Example:

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

    const { allData } = getData();

    const config = { editor: "text", sort: true };
</script>

<div style="padding: 20px;">
    <div style="height: 620px; max-width: 800px;">
        <Grid data={allData} autoConfig={config} />
    </div>
</div>