Skip to main content

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: