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
}
}