diff --git a/src/components/TableModule/ReactTableModule.stories.tsx b/src/components/TableModule/ReactTableModule.stories.tsx index aad3c2d3..628804d6 100644 --- a/src/components/TableModule/ReactTableModule.stories.tsx +++ b/src/components/TableModule/ReactTableModule.stories.tsx @@ -2,6 +2,12 @@ import React, { useRef } from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { createColumnHelper, SortingState } from '@tanstack/react-table'; import { Checkbox } from '../Checkbox'; +import { TableModuleActions } from './TableModuleActions'; +import { IconButton } from '../IconButton'; +import { Share, Trash } from '@lifeomic/chromicons'; +import { Button } from '../Button'; +import { TableActionDivider } from './TableActionDivider'; +import { Tooltip } from '../Tooltip'; import { ReactTableModule } from './ReactTableModule'; @@ -9,6 +15,7 @@ export default { title: 'Components/TableModule2', component: ReactTableModule, argTypes: {}, + subcomponents: { TableModuleActions, TableActionDivider }, } as ComponentMeta; type Food = { @@ -161,7 +168,6 @@ export const ManualSort: ComponentStory = (args) => { React.useEffect(() => { const sort = sorting?.[0]; const index = sort?.id.toLowerCase(); - console.log('sorting', sort); if (sort && index) { setSortedData( [...data].sort((a: any, b: any) => { @@ -214,6 +220,55 @@ export const DefaultSort: ComponentStory = (args) => { ); }; +export const HoverActions = Template.bind({}); +HoverActions.args = { + data, + columns, + rowActions: (row: any) => ( + <> + + + + console.log(`search ${row}!`)} + /> + + + console.log(`trash ${row}!`)} + /> + + {row.fat === '9.0' && ( + + console.log(`trash ${row}!`)} + /> + + )} + + ), +}; +HoverActions.parameters = { + docs: { + description: { + story: `It is a common design pattern to include actionable buttons for a table row. The +Table Module exposes a \`rowActions\` prop to help. Hover over a row to view the +actions toolbar.`, + }, + }, +}; + export const RowSelection = Template.bind({}); const selectionColumn = { id: 'select', diff --git a/src/components/TableModule/ReactTableModule.tsx b/src/components/TableModule/ReactTableModule.tsx index b1197bf2..46b9791c 100644 --- a/src/components/TableModule/ReactTableModule.tsx +++ b/src/components/TableModule/ReactTableModule.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; +import { motion } from 'framer-motion'; import { getCoreRowModel, @@ -7,9 +8,6 @@ import { useReactTable, ColumnDef, OnChangeFn, - TableState, - Updater, - SortingState, } from '@tanstack/react-table'; import { @@ -42,6 +40,7 @@ export const ReactTableModule = React.memo( config, className, data, + onRowClick, enableRowSelection, enableSorting, isLoading = false, @@ -50,8 +49,10 @@ export const ReactTableModule = React.memo( rowRole, sortState = { sortKey: null, sortDirection: null }, maxCellWidth, + rowActions, rowClickLabel, state, + noResultsMessage, ...rootProps }, forwardedRef @@ -78,6 +79,7 @@ export const ReactTableModule = React.memo( manualSorting, }); + // support one level of headers only const headers = table.getHeaderGroups()[0].headers; return ( @@ -88,28 +90,53 @@ export const ReactTableModule = React.memo( {...rootProps} > - {table.getHeaderGroups().map((headerGroup) => ( + + {headers.map((header, i) => ( + + ))} + {(rowActions || onRowClick) && ( + + )} + + + + {!isLoading && data && data.length === 0 && ( - {headerGroup.headers.map((header, i) => ( - - ))} + + {noResultsMessage || 'No results'} + - ))} - - + )} {!isLoading && data && table @@ -118,11 +145,13 @@ export const ReactTableModule = React.memo( ))}