allow adding tooltips to table header

pluralsh · Jul 31, 2024 · 38e9d07 · 38e9d07
1 parent da12ac7
commit 38e9d07
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 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'
@@ -725,6 +726,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()}
                         />

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

diff --git a/src/types/react-table.d.ts b/src/types/react-table.d.ts
@@ -6,5 +6,6 @@ declare module '@tanstack/table-core' {
     truncate?: boolean
     gridTemplate?: string
     center?: boolean
+    tooltip?: string
   }
 }