@moontra/moonui-pro 2.4.1 → 2.4.2

package/dist/index.d.ts

@@ -1617,7 +1617,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, bulkActions, 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;
+declare function DataTable<TData, TValue>({ columns: originalColumns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, bulkActions, 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

@@ -53043,7 +53043,7 @@ function FilterConditionRow({
   ] });
 }
 function DataTable({
-  columns,
+  columns: originalColumns,
   data,
   searchable = true,
   filterable = true,
@@ -53077,6 +53077,12 @@ function DataTable({
   onColumnFiltersChange,
   state: externalState
 }) {
+  const columns = t__default.useMemo(() => {
+    return originalColumns.map((col) => ({
+      ...col,
+      enableHiding: col.enableHiding !== false
+    }));
+  }, [originalColumns]);
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
     return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
@@ -53117,6 +53123,9 @@ function DataTable({
     globalFilterFn: "includesString",
     manualPagination,
     pageCount,
+    enableColumnFilters: true,
+    enableSorting: true,
+    enableHiding: true,
     state: externalState || {
       sorting,
       columnFilters,
@@ -53503,7 +53512,7 @@ var TableRow2 = t__default.memo(({
         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))
       }
     ),
-    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "transition-all duration-300 ease-out",

package/package.json

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

@@ -119,7 +119,7 @@ interface DataTableProps<TData, TValue> {
 }
 
 export function DataTable<TData, TValue>({
-  columns,
+  columns: originalColumns,
   data,
   searchable = true,
   filterable = true,
@@ -153,6 +153,13 @@ export function DataTable<TData, TValue>({
   onColumnFiltersChange,
   state: externalState,
 }: DataTableProps<TData, TValue>) {
+  // Process columns to ensure they can be hidden
+  const columns = React.useMemo(() => {
+    return originalColumns.map(col => ({
+      ...col,
+      enableHiding: col.enableHiding !== false,
+    }))
+  }, [originalColumns])
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
   
@@ -221,6 +228,9 @@ export function DataTable<TData, TValue>({
     globalFilterFn: 'includesString',
     manualPagination,
     pageCount,
+    enableColumnFilters: true,
+    enableSorting: true,
+    enableHiding: true,
     state: externalState || {
       sorting,
       columnFilters,
@@ -723,7 +733,7 @@ const TableRow = React.memo(({
       
       {isExpanded && renderSubComponent && (
         <tr className="border-b">
-          <td colSpan={columns.length} className="p-0 overflow-hidden">
+          <td colSpan={row.getVisibleCells().length} className="p-0 overflow-hidden">
             <div 
               className="transition-all duration-300 ease-out"
               style={{