@moontra/moonui-pro 2.3.3 → 2.3.5

package/dist/index.d.ts

@@ -21,7 +21,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, OnChangeFn, SortingState, ColumnFiltersState } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
 
 declare function cn(...inputs: ClassValue[]): string;
@@ -1547,6 +1547,19 @@ interface DataTableProps<TData, TValue> {
     }) => React__default.ReactNode;
     expandedRows?: Set<string>;
     onRowExpandChange?: (expandedRows: Set<string>) => void;
+    enableSorting?: boolean;
+    enableFiltering?: boolean;
+    enablePagination?: boolean;
+    enableColumnVisibility?: boolean;
+    enableRowSelection?: boolean;
+    filterPlaceholder?: string;
+    defaultPageSize?: number;
+    manualPagination?: boolean;
+    pageCount?: number;
+    onPaginationChange?: (updater: any) => void;
+    onSortingChange?: OnChangeFn<SortingState>;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    state?: any;
     features?: {
         sorting?: boolean;
         filtering?: boolean;
@@ -1577,7 +1590,7 @@ interface DataTableProps<TData, TValue> {
         filterButton?: string;
     };
 }
-declare function DataTable<TData, TValue>({ columns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, features, theme, texts, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, features, theme, texts, enableSorting, enableFiltering, enablePagination, enableColumnVisibility, enableRowSelection, filterPlaceholder, defaultPageSize, manualPagination, pageCount, onPaginationChange, onSortingChange, onColumnFiltersChange, state: externalState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 /**
  * Helper function to create an expandable column
  * @param expandedRows - Set of expanded row IDs

package/dist/index.mjs

@@ -52171,7 +52171,21 @@ function DataTable({
   onRowExpandChange,
   features = {},
   theme = {},
-  texts = {}
+  texts = {},
+  // Additional props
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableRowSelection,
+  filterPlaceholder = "Search all columns...",
+  defaultPageSize,
+  manualPagination = false,
+  pageCount,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  state: externalState
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
@@ -52195,11 +52209,12 @@ function DataTable({
   const [isPaginationLoading, setIsPaginationLoading] = t__default.useState(false);
   const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
   const expandedRows = controlledExpandedRows || internalExpandedRows;
+  const actualPageSize = defaultPageSize || pageSize;
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
+    onSortingChange: onSortingChange !== void 0 ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange !== void 0 ? onColumnFiltersChange : setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -52208,7 +52223,9 @@ function DataTable({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: "includesString",
-    state: {
+    manualPagination,
+    pageCount,
+    state: externalState || {
       sorting,
       columnFilters,
       columnVisibility,
@@ -52217,7 +52234,7 @@ function DataTable({
     },
     initialState: {
       pagination: {
-        pageSize
+        pageSize: actualPageSize
       }
     }
   });
@@ -52243,15 +52260,15 @@ function DataTable({
       onExport(dataToExport);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container", className), style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar", style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }) }),
           /* @__PURE__ */ jsx(
             MoonUIInputPro,
             {
-              placeholder: "Search all columns...",
+              placeholder: filterPlaceholder,
               value: globalFilter,
               onChange: (e) => setGlobalFilter(e.target.value),
               className: "pl-8 w-64"
@@ -52259,22 +52276,22 @@ function DataTable({
           )
         ] }),
         filterable && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
           "Filters"
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         exportable && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", onClick: handleExport, children: [
-          /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
           "Export"
         ] }),
         /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }) }),
           "Columns"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", style: { contain: "layout style" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%", tableLayout: "auto" }, children: [
       /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
         "th",
         {
@@ -52289,7 +52306,7 @@ function DataTable({
               onClick: header.column.getToggleSortingHandler(),
               children: [
                 flexRender(header.column.columnDef.header, header.getContext()),
-                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) })
+                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) }) })
               ]
             }
           )
@@ -52304,7 +52321,7 @@ function DataTable({
           exit: { opacity: 0 },
           transition: { duration: 0.2 },
           children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
-            /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }),
             /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
           ] }) })
         },
@@ -52356,7 +52373,7 @@ function DataTable({
         },
         "no-results"
       ) }) })
-    ] }) }),
+    ] }) }) }),
     pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
         table.getFilteredSelectedRowModel().rows.length,
