Svelte DataGrid

https://docs.svar.dev/svelte/grid/
Admin
Svelte DataGrid is a powerful UI component for Svelte applications, offering features like...
Tokens:89,305
Snippets:755
Trust Score:8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Run Svelte DataGrid Sample Locally

Source: https://docs.svar.dev/svelte/grid/getting_started

Commands to navigate to the project directory, install dependencies, and start the development server for running the Svelte DataGrid sample locally.

```bash
// navigate to the root folder
cd svelte-grid  

// install dependencies
yarn install //or npm install  

// start dev server
yarn dev //or npm run dev  

```

--------------------------------

### Example JSON Response for GET /{url}

Source: https://docs.svar.dev/svelte/grid/helpers/restdataprovider/routes/get_data

This is an example of the JSON array returned by the GET /{url} route when a request is successful. It shows the structure of a single data object.

```json
[
   {
      "id": 5,
      "name": "Kwan123",
      "year": 10,
      "votes": 0
   }
]

```

--------------------------------

### Example: Tracking Filter Rows Action

Source: https://docs.svar.dev/svelte/grid/api/actions/filter-rows

This example demonstrates how to listen for the 'filter-rows' action and log the key of the filtered field to the console.

```APIDOC
## Example: Tracking Filter Rows Action

### Description
The example below demonstrates how to apply built-in filters, track the `filter-rows` action and output the field name (key) that is filtered.

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

    const { data, countries } = getData();

    const columns = [
        { id: "id", width: 50 },
        {
            id: "firstName",
            header: { filter: "text" },
            footer: "First Name",
            width: 150,
        },
        {
            id: "lastName",
            header: { filter: { type: "text" } },
            footer: "Last Name",
            width: 150,
        },
        {
            id: "email",
            header: "Email",
            footer: "Email",
        },
        {
            id: "country",
            header: {
                filter: {
                    type: "richselect",
                    config: {
                        options: countries,
                    },
                },
            },
            options: countries,
        },
        {
            id: "stars",
            header: "Stars",
            footer: "Stars",
            filter: { type: "text" },
        },
    ];

    function init(api){
        api.on("filter-rows", (ev) => {
            console.log("Filtered field:", ev.key);
        });
  }

</script>

<Grid {data} {columns} {init} />
```
```

--------------------------------

### Custom Context Menu Example

Source: https://docs.svar.dev/svelte/grid/helpers/components/contextmenu

Example demonstrating how to apply 'button' type to menu items and display dimmed text. Imports necessary components and defines menu options.

```svelte
<script>
  import { getData } from "../data";
  import { Grid, ContextMenu } from "@svar-ui/svelte-grid";
    
  let table = $state();
  const data = getData();
  
  const options = [
    {
      id: "add:before",
      subtext: "Add before",
      icon: "wxi-table-row-plus-before",
      type: "button",
      },
      {
      id: "add:after",
      subtext: "Add after",
      icon: "wxi-table-row-plus-after",
          type: "button",
    },
    { type: "separator" },
    { id: "copy", subtext: "Copy", type: "button", icon: "wxi-content-copy" },
    { type: "separator" },
    { id: "delete", type: "button", subtext: "Delete", icon: "wxi-delete-outline" },
];
</script>

<ContextMenu api={table} {options}>
  <Grid {data} {columns} bind:this={table} />
</ContextMenu>
```

--------------------------------

### Install SVAR DataGrid

Source: https://docs.svar.dev/svelte/grid/guides/installation_initialization

Install the Svelte DataGrid library using npm or yarn. Note the package name change from wx-svelte-grid.

```bash
//npm  
npm install @svar-ui/svelte-grid  
  
//yarn  
yarn add @svar-ui/svelte-grid  


```

```bash
npm install wx-svelte-grid@1.3.3  


```

--------------------------------

### Example: Configuring Svelte Grid Sizes

Source: https://docs.svar.dev/svelte/grid/api/properties/sizes

Demonstrates how to import and use the Grid component with custom size configurations for rows, columns, header, and footer.

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

    const { data, columns } = getData();

    let sizes = {
        rowHeight: 50,
        columnWidth: 180,
        headerHeight: 60,
        footerHeight: 60,
    };

</script>

<Grid
    {data}
    {columns}
    {sizes} />

```

--------------------------------

### Install SVAR DataGrid for Svelte 4.x

Source: https://docs.svar.dev/svelte/grid/getting_started

For older Svelte versions (Svelte 4.x and below), install version 1.x of the widget and the `wx-svelte-grid` package.

```bash
npm install wx-svelte-grid@1.3.3  

```

