@rufous/ui 0.1.67 → 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.
@@ -37,24 +37,38 @@ module.exports = __toCommonJS(DataGrid_exports);
37
37
  var import_react = __toESM(require("react"), 1);
38
38
  var import_lucide_react = require("lucide-react");
39
39
  function DataGrid({
40
- columns: initialColumns,
40
+ columns: initialColumnsProp,
41
41
  data,
42
42
  actions,
43
43
  pageSize: initialPageSize = 10,
44
44
  pageSizeOptions = [5, 10, 25, 50],
45
45
  title
46
46
  }) {
47
- const [columns, setColumns] = (0, import_react.useState)(initialColumns);
47
+ const [columnOverrides, setColumnOverrides] = (0, import_react.useState)({});
48
+ const resolvedColumns = (0, import_react.useMemo)(() => {
49
+ return initialColumnsProp.map((col) => {
50
+ const field = String(col.field || col.key || "");
51
+ const override = columnOverrides[field] || {};
52
+ return {
53
+ ...col,
54
+ field,
55
+ headerName: col.headerName || col.header || "",
56
+ hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
57
+ pinned: override.pinned !== void 0 ? override.pinned : col.pinned
58
+ };
59
+ });
60
+ }, [initialColumnsProp, columnOverrides]);
48
61
  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
49
62
  const widths = {};
50
- initialColumns.forEach((col) => {
63
+ initialColumnsProp.forEach((col) => {
64
+ const field = String(col.field || col.key || "");
51
65
  const w = col.width || 200;
52
- widths[String(col.key)] = typeof w === "number" ? w : parseInt(w);
66
+ widths[field] = typeof w === "number" ? w : parseInt(w);
53
67
  });
54
68
  return widths;
55
69
  });
56
70
  const [pageSize, setPageSize] = (0, import_react.useState)(initialPageSize);
57
- const [sortKey, setSortKey] = (0, import_react.useState)(null);
71
+ const [sortField, setSortField] = (0, import_react.useState)(null);
58
72
  const [sortDirection, setSortDirection] = (0, import_react.useState)(null);
59
73
  const [filterText, setFilterText] = (0, import_react.useState)("");
60
74
  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
@@ -67,14 +81,15 @@ function DataGrid({
67
81
  const menuRef = (0, import_react.useRef)(null);
68
82
  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
69
83
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
84
+ const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
70
85
  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
71
- { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
86
+ { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
72
87
  ]);
73
88
  const [colSearch, setColSearch] = (0, import_react.useState)("");
74
89
  (0, import_react.useEffect)(() => {
75
90
  const handleMouseMove = (e) => {
76
91
  if (!resizingColumn) return;
77
- const col = columns.find((c) => String(c.key) === resizingColumn);
92
+ const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
78
93
  const diff = e.clientX - startX;
79
94
  const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
80
95
  const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
@@ -90,7 +105,7 @@ function DataGrid({
90
105
  document.removeEventListener("mousemove", handleMouseMove);
91
106
  document.removeEventListener("mouseup", handleMouseUp);
92
107
  };
93
- }, [resizingColumn, startX, startWidth, columns]);
108
+ }, [resizingColumn, startX, startWidth, resolvedColumns]);
94
109
  (0, import_react.useEffect)(() => {
95
110
  const handleClickOutside = (e) => {
96
111
  if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -100,32 +115,55 @@ function DataGrid({
100
115
  document.addEventListener("mousedown", handleClickOutside);
101
116
  return () => document.removeEventListener("mousedown", handleClickOutside);
102
117
  }, []);
103
- const handleSort = (key, dir) => {
118
+ (0, import_react.useEffect)(() => {
119
+ setColumnWidths((prev) => {
120
+ const next = { ...prev };
121
+ initialColumnsProp.forEach((col) => {
122
+ const field = String(col.field || col.key || "");
123
+ if (next[field] === void 0) {
124
+ const w = col.width || 200;
125
+ next[field] = typeof w === "number" ? w : parseInt(w);
126
+ }
127
+ });
128
+ return next;
129
+ });
130
+ }, [initialColumnsProp]);
131
+ const handleSort = (fieldKey, dir) => {
104
132
  if (dir !== void 0) {
105
- setSortKey(key);
133
+ setSortField(fieldKey);
106
134
  setSortDirection(dir);
107
- } else if (sortKey === key) {
135
+ } else if (sortField === fieldKey) {
108
136
  if (sortDirection === "asc") setSortDirection("desc");
109
137
  else {
110
- setSortKey(null);
138
+ setSortField(null);
111
139
  setSortDirection(null);
112
140
  }
113
141
  } else {
114
- setSortKey(key);
142
+ setSortField(fieldKey);
115
143
  setSortDirection("asc");
116
144
  }
117
145
  setActiveMenu(null);
118
146
  };
119
- const togglePin = (key, side) => {
120
- setColumns((prev) => prev.map(
121
- (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
122
- ));
147
+ const togglePin = (fieldKey, side) => {
148
+ setColumnOverrides((prev) => {
149
+ const current = prev[fieldKey] || {};
150
+ return {
151
+ ...prev,
152
+ [fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
153
+ };
154
+ });
123
155
  setActiveMenu(null);
124
156
  };
125
- const toggleHide = (key) => {
126
- setColumns((prev) => prev.map(
127
- (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
128
- ));
157
+ const toggleHide = (fieldKey) => {
158
+ setColumnOverrides((prev) => {
159
+ const current = prev[fieldKey] || {};
160
+ const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
161
+ if (col?.hideable === false) return prev;
162
+ return {
163
+ ...prev,
164
+ [fieldKey]: { ...current, hidden: !current.hidden }
165
+ };
166
+ });
129
167
  setActiveMenu(null);
130
168
  };
131
169
  const filteredData = (0, import_react.useMemo)(() => {
@@ -167,30 +205,30 @@ function DataGrid({
167
205
  });
168
206
  }, [data, filterText, advancedFilters]);
169
207
  const sortedData = (0, import_react.useMemo)(() => {
170
- if (!sortKey || !sortDirection) return filteredData;
171
- const col = columns.find((c) => c.key === sortKey);
208
+ if (!sortField || !sortDirection) return filteredData;
209
+ const col = resolvedColumns.find((c) => c.field === sortField);
172
210
  return [...filteredData].sort((a, b) => {
173
- let aVal = a[sortKey];
174
- let bVal = b[sortKey];
211
+ let aVal = a[sortField];
212
+ let bVal = b[sortField];
175
213
  if (col?.valueGetter) {
176
- aVal = col.valueGetter({ value: aVal, row: a, field: String(sortKey) });
177
- bVal = col.valueGetter({ value: bVal, row: b, field: String(sortKey) });
214
+ aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
215
+ bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
178
216
  }
179
217
  if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
180
218
  if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
181
219
  return 0;
182
220
  });
183
- }, [filteredData, sortKey, sortDirection, columns]);
221
+ }, [filteredData, sortField, sortDirection, resolvedColumns]);
184
222
  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
185
223
  const paginatedData = (0, import_react.useMemo)(() => {
186
224
  const start = (currentPage - 1) * pageSize;
187
225
  return sortedData.slice(start, start + pageSize);
188
226
  }, [sortedData, currentPage, pageSize]);
189
227
  const handleExport = () => {
190
- const visibleCols = columns.filter((c) => !c.hidden);
191
- const headers = visibleCols.map((c) => c.header).join(",");
228
+ const visibleCols = resolvedColumns.filter((c) => !c.hidden);
229
+ const headers = visibleCols.map((c) => c.headerName).join(",");
192
230
  const rows = sortedData.map(
193
- (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
231
+ (item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
194
232
  );
195
233
  const csv = [headers, ...rows].join("\n");
196
234
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
@@ -201,24 +239,24 @@ function DataGrid({
201
239
  link.click();
202
240
  document.body.removeChild(link);
203
241
  };
204
- const handleMenuOpen = (e, key) => {
242
+ const handleMenuOpen = (e, keyStr) => {
205
243
  e.stopPropagation();
206
244
  const rect = e.currentTarget.getBoundingClientRect();
207
245
  setMenuPosition({ top: rect.bottom + 4, left: rect.left });
208
- setActiveMenu(key);
246
+ setActiveMenu(keyStr);
209
247
  };
210
248
  const visibleColumns = (0, import_react.useMemo)(() => {
211
- const left = columns.filter((c) => !c.hidden && c.pinned === "left");
212
- const mid = columns.filter((c) => !c.hidden && !c.pinned);
213
- const right = columns.filter((c) => !c.hidden && c.pinned === "right");
249
+ const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
250
+ const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
251
+ const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
214
252
  return [...left, ...mid, ...right];
215
- }, [columns]);
253
+ }, [resolvedColumns]);
216
254
  const getLeftOffset = (col, idx) => {
217
255
  if (col.pinned !== "left") return void 0;
218
256
  let offset = 0;
219
257
  for (let i = 0; i < idx; i++) {
220
258
  if (visibleColumns[i].pinned === "left") {
221
- offset += columnWidths[String(visibleColumns[i].key)] || 200;
259
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
222
260
  }
223
261
  }
224
262
  return offset;
@@ -252,14 +290,14 @@ function DataGrid({
252
290
  },
253
291
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 16 })
254
292
  ), /* @__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) => {
255
- const colKey = String(col.key);
256
- const width = columnWidths[colKey] || 200;
293
+ const colField = String(col.field);
294
+ const width = columnWidths[colField] || 200;
257
295
  const leftOffset = getLeftOffset(col, idx);
258
- const isSorted = sortKey === col.key;
296
+ const isSorted = sortField === col.field;
259
297
  return /* @__PURE__ */ import_react.default.createElement(
260
298
  "th",
261
299
  {
262
- key: colKey,
300
+ key: colField,
263
301
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
264
302
  style: { width, minWidth: width, left: leftOffset, flex: col.flex }
265
303
  },
@@ -267,25 +305,25 @@ function DataGrid({
267
305
  "div",
268
306
  {
269
307
  className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
270
- onClick: () => col.sortable !== false && handleSort(col.key)
308
+ onClick: () => col.sortable !== false && handleSort(col.field || "")
271
309
  },
272
- col.header,
310
+ col.headerName,
273
311
  isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
274
312
  isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
275
313
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react.default.createElement(
276
314
  "button",
277
315
  {
278
316
  className: "dg-th-menu-btn",
279
- onClick: (e) => handleMenuOpen(e, colKey)
317
+ onClick: (e) => handleMenuOpen(e, colField)
280
318
  },
281
319
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
282
320
  ), /* @__PURE__ */ import_react.default.createElement(
283
321
  "div",
284
322
  {
285
- className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
323
+ className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
286
324
  onMouseDown: (e) => {
287
325
  e.preventDefault();
288
- setResizingColumn(colKey);
326
+ setResizingColumn(colField);
289
327
  setStartX(e.clientX);
290
328
  setStartWidth(width);
291
329
  }
@@ -293,19 +331,19 @@ function DataGrid({
293
331
  )))
294
332
  );
295
333
  }), 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) => {
296
- const colKey = String(col.key);
297
- const width = columnWidths[colKey] || 200;
334
+ const colField = String(col.field);
335
+ const width = columnWidths[colField] || 200;
298
336
  const leftOffset = getLeftOffset(col, idx);
299
337
  return /* @__PURE__ */ import_react.default.createElement(
300
338
  "td",
301
339
  {
302
- key: `${item.id}-${colKey}`,
340
+ key: `${item.id}-${colField}`,
303
341
  className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
304
342
  style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
305
343
  },
306
344
  (() => {
307
- const field = String(col.key);
308
- const rawValue = item[col.key];
345
+ const field = String(col.field);
346
+ const rawValue = item[col.field || ""];
309
347
  let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
310
348
  const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
311
349
  if (col.renderCell) {
@@ -373,7 +411,27 @@ function DataGrid({
373
411
  value: colSearch,
374
412
  onChange: (e) => setColSearch(e.target.value)
375
413
  }
376
- )), 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(
414
+ )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
415
+ const key = String(col.key);
416
+ const isUnhideable = col.hideable === false;
417
+ 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 } })));
418
+ })), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
419
+ const next = { ...prev };
420
+ resolvedColumns.forEach((c) => {
421
+ const k = String(c.key);
422
+ next[k] = { ...next[k], hidden: false };
423
+ });
424
+ return next;
425
+ }) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => {
426
+ const newOverrides = { ...columnOverrides };
427
+ resolvedColumns.forEach((c) => {
428
+ if (c.hideable !== false) {
429
+ const key = String(c.key);
430
+ newOverrides[key] = { ...newOverrides[key], hidden: true };
431
+ }
432
+ });
433
+ setColumnOverrides(newOverrides);
434
+ } }, "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(
377
435
  "button",
378
436
  {
379
437
  className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -394,7 +452,7 @@ function DataGrid({
394
452
  value: f.column,
395
453
  onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
396
454
  },
397
- columns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
455
+ resolvedColumns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
398
456
  ), /* @__PURE__ */ import_react.default.createElement(
399
457
  "select",
400
458
  {
@@ -421,7 +479,7 @@ function DataGrid({
421
479
  {
422
480
  className: "dg-action-btn",
423
481
  style: { alignSelf: "flex-start", marginTop: 4 },
424
- onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
482
+ onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
425
483
  },
426
484
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14 }),
427
485
  " Add Filter"
@@ -429,7 +487,7 @@ function DataGrid({
429
487
  "button",
430
488
  {
431
489
  className: "dg-action-btn",
432
- onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
490
+ onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
433
491
  },
434
492
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Trash2, { size: 14 }),
435
493
  " Reset"
@@ -1,7 +1,7 @@
1
1
  import "../chunk-7KRG7VNW.js";
2
2
  import {
3
3
  DataGrid
4
- } from "../chunk-IKG2B6JQ.js";
4
+ } from "../chunk-LG4EJGMI.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid
@@ -2,8 +2,10 @@ import React__default from 'react';
2
2
 
3
3
  type SortDirection = 'asc' | 'desc' | null;
4
4
  interface Column<T> {
5
- key: keyof T | string;
6
- header: string;
5
+ key?: keyof T | string;
6
+ field?: keyof T | string;
7
+ header?: string;
8
+ headerName?: string;
7
9
  sortable?: boolean;
8
10
  filterable?: boolean;
9
11
  render?: (value: any, item: T) => React__default.ReactNode;
@@ -2,8 +2,10 @@ import React__default from 'react';
2
2
 
3
3
  type SortDirection = 'asc' | 'desc' | null;
4
4
  interface Column<T> {
5
- key: keyof T | string;
6
- header: string;
5
+ key?: keyof T | string;
6
+ field?: keyof T | string;
7
+ header?: string;
8
+ headerName?: string;
7
9
  sortable?: boolean;
8
10
  filterable?: boolean;
9
11
  render?: (value: any, item: T) => React__default.ReactNode;
@@ -58,13 +58,14 @@ import "../chunk-AH6RCYDL.js";
58
58
  import "../chunk-3IBCGGN3.js";
59
59
  import "../chunk-MNPAE2ZF.js";
60
60
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GJGRMMAQ.js";
62
61
  import "../chunk-GHCM2AWR.js";
63
62
  import "../chunk-UPCMMCPQ.js";
64
- import "../chunk-7KRG7VNW.js";
63
+ import "../chunk-X357WQOT.js";
65
64
  import "../chunk-BOE27BFQ.js";
66
65
  import "../chunk-S7BNFVQO.js";
67
- import "../chunk-X357WQOT.js";
66
+ import "../chunk-7KRG7VNW.js";
67
+ import "../chunk-LG4EJGMI.js";
68
+ import "../chunk-GJGRMMAQ.js";
68
69
  import "../chunk-66HHM7VI.js";
69
70
  import "../chunk-QPGJCRBS.js";
70
71
  import "../chunk-U7SARO5B.js";
@@ -72,7 +73,6 @@ import "../chunk-BMMDUQDJ.js";
72
73
  import "../chunk-R3GARAVJ.js";
73
74
  import "../chunk-YRLN3TBF.js";
74
75
  import "../chunk-CTBYVXFP.js";
75
- import "../chunk-IKG2B6JQ.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as default
@@ -58,13 +58,14 @@ import "../chunk-AH6RCYDL.js";
58
58
  import "../chunk-3IBCGGN3.js";
59
59
  import "../chunk-MNPAE2ZF.js";
60
60
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GJGRMMAQ.js";
62
61
  import "../chunk-GHCM2AWR.js";
63
62
  import "../chunk-UPCMMCPQ.js";
64
- import "../chunk-7KRG7VNW.js";
63
+ import "../chunk-X357WQOT.js";
65
64
  import "../chunk-BOE27BFQ.js";
66
65
  import "../chunk-S7BNFVQO.js";
67
- import "../chunk-X357WQOT.js";
66
+ import "../chunk-7KRG7VNW.js";
67
+ import "../chunk-LG4EJGMI.js";
68
+ import "../chunk-GJGRMMAQ.js";
68
69
  import "../chunk-66HHM7VI.js";
69
70
  import "../chunk-QPGJCRBS.js";
70
71
  import "../chunk-U7SARO5B.js";
@@ -72,7 +73,6 @@ import "../chunk-BMMDUQDJ.js";
72
73
  import "../chunk-R3GARAVJ.js";
73
74
  import "../chunk-YRLN3TBF.js";
74
75
  import "../chunk-CTBYVXFP.js";
75
- import "../chunk-IKG2B6JQ.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as BaseDialog