Adding Tooltip support on header

dust-tt · Jan 16, 2025 · ba8b785 · ba8b785
1 parent bffcefb
commit ba8b785
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/sparkle/src/components/DataTable.tsx b/sparkle/src/components/DataTable.tsx
@@ -46,8 +46,7 @@ declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData, TValue> {
     className?: string;
-    width?: string;
-    flex?: number;
+    tooltip?: string;
   }
 }
 
@@ -304,7 +303,7 @@ DataTable.Head = function Head({
   column,
   ...props
 }: HeadProps) {
-  return (
+  const content = (
     <th
       className={classNames(
         "s-py-2 s-pr-3 s-text-left s-text-xs s-font-medium s-capitalize s-text-foreground",
@@ -316,6 +315,12 @@ DataTable.Head = function Head({
       {children}
     </th>
   );
+
+  if (column.columnDef.meta?.tooltip) {
+    return <Tooltip label={column.columnDef.meta.tooltip} trigger={content} />;
+  }
+
+  return content;
 };
 
 DataTable.Body = function Body({

diff --git a/sparkle/src/stories/DataTable.stories.tsx b/sparkle/src/stories/DataTable.stories.tsx
@@ -148,6 +148,7 @@ const columns: ColumnDef<Data>[] = [
     sortingFn: "text",
     meta: {
       className: "s-w-full",
+      tooltip: "User's full name",
     },
     cell: (info) => (
       <DataTable.CellContent