--------------------------------

### Example Usage of Tree Structure

Source: https://docs.svar.dev/svelte/grid/api/properties/tree

This example demonstrates how to use the 'tree' property along with 'data' and 'columns' to render hierarchical data in the Svelte Grid.

```APIDOC
## Example
```svelte
<script>
    import { Grid } from "@svar-ui/svelte-grid";

    const treeData = [
        {
            id: 1,
            city: "Amieshire",
            firstName: "Ernest",
            lastName: "Schuppe",
            open: false,
            data: [
                {
                    id: "1.1",
                    city: "Gust",
                    firstName: "Janis",
                    lastName: "Vandervort",

                },
                {
                    id: "1.2",
                    city: "Amieshire",
                    firstName: "Makenzie",
                    lastName: "Bode",
                },
            ],
        },
        {
            id: 2,
            city: "Amieshire",
            firstName: "Ciara",
            lastName: "Towne",
            data: [
                {
                    id: "2.1",
                    city: "Amieshire",
                    firstName: "Suzanne",
                    lastName: "Wolff",
                },
                {
                    id: "2.2",
                    city: "Amieshire",
                    firstName: "Alessandra",
                    lastName: "Feeney",
                },
            ],
        },
    ];
    const treeColumns = [
        { id: "id", width: 80 },
        {
            id: "lastName",
            header: "Last Name",
            flexgrow: 1,
            treetoggle: true,
        },
        {
            id: "firstName",
            header: "First Name",
            width: 150,
        },
        {
            id: "city",
            width: 100,
            header: "City",
        },
    ];

</script>

<Grid tree data={treeData} columns={treeColumns} />
```
```

--------------------------------

### Svelte Grid with AutoConfig Example

Source: https://docs.svar.dev/svelte/grid/api/properties/autoconfig

Demonstrates how to use the autoConfig property with a custom configuration object to automatically generate table columns based on the provided data.

```javascript
import { Grid } from "@svar-ui/svelte-grid";

const allData = [
    //columns will be created based on the 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,
    },
];

const config = { editor: "text", sort: true };
```

```svelte
<script>
    import { Grid } from "@svar-ui/svelte-grid";

    const allData = [
        //columns will be created based on the 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,
        },
    ];

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

<Grid data={allData} autoConfig={config} />
```

--------------------------------

### Install SVAR Svelte DataGrid Package

Source: https://docs.svar.dev/svelte/grid/getting_started

Install the SVAR Svelte DataGrid package using NPM. This is the primary package for Svelte 5+.

```bash
npm install @svar-ui/svelte-grid  

```

--------------------------------

### Overlay component example

Source: https://docs.svar.dev/svelte/grid/guides/configuration/overlay

This is an example of a Svelte component designed to be used as an overlay. It includes a button that triggers an action when clicked, allowing for user interaction.

```svelte
<script>
    import { Button } from "@svar-ui/svelte-core";
    const { onaction } = $props();

    function showData() {
        onaction &&
            onaction({
                action: "overlay-button-click",
                data: {
                    show: true,
                },
            });
    }
</script>

<div>Here is a component example</div>
<div>Click the button to see the data</div>
<Button type="primary" onclick={showData}>Show data</Button>

```

--------------------------------

### Custom Overlay Component Example

Source: https://docs.svar.dev/svelte/grid/api/properties/overlay

An example of a Svelte component designed to be used as an overlay. It emits an 'overlay-button-click' event with specific data when its button is clicked. Ensure the Button component is imported.

```svelte
<script>
  import { Button } from "@svar-ui/svelte-core";
  const { onaction } = $props();
    
  function showData() {
    onaction &&
      onaction({
          action: "overlay-button-click",
          data: {
            show: true,
          },
        });
    }
</script>

<div>Here is a component example</div>
<div>Click the button to see the data</div>
<Button type="primary" onclick={showData}>Show data</Button>
```

--------------------------------

### Collapse Row and All Nested Items on Initialization

Source: https://docs.svar.dev/svelte/grid/api/actions/close-row

This example shows how to collapse a row with a specific ID and all its nested items when the grid is initialized. The `init` function is called automatically by the Grid component upon setup.

```javascript
<script>  
    import { Grid } from "@svar-ui/svelte-grid";  
    const { treeData, treeColumns } = getData();  

    function init(api){  
        api.exec("close-row", {   
            id: 8, nested: true  
        });  
    }  

</script>  
  
<Grid  
    {init}  
    tree={true}  
    data={treeData}  
    columns={treeColumns} />  

```

--------------------------------

### Svelte Grid Example with Auto Resizing Columns

