@rufous/ui 0.1.68 → 0.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/DataGrid/DataGrid.cjs +113 -86
  2. package/dist/DataGrid/DataGrid.js +1 -1
  3. package/dist/DataGrid/index.cjs +113 -86
  4. package/dist/DataGrid/index.js +1 -1
  5. package/dist/Dialogs/BaseDialog.js +4 -4
  6. package/dist/Dialogs/index.js +4 -4
  7. package/dist/TextFields/AddressLookup.js +2 -2
  8. package/dist/{chunk-B6EOV25J.js → chunk-LG4EJGMI.js} +113 -86
  9. package/dist/main.cjs +113 -86
  10. package/dist/main.js +9 -9
  11. package/package.json +1 -1
  12. package/dist/{chunk-EB6MPFGC.js → chunk-GHCM2AWR.js} +3 -3
package/dist/DataGrid/DataGrid.cjs CHANGED
@@ -43,22 +43,31 @@ function DataGrid({
43
43
  pageSizeOptions = [5, 10, 25, 50],
44
44
  title
45
45
  }) {
46
- const initialColumns = (0, import_react.useMemo)(() => initialColumnsProp.map((col) => ({
47
- ...col,
48
- key: col.key || col.field || "",
49
- header: col.header || col.headerName || ""
50
- })), [initialColumnsProp]);
51
- const [columns, setColumns] = (0, import_react.useState)(initialColumns);
46
+ const [columnOverrides, setColumnOverrides] = (0, import_react.useState)({});
47
+ const resolvedColumns = (0, import_react.useMemo)(() => {
48
+ return initialColumnsProp.map((col) => {
49
+ const field = String(col.field || col.key || "");
50
+ const override = columnOverrides[field] || {};
51
+ return {
52
+ ...col,
53
+ field,
54
+ headerName: col.headerName || col.header || "",
55
+ hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
56
+ pinned: override.pinned !== void 0 ? override.pinned : col.pinned
57
+ };
58
+ });
59
+ }, [initialColumnsProp, columnOverrides]);
52
60
  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
53
61
  const widths = {};
54
- initialColumns.forEach((col) => {
62
+ initialColumnsProp.forEach((col) => {
63
+ const field = String(col.field || col.key || "");
55
64
  const w = col.width || 200;
56
- widths[String(col.key)] = typeof w === "number" ? w : parseInt(w);
65
+ widths[field] = typeof w === "number" ? w : parseInt(w);
57
66
  });
58
67
  return widths;
59
68
  });
60
69
  const [pageSize, setPageSize] = (0, import_react.useState)(initialPageSize);
61
- const [sortKey, setSortKey] = (0, import_react.useState)(null);
70
+ const [sortField, setSortField] = (0, import_react.useState)(null);
62
71
  const [sortDirection, setSortDirection] = (0, import_react.useState)(null);
63
72
  const [filterText, setFilterText] = (0, import_react.useState)("");
64
73
  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
@@ -71,40 +80,15 @@ function DataGrid({
71
80
  const menuRef = (0, import_react.useRef)(null);
72
81
  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
73
82
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
83
+ const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
74
84
  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
75
- { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
85
+ { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
76
86
  ]);
77
- (0, import_react.useEffect)(() => {
78
- setColumns((prevColumns) => {
79
- return initialColumns.map((newCol) => {
80
- const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
81
- if (!prevCol) return newCol;
82
- return {
83
- ...newCol,
84
- hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
85
- pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
86
- };
87
- });
88
- });
89
- }, [initialColumns]);
90
- (0, import_react.useEffect)(() => {
91
- setColumnWidths((prev) => {
92
- const next = { ...prev };
93
- initialColumns.forEach((col) => {
94
- const key = String(col.key);
95
- if (next[key] === void 0) {
96
- const w = col.width || 200;
97
- next[key] = typeof w === "number" ? w : parseInt(w);
98
- }
99
- });
100
- return next;
101
- });
102
- }, [initialColumns]);
103
87
  const [colSearch, setColSearch] = (0, import_react.useState)("");
104
88
  (0, import_react.useEffect)(() => {
105
89
  const handleMouseMove = (e) => {
106
90
  if (!resizingColumn) return;
107
- const col = columns.find((c) => String(c.key) === resizingColumn);
91
+ const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
108
92
  const diff = e.clientX - startX;
109
93
  const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
110
94
  const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
@@ -120,7 +104,7 @@ function DataGrid({
120
104
  document.removeEventListener("mousemove", handleMouseMove);
121
105
  document.removeEventListener("mouseup", handleMouseUp);
122
106
  };
123
- }, [resizingColumn, startX, startWidth, columns]);
107
+ }, [resizingColumn, startX, startWidth, resolvedColumns]);
124
108
  (0, import_react.useEffect)(() => {
125
109
  const handleClickOutside = (e) => {
126
110
  if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -130,32 +114,55 @@ function DataGrid({
130
114
  document.addEventListener("mousedown", handleClickOutside);
131
115
  return () => document.removeEventListener("mousedown", handleClickOutside);
132
116
  }, []);
133
- const handleSort = (key, dir) => {
117
+ (0, import_react.useEffect)(() => {
118
+ setColumnWidths((prev) => {
119
+ const next = { ...prev };
120
+ initialColumnsProp.forEach((col) => {
121
+ const field = String(col.field || col.key || "");
122
+ if (next[field] === void 0) {
123
+ const w = col.width || 200;
124
+ next[field] = typeof w === "number" ? w : parseInt(w);
125
+ }
126
+ });
127
+ return next;
128
+ });
129
+ }, [initialColumnsProp]);
130
+ const handleSort = (fieldKey, dir) => {
134
131
  if (dir !== void 0) {
135
- setSortKey(key);
132
+ setSortField(fieldKey);
136
133
  setSortDirection(dir);
137
- } else if (sortKey === key) {
134
+ } else if (sortField === fieldKey) {
138
135
  if (sortDirection === "asc") setSortDirection("desc");
139
136
  else {
140
- setSortKey(null);
137
+ setSortField(null);
141
138
  setSortDirection(null);
142
139
  }
143
140
  } else {
144
- setSortKey(key);
141
+ setSortField(fieldKey);
145
142
  setSortDirection("asc");
146
143
  }
147
144
  setActiveMenu(null);
148
145
  };
149
- const togglePin = (key, side) => {
150
- setColumns((prev) => prev.map(
151
- (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
152
- ));
146
+ const togglePin = (fieldKey, side) => {
147
+ setColumnOverrides((prev) => {
148
+ const current = prev[fieldKey] || {};
149
+ return {
150
+ ...prev,
151
+ [fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
152
+ };
153
+ });
153
154
  setActiveMenu(null);
154
155
  };
155
- const toggleHide = (key) => {
156
- setColumns((prev) => prev.map(
157
- (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
158
- ));
156
+ const toggleHide = (fieldKey) => {
157
+ setColumnOverrides((prev) => {
158
+ const current = prev[fieldKey] || {};
159
+ const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
160
+ if (col?.hideable === false) return prev;
161
+ return {
162
+ ...prev,
163
+ [fieldKey]: { ...current, hidden: !current.hidden }
164
+ };
165
+ });
159
166
  setActiveMenu(null);
160
167
  };
161
168
  const filteredData = (0, import_react.useMemo)(() => {
@@ -197,30 +204,30 @@ function DataGrid({
197
204
  });
198
205
  }, [data, filterText, advancedFilters]);
199
206
  const sortedData = (0, import_react.useMemo)(() => {
200
- if (!sortKey || !sortDirection) return filteredData;
201
- const col = columns.find((c) => c.key === sortKey);
207
+ if (!sortField || !sortDirection) return filteredData;
208
+ const col = resolvedColumns.find((c) => c.field === sortField);
202
209
  return [...filteredData].sort((a, b) => {
203
- let aVal = a[sortKey];
204
- let bVal = b[sortKey];
210
+ let aVal = a[sortField];
211
+ let bVal = b[sortField];
205
212
  if (col?.valueGetter) {
206
- aVal = col.valueGetter({ value: aVal, row: a, field: String(sortKey) });
207
- bVal = col.valueGetter({ value: bVal, row: b, field: String(sortKey) });
213
+ aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
214
+ bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
208
215
  }
209
216
  if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
210
217
  if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
211
218
  return 0;
212
219
  });
213
- }, [filteredData, sortKey, sortDirection, columns]);
220
+ }, [filteredData, sortField, sortDirection, resolvedColumns]);
214
221
  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
215
222
  const paginatedData = (0, import_react.useMemo)(() => {
216
223
  const start = (currentPage - 1) * pageSize;
217
224
  return sortedData.slice(start, start + pageSize);
218
225
  }, [sortedData, currentPage, pageSize]);
219
226
  const handleExport = () => {
220
- const visibleCols = columns.filter((c) => !c.hidden);
221
- const headers = visibleCols.map((c) => c.header).join(",");
227
+ const visibleCols = resolvedColumns.filter((c) => !c.hidden);
228
+ const headers = visibleCols.map((c) => c.headerName).join(",");
222
229
  const rows = sortedData.map(
223
- (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
230
+ (item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
224
231
  );
225
232
  const csv = [headers, ...rows].join("\n");
226
233
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
@@ -231,24 +238,24 @@ function DataGrid({
231
238
  link.click();
232
239
  document.body.removeChild(link);
233
240
  };
234
- const handleMenuOpen = (e, key) => {
241
+ const handleMenuOpen = (e, keyStr) => {
235
242
  e.stopPropagation();
236
243
  const rect = e.currentTarget.getBoundingClientRect();
237
244
  setMenuPosition({ top: rect.bottom + 4, left: rect.left });
238
- setActiveMenu(key);
245
+ setActiveMenu(keyStr);
239
246
  };
240
247
  const visibleColumns = (0, import_react.useMemo)(() => {
241
- const left = columns.filter((c) => !c.hidden && c.pinned === "left");
242
- const mid = columns.filter((c) => !c.hidden && !c.pinned);
243
- const right = columns.filter((c) => !c.hidden && c.pinned === "right");
248
+ const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
249
+ const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
250
+ const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
244
251
  return [...left, ...mid, ...right];
245
- }, [columns]);
252
+ }, [resolvedColumns]);
246
253
  const getLeftOffset = (col, idx) => {
247
254
  if (col.pinned !== "left") return void 0;
248
255
  let offset = 0;
249
256
  for (let i = 0; i < idx; i++) {
250
257
  if (visibleColumns[i].pinned === "left") {
251
- offset += columnWidths[String(visibleColumns[i].key)] || 200;
258
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
252
259
  }
253
260
  }
254
261
  return offset;
@@ -282,14 +289,14 @@ function DataGrid({
282
289
  },
283
290
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 16 })
284
291
  ), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, visibleColumns.map((col, idx) => {
285
- const colKey = String(col.key);
286
- const width = columnWidths[colKey] || 200;
292
+ const colField = String(col.field);
293
+ const width = columnWidths[colField] || 200;
287
294
  const leftOffset = getLeftOffset(col, idx);
288
- const isSorted = sortKey === col.key;
295
+ const isSorted = sortField === col.field;
289
296
  return /* @__PURE__ */ import_react.default.createElement(
290
297
  "th",
291
298
  {
292
- key: colKey,
299
+ key: colField,
293
300
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
294
301
  style: { width, minWidth: width, left: leftOffset, flex: col.flex }
295
302
  },
@@ -297,25 +304,25 @@ function DataGrid({
297
304
  "div",
298
305
  {
299
306
  className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
300
- onClick: () => col.sortable !== false && handleSort(col.key)
307
+ onClick: () => col.sortable !== false && handleSort(col.field || "")
301
308
  },
302
- col.header,
309
+ col.headerName,
303
310
  isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
304
311
  isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
305
312
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react.default.createElement(
306
313
  "button",
307
314
  {
308
315
  className: "dg-th-menu-btn",
309
- onClick: (e) => handleMenuOpen(e, colKey)
316
+ onClick: (e) => handleMenuOpen(e, colField)
310
317
  },
311
318
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
312
319
  ), /* @__PURE__ */ import_react.default.createElement(
313
320
  "div",
314
321
  {
315
- className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
322
+ className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
316
323
  onMouseDown: (e) => {
317
324
  e.preventDefault();
318
- setResizingColumn(colKey);
325
+ setResizingColumn(colField);
319
326
  setStartX(e.clientX);
320
327
  setStartWidth(width);
321
328
  }
@@ -323,19 +330,19 @@ function DataGrid({
323
330
  )))
324
331
  );
325
332
  }), actions && /* @__PURE__ */ import_react.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react.default.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ import_react.default.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
326
- const colKey = String(col.key);
327
- const width = columnWidths[colKey] || 200;
333
+ const colField = String(col.field);
334
+ const width = columnWidths[colField] || 200;
328
335
  const leftOffset = getLeftOffset(col, idx);
329
336
  return /* @__PURE__ */ import_react.default.createElement(
330
337
  "td",
331
338
  {
332
- key: `${item.id}-${colKey}`,
339
+ key: `${item.id}-${colField}`,
333
340
  className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
334
341
  style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
335
342
  },
336
343
  (() => {
337
- const field = String(col.key);
338
- const rawValue = item[col.key];
344
+ const field = String(col.field);
345
+ const rawValue = item[col.field || ""];
339
346
  let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
340
347
  const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
341
348
  if (col.renderCell) {
@@ -403,7 +410,27 @@ function DataGrid({
403
410
  value: colSearch,
404
411
  onChange: (e) => setColSearch(e.target.value)
405
412
  }
406
- )), columns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase()) && c.hideable !== false).map((col) => /* @__PURE__ */ import_react.default.createElement("div", { key: String(col.key), className: "dg-col-row" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(String(col.key)) }, col.hidden ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } }))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: false }))) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => c.hideable !== false ? { ...c, hidden: true } : c)) }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react.default.createElement(
413
+ )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
414
+ const key = String(col.key);
415
+ const isUnhideable = col.hideable === false;
416
+ return /* @__PURE__ */ import_react.default.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } })));
417
+ })), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
418
+ const next = { ...prev };
419
+ resolvedColumns.forEach((c) => {
420
+ const k = String(c.key);
421
+ next[k] = { ...next[k], hidden: false };
422
+ });
423
+ return next;
424
+ }) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => {
425
+ const newOverrides = { ...columnOverrides };
426
+ resolvedColumns.forEach((c) => {
427
+ if (c.hideable !== false) {
428
+ const key = String(c.key);
429
+ newOverrides[key] = { ...newOverrides[key], hidden: true };
430
+ }
431
+ });
432
+ setColumnOverrides(newOverrides);
433
+ } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react.default.createElement(
407
434
  "button",
408
435
  {
409
436
  className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -424,7 +451,7 @@ function DataGrid({
424
451
  value: f.column,
425
452
  onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
426
453
  },
427
- columns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
454
+ resolvedColumns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
428
455
  ), /* @__PURE__ */ import_react.default.createElement(
429
456
  "select",
430
457
  {
@@ -451,7 +478,7 @@ function DataGrid({
451
478
  {
452
479
  className: "dg-action-btn",
453
480
  style: { alignSelf: "flex-start", marginTop: 4 },
454
- onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
481
+ onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
455
482
  },
456
483
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14 }),
457
484
  " Add Filter"
@@ -459,7 +486,7 @@ function DataGrid({
459
486
  "button",
460
487
  {
461
488
  className: "dg-action-btn",
462
- onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
489
+ onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
463
490
  },
464
491
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Trash2, { size: 14 }),
465
492
  " Reset"
package/dist/DataGrid/DataGrid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  DataGrid,
3
3
  DataGrid_default
4
- } from "../chunk-B6EOV25J.js";
4
+ } from "../chunk-LG4EJGMI.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid,