feat: Expose onRowClick event from table (#398)

pluralsh · Jan 31, 2023 · fc60325 · fc60325
1 parent dc7bbbe
commit fc60325
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -45,11 +45,11 @@
     "@react-stately/toggle": "3.4.3",
     "@react-types/shared": "3.16.0",
     "@tanstack/match-sorter-utils": "8.7.6",
-    "@tanstack/react-table": "8.7.6",
+    "@tanstack/react-table": "8.7.9",
     "@types/chroma-js": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.28.0",
+    "grommet": "2.29.1",
     "grommet-icons": "4.8.0",
     "highlight.js": "11.7.0",
     "honorable-recipe-mapper": "0.2.0",

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -2,12 +2,19 @@ import { Div, DivProps } from 'honorable'
 import {
   CSSProperties,
   ComponentProps,
+  MouseEvent,
   Ref,
   forwardRef,
   useMemo,
   useRef,
   useState,
 } from 'react'
+import type {
+  ColumnDef,
+  FilterFn,
+  Row,
+  SortDirection,
+} from '@tanstack/react-table'
 import {
   flexRender,
   getCoreRowModel,
@@ -17,20 +24,11 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { rankItem } from '@tanstack/match-sorter-utils'
+import type { VirtualItem } from 'react-virtual'
 import { useVirtual } from 'react-virtual'
-
 import styled from 'styled-components'
 
-import type {
-  ColumnDef,
-  FilterFn,
-  Row,
-  SortDirection,
-} from '@tanstack/react-table'
-import type { VirtualItem } from 'react-virtual'
-
 import Button from './Button'
-
 import CaretUpIcon from './icons/CaretUpIcon'
 import ArrowRightIcon from './icons/ArrowRightIcon'
 import { FillLevelProvider } from './contexts/FillLevelContext'
@@ -48,6 +46,7 @@ export type TableProps =
       | 'virtualizeRows'
       | 'virtualizerOptions'
       | 'reactTableOptions'
+      | 'onRowClick'
     > & {
       data: any[]
       columns: any[]
@@ -65,6 +64,7 @@ export type TableProps =
         Parameters<typeof useReactTable>,
         'data' | 'columns'
       >
+      onRowClick(e: MouseEvent<HTMLTableRowElement>, row: Row<any>): void
     }
 
 const propTypes = {}
@@ -198,13 +198,15 @@ const Td = styled.td<{
   loose?: boolean
   stickyColumn: boolean
   truncateColumn: boolean
+  clickable?: boolean
 }>(({
   theme,
   firstRow,
   lighter,
   loose,
   stickyColumn,
   truncateColumn = false,
+  clickable = false,
 }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -218,6 +220,10 @@ const Td = styled.td<{
   borderTop: firstRow ? '' : theme.borders.default,
   color: theme.colors.text,
 
+  ...(clickable && {
+    cursor: 'pointer',
+  }),
+
   padding: loose ? '16px 12px' : '8px 12px',
   '&:first-child': stickyColumn
     ? {
@@ -301,6 +307,7 @@ function FillerRow({
   height,
   index,
   stickyColumn,
+  ...props
 }: {
   columns: unknown[]
   height: number
@@ -322,6 +329,7 @@ function FillerRow({
         }}
         colSpan={columns.length}
         truncateColumn={false}
+        {...props}
       />
     </Tr>
   )
@@ -338,6 +346,7 @@ function FillerRows({
   height: number
   position: 'top' | 'bottom'
   stickyColumn: boolean
+  clickable?: boolean
 }) {
   return (
     <>
@@ -375,6 +384,7 @@ function TableRef({
   virtualizeRows = false,
   reactVirtualOptions: virtualizerOptions,
   reactTableOptions,
+  onRowClick,
   ...props
 }: TableProps, forwardRef: Ref<any>) {
   const tableContainerRef = useRef<HTMLDivElement>()
@@ -497,6 +507,7 @@ function TableRef({
                 height={paddingTop}
                 position="top"
                 stickyColumn={stickyColumn}
+                clickable={!!onRowClick}
               />
             )}
             {rows.map(maybeRow => {
@@ -507,7 +518,10 @@ function TableRef({
 
               return (
                 <>
-                  <Tr key={row.id}>
+                  <Tr
+                    key={row.id}
+                    onClick={e => onRowClick(e, row)}
+                  >
                     {row.getVisibleCells().map(cell => (
                       <Td
                         key={cell.id}
@@ -516,6 +530,7 @@ function TableRef({
                         loose={loose}
                         stickyColumn={stickyColumn}
                         truncateColumn={cell.column?.columnDef?.meta?.truncate}
+                        clickable={!!onRowClick}
                       >
                         {flexRender(cell.column.columnDef.cell,
                           cell.getContext())}

diff --git a/yarn.lock b/yarn.lock
@@ -2373,7 +2373,7 @@ __metadata:
     "@storybook/react-vite": 7.0.0-alpha.54
     "@storybook/testing-library": 0.0.14-next.0
     "@tanstack/match-sorter-utils": 8.7.6
-    "@tanstack/react-table": 8.7.6
+    "@tanstack/react-table": 8.7.9
     "@types/chroma-js": 2.1.4
     "@types/react-transition-group": 4.4.5
     "@types/styled-components": 5.1.26
@@ -2386,7 +2386,7 @@ __metadata:
     eslint-plugin-storybook: 0.6.8
     firebase-tools: 11.19.0
     fuse.js: 6.6.2
-    grommet: 2.28.0
+    grommet: 2.29.1
     grommet-icons: 4.8.0
     highlight.js: 11.7.0
     honorable: 1.0.0-beta.17
@@ -4824,22 +4824,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:8.7.6":
-  version: 8.7.6
-  resolution: "@tanstack/react-table@npm:8.7.6"
+"@tanstack/react-table@npm:8.7.9":
+  version: 8.7.9
+  resolution: "@tanstack/react-table@npm:8.7.9"
   dependencies:
-    "@tanstack/table-core": 8.7.6
+    "@tanstack/table-core": 8.7.9
   peerDependencies:
     react: ">=16"
     react-dom: ">=16"
-  checksum: 20b10ace9ff32bab79e7fa6cedbde44b74b1760b510e3b67766eaec6d4f55a741b77f3ec458fa5908119397d3ee1e37b0628653a71aa25cb45a7787349b4b392
+  checksum: 3c704ac903405972641c9857e1466025bcdac04ee4890d64b018386cad5a778aca3a8d3f78542ae7a0ed609841d32ef3a7e563b079e87fa93b9ae8570a310499
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.7.6":
-  version: 8.7.6
-  resolution: "@tanstack/table-core@npm:8.7.6"
-  checksum: edba55731245a5a1a46a9a69a1ca2a7d7ae24377ed478f6622d043b80b6f8fbcb19605843e0feb85b99b4a7d5407633be4e440e71c82a4bf876f05a62e8005ae
+"@tanstack/table-core@npm:8.7.9":
+  version: 8.7.9
+  resolution: "@tanstack/table-core@npm:8.7.9"
+  checksum: 78d2314928c29559088e4bada0248cc7f94e93756e1a2c1f37a651db30276e9ae960d647bd3a61b67b3f0f9f7e4dec5dd58eb49b8adb80ee5952ef417b6e581f
   languageName: node
   linkType: hard
 
@@ -10420,9 +10420,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"grommet@npm:2.28.0":
-  version: 2.28.0
-  resolution: "grommet@npm:2.28.0"
+"grommet@npm:2.29.1":
+  version: 2.29.1
+  resolution: "grommet@npm:2.29.1"
   dependencies:
     grommet-icons: ^4.8.0
     hoist-non-react-statics: ^3.2.0
@@ -10432,7 +10432,7 @@ __metadata:
     react: ^16.6.1 || ^17.0.0 || ^18.0.0
     react-dom: ^16.6.1 || ^17.0.0 || ^18.0.0
     styled-components: ">= 5.1"
-  checksum: 5def847ca4b722b397e9084f6dbdced9875a4cff54f34629b8258be5c697feb97d1f1bf1ff3ae47342affd592e7269a137bb8e494ab85b9ee647c7cb0125b3c3
+  checksum: f16f68ad7a0d5984bd5f3a6f84d84575bc168a3f9eb53095f80a7da702e3a6113b6e465390c8045650aedce813d0a3165cad96508939ff8463b00f99eefd54d1
   languageName: node
   linkType: hard