feat: Table improvements (#629)

pluralsh · Aug 1, 2024 · 33dab53 · 33dab53
1 parent da12ac7
commit 33dab53
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 13 deletions.
diff --git 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()
                               )}
                         </div>
+                        {header.column.columnDef.meta?.tooltip && (
+                          <Tooltip label={header.column.columnDef.meta.tooltip}>
+                            <InfoOutlineIcon />
+                          </Tooltip>
+                        )}
                         <SortIndicator
                           direction={header.column.getIsSorted()}
                         />
@@ -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
@@ -16,8 +16,6 @@ import {
   AppIcon,
   ArrowRightLeftIcon,
   CollapseIcon,
-  IconFrame,
-  InfoIcon,
   LogsIcon,
   Table,
   Tooltip,
@@ -145,20 +143,15 @@ const columns = [
   columnHelper.accessor((row) => row.description, {
     id: 'description',
     enableGlobalFilter: true,
+    meta: { tooltip: 'Tooltip message' },
     cell: (info: any) => <span>{info.getValue()}</span>,
     header: () => (
       <Flex
         gap="xsmall"
         alignItems="center"
         justifyContent="space-between"
       >
-        Description{' '}
-        <IconFrame
-          clickable
-          textValue="Book"
-          icon={<InfoIcon />}
-          size="small"
-        />
+        Description
       </Flex>
     ),
   }),
@@ -365,14 +358,42 @@ const extremeLengthData = Array(200)
   .map((item, i) => ({ ...item, id: `id-${i}` }))
 
 export const Default = Template.bind({})
-
 Default.args = {
   width: '900px',
   height: '400px',
   data: repeatedData,
   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
@@ -6,5 +6,7 @@ declare module '@tanstack/table-core' {
     truncate?: boolean
     gridTemplate?: string
     center?: boolean
+    tooltip?: string
+    highlight?: boolean
   }
 }