@moontra/moonui-pro 2.3.7 → 2.3.8

package/dist/index.mjs

@@ -52210,8 +52210,9 @@ function DataTable({
   const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
   const expandedRows = controlledExpandedRows || internalExpandedRows;
   const actualPageSize = defaultPageSize || pageSize;
+  const stableData = t__default.useMemo(() => data, [data]);
   const table = useReactTable({
-    data,
+    data: stableData,
     columns,
     onSortingChange: onSortingChange !== void 0 ? onSortingChange : setSorting,
     onColumnFiltersChange: onColumnFiltersChange !== void 0 ? onColumnFiltersChange : setColumnFilters,
@@ -52244,6 +52245,12 @@ function DataTable({
       onRowSelect(selectedRows);
     }
   }, [rowSelection, onRowSelect, selectable, table]);
+  const tableState = table.getState();
+  const rows = t__default.useMemo(
+    () => table.getRowModel().rows,
+    // Only recalculate when data or filtering/sorting changes, not on expand/collapse
+    [stableData, tableState.sorting, tableState.columnFilters, tableState.globalFilter, tableState.pagination.pageIndex, tableState.pagination.pageSize]
+  );
   ({
     sorting: features.sorting !== false,
     filtering: features.filtering !== false || filterable,
@@ -52326,15 +52333,13 @@ function DataTable({
           ] }) })
         },
         "loading"
-      ) : table.getRowModel().rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, index) => {
+      ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index) => {
         const rowId = row.original.id || row.id;
         const isExpanded = enableExpandable && expandedRows.has(rowId);
         return /* @__PURE__ */ jsxs(t__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
-            motion.tr,
+            "tr",
             {
-              initial: false,
-              animate: { opacity: 1 },
               className: cn(
                 "border-b transition-colors hover:bg-muted/50",
                 row.getIsSelected() && "bg-muted",
@@ -52390,7 +52395,7 @@ function DataTable({
             },
             `${row.id}-expanded`
           ) })
-        ] }, row.id);
+        ] }, rowId);
       }) }) : /* @__PURE__ */ jsx(
         motion.tr,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "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",

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

@@ -13,6 +13,7 @@ import {
   ColumnFiltersState,
   VisibilityState,
   OnChangeFn,
+  Row,
 } from '@tanstack/react-table'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
@@ -182,8 +183,11 @@ export function DataTable<TData, TValue>({
 
   const actualPageSize = defaultPageSize || pageSize
   
+  // Memoize data to prevent unnecessary re-renders
+  const stableData = React.useMemo(() => data, [data])
+  
   const table = useReactTable({
-    data,
+    data: stableData,
     columns,
     onSortingChange: onSortingChange !== undefined ? onSortingChange : setSorting,
     onColumnFiltersChange: onColumnFiltersChange !== undefined ? onColumnFiltersChange : setColumnFilters,
@@ -217,6 +221,14 @@ export function DataTable<TData, TValue>({
       onRowSelect(selectedRows)
     }
   }, [rowSelection, onRowSelect, selectable, table])
+  
+  // Memoize row model to prevent unnecessary re-renders when only expanded state changes
+  const tableState = table.getState()
+  const rows = React.useMemo(
+    () => table.getRowModel().rows,
+    // Only recalculate when data or filtering/sorting changes, not on expand/collapse
+    [stableData, tableState.sorting, tableState.columnFilters, tableState.globalFilter, tableState.pagination.pageIndex, tableState.pagination.pageSize]
+  )
 
   // Merge features with defaults
   const enabledFeatures = {
@@ -336,17 +348,15 @@ export function DataTable<TData, TValue>({
                   </div>
                 </td>
               </motion.tr>
-            ) : table.getRowModel().rows?.length ? (
+            ) : rows?.length ? (
               <>
-                {table.getRowModel().rows.map((row, index) => {
+                {rows.map((row, index) => {
                   const rowId = (row.original as any).id || row.id
                   const isExpanded = enableExpandable && expandedRows.has(rowId)
                   
                   return (
-                    <React.Fragment key={row.id}>
-                      <motion.tr
-                        initial={false}
-                        animate={{ opacity: 1 }}
+                    <React.Fragment key={rowId}>
+                      <tr
                         className={cn(
                           "border-b transition-colors hover:bg-muted/50",
                           row.getIsSelected() && "bg-muted",
@@ -358,7 +368,7 @@ export function DataTable<TData, TValue>({
                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                           </td>
                         ))}
-                      </motion.tr>
+                      </tr>
                       
                       <AnimatePresence initial={false}>
                         {isExpanded && renderSubComponent && (