@@ -52398,13 +52415,17 @@ function DataTable({
               variant: "outline",
               className: "hidden h-8 w-8 p-0 lg:flex",
               onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.setPageIndex(0);
-                setIsPaginationLoading(false);
+                if (onPaginationChange) {
+                  onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.setPageIndex(0);
+                  setIsPaginationLoading(false);
+                }
               },
               disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -52413,13 +52434,18 @@ function DataTable({
               variant: "outline",
               className: "h-8 w-8 p-0",
               onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.previousPage();
-                setIsPaginationLoading(false);
+                if (onPaginationChange) {
+                  const currentIndex = table.getState().pagination.pageIndex;
+                  onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.previousPage();
+                  setIsPaginationLoading(false);
+                }
               },
               disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -52434,7 +52460,7 @@ function DataTable({
                 setIsPaginationLoading(false);
               },
               disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -52449,7 +52475,7 @@ function DataTable({
                 setIsPaginationLoading(false);
               },
               disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
             }
           )
         ] })
@@ -52474,7 +52500,7 @@ function getExpandableColumn(expandedRows, onToggle) {
           },
           className: "p-2 hover:bg-muted rounded-md transition-colors",
           "aria-label": isExpanded ? "Collapse row" : "Expand row",
-          children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+          children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) })
         }
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",
@@ -75,6 +75,7 @@
     "react-dom": ">=18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@moontra/moonui-pro": "^2.3.4",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",

package/src/components/data-table/index.tsx

@@ -12,6 +12,7 @@ import {
   SortingState,
   ColumnFiltersState,
   VisibilityState,
+  OnChangeFn,
 } from '@tanstack/react-table'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
