Skip to main content

Embedding action buttons to the Grid

Besides applying custom svelte components in the table cells, you can also add action buttons using the cell parameter of the columns property.

The example below shows how to add the context menu to the table so that it opens by clicking the icon in the cell.

We import the IconCell component to the page, add its name as the value of the cell parameter of the columns property, and add the contextShow action, and then bind it to the ContextMenu component and to the Grid.

Example:

<script>
    import { ContextMenu } from "@wx/svelte-core"; //import ContextMenu
    import { Grid } from "@wx/svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    let api;

    import IconCell from "./stubs/IconCell.svelte";

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

    let contextShow;
    function action(action, ev) {
        const { e } = ev.detail;

        if (action == "icon") contextShow(e);
    }
</script>

<ContextMenu {api} bind:open="{contextShow}" />

<Grid
 bind:api 
 {data} 
 {columns} 
 on:custom-icon={ev => action('icon', ev)} />

Related articles: