@moontra/moonui-pro 2.3.6 → 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,
@@ -52313,7 +52320,7 @@ function DataTable({
         },
         header.id
       )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isPaginationLoading ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
         motion.tr,
         {
           initial: { opacity: 0 },
@@ -52326,43 +52333,70 @@ function DataTable({
           ] }) })
         },
         "loading"
-      ) : table.getRowModel().rows?.length ? table.getRowModel().rows.flatMap((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);
-        const mainRow = /* @__PURE__ */ jsx(
-          motion.tr,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            exit: { opacity: 0, y: -20 },
-            transition: {
-              duration: 0.3,
-              delay: index * 0.05,
-              ease: "easeOut"
+        return /* @__PURE__ */ jsxs(t__default.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: cn(
+                "border-b transition-colors hover:bg-muted/50",
+                row.getIsSelected() && "bg-muted",
+                isExpanded && "border-b-0"
+              ),
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && renderSubComponent && /* @__PURE__ */ jsx(
+            motion.tr,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: {
+                height: "auto",
+                opacity: 1,
+                transition: {
+                  height: {
+                    duration: 0.3,
+                    ease: "easeOut"
+                  },
+                  opacity: {
+                    duration: 0.2,
+                    delay: 0.1
+                  }
+                }
+              },
+              exit: {
+                height: 0,
+                opacity: 0,
+                transition: {
+                  height: {
+                    duration: 0.3,
+                    ease: "easeIn"
+                  },
+                  opacity: {
+                    duration: 0.2
+                  }
+                }
+              },
+              style: { overflow: "hidden" },
+              className: "border-b",
+              children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { y: -10 },
+                  animate: { y: 0 },
+                  exit: { y: -10 },
+                  transition: { duration: 0.2 },
+                  className: "border-t border-border/50",
+                  children: renderSubComponent({ row: { original: row.original, id: rowId } })
+                }
+              ) })
             },
-            className: cn(
-              "border-b transition-colors hover:bg-muted/50",
-              row.getIsSelected() && "bg-muted",
-              isExpanded && "border-b-0"
-            ),
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-          },
-          row.id
-        );
-        const expandedRow = isExpanded && renderSubComponent ? /* @__PURE__ */ jsx(
-          motion.tr,
-          {
-            initial: { opacity: 0, height: 0 },
-            animate: { opacity: 1, height: "auto" },
-            exit: { opacity: 0, height: 0 },
-            transition: { duration: 0.3, ease: "easeOut" },
-            className: "border-b",
-            children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({ row: { original: row.original, id: rowId } }) }) })
-          },
-          `${row.id}-expanded`
-        ) : null;
-        return expandedRow ? [mainRow, expandedRow] : [mainRow];
-      }) : /* @__PURE__ */ jsx(
+            `${row.id}-expanded`
+          ) })
+        ] }, rowId);
+      }) }) : /* @__PURE__ */ jsx(
         motion.tr,
         {
           initial: { opacity: 0 },
@@ -52372,7 +52406,7 @@ function DataTable({
           children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results found." })
         },
         "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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.6",
+  "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 = {
@@ -321,85 +333,109 @@ export function DataTable<TData, TValue>({
             ))}
           </thead>
           <tbody className="moonui-data-table-body">
-            <AnimatePresence mode="wait">
-              {isPaginationLoading ? (
-                <motion.tr
-                  key="loading"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  <td colSpan={columns.length} className="h-24 text-center">
-                    <div className="flex items-center justify-center space-x-2">
-                      <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
-                      <span className="text-sm text-muted-foreground">Loading...</span>
-                    </div>
-                  </td>
-                </motion.tr>
-              ) : table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.flatMap((row, index) => {
+            {isPaginationLoading ? (
+              <motion.tr
+                key="loading"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <td colSpan={columns.length} className="h-24 text-center">
+                  <div className="flex items-center justify-center space-x-2">
+                    <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
+                    <span className="text-sm text-muted-foreground">Loading...</span>
+                  </div>
+                </td>
+              </motion.tr>
+            ) : rows?.length ? (
+              <>
+                {rows.map((row, index) => {
                   const rowId = (row.original as any).id || row.id
                   const isExpanded = enableExpandable && expandedRows.has(rowId)
                   
-                  const mainRow = (
-                    <motion.tr
-                      key={row.id}
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -20 }}
-                      transition={{ 
-                        duration: 0.3,
-                        delay: index * 0.05,
-                        ease: "easeOut"
-                      }}
-                      className={cn(
-                        "border-b transition-colors hover:bg-muted/50",
-                        row.getIsSelected() && "bg-muted",
-                        isExpanded && "border-b-0"
-                      )}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </td>
-                      ))}
-                    </motion.tr>
-                  )
-
-                  const expandedRow = isExpanded && renderSubComponent ? (
-                    <motion.tr
-                      key={`${row.id}-expanded`}
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.3, ease: "easeOut" }}
-                      className="border-b"
-                    >
-                      <td colSpan={columns.length} className="p-0">
-                        <div className="border-t border-border/50">
-                          {renderSubComponent({ row: { original: row.original, id: rowId } })}
-                        </div>
-                      </td>
-                    </motion.tr>
-                  ) : null;
-
-                  return expandedRow ? [mainRow, expandedRow] : [mainRow];
-                })
-              ) : (
-                <motion.tr
-                  key="no-results"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  <td colSpan={columns.length} className="h-24 text-center">
-                    No results found.
-                  </td>
-                </motion.tr>
-              )}
-            </AnimatePresence>
+                  return (
+                    <React.Fragment key={rowId}>
+                      <tr
+                        className={cn(
+                          "border-b transition-colors hover:bg-muted/50",
+                          row.getIsSelected() && "bg-muted",
+                          isExpanded && "border-b-0"
+                        )}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </td>
+                        ))}
+                      </tr>
+                      
+                      <AnimatePresence initial={false}>
+                        {isExpanded && renderSubComponent && (
+                          <motion.tr
+                            key={`${row.id}-expanded`}
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ 
+                              height: "auto", 
+                              opacity: 1,
+                              transition: {
+                                height: {
+                                  duration: 0.3,
+                                  ease: "easeOut"
+                                },
+                                opacity: {
+                                  duration: 0.2,
+                                  delay: 0.1
+                                }
+                              }
+                            }}
+                            exit={{ 
+                              height: 0, 
+                              opacity: 0,
+                              transition: {
+                                height: {
+                                  duration: 0.3,
+                                  ease: "easeIn"
+                                },
+                                opacity: {
+                                  duration: 0.2
+                                }
+                              }
+                            }}
+                            style={{ overflow: "hidden" }}
+                            className="border-b"
+                          >
+                            <td colSpan={columns.length} className="p-0">
+                              <motion.div 
+                                initial={{ y: -10 }}
+                                animate={{ y: 0 }}
+                                exit={{ y: -10 }}
+                                transition={{ duration: 0.2 }}
+                                className="border-t border-border/50"
+                              >
+                                {renderSubComponent({ row: { original: row.original, id: rowId } })}
+                              </motion.div>
+                            </td>
+                          </motion.tr>
+                        )}
+                      </AnimatePresence>
+                    </React.Fragment>
+                  );
+                })}
+              </>
+            ) : (
+              <motion.tr
+                key="no-results"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <td colSpan={columns.length} className="h-24 text-center">
+                  No results found.
+                </td>
+              </motion.tr>
+            )}
           </tbody>
         </table>
         </div>