Skip to main content

Selecting rows

Marking rows as selected​

To mark multiple rows as selected, use the selectedRows property.

Example:

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

    const { data, columns } = getData();
</script>

<template>
    <Grid :data="data" :columns="columns" :selectedRows="[11,12,15]" />
</template>

Related sample: Row selection

Enabling multiple selection​

The selection of a single row is enabled by default (a row is selected with the right click). To enable the selection of multiple rows using Shift or Ctrl/Meta and the left click, apply the multiselect property and set its value to true.

Example:

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

<template>
    <Grid 
        :data="data"
        :columns="columns"
        :multiselect="true"
    />
</template>

Related sample: Multiple row selection

Selecting rows with checkboxes​

The example below shows how to select rows by checking Checkboxes within them. Selecting by a row click is disabled.

You can import the ready-made Checkbox control from @svar-ui/vue-core library and apply it to cells. More information about embedding components to cells you can find here: Adding custom content to cells

Such components receive row data and Grid api among defineProps. Here the select-row action is called using the api.exec() method when the checkbox changes its value.

<script setup>
    import { Checkbox } from "@svar-ui/vue-core";
    const props = defineProps({ row: {}, api: {} });

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

<template>
    <div data-action="ignore-click">
        <Checkbox :onchange="onChange" />
    </div>
</template>

Now what you need is to import the CheckboxCell component and apply it to cells:

<script setup>
    import { Grid } from "@svar-ui/vue-grid";
    import CheckboxCell from "../custom/CheckboxCell.vue";
    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>

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

Binding checkboxes to selection​

The examples below is mostly similar to the above one, but in this case rows can be selected both by clicking on them or checking the checkboxes. Checkbox state changes its state in either ways.

<script setup>
    import { Checkbox } from "@svar-ui/vue-core";
    import { computed } from "vue";

    const props = defineProps({ row: {}, api: {} });
    //get the array of currently selected rows
    const selectedRows = props.api.getReactiveState().selectedRows; 

    function onChange(ev) {
        const { value } = ev;

        props.api.exec("select-row", {
            id: props.row.id,
            mode: value,
            toggle: true,
        });
    }

    const isSelected = computed(() => selectedRows.value.indexOf(props.row.id) !== -1);
</script>

<template>
    <div data-action="ignore-click">
        <Checkbox
            :onchange="onChange"
            :value="isSelected" 
        />
    </div>
</template>

Related sample: Selection with checkboxes

Related articles: