@rufous/ui 0.2.83 → 0.2.84

package/dist/main.cjs

@@ -4345,9 +4345,10 @@ function DataGrid({
   const menuRef = (0, import_react23.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react23.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react23.useState)(false);
-  const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
+  const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
+  const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = (0, import_react23.useState)([
-    { column: initialFilterCol, operator: getDefaultOperator(initialColumnsProp[0]?.type), value: "", logic: "AND" }
+    { column: initialFilterCol, operator: getDefaultOperator(filterableColumnsProp[0]?.type), value: "", logic: "AND" }
   ]);
   const [colSearch, setColSearch] = (0, import_react23.useState)("");
   (0, import_react23.useEffect)(() => {
@@ -4616,6 +4617,7 @@ function DataGrid({
     return offset2;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
+  const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
   return /* @__PURE__ */ import_react23.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react23.default.createElement("h2", null, title), /* @__PURE__ */ import_react23.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react23.default.createElement(
     "input",
     {
@@ -4641,7 +4643,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
-  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4683,7 +4685,7 @@ function DataGrid({
         }
       )))
     );
-  }), actions && /* @__PURE__ */ import_react23.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react23.default.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ import_react23.default.createElement("tr", null, /* @__PURE__ */ import_react23.default.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ import_react23.default.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
+  }), actions && /* @__PURE__ */ import_react23.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react23.default.createElement("tbody", null, paginatedData.length > 0 && paginatedData.map((item) => /* @__PURE__ */ import_react23.default.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4723,7 +4725,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })())))))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
     "select",
     {
       value: pageSize,
@@ -4744,16 +4746,14 @@ function DataGrid({
         ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
       }
     },
-    /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ArrowUp, { size: 14 }), " Sort ascending"),
-    /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ArrowDown, { size: 14 }), " Sort descending"),
-    /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" }),
+    activeMenuCol?.sortable !== false && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ArrowUp, { size: 14 }), " Sort ascending"), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ArrowDown, { size: 14 }), " Sort descending"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" })),
     (() => {
-      const col = resolvedColumns.find((c) => c.field === activeMenu);
+      const col = activeMenuCol;
       if (!col) return null;
       return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
     })(),
     /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-menu-divider" }),
-    /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
+    activeMenuCol?.filterable !== false && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowAdvancedFilter(true);
       setActiveMenu(null);
     } }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 14 }), " Filter\u2026"),
@@ -4817,7 +4817,7 @@ function DataGrid({
         setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
       }
     },
