feat: add wrapper class table

Author: thevuong

.changeset/clean-bottles-relate.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.58
+
+### Patch Changes
+
+- Add wrapper class table
+
 ## 0.1.57
 
 ### Patch Changes

packages/ui/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/package.json

@@ -474,21 +474,22 @@ export function DataTablePagination<TData>({
  * -------------------------------------------------------------------------- */
 
 interface TableClassNames {
-  root?: string;
+  body?: string;
+  cell?: string;
   container?: string;
-  table?: string;
-  header?: string;
-  headerRow?: string;
+  emptyCell?: string;
+  emptyRow?: string;
   footer?: string;
   footerRow?: string;
+  header?: string;
   headerCell?: string;
-  body?: string;
+  headerRow?: string;
+  pagination?: string;
+  root?: string;
   row?: string;
-  cell?: string;
-  emptyRow?: string;
-  emptyCell?: string;
+  table?: string;
   toolbar?: string;
-  pagination?: string;
+  wrapper?: string;
 }
 
 export function DataTableContent<TData, TValue>({
@@ -510,7 +511,13 @@ export function DataTableContent<TData, TValue>({
       )}
       data-test-id="container"
     >
-      <Table className={classNames.table} data-test-id="table">
+      <Table
+        className={classNames.table}
+        classNames={{
+          wrapper: classNames.wrapper,
+        }}
+        data-test-id="table"
+      >
         <TableHeader className={classNames.header} data-test-id="header">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow

packages/ui/src/react/data-table.tsx

@@ -8,9 +8,16 @@ import { twMerge } from 'tailwind-merge';
 
 export const Table = forwardRef<
   React.ElementRef<'table'>,
-  React.ComponentPropsWithoutRef<'table'>
->(({ className, ...props }, forwardedRef) => (
-  <div className="w-full overflow-auto">
+  React.ComponentPropsWithoutRef<'table'> & {
+    classNames?: {
+      wrapper?: string;
+    };
+  }
+>(({ className, classNames, ...props }, forwardedRef) => (
+  <div
+    className={twMerge('w-full overflow-auto', classNames?.wrapper)}
+    data-test-id="wrapper"
+  >
     <table
       className={twMerge('w-full caption-bottom text-sm', className)}
       ref={forwardedRef}