ReactDataGrid row selection does not work

Question

I am trying to build data table using react and react-data-grid version "^7.0.0-canary.16",

The render method looks like this:

render() {
        return (
            <div className={"component"}>
                <ReactDataGrid width={600} height={400}
                          rowKey="id"
                          columns={this.state.columns}
                          rows={this.state.rows}
                          onRowClick={this.onRowClick}
                          rowSelection={{
                              showCheckbox: true,
                              enableShiftSelect: true,
                              onRowsSelected: this.onRowsSelected,
                              onRowsDeselected: this.onRowsDeselected,
                              selectBy: {
                                  indexes: this.state.selectedIndexes
                              }
                          }}
                />
            </div>
        )
    }

So following the documentation on page https://adazzle.github.io/react-data-grid/docs/examples/row-selection

it should display checkbox in first column and when I select the checkbox it should call method this.onRowsSelected.

Alas, no checkbox is shown and no matter how I click the this.onRowsSelected method is never called.

On the other hand the method this.onRowClick is called, whenever I click somewhere in the table.

Does anyone have experience with this?

Faced this same issue, I wonder if a solution was found? – apiyo Jul 09 '21 at 09:23 — apiyo, Jul 09 '21 at 09:23

score 0 · Answer 1 · answered Jun 14 '22 at 20:47

It seems to be showing the checkboxes with "react-data-grid": "6.1.0"

Although, I'm having issue with the checkboxes when we filter the data. The rowIdx changes and we lose context of that was previously selected. We want to make BE calls on selected Data. I tried changing it to use the row.id but no luck. It messes up the selection.

Here is a hook for managing the selection

import {useState} from 'react';

    export const useRowSelection = () => {
      const [selectedIndexes, setSelectedIndexes] = useState([]);
    
      const onRowsSelected = rows => {
        setSelectedIndexes(prevState => {
          return prevState.concat(rows.map(r => r.rowIdx));
        });
      };
    
      const onRowsDeselected = rows => {
        let rowIndexes = rows.map(r => r.rowIdx);
        setSelectedIndexes(prevState => {
          return prevState.filter(i => rowIndexes.indexOf(i) === -1);
        });
      };
    
      return {
        selectedIndexes,
        onRowsDeselected,
        onRowsSelected,
      };
    };

Pass them to the RDG

const {selectedIndexes, onRowsDeselected, onRowsSelected} = useRowSelection();

  const rowSelectionProps = enableRowSelection
    ? {
        showCheckbox: true,
        enableShiftSelect: true,
        onRowsSelected: onRowsSelected,
        onRowsDeselected: onRowsDeselected,
        selectBy: {
          indexes: selectedIndexes,
        },
      }
    : undefined;

  <ReactDataGrid
    columns={columnDefinition}
    getValidFilterValues={getFilterValues}
    rowGetter={i => filteredData[i]}
    rowsCount={filteredData.length}
    onAddFilter={filter => handleOnAddFilter(filter)}
    onClearFilters={() => handleOnCleanFilters()}
    toolbar={toolbar}
    contextMenu={contextMenu}
    RowsContainer={ContextMenuTrigger}
    rowSelection={rowSelectionProps}
    rowKey="id"
  />

ReactDataGrid row selection does not work

1 Answers1