Skip to main content

Selecting rows

Marking rows as selected​

To mark a single row as selected, apply the selected property by setting its value to the row id. To mark multiple rows as selected, use the selectedRows property.

Example:

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

    const { data, columns } = getData();

</script>

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

Enabling multiple selection​

The selection of a single row is enabled by default (a row is selected with the left click). To enable the selection of multiple rows as well as the range of rows, apply the multiselect property and set its value to true. In GUI to select the range of rows, a user should use SHIFT + left click. To select multiple rows, a user should hold Ctrl + left click.

Example:

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

<Grid 
 {data}
 {columns}
 multiselect={true} />

Related articles: select-row