@hyddenlabs/hydn-ui 0.3.0-alpha.211 → 0.3.0-alpha.213

package/dist/index.cjs

@@ -5138,12 +5138,66 @@ function DataTable({
       onSearchChange(value);
     }
   };
+  const tableContainerRef = React.useRef(null);
+  const [visibleColumns, setVisibleColumns] = React.useState(() => columns);
+  React.useEffect(() => {
+    const container = tableContainerRef.current;
+    if (!container) return;
+    const hasHideableColumns = columns.some((col) => col.hidePriority !== void 0);
+    const updateVisibleColumns = () => {
+      if (!hasHideableColumns) {
+        setVisibleColumns(columns);
+        return;
+      }
+      const containerWidth2 = container.offsetWidth;
+      const hideableColumns = columns.map((col, index) => ({ col, originalIndex: index })).filter(({ col }) => col.hidePriority !== void 0).sort((a, b) => {
+        if (a.col.hidePriority !== b.col.hidePriority) {
+          return (a.col.hidePriority ?? 0) - (b.col.hidePriority ?? 0);
+        }
+        return a.originalIndex - b.originalIndex;
+      });
+      const nonHideableColumns = columns.filter((col) => col.hidePriority === void 0);
+      const estimateColumnWidth = (col) => {
+        if (col.width) {
+          const match = col.width.match(/(\d+)/);
+          if (match) {
+            const num = parseInt(match[1], 10);
+            if (col.width.includes("px")) return num;
+            return num * 4;
+          }
+        }
+        return 150;
+      };
+      let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);
+      if (selectable) currentWidth += 48;
+      if (actions) currentWidth += 128;
+      const columnsToShow = [...nonHideableColumns];
+      for (const { col } of hideableColumns) {
+        const colWidth = estimateColumnWidth(col);
+        if (currentWidth + colWidth <= containerWidth2 - 32) {
+          columnsToShow.push(col);
+          currentWidth += colWidth;
+        }
+      }
+      const orderedVisibleColumns = columns.filter((col) => columnsToShow.includes(col));
+      setVisibleColumns(orderedVisibleColumns);
+    };
+    updateVisibleColumns();
+    const observer = new ResizeObserver(() => {
+      updateVisibleColumns();
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [columns, selectable, actions]);
+  const effectiveSearchKeys = searchKeys || visibleColumns.map((col) => col.key);
   const tableOptions = {
     data,
     initialSort,
     pageSize,
     searchQuery,
-    searchKeys
+    searchKeys: effectiveSearchKeys
   };
   const {
     currentData,
@@ -5316,10 +5370,10 @@ function DataTable({
         description: `No items match "${searchQuery}". Try adjusting your search.`
       }
     ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${stickyHeader ? "overflow-auto max-h-150" : ""} overflow-x-auto`, children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { striped, bordered, hoverable, compact, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tableContainerRef, className: `${stickyHeader ? "overflow-auto max-h-150" : ""} overflow-x-auto`, children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { striped, bordered, hoverable, compact, children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
           selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsxRuntime.jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
-          columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
             TableHeadCell,
             {
               align: column.align,
@@ -5359,7 +5413,7 @@ function DataTable({
                     ariaLabel: `Select row ${actualIndex + 1}`
                   }
                 ) }),
-                columns.map((column) => {
+                visibleColumns.map((column) => {
                   const value = row[column.key];
                   const content = renderCellContent(value, column, row, actualIndex);
                   return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));