Add className support to DataTable

StanfordBDHG · Jul 5, 2024 · 3f65ca0 · 3f65ca0
1 parent 1f8cd2e
commit 3f65ca0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/design-system/src/components/DataTable/DataTable.stories.tsx b/packages/design-system/src/components/DataTable/DataTable.stories.tsx
@@ -20,5 +20,5 @@ const meta: Meta<typeof DataTable> = {
 export default meta
 
 export const Default = () => (
-  <DataTable columns={peopleColumns} data={peopleData} />
+  <DataTable columns={peopleColumns} data={peopleData} className="m-5" />
 )
diff --git a/packages/design-system/src/components/DataTable/DataTable.tsx b/packages/design-system/src/components/DataTable/DataTable.tsx
@@ -14,15 +14,18 @@ import {
   TableHeader,
   TableRow,
 } from '../Table'
+import { cn } from '../../utils/className'
 
 interface DataTableProps<TData, TValue> {
   columns: Array<ColumnDef<TData, TValue>>
   data: TData[]
+  className?: string
 }
 
 export const DataTable = <TData, TValue>({
   columns,
   data,
+  className,
 }: DataTableProps<TData, TValue>) => {
   const table = useReactTable({
     data,
@@ -32,7 +35,7 @@ export const DataTable = <TData, TValue>({
   const rows = table.getRowModel().rows
 
   return (
-    <div className="rounded-md border">
+    <div className={cn('rounded-md border', className)}>
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (