Customize table components

Author: buberdds

src/components/table/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { TableHead as BaseTableHead, TableCell as BaseTableCell } from '../ui/table'
+import { cn } from '../../lib/utils'
+export { Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow } from '../ui/table'
+
+type TableHeadProps = React.ComponentProps<typeof BaseTableHead>
+
+export const TableHead = ({ className, children, ...props }: TableHeadProps) => (
+  <BaseTableHead
+    className={cn(
+      'h-12 px-4 flex-1 self-stretch justify-center text-muted-foreground text-sm font-medium leading-tight',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </BaseTableHead>
+)
+
+type TableCellProps = React.ComponentProps<typeof BaseTableCell>
+
+export const TableCell = ({ className, children, ...props }: TableCellProps) => (
+  <BaseTableCell
+    className={cn(
+      'p-4 self-stretch justify-center text-foreground text-sm font-medium leading-none',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </BaseTableCell>
+)

src/stories/Table/Table.stories.tsx

@@ -8,7 +8,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '../../components/ui/table.tsx'
+} from '../../components/table'
 import { expect, within } from 'storybook/test'
 
 const meta: Meta<typeof Table> = {