@@ -53,6 +54,20 @@ interface DataTableProps<TData, TValue> {
   renderSubComponent?: (props: { row: { original: TData; id: string } }) => React.ReactNode
   expandedRows?: Set<string>
   onRowExpandChange?: (expandedRows: Set<string>) => void
+  // Additional props for compatibility
+  enableSorting?: boolean
+  enableFiltering?: boolean
+  enablePagination?: boolean
+  enableColumnVisibility?: boolean
+  enableRowSelection?: boolean
+  filterPlaceholder?: string
+  defaultPageSize?: number
+  manualPagination?: boolean
+  pageCount?: number
+  onPaginationChange?: (updater: any) => void
+  onSortingChange?: OnChangeFn<SortingState>
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  state?: any
   features?: {
     sorting?: boolean
     filtering?: boolean
@@ -103,6 +118,20 @@ export function DataTable<TData, TValue>({
   features = {},
   theme = {},
   texts = {},
+  // Additional props
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableRowSelection,
+  filterPlaceholder = "Search all columns...",
+  defaultPageSize,
+  manualPagination = false,
+  pageCount,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  state: externalState,
 }: DataTableProps<TData, TValue>) {
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
@@ -151,11 +180,13 @@ export function DataTable<TData, TValue>({
     (newExpanded: Set<string>) => onRowExpandChange(newExpanded) :
     setInternalExpandedRows
 
+  const actualPageSize = defaultPageSize || pageSize
+  
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
+    onSortingChange: onSortingChange !== undefined ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange !== undefined ? onColumnFiltersChange : setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -164,7 +195,9 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: 'includesString',
-    state: {
+    manualPagination,
+    pageCount,
+    state: externalState || {
       sorting,
       columnFilters,
       columnVisibility,
@@ -173,7 +206,7 @@ export function DataTable<TData, TValue>({
     },
     initialState: {
       pagination: {
-        pageSize,
+        pageSize: actualPageSize,
       },
     },
   })
@@ -207,15 +240,17 @@ export function DataTable<TData, TValue>({
   }
 
   return (
-    <div className={cn("moonui-pro-datatable-container", className)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div className={cn("moonui-pro-datatable-container flex flex-col gap-4", className)}>
       {/* Toolbar */}
-      <div className="moonui-pro-datatable-toolbar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <div className="moonui-pro-datatable-toolbar flex items-center justify-between">
         <div className="flex items-center space-x-2">
           {searchable && (
             <div className="relative">
-              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <span suppressHydrationWarning>
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              </span>
               <Input
-                placeholder="Search all columns..."
+                placeholder={filterPlaceholder}
                 value={globalFilter}
                 onChange={(e) => setGlobalFilter(e.target.value)}
                 className="pl-8 w-64"
@@ -225,7 +260,7 @@ export function DataTable<TData, TValue>({
           
           {filterable && (
             <Button variant="outline" size="sm">
-              <Filter className="mr-2 h-4 w-4" />
+              <span suppressHydrationWarning><Filter className="mr-2 h-4 w-4" /></span>
               Filters
             </Button>
           )}
@@ -234,21 +269,22 @@ export function DataTable<TData, TValue>({
         <div className="flex items-center space-x-2">
           {exportable && (
             <Button variant="outline" size="sm" onClick={handleExport}>
-              <Download className="mr-2 h-4 w-4" />
+              <span suppressHydrationWarning><Download className="mr-2 h-4 w-4" /></span>
               Export
             </Button>
           )}
           
           <Button variant="outline" size="sm">
-            <Settings className="mr-2 h-4 w-4" />
+            <span suppressHydrationWarning><Settings className="mr-2 h-4 w-4" /></span>
             Columns
           </Button>
         </div>
       </div>
 
       {/* Table */}
-      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden">
-        <table className="moonui-pro-datatable" style={{ width: '100%' }}>
+      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden" style={{ contain: 'layout style' }}>
+        <div style={{ overflowX: 'auto' }}>
+          <table className="moonui-pro-datatable" style={{ width: '100%', tableLayout: 'auto' }}>
           <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id} className="moonui-data-table-row border-b">
@@ -269,11 +305,11 @@ export function DataTable<TData, TValue>({
                         {header.column.getCanSort() && (
                           <div className="ml-2">
                             {header.column.getIsSorted() === 'asc' ? (
-                              <ArrowUp className="h-4 w-4" />
+                              <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
                             ) : header.column.getIsSorted() === 'desc' ? (
-                              <ArrowDown className="h-4 w-4" />
+                              <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
                             ) : (
-                              <ArrowUpDown className="h-4 w-4" />
+                              <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
                             )}
                           </div>
                         )}
@@ -296,7 +332,7 @@ export function DataTable<TData, TValue>({
                 >
                   <td colSpan={columns.length} className="h-24 text-center">
                     <div className="flex items-center justify-center space-x-2">
-                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
                       <span className="text-sm text-muted-foreground">Loading...</span>
                     </div>
                   </td>
@@ -366,6 +402,7 @@ export function DataTable<TData, TValue>({
             </AnimatePresence>
           </tbody>
         </table>
+        </div>
       </div>
 
       {/* Pagination */}
@@ -409,27 +446,36 @@ export function DataTable<TData, TValue>({
                 variant="outline"
                 className="hidden h-8 w-8 p-0 lg:flex"
                 onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.setPageIndex(0)
-                  setIsPaginationLoading(false)
+                  if (onPaginationChange) {
+                    onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize })
+                  } else {
+                    setIsPaginationLoading(true)
+                    await new Promise(resolve => setTimeout(resolve, 300))
+                    table.setPageIndex(0)
+                    setIsPaginationLoading(false)
+                  }
                 }}
                 disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >
-                <ChevronsLeft className="h-4 w-4" />
+                <span suppressHydrationWarning><ChevronsLeft className="h-4 w-4" /></span>
               </Button>
               <Button
                 variant="outline"
                 className="h-8 w-8 p-0"
                 onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.previousPage()
-                  setIsPaginationLoading(false)
+                  if (onPaginationChange) {
+                    const currentIndex = table.getState().pagination.pageIndex
+                    onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize })
+                  } else {
+                    setIsPaginationLoading(true)
+                    await new Promise(resolve => setTimeout(resolve, 300))
+                    table.previousPage()
+                    setIsPaginationLoading(false)
+                  }
                 }}
                 disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >
-                <ChevronLeft className="h-4 w-4" />
+                <span suppressHydrationWarning><ChevronLeft className="h-4 w-4" /></span>
               </Button>
               <Button
                 variant="outline"
@@ -442,7 +488,7 @@ export function DataTable<TData, TValue>({
                 }}
                 disabled={!table.getCanNextPage() || isPaginationLoading}
               >
-                <ChevronRight className="h-4 w-4" />
+                <span suppressHydrationWarning><ChevronRight className="h-4 w-4" /></span>
               </Button>
               <Button
                 variant="outline"
@@ -455,7 +501,7 @@ export function DataTable<TData, TValue>({
                 }}
                 disabled={!table.getCanNextPage() || isPaginationLoading}
               >
-                <ChevronsRight className="h-4 w-4" />
+                <span suppressHydrationWarning><ChevronsRight className="h-4 w-4" /></span>
               </Button>
             </div>
           </div>
@@ -492,11 +538,13 @@ export function getExpandableColumn<TData>(
           className="p-2 hover:bg-muted rounded-md transition-colors"
           aria-label={isExpanded ? "Collapse row" : "Expand row"}
         >
-          {isExpanded ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-          )}
+          <span suppressHydrationWarning>
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            )}
+          </span>
         </button>
       );
     },