@vesture/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1079,25 +1079,79 @@ function Alert({
 }
 
 // src/components/DataGrid/DataGrid.tsx
-import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
 
 // src/components/DataGrid/DataGrid.css.ts
-var body3 = "DataGrid_body__7xivx76";
-var cell = "DataGrid_cell__7xivx78";
-var checkboxCell = "DataGrid_checkboxCell__7xivx79";
-var container = "DataGrid_container__7xivx70";
-var emptyState = "DataGrid_emptyState__7xivx7a";
-var headerButton = "DataGrid_headerButton__7xivx73";
-var headerCell = "DataGrid_headerCell__7xivx72";
-var headerRow = "DataGrid_headerRow__7xivx71";
-var resizeHandle = "DataGrid_resizeHandle__7xivx75";
-var row = "DataGrid_row__7xivx77";
-var sortIcon = "DataGrid_sortIcon__7xivx74";
+var actionsCell = "DataGrid_actionsCell__7xivx7g";
+var body3 = "DataGrid_body__7xivx77";
+var cell = "DataGrid_cell__7xivx79";
+var checkboxCell = "DataGrid_checkboxCell__7xivx7a";
+var container = "DataGrid_container__7xivx71";
+var editInput = "DataGrid_editInput__7xivx7o";
+var emptyState = "DataGrid_emptyState__7xivx7b";
+var filterCell = "DataGrid_filterCell__7xivx7j";
+var filterInput = "DataGrid_filterInput__7xivx7k";
+var filterRow = "DataGrid_filterRow__7xivx7i";
+var gridWrapper = "DataGrid_gridWrapper__7xivx7l";
+var headerButton = "DataGrid_headerButton__7xivx74";
+var headerCell = "DataGrid_headerCell__7xivx73";
+var headerRow = "DataGrid_headerRow__7xivx72";
+var iconButton = "DataGrid_iconButton__7xivx7h";
+var loadingOverlay = "DataGrid_loadingOverlay__7xivx7m";
+var paginationFooter = "DataGrid_paginationFooter__7xivx7n";
+var pinnedCell = "DataGrid_pinnedCell__7xivx7c";
+var pinnedHeaderCell = "DataGrid_pinnedHeaderCell__7xivx7d";
+var pinnedLeftEdge = "DataGrid_pinnedLeftEdge__7xivx7e";
+var pinnedRightEdge = "DataGrid_pinnedRightEdge__7xivx7f";
+var resizeHandle = "DataGrid_resizeHandle__7xivx76";
+var row = "DataGrid_row__7xivx78";
+var sortIcon = "DataGrid_sortIcon__7xivx75";
+var srOnly2 = "DataGrid_srOnly__7xivx70";
 
 // src/components/DataGrid/DataGrid.tsx
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_COLUMN_WIDTH = 160;
 var CHECKBOX_COLUMN_WIDTH = 44;
+var ACTIONS_COLUMN_WIDTH = 72;
+var FILTER_DEBOUNCE_MS = 200;
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = useState8(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+function FilterTextInput({
+  value,
+  onChange,
+  ...rest
+}) {
+  const [draft, setDraft] = useState8(value);
+  const debounced = useDebouncedValue(draft, FILTER_DEBOUNCE_MS);
+  const onChangeRef = useRef3(onChange);
+  onChangeRef.current = onChange;
+  const mounted = useRef3(false);
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    onChangeRef.current(debounced);
+  }, [debounced]);
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx34(
+    "input",
+    {
+      type: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      ...rest
+    }
+  );
+}
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") {
     return a - b;
@@ -1122,15 +1176,35 @@ function DataGrid({
   onSelectionChange,
   sort: controlledSort,
   onSortChange,
-  emptyMessage = "No data"
+  filters: controlledFilters,
+  onFilterChange,
+  emptyMessage = "No data",
+  onRowEdit,
+  serverSide = false,
+  loading = false,
+  totalRowCount,
+  page,
+  pageSize,
+  onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = useState8(null);
+  const [uncontrolledSort, setUncontrolledSort] = useState8(
+    null
+  );
+  const [uncontrolledFilters, setUncontrolledFilters] = useState8(
+    []
+  );
   const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState8(() => /* @__PURE__ */ new Set());
   const [columnWidths, setColumnWidths] = useState8(
-    () => Object.fromEntries(columns.map((c) => [c.key, c.width ?? DEFAULT_COLUMN_WIDTH]))
+    () => Object.fromEntries(
+      columns.map((c) => [c.key, c.width ?? DEFAULT_COLUMN_WIDTH])
+    )
   );
   const [scrollTop, setScrollTop] = useState8(0);
+  const [editingRowId, setEditingRowId] = useState8(null);
+  const [editDraft, setEditDraft] = useState8({});
+  const editingEnabled = Boolean(onRowEdit);
   const sort = controlledSort !== void 0 ? controlledSort : uncontrolledSort;
+  const filters = controlledFilters !== void 0 ? controlledFilters : uncontrolledFilters;
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const setSort = (next) => {
     if (controlledSort === void 0) {
@@ -1138,6 +1212,17 @@ function DataGrid({
     }
     onSortChange?.(next);
   };
+  const setFilters = (next) => {
+    if (controlledFilters === void 0) {
+      setUncontrolledFilters(next);
+    }
+    onFilterChange?.(next);
+  };
+  const handleFilterChange = (key, value) => {
+    const next = value ? [...filters.filter((f) => f.key !== key), { key, value }] : filters.filter((f) => f.key !== key);
+    setFilters(next);
+  };
+  const getFilterValue = (key) => filters.find((f) => f.key === key)?.value ?? "";
   const setSelectedIds = (next) => {
     if (controlledSelectedIds === void 0) {
       setUncontrolledSelectedIds(next);
@@ -1154,17 +1239,50 @@ function DataGrid({
       setSort(null);
     }
   };
+  const filteredData = useMemo2(() => {
+    if (serverSide || filters.length === 0) {
+      return data;
+    }
+    return data.filter(
+      (row2) => filters.every((f) => {
+        if (!f.value) return true;
+        const column = columns.find((c) => c.key === f.key);
+        if (!column) return true;
+        const cellValue = String(getCellValue(column, row2) ?? "").toLowerCase();
+        return cellValue.includes(f.value.toLowerCase());
+      })
+    );
+  }, [data, filters, columns, serverSide]);
   const sortedData = useMemo2(() => {
-    if (!sort || !sort.direction) {
+    if (serverSide) {
       return data;
     }
+    if (!sort || !sort.direction) {
+      return filteredData;
+    }
     const column = columns.find((c) => c.key === sort.key);
     if (!column) {
-      return data;
+      return filteredData;
     }
-    const sorted = [...data].sort((a, b) => compareValues(getCellValue(column, a), getCellValue(column, b)));
+    const sorted = [...filteredData].sort(
+      (a, b) => compareValues(getCellValue(column, a), getCellValue(column, b))
+    );
     return sort.direction === "desc" ? sorted.reverse() : sorted;
-  }, [data, sort, columns]);
+  }, [filteredData, sort, columns, serverSide, data]);
+  const selectFilterOptions = useMemo2(() => {
+    const map = {};
+    for (const column of columns) {
+      if (!column.filterable || column.filterType !== "select") continue;
+      const values = /* @__PURE__ */ new Set();
+      for (const row2 of data) {
+        values.add(String(getCellValue(column, row2) ?? ""));
+      }
+      map[column.key] = Array.from(values).sort();
+    }
+    return map;
+  }, [columns, data]);
+  const hasFilterableColumns = columns.some((c) => c.filterable);
+  const showPagination = page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
   const allSelected = sortedData.length > 0 && sortedData.every((r) => selectedIds.has(getRowId(r)));
   const someSelected = !allSelected && sortedData.some((r) => selectedIds.has(getRowId(r)));
   const toggleAll = () => {
@@ -1199,109 +1317,399 @@ function DataGrid({
     },
     [columnWidths]
   );
-  const handleResizeMove = useCallback2((event) => {
-    const state = resizeState.current;
-    if (!state) return;
-    const delta = event.clientX - state.startX;
-    const minWidth = columns.find((c) => c.key === state.key)?.minWidth ?? 60;
-    const nextWidth = Math.max(minWidth, state.startWidth + delta);
-    setColumnWidths((prev) => ({ ...prev, [state.key]: nextWidth }));
-  }, [columns]);
-  const handleResizeEnd = useCallback2((event) => {
-    resizeState.current = null;
-    event.currentTarget.releasePointerCapture(event.pointerId);
-  }, []);
+  const handleResizeMove = useCallback2(
+    (event) => {
+      const state = resizeState.current;
+      if (!state) return;
+      const delta = event.clientX - state.startX;
+      const minWidth = columns.find((c) => c.key === state.key)?.minWidth ?? 60;
+      const nextWidth = Math.max(minWidth, state.startWidth + delta);
+      setColumnWidths((prev) => ({ ...prev, [state.key]: nextWidth }));
+    },
+    [columns]
+  );
+  const handleResizeEnd = useCallback2(
+    (event) => {
+      resizeState.current = null;
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    },
+    []
+  );
+  const widthOf = useCallback2(
+    (column) => columnWidths[column.key] ?? column.width ?? DEFAULT_COLUMN_WIDTH,
+    [columnWidths]
+  );
+  const layout = useMemo2(() => {
+    const leftPinned = columns.filter((c) => c.pinned === "left");
+    const rightPinned = columns.filter((c) => c.pinned === "right");
+    const middle = columns.filter((c) => !c.pinned);
+    const ordered = [...leftPinned, ...middle, ...rightPinned];
+    const leftOffsets = /* @__PURE__ */ new Map();
+    let leftAcc = selectable ? CHECKBOX_COLUMN_WIDTH : 0;
+    for (const column of leftPinned) {
+      leftOffsets.set(column.key, leftAcc);
+      leftAcc += widthOf(column);
+    }
+    const rightOffsets = /* @__PURE__ */ new Map();
+    let rightAcc = editingEnabled ? ACTIONS_COLUMN_WIDTH : 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const column = rightPinned[i];
+      rightOffsets.set(column.key, rightAcc);
+      rightAcc += widthOf(column);
+    }
+    return {
+      ordered,
+      leftOffsets,
+      rightOffsets,
+      lastLeftKey: leftPinned[leftPinned.length - 1]?.key,
+      firstRightKey: rightPinned[0]?.key
+    };
+  }, [columns, selectable, editingEnabled, widthOf]);
+  const pinnedStyle = (column) => {
+    if (column.pinned === "left" && layout.leftOffsets.has(column.key)) {
+      return { left: layout.leftOffsets.get(column.key) };
+    }
+    if (column.pinned === "right" && layout.rightOffsets.has(column.key)) {
+      return { right: layout.rightOffsets.get(column.key) };
+    }
+    return void 0;
+  };
+  const pinnedClass = (column) => {
+    const classes = [];
+    if (column.pinned) {
+      classes.push(pinnedCell);
+      if (column.key === layout.lastLeftKey) classes.push(pinnedLeftEdge);
+      if (column.key === layout.firstRightKey) classes.push(pinnedRightEdge);
+    }
+    return classes.join(" ");
+  };
+  const headerPinnedClass = (column) => {
+    const classes = [];
+    if (column.pinned) {
+      classes.push(pinnedHeaderCell);
+      if (column.key === layout.lastLeftKey) classes.push(pinnedLeftEdge);
+      if (column.key === layout.firstRightKey) classes.push(pinnedRightEdge);
+    }
+    return classes.join(" ");
+  };
+  const startEditing = (rowData) => {
+    const id = getRowId(rowData);
+    const draft = {};
+    for (const column of columns) {
+      if (column.editable) {
+        draft[column.key] = String(getCellValue(column, rowData) ?? "");
+      }
+    }
+    setEditDraft(draft);
+    setEditingRowId(id);
+  };
+  const cancelEditing = () => {
+    setEditingRowId(null);
+    setEditDraft({});
+  };
+  const saveEditing = () => {
+    if (editingRowId) {
+      onRowEdit?.(editingRowId, editDraft);
+    }
+    setEditingRowId(null);
+    setEditDraft({});
+  };
   const totalHeight = sortedData.length * rowHeight;
   const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
   const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
   const endIndex = Math.min(sortedData.length, startIndex + visibleCount);
   const visibleRows = sortedData.slice(startIndex, endIndex);
-  const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + (columnWidths[c.key] ?? DEFAULT_COLUMN_WIDTH), 0);
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      className: container,
-      style: { height },
-      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-      role: "table",
-      children: [
-        /* @__PURE__ */ jsxs17("div", { className: headerRow, style: { width: totalWidth, minWidth: "100%" }, role: "row", children: [
-          selectable ? /* @__PURE__ */ jsx34("div", { className: checkboxCell, role: "columnheader", children: /* @__PURE__ */ jsx34(
-            "input",
-            {
-              type: "checkbox",
-              checked: allSelected,
-              ref: (el) => {
-                if (el) el.indeterminate = someSelected;
-              },
-              onChange: toggleAll,
-              "aria-label": "Select all rows"
-            }
-          ) }) : null,
-          columns.map((column) => {
-            const width = columnWidths[column.key] ?? DEFAULT_COLUMN_WIDTH;
-            const isSorted = sort?.key === column.key;
-            const direction2 = isSorted ? sort.direction : null;
-            return /* @__PURE__ */ jsxs17(
+  const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + (editingEnabled ? ACTIONS_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + widthOf(c), 0);
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: gridWrapper, children: [
+      /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: container,
+          style: { height },
+          onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+          role: "table",
+          children: [
+            /* @__PURE__ */ jsxs17(
               "div",
               {
-                className: headerCell,
-                style: { width },
-                role: "columnheader",
-                "aria-sort": direction2 === "asc" ? "ascending" : direction2 === "desc" ? "descending" : "none",
+                className: headerRow,
+                style: { width: totalWidth, minWidth: "100%" },
+                role: "row",
                 children: [
-                  column.sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: headerButton, onClick: () => handleSortClick(column), children: [
-                    column.header,
-                    /* @__PURE__ */ jsx34("span", { className: sortIcon, "aria-hidden": "true", children: direction2 === "asc" ? "\u25B2" : direction2 === "desc" ? "\u25BC" : "" })
-                  ] }) : column.header,
-                  column.resizable !== false ? /* @__PURE__ */ jsx34(
+                  selectable ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [checkboxCell, pinnedHeaderCell].join(" "),
+                      style: { left: 0 },
+                      role: "columnheader",
+                      children: /* @__PURE__ */ jsx34(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: allSelected,
+                          ref: (el) => {
+                            if (el) el.indeterminate = someSelected;
+                          },
+                          onChange: toggleAll,
+                          "aria-label": "Select all rows"
+                        }
+                      )
+                    }
+                  ) : null,
+                  layout.ordered.map((column) => {
+                    const width = widthOf(column);
+                    const isSorted = sort?.key === column.key;
+                    const direction2 = isSorted ? sort.direction : null;
+                    return /* @__PURE__ */ jsxs17(
+                      "div",
+                      {
+                        className: [headerCell, headerPinnedClass(column)].filter(Boolean).join(" "),
+                        style: { width, ...pinnedStyle(column) },
+                        role: "columnheader",
+                        "aria-sort": direction2 === "asc" ? "ascending" : direction2 === "desc" ? "descending" : "none",
+                        children: [
+                          column.sortable ? /* @__PURE__ */ jsxs17(
+                            "button",
+                            {
+                              type: "button",
+                              className: headerButton,
+                              onClick: () => handleSortClick(column),
+                              children: [
+                                column.header,
+                                /* @__PURE__ */ jsx34("span", { className: sortIcon, "aria-hidden": "true", children: direction2 === "asc" ? "\u25B2" : direction2 === "desc" ? "\u25BC" : "" })
+                              ]
+                            }
+                          ) : column.header,
+                          column.resizable !== false ? /* @__PURE__ */ jsx34(
+                            "div",
+                            {
+                              className: resizeHandle,
+                              onPointerDown: (e) => handleResizeStart(e, column),
+                              onPointerMove: handleResizeMove,
+                              onPointerUp: handleResizeEnd,
+                              role: "separator",
+                              "aria-orientation": "vertical",
+                              "aria-label": `Resize ${String(column.header)} column`
+                            }
+                          ) : null
+                        ]
+                      },
+                      column.key
+                    );
+                  }),
+                  editingEnabled ? /* @__PURE__ */ jsx34(
                     "div",
                     {
-                      className: resizeHandle,
-                      onPointerDown: (e) => handleResizeStart(e, column),
-                      onPointerMove: handleResizeMove,
-                      onPointerUp: handleResizeEnd,
-                      role: "separator",
-                      "aria-orientation": "vertical",
-                      "aria-label": `Resize ${String(column.header)} column`
+                      className: [actionsCell, pinnedHeaderCell].join(" "),
+                      style: { right: 0 },
+                      role: "columnheader",
+                      children: /* @__PURE__ */ jsx34("span", { className: srOnly2, children: "Actions" })
                     }
                   ) : null
                 ]
-              },
-              column.key
-            );
-          })
-        ] }),
-        sortedData.length === 0 ? /* @__PURE__ */ jsx34("div", { className: emptyState, children: emptyMessage }) : /* @__PURE__ */ jsx34("div", { className: body3, style: { height: totalHeight, width: totalWidth, minWidth: "100%" }, children: visibleRows.map((rowData, i) => {
-          const index = startIndex + i;
-          const id = getRowId(rowData);
-          const isSelected = selectedIds.has(id);
-          const style = { top: index * rowHeight, height: rowHeight, width: totalWidth };
-          return /* @__PURE__ */ jsxs17("div", { className: row, style, role: "row", "data-selected": isSelected || void 0, children: [
-            selectable ? /* @__PURE__ */ jsx34("div", { className: checkboxCell, role: "cell", children: /* @__PURE__ */ jsx34(
-              "input",
+              }
+            ),
+            hasFilterableColumns ? /* @__PURE__ */ jsxs17(
+              "div",
               {
-                type: "checkbox",
-                checked: isSelected,
-                onChange: () => toggleRow(id),
-                "aria-label": `Select row ${index + 1}`
+                className: filterRow,
+                style: { width: totalWidth, minWidth: "100%" },
+                role: "row",
+                children: [
+                  selectable ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [checkboxCell, pinnedHeaderCell].join(" "),
+                      style: { left: 0 },
+                      role: "cell"
+                    }
+                  ) : null,
+                  layout.ordered.map((column) => {
+                    const width = widthOf(column);
+                    return /* @__PURE__ */ jsx34(
+                      "div",
+                      {
+                        className: [filterCell, headerPinnedClass(column)].filter(Boolean).join(" "),
+                        style: { width, ...pinnedStyle(column) },
+                        role: "cell",
+                        children: column.filterable ? column.filterType === "select" ? /* @__PURE__ */ jsxs17(
+                          "select",
+                          {
+                            className: filterInput,
+                            value: getFilterValue(column.key),
+                            onChange: (e) => handleFilterChange(column.key, e.target.value),
+                            "aria-label": `Filter ${String(column.header)}`,
+                            children: [
+                              /* @__PURE__ */ jsx34("option", { value: "", children: "All" }),
+                              (selectFilterOptions[column.key] ?? []).map(
+                                (value) => /* @__PURE__ */ jsx34("option", { value, children: value }, value)
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx34(
+                          FilterTextInput,
+                          {
+                            className: filterInput,
+                            value: getFilterValue(column.key),
+                            onChange: (value) => handleFilterChange(column.key, value),
+                            placeholder: `Filter ${String(column.header)}`,
+                            "aria-label": `Filter ${String(column.header)}`
+                          }
+                        ) : null
+                      },
+                      column.key
+                    );
+                  }),
+                  editingEnabled ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [actionsCell, pinnedHeaderCell].join(" "),
+                      style: { right: 0 },
+                      role: "cell"
+                    }
+                  ) : null
+                ]
               }
-            ) }) : null,
-            columns.map((column) => /* @__PURE__ */ jsx34(
+            ) : null,
+            sortedData.length === 0 ? /* @__PURE__ */ jsx34("div", { className: emptyState, children: emptyMessage }) : /* @__PURE__ */ jsx34(
               "div",
               {
-                className: cell,
-                style: { width: columnWidths[column.key] ?? DEFAULT_COLUMN_WIDTH },
-                role: "cell",
-                children: column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
-              },
-              column.key
-            ))
-          ] }, id);
-        }) })
-      ]
-    }
-  );
+                className: body3,
+                style: {
+                  height: totalHeight,
+                  width: totalWidth,
+                  minWidth: "100%"
+                },
+                children: visibleRows.map((rowData, i) => {
+                  const index = startIndex + i;
+                  const id = getRowId(rowData);
+                  const isSelected = selectedIds.has(id);
+                  const isEditing = editingRowId === id;
+                  const style = {
+                    top: index * rowHeight,
+                    height: rowHeight,
+                    width: totalWidth
+                  };
+                  return /* @__PURE__ */ jsxs17(
+                    "div",
+                    {
+                      className: row,
+                      style,
+                      role: "row",
+                      "data-selected": isSelected || void 0,
+                      "data-editing": isEditing || void 0,
+                      children: [
+                        selectable ? /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [checkboxCell, pinnedCell].join(" "),
+                            style: { left: 0 },
+                            role: "cell",
+                            children: /* @__PURE__ */ jsx34(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: isSelected,
+                                onChange: () => toggleRow(id),
+                                "aria-label": `Select row ${index + 1}`
+                              }
+                            )
+                          }
+                        ) : null,
+                        layout.ordered.map((column) => /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [cell, pinnedClass(column)].filter(Boolean).join(" "),
+                            style: {
+                              width: widthOf(column),
+                              ...pinnedStyle(column)
+                            },
+                            role: "cell",
+                            children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
+                              "input",
+                              {
+                                type: "text",
+                                className: editInput,
+                                value: editDraft[column.key] ?? "",
+                                onChange: (e) => setEditDraft((prev) => ({
+                                  ...prev,
+                                  [column.key]: e.target.value
+                                })),
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter") saveEditing();
+                                  if (e.key === "Escape") cancelEditing();
+                                },
+                                "aria-label": `Edit ${String(column.header)}`,
+                                autoFocus: column.key === columns.find((c) => c.editable)?.key
+                              }
+                            ) : column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
+                          },
+                          column.key
+                        )),
+                        editingEnabled ? /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [actionsCell, pinnedCell].join(" "),
+                            style: { right: 0 },
+                            role: "cell",
+                            children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                              /* @__PURE__ */ jsx34(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: iconButton,
+                                  onClick: saveEditing,
+                                  "aria-label": `Save row ${index + 1}`,
+                                  children: "\u2713"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx34(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: iconButton,
+                                  onClick: cancelEditing,
+                                  "aria-label": `Cancel editing row ${index + 1}`,
+                                  children: "\u2715"
+                                }
+                              )
+                            ] }) : /* @__PURE__ */ jsx34(
+                              "button",
+                              {
+                                type: "button",
+                                className: iconButton,
+                                onClick: () => startEditing(rowData),
+                                "aria-label": `Edit row ${index + 1}`,
+                                children: "\u270E"
+                              }
+                            )
+                          }
+                        ) : null
+                      ]
+                    },
+                    id
+                  );
+                })
+              }
+            )
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx34("div", { className: loadingOverlay, children: /* @__PURE__ */ jsx34(Spinner, { size: "md" }) }) : null
+    ] }),
+    showPagination ? /* @__PURE__ */ jsx34("div", { className: paginationFooter, children: /* @__PURE__ */ jsx34(
+      Pagination,
+      {
+        page,
+        totalPages: Math.max(
+          1,
+          Math.ceil((totalRowCount ?? data.length) / pageSize)
+        ),
+        onPageChange
+      }
+    ) }) : null
+  ] });
 }
 
 // src/index.ts