@moontra/moonui-pro 2.4.1 → 2.4.3

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,
@@ -53256,27 +53265,31 @@ function DataTable({
       ] })
     ] }),
     /* @__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",
-        {
-          className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
-          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-center space-x-2",
-                header.column.getCanSort() && "cursor-pointer select-none"
-              ),
-              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("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" }) }) })
-              ]
-            }
-          )
-        },
-        header.id
-      )) }, headerGroup.id)) }),
+      /* @__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) => {
+        if (!header.column.getIsVisible())
+          return null;
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
+            children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center space-x-2",
+                  header.column.getCanSort() && "cursor-pointer select-none"
+                ),
+                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("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" }) }) })
+                ]
+              }
+            )
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
       /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
         motion.tr,
         {
@@ -53284,7 +53297,7 @@ function DataTable({
           animate: { opacity: 1 },
           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: [
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
             /* @__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..." })
           ] }) })
@@ -53311,7 +53324,7 @@ function DataTable({
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results found." })
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "h-24 text-center", children: "No results found." })
         },
         "no-results"
       ) })
@@ -53500,10 +53513,14 @@ var TableRow2 = t__default.memo(({
           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))
+        children: row.getVisibleCells().map((cell) => {
+          if (!cell.column.getIsVisible())
+            return null;
+          return /* @__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().filter((cell) => cell.column.getIsVisible()).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.3",
   "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,
@@ -411,35 +421,40 @@ export function DataTable<TData, TValue>({
           <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id} className="moonui-data-table-row border-b">
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
-                  >
-                    {header.isPlaceholder ? null : (
-                      <div
-                        className={cn(
-                          "flex items-center space-x-2",
-                          header.column.getCanSort() && "cursor-pointer select-none"
-                        )}
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        {flexRender(header.column.columnDef.header, header.getContext())}
-                        {header.column.getCanSort() && (
-                          <div className="ml-2">
-                            {header.column.getIsSorted() === 'asc' ? (
-                              <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
-                            ) : header.column.getIsSorted() === 'desc' ? (
-                              <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
-                            ) : (
-                              <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </th>
-                ))}
+                {headerGroup.headers.map((header) => {
+                  // Column visibility kontrolü
+                  if (!header.column.getIsVisible()) return null;
+                  
+                  return (
+                    <th
+                      key={header.id}
+                      className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+                    >
+                      {header.isPlaceholder ? null : (
+                        <div
+                          className={cn(
+                            "flex items-center space-x-2",
+                            header.column.getCanSort() && "cursor-pointer select-none"
+                          )}
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          {header.column.getCanSort() && (
+                            <div className="ml-2">
+                              {header.column.getIsSorted() === 'asc' ? (
+                                <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
+                              ) : header.column.getIsSorted() === 'desc' ? (
+                                <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
+                              ) : (
+                                <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </th>
+                  );
+                })}
               </tr>
             ))}
           </thead>
@@ -452,7 +467,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={columns.length} className="h-24 text-center">
+                <td colSpan={table.getVisibleLeafColumns().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>
@@ -485,7 +500,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={columns.length} className="h-24 text-center">
+                <td colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
                   No results found.
                 </td>
               </motion.tr>
@@ -714,16 +729,21 @@ const TableRow = React.memo(({
           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>
-        ))}
+        {row.getVisibleCells().map((cell) => {
+          // Column visibility kontrolü
+          if (!cell.column.getIsVisible()) return null;
+          
+          return (
+            <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </td>
+          );
+        })}
       </tr>
       
       {isExpanded && renderSubComponent && (
         <tr className="border-b">
-          <td colSpan={columns.length} className="p-0 overflow-hidden">
+          <td colSpan={row.getVisibleCells().filter(cell => cell.column.getIsVisible()).length} className="p-0 overflow-hidden">
             <div 
               className="transition-all duration-300 ease-out"
               style={{