diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 6922178b..3abcc220 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -35,6 +35,7 @@ import styled, { useTheme } from 'styled-components' import { isEmpty, isNil } from 'lodash-es' import usePrevious from '../hooks/usePrevious' +import { InfoOutlineIcon, Tooltip } from '../index' import Button from './Button' import CaretUpIcon from './icons/CaretUpIcon' @@ -49,6 +50,7 @@ export type TableProps = DivProps & { hideHeader?: boolean padCells?: boolean rowBg?: 'base' | 'raised' | 'stripes' + highlightedRowId?: string getRowCanExpand?: any renderExpanded?: any loose?: boolean @@ -144,6 +146,7 @@ const Tbody = styled(TbodyUnstyled)(({ theme }) => ({ })) const Tr = styled.tr<{ + $highlighted?: boolean $selected?: boolean $selectable?: boolean $clickable?: boolean @@ -155,9 +158,12 @@ const Tr = styled.tr<{ $raised: raised = false, $selectable: selectable = false, $selected: selected = false, + $highlighted: highlighted = false, }) => ({ display: 'contents', - backgroundColor: selected + backgroundColor: highlighted + ? theme.colors['fill-two'] + : selected ? theme.colors['fill-zero-hover'] : raised || (selectable && !selected) ? theme.colors['fill-zero-selected'] @@ -179,12 +185,14 @@ const Tr = styled.tr<{ const Th = styled.th<{ $stickyColumn: boolean + $highlight?: boolean $cursor?: CSSProperties['cursor'] $hideHeader?: boolean }>( ({ theme, $stickyColumn: stickyColumn, + $highlight: highlight, $cursor: cursor, $hideHeader: hideHeader, }) => ({ @@ -196,7 +204,9 @@ const Th = styled.th<{ alignItems: 'center', display: hideHeader ? 'none' : 'flex', position: 'relative', - backgroundColor: theme.colors['fill-one'], + backgroundColor: highlight + ? theme.colors['fill-two'] + : theme.colors['fill-one'], zIndex: 4, borderBottom: theme.borders.default, color: theme.colors.text, @@ -248,6 +258,7 @@ const Td = styled.td<{ $loose?: boolean $padCells?: boolean $stickyColumn: boolean + $highlight?: boolean $truncateColumn: boolean $center?: boolean }>( @@ -257,6 +268,7 @@ const Td = styled.td<{ $loose: loose, $padCells: padCells, $stickyColumn: stickyColumn, + $highlight: highlight, $truncateColumn: truncateColumn = false, $center: center, }) => ({ @@ -268,7 +280,7 @@ const Td = styled.td<{ height: 'auto', minHeight: 52, - backgroundColor: 'inherit', + backgroundColor: highlight ? theme.colors['fill-two'] : 'inherit', borderTop: firstRow ? '' : theme.borders.default, color: theme.colors['text-light'], @@ -528,6 +540,7 @@ function TableRef( lockColumnsOnScroll, reactVirtualOptions, reactTableOptions, + highlightedRowId, onRowClick, emptyStateProps, hasNextPage, @@ -703,6 +716,7 @@ function TableRef( key={header.id} $hideHeader={hideHeader} $stickyColumn={stickyColumn} + $highlight={header.column.columnDef?.meta?.highlight} {...(header.column.getCanSort() ? { $cursor: @@ -725,6 +739,11 @@ function TableRef( header.getContext() )} + {header.column.columnDef.meta?.tooltip && ( + + + + )} @@ -764,6 +783,7 @@ function TableRef( key={key} onClick={(e) => onRowClick?.(e, row)} $raised={raised} + $highlighted={row.id === highlightedRowId} $selectable={row?.getCanSelect() ?? false} $selected={row?.getIsSelected() ?? false} $clickable={!!onRowClick} @@ -795,6 +815,7 @@ function TableRef( $padCells={padCells} $loose={loose} $stickyColumn={stickyColumn} + $highlight={cell.column?.columnDef?.meta?.highlight} $truncateColumn={ cell.column?.columnDef?.meta?.truncate } diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx index 9af69fcb..74f6b954 100644 --- a/src/stories/Table.stories.tsx +++ b/src/stories/Table.stories.tsx @@ -16,8 +16,6 @@ import { AppIcon, ArrowRightLeftIcon, CollapseIcon, - IconFrame, - InfoIcon, LogsIcon, Table, Tooltip, @@ -145,6 +143,7 @@ const columns = [ columnHelper.accessor((row) => row.description, { id: 'description', enableGlobalFilter: true, + meta: { tooltip: 'Tooltip message' }, cell: (info: any) => {info.getValue()}, header: () => ( - Description{' '} - } - size="small" - /> + Description ), }), @@ -365,7 +358,6 @@ const extremeLengthData = Array(200) .map((item, i) => ({ ...item, id: `id-${i}` })) export const Default = Template.bind({}) - Default.args = { width: '900px', height: '400px', @@ -373,6 +365,35 @@ Default.args = { columns, } +export const Highlighted = Template.bind({}) +Highlighted.args = { + width: '900px', + height: '400px', + data: repeatedData, + columns: (() => { + const c = [...columns] + + c.splice( + 2, + 0, + columnHelper.accessor((row) => row.id, { + id: 'h', + cell: ({ getValue }) => getValue(), + header: 'Highlight', + meta: { + highlight: true, + truncate: true, + gridTemplate: 'minmax(150px, 1fr)', + }, + }) + ) + + return c + })(), + reactTableOptions: { getRowId: (_: any, index: any) => index }, + highlightedRowId: 1, +} + export const VirtualizedRows = Template.bind({}) VirtualizedRows.args = { virtualizeRows: true, diff --git a/src/types/react-table.d.ts b/src/types/react-table.d.ts index 7950c0da..713f24fa 100644 --- a/src/types/react-table.d.ts +++ b/src/types/react-table.d.ts @@ -6,5 +6,7 @@ declare module '@tanstack/table-core' { truncate?: boolean gridTemplate?: string center?: boolean + tooltip?: string + highlight?: boolean } }