🐛 Align selection state props with react table (#3456)

* fix: align selection state props with react table

* chore: resolve comments

* chore: add to docs

* Correct token for active table row

---------

Co-authored-by: oddvernes <oddbjorn.overnes@gmail.com>

packages/eds-data-grid-react/src/EdsDataGrid.docs.mdx

@@ -102,6 +102,12 @@ See [Tanstack docs for more](https://tanstack.com/table/v8/docs/api/features/pin
 
 <Canvas of={ComponentStories.ColumnPinning} />
 
+### Row selection
+
+Enable row selection with the `enableRowSelection` prop, enable multi select with `enableMultiRowSelection` and control the state with `rowSelectionState` and `onRowSelectionChange`. Currently, you have to provide you own way of triggering `row.toggleSelection`.
+
+<Canvas of={ComponentStories.RowSelection} />
+
 ### Sorting
 
 Comes with sorting built-in, and uses default sort functions. Can be overridden on a per-column basis.

packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx

@@ -1,37 +1,38 @@
-import { Meta, StoryFn } from '@storybook/react'
-import { EdsDataGrid } from './EdsDataGrid'
-import {
-  columns,
-  expandColumns,
-  groupedColumns,
-  helper,
-  Photo,
-  PostComment,
-} from './stories/columns'
-import { data } from './stories/data'
-import {
-  ChangeEvent,
-  CSSProperties,
-  FormEvent,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
 import {
   Button,
   Checkbox,
+  Divider,
   Pagination,
   Paper,
   TextField,
   Typography,
 } from '@equinor/eds-core-react'
-import page from './EdsDataGrid.docs.mdx'
-import { Column, ExpandedState, Row } from '@tanstack/react-table'
 import { tokens } from '@equinor/eds-tokens'
 import { action } from '@storybook/addon-actions'
+import { Meta, StoryFn } from '@storybook/react'
+import { Column, ExpandedState, Row } from '@tanstack/react-table'
+import {
+  CSSProperties,
+  ChangeEvent,
+  FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { EdsDataGrid } from './EdsDataGrid'
+import page from './EdsDataGrid.docs.mdx'
 import { EdsDataGridProps } from './EdsDataGridProps'
-import { Virtualizer } from './types'
 import { FilterWrapper } from './components/FilterWrapper'
+import {
+  Photo,
+  PostComment,
+  columns,
+  expandColumns,
+  groupedColumns,
+  helper,
+} from './stories/columns'
+import { data } from './stories/data'
+import { Virtualizer } from './types'
 
 const meta: Meta<typeof EdsDataGrid<Photo>> = {
   title: 'EDS Data grid',
@@ -233,6 +234,56 @@ ColumnResize.args = {
   columnResizeMode: 'onChange',
 }
 
+export const RowSelection: StoryFn<EdsDataGridProps<Photo>> = (args) => {
+  const [rowSelectionState, setRowSelectionState] = useState({})
+  const [enableMultiRowSelection, setEnableMultiRowSelection] = useState(true)
+
+  return (
+    <>
+      <Typography>Click a row to select and deselect.</Typography>
+      <Divider />
+      <Button onClick={() => setRowSelectionState({})}>
+        Reset row selection state
+      </Button>
+      <br />
+      <Checkbox
+        label="Enable multi row selection"
+        checked={enableMultiRowSelection}
+        onChange={(event) => setEnableMultiRowSelection(event.target.checked)}
+      />
+      <pre>
+        rowSelectionState=
+        {JSON.stringify(rowSelectionState, null, 2)}
+      </pre>
+      <EdsDataGrid
+        {...args}
+        enableRowSelection
+        enableMultiRowSelection={enableMultiRowSelection}
+        rowSelectionState={rowSelectionState}
+        onRowSelectionChange={setRowSelectionState}
+        onRowClick={(row) => (row.getCanSelect() ? row.toggleSelected() : null)}
+        rowStyle={(row) => ({
+          cursor: row.getCanSelect() ? 'pointer' : 'inherit',
+        })}
+        cellStyle={(row) => {
+          if (row.getIsSelected()) {
+            return {
+              backgroundColor:
+                tokens.colors.interactive.table__cell__fill_activated.rgba,
+            }
+          }
+
+          return undefined
+        }}
+      />
+    </>
+  )
+}
+
+RowSelection.args = {
+  columnResizeMode: 'onChange',
+} satisfies Partial<EdsDataGridProps<Photo>>
+
 export const Paging: StoryFn<EdsDataGridProps<Photo>> = (args) => {
   return <EdsDataGrid {...args} />
 }

packages/eds-data-grid-react/src/EdsDataGrid.tsx

@@ -5,6 +5,10 @@ import {
   ColumnFiltersState,
   ColumnPinningState,
   ColumnSizingState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  TableOptions,
   getCoreRowModel,
   getExpandedRowModel,
   getFacetedMinMaxValues,
@@ -13,10 +17,6 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  PaginationState,
-  RowSelectionState,
-  SortingState,
-  TableOptions,
   useReactTable,
 } from '@tanstack/react-table'
 import { useVirtualizer } from '@tanstack/react-virtual'
@@ -28,27 +28,33 @@ import {
   useRef,
   useState,
 } from 'react'
-import { TableHeaderRow } from './components/TableHeaderRow'
-import { TableRow } from './components/TableRow'
+import styled from 'styled-components'
 import { TableProvider } from './EdsDataGridContext'
 import { EdsDataGridProps } from './EdsDataGridProps'
-import styled from 'styled-components'
-import { addPxSuffixIfInputHasNoPrefix } from './utils'
+import { TableHeaderRow } from './components/TableHeaderRow'
+import { TableRow } from './components/TableRow'
+import {
+  addPxSuffixIfInputHasNoPrefix,
+  logDevelopmentWarningOfPropUse,
+} from './utils'
 
 export function EdsDataGrid<T>({
   rows,
   columns,
   columnResizeMode,
   pageSize,
   rowSelection,
-  multiRowSelection,
+  enableRowSelection,
+  enableMultiRowSelection,
   selectedRows,
+  rowSelectionState,
   enableColumnFiltering,
   debug,
   enablePagination,
   enableSorting,
   stickyHeader,
   onSelectRow,
+  onRowSelectionChange,
   caption,
   enableVirtual,
   virtualHeight,
@@ -79,11 +85,31 @@ export function EdsDataGrid<T>({
   setExpansionState,
   getSubRows,
   defaultColumn,
+  onRowClick,
+  onCellClick,
 }: EdsDataGridProps<T>) {
+  logDevelopmentWarningOfPropUse({
+    virtualHeight: {
+      value: virtualHeight,
+      mitigationInfo: "Use 'height' instead.",
+    },
+    rowSelection: {
+      value: rowSelection,
+      mitigationInfo: "Use 'enableRowSelection' instead.",
+    },
+    onSelectRow: {
+      value: onSelectRow,
+      mitigationInfo: "Use 'onRowSelectionChange' instead.",
+    },
+    selectedRows: {
+      value: selectedRows,
+      mitigationInfo: "Use 'rowSelectionState' instead.",
+    },
+  })
+
   const [sorting, setSorting] = useState<SortingState>(sortingState ?? [])
-  const [selection, setSelection] = useState<RowSelectionState>(
-    selectedRows ?? {},
-  )
+  const [internalRowSelectionState, setInternalRowSelectionState] =
+    useState<RowSelectionState>(rowSelectionState ?? selectedRows ?? {})
   const [columnPin, setColumnPin] = useState<ColumnPinningState>(
     columnPinState ?? {},
   )
@@ -119,8 +145,8 @@ export function EdsDataGrid<T>({
   }, [sortingState])
 
   useEffect(() => {
-    setSelection(selectedRows ?? {})
-  }, [selectedRows])
+    setInternalRowSelectionState(rowSelectionState ?? selectedRows ?? {})
+  }, [rowSelectionState, selectedRows])
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
@@ -203,7 +229,7 @@ export function EdsDataGrid<T>({
     state: {
       sorting,
       columnPinning: columnPin,
-      rowSelection: selection,
+      rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
       columnSizing: columnSizing ?? internalColumnSize,
       expanded: expansionState,
@@ -227,8 +253,8 @@ export function EdsDataGrid<T>({
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection ?? false,
-    enableMultiRowSelection: multiRowSelection,
+    enableRowSelection: enableRowSelection ?? rowSelection ?? false,
+    enableMultiRowSelection: enableMultiRowSelection ?? false,
     enableColumnPinning: true,
     enablePinning: true,
     getRowId,
@@ -243,12 +269,12 @@ export function EdsDataGrid<T>({
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection ?? false) {
+  if (enableRowSelection ?? rowSelection ?? false) {
     options.onRowSelectionChange = (updaterOrValue) => {
-      if (onSelectRow) {
-        onSelectRow(updaterOrValue)
-      }
-      setSelection(updaterOrValue)
+      onSelectRow?.(updaterOrValue)
+      onRowSelectionChange?.(updaterOrValue)
+
+      setInternalRowSelectionState(updaterOrValue)
     }
   }
 
@@ -411,12 +437,22 @@ export function EdsDataGrid<T>({
                   </Table.Row>
                 )}
 
-                {virtualRows.map((row) => (
-                  <TableRow
-                    key={row.index}
-                    row={table.getRowModel().rows[row.index]}
-                  />
-                ))}
+                {virtualRows.map((virtualItem) => {
+                  const row = table.getRowModel().rows[virtualItem.index]
+
+                  return (
+                    <TableRow
+                      key={virtualItem.index}
+                      row={row}
+                      onClick={
+                        onRowClick
+                          ? (event) => onRowClick(row, event)
+                          : undefined
+                      }
+                      onCellClick={onCellClick}
+                    />
+                  )
+                })}
 
                 {paddingBottom > 0 && (
                   <Table.Row
@@ -436,7 +472,16 @@ export function EdsDataGrid<T>({
             {!enableVirtual &&
               table
                 .getRowModel()
-                .rows.map((row) => <TableRow key={row.id} row={row} />)}
+                .rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    row={row}
+                    onClick={
+                      onRowClick ? (event) => onRowClick(row, event) : undefined
+                    }
+                    onCellClick={onCellClick}
+                  />
+                ))}
           </Table.Body>
         </Table>
         {externalPaginator