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:

const { data, columns } = getData();

export default function App() {
    return (
        <Grid data={data} columns={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:

let { columns, data } = getData();

export default function App() {
    return (
        <Grid 
            data={data}
            columns={columns}
            multiselect={true} 
        />
    );
}

---

Related articles: select-row