-    resolvedColumns.map((c) => /* @__PURE__ */ import_react23.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.filter((c) => c.filterable !== false).map((c) => /* @__PURE__ */ import_react23.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), (() => {
     const col = resolvedColumns.find((c) => String(c.key) === f.column);
     const operators = getOperatorsForType(col?.type);
@@ -4865,7 +4865,8 @@ function DataGrid({
       className: "dg-action-btn",
       style: { alignSelf: "flex-start", marginTop: 4 },
       onClick: () => {
-        const firstCol = resolvedColumns[0];
+        const firstCol = resolvedColumns.find((c) => c.filterable !== false);
+        if (!firstCol) return;
         const defaultOp = getDefaultOperator(firstCol?.type);
         setAdvancedFilters((p) => [...p, { column: String(firstCol.key), operator: defaultOp, value: "", logic: "AND" }]);
       }
@@ -4877,7 +4878,8 @@ function DataGrid({
     {
       className: "dg-action-btn",
       onClick: () => {
-        const firstCol = resolvedColumns[0];
+        const firstCol = resolvedColumns.find((c) => c.filterable !== false);
+        if (!firstCol) return;
         setAdvancedFilters([{ column: String(firstCol.key), operator: getDefaultOperator(firstCol?.type), value: "", logic: "AND" }]);
       }
     },

package/dist/main.css

@@ -416,6 +416,10 @@
   overflow-x: auto;
   flex: 1;
 }
+.dg-table-wrap--empty {
+  display: flex;
+  flex-direction: column;
+}
 .dg-table {
   width: 100%;
   border-collapse: collapse;
@@ -880,11 +884,33 @@
   --tf-hover-border-color: var(--text-secondary);
   --tf-primary-color: var(--primary-color);
 }
-.dg-empty {
-  padding: 60px 20px;
-  text-align: center;
+.dg-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  gap: 12px;
+  position: sticky;
+  left: 0;
+  min-height: 280px;
+}
+.dg-empty-icon {
+  width: min(30%, 180px);
+  height: auto;
+}
+.dg-empty-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
   color: var(--text-secondary);
-  font-size: 0.9rem;
+}
+.dg-empty-subtitle {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  opacity: 0.65;
 }
 
 /* lib/style.css */

package/dist/main.js

@@ -4215,9 +4215,10 @@ function DataGrid({
   const menuRef = useRef9(null);
   const [showManageColumns, setShowManageColumns] = useState9(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = useState9(false);
-  const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
+  const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
+  const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = useState9([
-    { column: initialFilterCol, operator: getDefaultOperator(initialColumnsProp[0]?.type), value: "", logic: "AND" }
+    { column: initialFilterCol, operator: getDefaultOperator(filterableColumnsProp[0]?.type), value: "", logic: "AND" }
   ]);
   const [colSearch, setColSearch] = useState9("");
   useEffect9(() => {
@@ -4486,6 +4487,7 @@ function DataGrid({
     return offset2;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
+  const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
   return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React75.createElement("h2", null, title), /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
@@ -4511,7 +4513,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React75.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4553,7 +4555,7 @@ function DataGrid({
         }
       )))
     );
-  }), actions && /* @__PURE__ */ React75.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React75.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React75.createElement("tr", null, /* @__PURE__ */ React75.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React75.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
+  }), actions && /* @__PURE__ */ React75.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React75.createElement("tbody", null, paginatedData.length > 0 && paginatedData.map((item) => /* @__PURE__ */ React75.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4593,7 +4595,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })())))))), /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     "select",
     {
       value: pageSize,
@@ -4614,16 +4616,14 @@ function DataGrid({
         ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
       }
     },
-    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React75.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
-    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React75.createElement(ArrowDown, { size: 14 }), " Sort descending"),
-    /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" }),
+    activeMenuCol?.sortable !== false && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React75.createElement(ArrowUp, { size: 14 }), " Sort ascending"), /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React75.createElement(ArrowDown, { size: 14 }), " Sort descending"), /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" })),
     (() => {
-      const col = resolvedColumns.find((c) => c.field === activeMenu);
+      const col = activeMenuCol;
       if (!col) return null;
       return /* @__PURE__ */ React75.createElement(React75.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React75.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
     })(),
     /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" }),
-    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
+    activeMenuCol?.filterable !== false && /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowAdvancedFilter(true);
       setActiveMenu(null);
     } }, /* @__PURE__ */ React75.createElement(Filter, { size: 14 }), " Filter\u2026"),
@@ -4687,7 +4687,7 @@ function DataGrid({
         setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
       }
     },
-    resolvedColumns.map((c) => /* @__PURE__ */ React75.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.filter((c) => c.filterable !== false).map((c) => /* @__PURE__ */ React75.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), (() => {
     const col = resolvedColumns.find((c) => String(c.key) === f.column);
     const operators = getOperatorsForType(col?.type);
@@ -4735,7 +4735,8 @@ function DataGrid({
       className: "dg-action-btn",
       style: { alignSelf: "flex-start", marginTop: 4 },
       onClick: () => {
-        const firstCol = resolvedColumns[0];
+        const firstCol = resolvedColumns.find((c) => c.filterable !== false);
+        if (!firstCol) return;
         const defaultOp = getDefaultOperator(firstCol?.type);
         setAdvancedFilters((p) => [...p, { column: String(firstCol.key), operator: defaultOp, value: "", logic: "AND" }]);
       }
@@ -4747,7 +4748,8 @@ function DataGrid({
     {
       className: "dg-action-btn",
       onClick: () => {
-        const firstCol = resolvedColumns[0];
+        const firstCol = resolvedColumns.find((c) => c.filterable !== false);
+        if (!firstCol) return;
         setAdvancedFilters([{ column: String(firstCol.key), operator: getDefaultOperator(firstCol?.type), value: "", logic: "AND" }]);
       }
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.83",
+  "version": "0.2.84",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",