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]} />

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 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}
/>

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 the @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 as function props. Here the select-row action is called using the api.exec() method when the checkbox changes its value.

import { Checkbox } from "@svar-ui/react-core";

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>
  );
}

export default CheckboxCell;

Now what you need is to 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 changes in either way.

import { Checkbox } from "@svar-ui/react-core";

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>
  );
}

export default CheckboxCell;

Related sample: Selection with checkboxes

---

Related articles:

• select-row
• Adding custom content to cells