Selection Modes

The grid supports 5 different selection modes as defined in the GridSelectionMode enum.

export enum GridSelectionMode {
  "SingleRow" = "SingleRow",
  "MultipleRows" = "MultipleRows",
  "SingleCell" = "SingleCell",
  "MultipleCells" = "MultipleCells",
  "None" = "None",
}

The default selection mode is MultipleRows. To change the selection mode, set the selectionMode prop of the GridOptions interface.

Single Row Selection

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.SingleRow, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.SingleRow,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Multiple Row Selection

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.MultipleRows, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.MultipleRows,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Single Cell Selection

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.SingleCell, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.SingleCell,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Multiple Cell Selection

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.MultipleCells, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.MultipleCells,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

No Selection

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.None, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.None,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Programmatically Selecting Rows

You can programmatically select rows by using the selectRows method of the GridApi interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; const apiRef = useRef(/*<ApiContext | null>*/ null); return ( <React.Fragment> <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.MultipleRows, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, eventBus: { onApiContextReady: (ctx) => { apiRef.current = ctx; }, }, }} /> <button onClick={() => { apiRef.current.api.setSelectedRows(["1", "2", "3"]); apiRef.current.api.rebuild(); }} > Select Rows </button> </React.Fragment> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  const apiRef = useRef(/*<ApiContext | null>*/ null);
  return (
    <React.Fragment>
      <ReactDataGrid
        style={{ height: "400px", width: "100%", backgroundColor: "white" }}
        gridOptions={{
          selectionMode: GridSelectionMode.MultipleRows,
          dataProvider: Employee.getAllEmployees(),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns,
          eventBus: {
            onApiContextReady: (ctx) => {
              apiRef.current = ctx;
            },
          },
        }}
      />
      <button
        onClick={() => {
          apiRef.current.api.setSelectedRows(["1", "2", "3"]);
          apiRef.current.api.rebuild();
        }}
      >
        Select Rows
      </button>
    </React.Fragment>
  );
}

Result

Loading...

Tip

Note that the rebuild method is required to update the UI after selecting rows. This is because in addition to selecting rows, we also need to update the Toolbar UI to reflect the selection. This also helps with custom renderers you may have written that need to know when rows are selected. Technically, you can call repaint as well, but unless you are doing this in a loop, it is better to call rebuild. Both methods are single digit millisecond fast, so it is not usually a performance concern. For most usecases, this wont even be perceptible to the human eye.

Programmatically Selecting Cells

You can programmatically select cells by using the setSelectedCells method of the GridApi interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; const apiRef = useRef(/*<ApiContext | null>*/ null); return ( <React.Fragment> <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.MultipleCells, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, eventBus: { onApiContextReady: (ctx) => { apiRef.current = ctx; }, }, }} /> <button onClick={() => { //todo update after 0.0.4 to apiRef.current.api.setSelectedCells apiRef.current.context.modifications.selectedCells = [ { rowIdentifier: "1", columnIdentifier: "firstName" }, { rowIdentifier: "2", columnIdentifier: "firstName" }, { rowIdentifier: "3", columnIdentifier: "firstName" }, ]; apiRef.current.api.rebuild(); }} > Select Cells </button> </React.Fragment> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  const apiRef = useRef(/*<ApiContext | null>*/ null);
  return (
    <React.Fragment>
      <ReactDataGrid
        style={{ height: "400px", width: "100%", backgroundColor: "white" }}
        gridOptions={{
          selectionMode: GridSelectionMode.MultipleCells,
          dataProvider: Employee.getAllEmployees(),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns,
          eventBus: {
            onApiContextReady: (ctx) => {
              apiRef.current = ctx;
            },
          },
        }}
      />
      <button
        onClick={() => {
          //todo update after 0.0.4 to apiRef.current.api.setSelectedCells
          apiRef.current.context.modifications.selectedCells = [
            { rowIdentifier: "1", columnIdentifier: "firstName" },
            { rowIdentifier: "2", columnIdentifier: "firstName" },
            { rowIdentifier: "3", columnIdentifier: "firstName" },
          ];
          apiRef.current.api.rebuild();
        }}
      >
        Select Cells
      </button>
    </React.Fragment>
  );
}

Result

Loading...

Tip

Note that the rebuild method is required to update the UI after selecting cells. This is because in addition to selecting cells, we also need to update the Toolbar UI to reflect the selection. This also helps with custom renderers you may have written that need to know when cells are selected. Technically, you can call repaint as well, but unless you are doing this in a loop, it is better to call rebuild. Both methods are single digit millisecond fast, so it is not usually a performance concern. For most usecases, this wont even be perceptible to the human eye.

Styling Selected Rows

There are multiple ways to style selected rows.

Using CSS

You can simply set this globally in css by customizing the following css classes:

.ezgrid-dg-selected-cell,
.ezgrid-dg-selected-row {
  background-color: #f0f0f0;
}

Tip

When you modify css classes, please create a new css file and import it in your application after importing the datagrid css file. This will ensure that your css overrides do not get overwritten by future updates.

Using rowStyleFunction

You can also use the rowStyleFunction property of the GridOptions interface to style selected rows.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%", backgroundColor: "white" }} gridOptions={{ selectionMode: GridSelectionMode.MultipleRows, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, rowStyleFunction: (node) => { const item = node.rowPosition.data; const api = getApi(node); const selectedRows = api.getSelectedRows(); if (selectedRows.includes(item.employeeId.toString())) { return { backgroundColor: "aqua", }; } return {}; }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        selectionMode: GridSelectionMode.MultipleRows,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        rowStyleFunction: (node) => {
          const item = node.rowPosition.data;
          const api = getApi(node);
          const selectedRows = api.getSelectedRows();
          if (selectedRows.includes(item.employeeId.toString())) {
            return {
              backgroundColor: "aqua",
            };
          }
          return {};
        },
      }}
    />
  );
}

Result

Loading...