Source: https://docs.svar.dev/svelte/grid/api/actions/resize-column

Demonstrates how to use the resize-column action to automatically adjust column widths based on header content. It shows initialization and dynamic updates.

```javascript
import { Grid } from "@svar-ui/svelte-grid";  
import { getData } from "./common/data";  
const { data } = getData();  

const columns = [  
    { id: "id", width: 50 },  
    { id: "firstName", header: "First Name" },  
    { id: "lastName", header: "Last Name" },  
    { id: "email", header: "Email", editor: "text" },  
    {  
        id: "companyName",  
        header: "Company - long column name could be here",  
        editor: "text",  
    },
];  

const init = (api) => {  
    // initialize to get the table with the calculated sizes  
    api.exec("resize-column", { id: "email", auto: "header" });  
    api.exec("resize-column", {  
        id: "companyName",  
        auto: "header",  
        maxRows: 20,  
    });  
};

let api = $state();  
const resizeColumns = () => {  
    api.exec("resize-column", { id: "email", auto: "header" });  
    api.exec("resize-column", {  
        id: "companyName",  
        auto: "header",  
        maxRows: 20,  
    });  
};

```

```html
<script>  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { getData } from "./common/data";  
    const { data } = getData();  
  
    const columns = [  
        { id: "id", width: 50 },  
        { id: "firstName", header: "First Name" },  
        { id: "lastName", header: "Last Name" },  
        { id: "email", header: "Email", editor: "text" },  
        {  
            id: "companyName",  
            header: "Company - long column name could be here",  
            editor: "text",  
        },
    ];  
  
    const init = (api) => {  
        // initialize to get the table with the calculated sizes  
        api.exec("resize-column", { id: "email", auto: "header" });  
        api.exec("resize-column", {  
            id: "companyName",  
            auto: "header",  
            maxRows: 20,  
        });  
    };

    let api = $state();  
    const resizeColumns = () => {  
        api.exec("resize-column", { id: "email", auto: "header" });  
        api.exec("resize-column", {  
            id: "companyName",  
            auto: "header",  
            maxRows: 20,  
        });  
    };
</script>  
  
<div>  
    <h4>Email and Company columns adjusted to header.</h4>  
    <Grid  
        {data}  
        {columns}  
        bind:this={api}  
        {init}  
        onupdatecell={resizeColumns} />  
</div>  

```

--------------------------------

### Example: Applying Custom Row Filter

Source: https://docs.svar.dev/svelte/grid/api/actions/filter-rows

This example shows how to apply a custom filter to rows based on a city input, using the 'filter-rows' action via `api.exec()`.

```APIDOC
## Example: Applying Custom Row Filter

### Description
In the next example the filter is applied to the rows whenever a user enters the value in the input field. The **applyFilter()** function is created to filter the rows by the selected city. The function is assigned to `filter` that is then triggered via the `api.exec()` method.

### Code
```svelte
<script>
  import { Grid } from "@svar-ui/svelte-grid";

  const data = [
    { id: 1, firstName: "John", lastName: "Doe", city: "New York" },
    { id: 2, firstName: "Jane", lastName: "Smith", city: "Los Angeles" },
    { id: 3, firstName: "Mike", lastName: "Jordan", city: "Chicago" },
    { id: 4, firstName: "Emily", lastName: "Davis", city: "New York" },
  ];

  const columns = [
    { id: "firstName", name: "First Name" },
    { id: "lastName", name: "Last Name" },
    { id: "city", name: "City" },
  ];

  let api = $state();
  let filterCity = $state("New York");

  function filterRowsByCity(city) {
    return (item) => item.city.toLowerCase() === city.toLowerCase();
  }

  function applyFilter(city) {
    if (api) {
      const filter = filterRowsByCity(city);
      api.exec("filter-rows", { filter });
    }
  }

  // Apply filter automatically whenever the filterCity changes
  $effect(() => {
    if (filterCity && api)
      applyFilter(filterCity);
  });

</script>

<input type="text" bind:value={filterCity} placeholder="Filter by City" />

<Grid {data} {columns} bind:this={api} />
```
```

--------------------------------

### Example: Printing the Grid

Source: https://docs.svar.dev/svelte/grid/api/actions/print

Demonstrates how to use the 'print' action from the Grid API within a Svelte component. Ensure the Grid component is bound to an api variable to call its methods.

```svelte
<script>  
    import { Button } from "@svar-ui/svelte-core"; // import the Button component  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { getData } from "../data";  
  
    const { data, columns } = getData();  
      
    let api = $state();  
      
    function printGrid() {  
        api.exec("print");  
    }  
</script>  
  
<Button onclick={() => printGrid()} type={"primary"}>Print Grid</Button>  
  
<div style="height: 400px; margin-top: 10px;">  
    <Grid  
        bind:this={api}  
        {data}  
        {columns}  
    />  
</div>      

```

--------------------------------

### Initialize SVAR DataGrid Component

Source: https://docs.svar.dev/svelte/grid/guides/installation_initialization

Import and initialize the Grid component with data and column definitions. This example sets up a simple table with four columns and two rows.

```svelte
<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} />  


```

--------------------------------

### Basic Grid with Undo Enabled

Source: https://docs.svar.dev/svelte/grid/api/properties/undo

This example demonstrates how to import and use the Grid component with the undo functionality enabled. Ensure the Grid component is imported from '@svar-ui/svelte-grid'.

```svelte
<script>
  import { Grid } from "@svar-ui/svelte-grid";
</script>

<Grid undo {...otherProps} />

```

--------------------------------

### Example Usage of move-item

Source: https://docs.svar.dev/svelte/grid/api/actions/move-item

This example demonstrates how to use the `move-item` action within a Svelte component to log the ID of the row being moved.

```APIDOC
### Example
```svelte
<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { getData } from "./common/data";
    const { data, columns } = getData();

    function init(api){
        api.on("move-item", (ev) => {
            console.log("Row that is moved:", ev.id);
        });
    }
</script>

<Grid {data} {columns} {init} reorder />
```
```

--------------------------------

### Svelte Grid Data Example

Source: https://docs.svar.dev/svelte/grid/api/properties/data

Demonstrates how to provide data to the Svelte Grid component. Ensure each data item has a unique 'id' if your columns use it as a key.

```javascript
<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} />

```

--------------------------------

### Svelte Grid Example: Collapsing a Column

Source: https://docs.svar.dev/svelte/grid/api/actions/collapse-column

Demonstrates how to use the `api.exec()` method to collapse a specific column ('firstName') in the first row of its header. This example requires the 'collapsible' property to be set on the header.

```svelte
<script>  
    import { getData } from "./common/data";  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { Button } from "@svar-ui/svelte-core";  
    const { data } = getData();  
      
    const columns = [  
        { id: "id", width: 50, footer: { text: "All users", colspan: 4 } },  
        {  
            id: "firstName",  
            header: [  
                {  
                    text: "Main client info",  
                    colspan: 3,  
                    collapsible: "first",  
                },  
                { text: "First Name" },  
            ],  
            width: 150,  
        },  
        { id: "lastName", header:["", "Last Name"] },  
        { id: "email", header:["", "Email"]}  
    ];    
  
    let api = $state();  
  
    const collapse = () => {  
        api.exec("collapse-column", { id: "firstName", row: 0 });  
    };  
</script>  
  
  <Button onclick={collapse} type="primary">Collapse</Button>  
  
  <Grid {data} {columns} bind:this={api} />  

```

--------------------------------

### Example: Register and Use Color Editor

Source: https://docs.svar.dev/svelte/grid/helpers/constants/registerinlineeditor

Demonstrates how to register a custom 'ColorEditor' component and then use it in a Grid column configuration by referencing its registered type 'color'. Ensure the custom editor component is imported.

```javascript
<script>
    import { Grid, registerInlineEditor } from "@svar-ui/svelte-grid";
    import ColorEditor from "../custom/ColorEditor.svelte";
    import { getData } from "../data";

    // Register the custom editor under the "color" type
    registerInlineEditor("color", ColorEditor);

    const { data } = getData();
    const columns = [
        { id: "id", width: 50 },
        { id: "name", header: "Name", editor: "text", width: 160 },
        // Reference the registered editor by its type name
        { id: "color", header: "Color", editor: "color", width: 120 },
    ];
</script>

<Grid {data} {columns} />

```

--------------------------------

### Registering a Hotkey Listener

Source: https://docs.svar.dev/svelte/grid/api/actions/hotkey

Example of how to attach a 'hotkey' event listener to the Svelte Grid API. This snippet demonstrates logging the pressed key to the console.

```javascript
<script>  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { getData } from "./common/data";  
  
    const { data, columns } = getData();  
  
    function init(api){  
        api.on("hotkey", ({ key, isInput }) => {  
            console.log(`key ${key} was pressed`);  
        });  
    }  
</script>  
  
<Grid {init} {data} {columns} />  


```

--------------------------------

### Svelte Grid with Responsive Configuration

Source: https://docs.svar.dev/svelte/grid/api/properties/responsive

Implement responsive behavior in a Svelte Grid component by passing the responsive configuration to the Grid. This example shows adjustments for a 1000px width.

```javascript
import { Grid } from "@svar-ui/svelte-grid";
import { getData } from "../data";

const { data } = getData();

const columns = [
  { id: "id", header: "ID" },
  { id: "firstName", header: "First Name" },
  { id: "lastName", header: "Last Name" },
  { id: "email", header: "Email" },
];

const responsive = {
  1000: {
    columns: [
      { id: "id", header: "ID", flexgrow: 1 },
      { id: "firstName", header: "First Name", flexgrow: 1 },
      { id: "lastName", header: "Last Name", flexgrow: 1 },
      { id: "email", header: "Email", hidden: true, flexgrow: 1 },
    ],
    sizes: {
      rowHeight: 40,
      columnWidth: 160,
      headerHeight: 40,
      footerHeight: 40,
    },
  }
};

```

```html
<div style="width: 1000px;">
  <Grid {data} {columns} {responsive} />
</div>

```

--------------------------------

### Custom Tooltip Svelte Component Example

Source: https://docs.svar.dev/svelte/grid/guides/configuration/adding_tooltip

A basic Svelte component structure for a custom tooltip, receiving data as props and applying styles.

```svelte
<script>
    let { data } = $props();

</script>

<div class="data">
    <div class="text">
        {data.email}
    </div>
</div>


<style>
    .data {
        background-color: white;
    }
    .text {
        font-size: 13px;
        color: black;
    }
</style>

```

--------------------------------

### Svelte Grid Initialization with sort-rows Event Listener

Source: https://docs.svar.dev/svelte/grid/api/actions/sort-rows

Example of initializing a Svelte Grid component and attaching an event listener for the 'sort-rows' event to log the last sorted column.

```svelte
<script>  
  import { Grid } from "@svar-ui/svelte-grid";  
  import { getData } from "./common/data";  
  const { data } = getData();  
  
  let columns = [  
    { id: "id", width: 50, sort: true },  
    { id: "city", header: "City", width: 160, sort: true },  
    { id: "email", header: "Email", width: 250, sort: true },  
    { id: "firstName", header: "First Name", sort: true },  
    { id: "lastName", header: "Last Name", sort: true },  
  ];  
  
  function init(api){  
    api.on("sort-rows", (ev) => {  
      console.log("The last sorted column:", ev.key);  
    });  
  }  
</script>  
  
<div>  
  <h4>Click the table header to sort</h4>  
  <Grid {data} {columns} {init} />  
</div>  

```

--------------------------------

### Example: Scroll to Specific Row and Column

Source: https://docs.svar.dev/svelte/grid/api/actions/scroll

Demonstrates how to trigger scrolling to a specific row and column using the Grid API's 'scroll' method, initiated by a button click.

```svelte
<script>
    import { Button } from "@svar-ui/svelte-core";
    import { Grid } from "@svar-ui/svelte-grid";
    import { repeatData, repeatColumns } from "./common/data";

    const data = repeatData(1000);
    const columns = repeatColumns(100);

    let api = $state();
    function doScroll(row, column) {
        api.exec("scroll", { row, column });
    }
</script>

<Button type="primary" onclick={() => doScroll(data[4].id, columns[4].id)}>
    Scroll to First Row / Column
</Button>

<Grid bind:this={api} {data} {columns} />

```

--------------------------------

### Integrate Action Menu with Svelte Grid

Source: https://docs.svar.dev/svelte/grid/guides/configuration/add_contextmenu

This example demonstrates integrating the ActionMenu with Svelte Grid, using a custom IconCell and defining click handlers for menu actions.

```svelte
<script>
    import { Grid, defaultMenuOptions } from "@svar-ui/svelte-grid";
    import { ActionMenu } from "@svar-ui/svelte-menu";
    import IconCell from "../custom/IconCell.svelte";
    import { getData } from "../data";

    let api = $state();
      
    const { data } = getData();

    const columns = [
        { id: "menu", cell: IconCell, width: 50 },
        { id: "firstName", header: "First Name" },
        { id: "lastName", header: "Last Name" },
        { id: "email", header: "Email" },
    ];

    const handleClicks = ev => {
        const option = ev.action;
        if (option) {
            // clicking the icon also selects this row
            const id = api.getState().selectedRows[0];
            switch (option.id) {
                case "add:before":
                    api.exec("add-row", { row: {}, before: id });
                    break;
                case "add:after":
                    api.exec("add-row", { row: {}, after: id });
                    break;
                case "copy":
                    api.exec("add-row", {
                        row: { ...api.getRow(id), id: null },
                        after: id,
                    });
                    break;
                case "delete":
                    api.exec("delete-row", { id });
                    break;
            }
        }
    };
</script>
    <ActionMenu
        resolver={id => id}
        {api}
        at={"point"}
        dataKey={"actionId"}
        options={defaultMenuOptions}
        onclick={handleClicks}>
            <Grid bind:this={api} {data} {columns} />
    </ActionMenu>

```

