Selecting rows
Marking rows as selected
To mark multiple rows as selected, use the selectedRows
property.
Example:
import { getData } from "./common/data";
import { Grid } from "@svar-ui/react-grid";
const { data, columns } = getData();
<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 right click). To enable the selection of multiple rows using SHIFT or CTRL and the left click, apply the multiselect
property and set its value to true.
Example:
import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";
const { columns, data } = getData();
<Grid
data={data}
columns={columns}
multiselect={true}
/>
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/react-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 via props (for example: function component signature receives { row, api }
). Here the select-row
action is called using the api.exec()
method when the checkbox changes its value.
Example cell component (CheckboxCell.jsx):
import { Checkbox } from "@svar-ui/react-core";
export default function CheckboxCell({ row, api }) {
function onChange(ev) {
const { value } = ev;
api.exec("select-row", {
id: row.id,
mode: value,
toggle: true,
});
}
return (
<div data-action="ignore-click">
<Checkbox onChange={onChange} />
</div>
);
}
Now import the CheckboxCell component and apply it to cells:
import { Grid } from "@svar-ui/react-grid";
import CheckboxCell from "../custom/CheckboxCell.jsx";
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" },
];
<div className="demo" style={{ padding: 20 }}>
<div>
<Grid
data={data}
columns={columns}
select={false}
/>
</div>
</div>
Binding checkboxes to selection
The example 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 reflects selection in either direction.
Example cell component that binds checkbox state to current selection:
import { Checkbox } from "@svar-ui/react-core";
import { useStore } from "@svar-ui/lib-react";
export default function CheckboxCell({ row, api }) {
const selectedRows = useStore(api, "selectedRows");
function onChange(ev) {
const { value } = ev;
api.exec("select-row", {
id: row.id,
mode: value,
toggle: true,
});
}
return (
<div data-action="ignore-click">
<Checkbox
onChange={onChange}
value={selectedRows.indexOf(row.id) !== -1} // bind checkbox state to selection
/>
</div>
);
}
Related articles: