feat: Table improvements (#536)

Author: dogmar

src/components/EmptyState.tsx

@@ -2,7 +2,7 @@ import { type ReactElement, type Ref, forwardRef } from 'react'
 import { Div, Flex, type FlexProps, Text } from 'honorable'
 import PropTypes from 'prop-types'
 
-type EmptyStateProps = FlexProps & {
+type EmptyStateProps = Omit<FlexProps, 'message' | 'description' | 'icon'> & {
   message: string
   description?: string
   icon?: ReactElement

src/components/Table.tsx

@@ -32,18 +32,19 @@ import { rankItem } from '@tanstack/match-sorter-utils'
 import type { VirtualItem } from '@tanstack/react-virtual'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import styled from 'styled-components'
+import { isEmpty } from 'lodash-es'
 
 import Button from './Button'
 import CaretUpIcon from './icons/CaretUpIcon'
 import ArrowRightIcon from './icons/ArrowRightIcon'
 import { FillLevelProvider } from './contexts/FillLevelContext'
+import EmptyState from './EmptyState'
 
 export type TableProps = Omit<
   DivProps,
   | 'data'
   | 'columns'
   | 'getRowCanExpand'
-  | 'getRowIsSelected'
   | 'renderExpanded'
   | 'loose'
   | 'stickyColumn'
@@ -52,11 +53,11 @@ export type TableProps = Omit<
   | 'virtualizerOptions'
   | 'reactTableOptions'
   | 'onRowClick'
+  | 'emptyStateProps'
 > & {
   data: any[]
   columns: any[]
   getRowCanExpand?: any
-  getRowIsSelected?: (row: Row<any>) => boolean
   renderExpanded?: any
   loose?: boolean
   stickyColumn?: boolean
@@ -69,6 +70,7 @@ export type TableProps = Omit<
   >
   reactTableOptions?: Partial<Omit<TableOptions<any>, 'data' | 'columns'>>
   onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: Row<any>) => void
+  emptyStateProps?: ComponentProps<typeof EmptyState>
 }
 
 const propTypes = {}
@@ -445,7 +447,6 @@ function TableRef(
     data,
     columns,
     getRowCanExpand,
-    getRowIsSelected,
     renderExpanded,
     loose = false,
     stickyColumn = false,
@@ -456,6 +457,7 @@ function TableRef(
     reactVirtualOptions: virtualizerOptions,
     reactTableOptions,
     onRowClick,
+    emptyStateProps,
     ...props
   }: TableProps,
   forwardRef: Ref<any>
@@ -646,8 +648,8 @@ function TableRef(
                     key={row.id}
                     onClick={(e) => onRowClick?.(e, row)}
                     $lighter={i % 2 === 0}
-                    $selectable={!!getRowIsSelected}
-                    $selected={getRowIsSelected?.(row) ?? false}
+                    $selectable={row.getCanSelect()}
+                    $selected={row.getIsSelected() ?? false}
                     $clickable={!!onRowClick}
                     // data-index is required for virtual scrolling to work
                     data-index={row.index}
@@ -693,6 +695,11 @@ function TableRef(
             )}
           </Tbody>
         </T>
+        {isEmpty(rows) && (
+          <EmptyState
+            {...{ message: 'No results match your query', ...emptyStateProps }}
+          />
+        )}
       </Div>
       {hover && scrollTop > scrollTopMargin && (
         <Button

src/stories/Table.stories.tsx

@@ -216,10 +216,14 @@ function SelectableTemplate(args: any) {
   return (
     <Table
       {...args}
-      getRowIsSelected={(row) => row.original.id === selectedId}
       onRowClick={(_, row) => {
         setSelectedId(row.original.id)
       }}
+      reactTableOptions={{
+        state: { rowSelection: { [selectedId]: true } },
+        enableRowSelection: true,
+        enableMultiRowSelection: false,
+      }}
     />
   )
 }
@@ -278,12 +282,12 @@ function FilterableTemplate(args: ComponentProps<typeof Table>) {
 const repeatedData = Array(25)
   .fill(data)
   .flat()
-  .map((item, i) => ({ ...item, id: i }))
+  .map((item, i) => ({ ...item, id: `id-${i}` }))
 
 const extremeLengthData = Array(200)
   .fill(data)
   .flat()
-  .map((item, i) => ({ ...item, id: i }))
+  .map((item, i) => ({ ...item, id: `id-${i}` }))
 
 export const Default = Template.bind({})
 
@@ -349,6 +353,9 @@ Expandable.args = {
 export const FilterableAndSortable = FilterableTemplate.bind({})
 FilterableAndSortable.args = {
   virtualizeRows: true,
+  emptyStateProps: {
+    message: 'No results match your query',
+  },
   width: 'auto',
   height: '400px',
   data: extremeLengthData,