--------------------------------

### copy-row Action Usage

Source: https://docs.svar.dev/svelte/grid/api/actions/copy-row

This snippet shows how to use the `copy-row` action, which fires when a row is copied. It includes the function signature and an example of how to attach an event listener.

```APIDOC
## copy-row Action

### Description
Fires when a row is copied.

### Usage
```javascript
"copy-row": ({  
    id: string | number,
    target: string | number,
    mode?: "before" | "after", 
    eventSource?: string,
}) => boolean | void;
```

## Parameters
The callback of the action takes an object with the following parameters:
  * `id` — (required) the ID of the row being copied
  * `target` — (required) the ID of the target row
  * `mode` — (optional) the position where the copied row will be placed:
    * "before" — before the target row
    * "after" — after the target row (default)
  * `eventSource` — (optional) the name of the Grid action that triggered the `copy-row` event

## Example
```html
<script>
  import { Grid } from "@svar-ui/svelte-grid";
  import { getData } from "./common/data";
  const { data, columns } = getData();

  function init(api) {
    api.on("copy-row", (ev) => {
      console.log("Row that is copied:", ev.id);
    });
  }
</script>

<Grid {data} {columns} {init} />
```
```

--------------------------------

### Execute Grid Actions from Custom Component

Source: https://docs.svar.dev/svelte/grid/guides/configuration/custom_components

Interact with the Grid API directly from a custom component using `$props`. This example shows how to execute the 'add-row' action with parameters.

```svelte
<script>
    import { Button } from "@svar-ui/svelte-core";
    let { api } = $props();  

    function onClick() {
        api.exec("add-row", { row: { city: "New York"}});   
    }
</script>

<Button type={"secondary"} icon="wxi-plus" onclick={onClick}>Add row</Button>
```

--------------------------------

### Customize Context Menu Options

Source: https://docs.svar.dev/svelte/grid/guides/configuration/add_contextmenu

Customize menu options by passing an 'options' array and setting the 'at' property to 'bottom'. This example adds a separator and positions the menu at the bottom of the selected item.

```svelte
<script>
  import { getData } from "../data";  
  import { Grid, ContextMenu } from "@svar-ui/svelte-grid";  
    
  let table = $state();  
  
  const { data, columns } = getData();  
  
  const options = [
    {
        id: "add:before",
        text: "Add before",
        icon: "wxi-table-row-plus-before",
    },
    {
        id: "add:after",
        text: "Add after",
        icon: "wxi-table-row-plus-after",
    },
      { type: "separator" },
    { id: "copy", text: "Copy", icon: "wxi-content-copy" },
    { type: "separator" },
    { id: "delete", text: "Delete", icon: "wxi-delete-outline" },
];  
</script>  

<ContextMenu api={table} {options} at={"bottom"}>  
    <Grid {data} {columns} bind:this={table} />  
</ContextMenu>  

```

--------------------------------

### Handling Editor Events in Svelte Grid

Source: https://docs.svar.dev/svelte/grid/api/actions/editor

Example of how to initialize the Svelte Grid and attach an event listener for the 'editor' action. This snippet demonstrates logging the new value when an inline edit occurs.

```javascript
<script>  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { getData } from "./common/data";  
    const { data } = getData();  
  
    const columns = [  
        { id: "id", width: 50 },  
        { id: "city", header: "City", editor: "text", width: 160 },  
        {  
            id: "email",  
            header: "Email",  
            editor: "text",  
            width: 250,  
            css: "center",  
        },  
    ];  
  
    function init(api){  
        api.on("editor", (ev) => {  
            console.log("A new value:", ev.value);  
        });  
    }  
</script>  
  
<Grid {data} {columns} {init} />  


```

--------------------------------

### Example: Deleting a Row with Svelte Grid API

Source: https://docs.svar.dev/svelte/grid/api/actions/delete-row

Demonstrates how to use the Grid API to execute the 'delete-row' action. Ensure the Grid API is bound to a variable to call its methods.

```javascript
<script>  
    import { getData } from "./common/data";  
    import { Grid } from "@svar-ui/svelte-grid";  
    import { Button } from "@svar-ui/svelte-core";  
    const { data, columns } = getData();  
  
    let api = $state();  
  
    const deleteRow = () => {  
        api.exec("delete-row", {  
            id: 17,  
        });  
    };
</script>  
  
<Button onclick={deleteRow} type="primary">Delete Row</Button>  
  
<Grid {data} {columns} bind:this={api} />  

```

--------------------------------

### Access Grid API with init Handler

Source: https://docs.svar.dev/svelte/grid/api/how_to_access_api

Use the init handler function to get the Grid API. This is useful for intercepting and modifying grid actions, such as validating editor input length.

```javascript
<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", editor: "text", width: 160 },
        {
            id: "email",
            header: "Email",
            editor: "text",
            width: 250,
            css: "center",
        },
    ];

    const init = (api) => {
        api.intercept("editor", (ev) => {
            if (ev.value.length > 15) {
                alert(`${ev.value} exceeds 15 symbols`);
                return false;
            }
        });
    }
</script>

 <Grid {data} {columns} {init} />

```

--------------------------------

### Selecting Rows with Checkboxes

Source: https://docs.svar.dev/svelte/grid/guides/configuration/select_rows

Implement row selection using checkboxes within cells. This example shows a custom `CheckboxCell` component that calls the `select-row` action on the Grid API when its value changes. Row clicking for selection is disabled in this setup.

```svelte
<script>
    import { Checkbox } from "@svar-ui/svelte-core";
    let { row, api } = $props();

    function onChange(ev) {
        const { value } = ev;
        api.exec("select-row", {
            id: row.id,
            mode: value,
            toggle: true,
        });
    }
</script>

<div data-action="ignore-click">
    <Checkbox onchange={onChange} />
</div>

```

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

    const { data } = getData();

    const columns = [
        { id: "selected", cell: CheckboxCell, width: 36 },
        { id: "city", header: "City", width: 160 },
        { id: "firstName", header: "First Name" },
        { id: "lastName", header: "Last Name" },
        { id: "companyName", header: "Company" },
    ];      
</script>

<div class="demo" style="padding: 20px;">
    <div>
        <Grid 
            {data} 
            {columns}
            select={false}
        />
    </div>
</div>

```

--------------------------------

### Connect RestDataProvider to Backend

Source: https://docs.svar.dev/svelte/grid/guides/working_with_server

Import and instantiate RestDataProvider, providing the backend URL. Set up the grid's init function to register the provider with the event bus and load initial data using getData().

```javascript
<script>
    import { RestDataProvider } from "@svar-ui/grid-data-provider";
    import { Grid } from "@svar-ui/svelte-grid";

    const columns = [
        {
            id: "name",
            header: "Title",
            flexgrow: 1,
            sort: true,
            editor: "text",
        },
        {
            id: "year",
            header: "Year",
            width: 100,
            sort: true,
            editor: "text",
        },
        {
            id: "votes",
            header: "Votes",
            width: 100,
            sort: true,
            editor: "text",
        },
    ];

    let data = $state([]);
    const provider = new RestDataProvider("https://some-backend-url");

    provider.getData().then((v) => (data = v));

    const init = (api) => {
        api.setNext(provider);
    };
</script>

<Grid {data} {columns} {init} />

```

--------------------------------

### Basic HeaderMenu Usage

Source: https://docs.svar.dev/svelte/grid/helpers/components/headermenu

Demonstrates the basic usage of the HeaderMenu component, passing the API gateway and column configuration.

```svelte
<HeaderMenu {api} {columns} />
```

--------------------------------

### Access Grid API using the init handler

Source: https://docs.svar.dev/svelte/grid/api/how_to_access_api

This method demonstrates how to access the Grid API by passing an 'api' object to the 'init' handler function. The example shows how to intercept editor actions to validate input length.

```APIDOC
## Apply the init handler
You can access Grid API using the **init** handler function that takes **api** as the parameter.
In the example below we block adding text to the inline editor if its length exceeds 15 symbols. To make this possible, we get access to the Grid API using the `init` handler, and then intercept and modify the `editor` action using the `api.intercept()` method.
```javascript
<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", editor: "text", width: 160 },
        {
            id: "email",
            header: "Email",
            editor: "text",
            width: 250,
            css: "center",
        },
    ];

    const init = (api) => {
        api.intercept("editor", (ev) => {
            if (ev.value.length > 15) {
                alert(`${ev.value} exceeds 15 symbols`);
                return false;
            }
        });
    }
</script>

 <Grid {data} {columns} {init} />
```
```

--------------------------------

### getData()

Source: https://docs.svar.dev/svelte/grid/helpers/restdataprovider/rest_methods/getdata_method

Gets a promise with an array of objects with data for the Grid. The method sends a GET request to the server and returns a promise with the grid data.

```APIDOC
## getData()

### Description
Gets a promise with an array of objects with data for the Grid.

### Method
GET

### Endpoint
(Implicitly defined by RestDataProvider initialization)

### Parameters
None

### Response
#### Success Response (200)
- **Promise<Array<Object>>**: A promise that resolves with an array of objects, where each object contains data for a row (e.g., column IDs with values).

### Example
```javascript
provider.getData().then((v) => (data = v));
```
```

--------------------------------

### DELETE /{url}/{id} Response Example

Source: https://docs.svar.dev/svelte/grid/helpers/restdataprovider/routes/delete_row

This is an example of the JSON response received after a successful row deletion. The response contains the ID of the deleted row.

```json
{
  "id": 4
}
```

--------------------------------

### Initialize Grid with Selected Rows

Source: https://docs.svar.dev/svelte/grid/api/properties/selectedrows

Demonstrates how to select rows by providing an array of IDs to the selectedRows property during grid initialization.

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

    const { data, columns } = getData();

</script>

<Grid
    {data}
    {columns}
    selectedRows={[11,12]} />

```

--------------------------------

### Get Table Data

Source: https://docs.svar.dev/svelte/grid/helpers/restdataprovider/routes/get_data

Retrieves row data for a table by making an HTTP GET request to the specified URL. The data is returned as a JSON array.

```APIDOC
## GET /{url}

### Description
Gets rows data for the table and returns a JSON array with data.
The route handles the **HTTP GET** request made to the `/{url}` path.

### Method
GET

### Endpoint
`/{url}`

### Parameters
#### Path Parameters
- **url** (string) - Required - A custom provided url segment. For example, `https://urlwithdata.io/films`

### Request Body
No payload is required.

### Response
#### Success Response (200)
- An array of objects, where each object represents a row of data. Example:
```json
[
   {
      "id": 5,
      "name": "Kwan123",
      "year": 10,
      "votes": 0
   }
]
```
```

--------------------------------

### Using RestDataProvider with Svelte Grid

Source: https://docs.svar.dev/svelte/grid/helpers/restdataprovider/rest_methods/getdata_method

This example demonstrates how to initialize and use the RestDataProvider with a Svelte Grid component. It shows setting up columns, creating a provider instance, fetching data using getData(), and integrating with the Grid API.

```javascript
<script>
    import { RestDataProvider } from "@svar-ui/grid-data-provider";
    import { Grid } from "@svar-ui/svelte-grid";

    const columns = [
        {
            id: "name",
            header: "Title",
            editor: "text",
        },
        {
            id: "year",
            header: "Year",
            editor: "text",
        },
        {
            id: "votes",
            header: "Votes",
            editor: "text",
        },
    ];

    let data = $state([]);
    const provider = new RestDataProvider("https://some-backend-url", (obj) => {
        obj.year = obj.year * 1;
        obj.votes = obj.votes * 1;
    });

    provider.getData().then((v) => (data = v));

    const init = (api) => {
        api.setNext(provider);
    };

</script>

<Grid {data} {columns} {init} />

```

--------------------------------

### api.getStores()

Source: https://docs.svar.dev/svelte/grid/api/overview/methods_overview

Gets an object with the DataStore properties of the Grid.

```APIDOC
## api.getStores()

### Description
Gets an object with the DataStore properties of the Grid.

### Method
APIDOC

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response (200)
- **dataStores** (object) - An object containing the DataStore properties of the Grid.

#### Response Example
N/A
```

--------------------------------

### Configure Toolbar Items

Source: https://docs.svar.dev/svelte/grid/helpers/components/toolbar

Configure the toolbar by defining an 'items' array. Each item can be a button or an icon with specific properties like 'id', 'comp', 'icon', and 'text'. This example demonstrates adding 'Add row', 'Delete', and 'Copy row' buttons.

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

  let api = $state();
  const { data, columns } = getData();

  const items = [
    {
      id: "add-row",
      comp: "button",
      icon: "wxi-plus",
      text: "Add row",
    },
    {
      id: "delete-row",
      comp: "button",
      icon: "wxi-delete",
      text: "Delete",
    },
    { comp: "spacer" },
    {
      id: "copy-row",
      comp: "icon",
      icon: "wxi-content-copy",
    },
  ];
</script>

<Toolbar {api} {items} />
<Grid {data} {columns} bind:this={api} />
```
Tokens:
Raw