@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/{chunk-PJ7NS7NX.mjs → chunk-RU6YS4LZ.mjs}

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo, useCallback, Fragment } from 'react';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getExpandCellClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, expandedRowContentClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon16ViewBox, expandIconButtonClasses, getExpandIconRotationClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { getSpinnerSVG, getFixedColumnOffsets, filterDataAdvanced, filterData, sortData, paginateData, getRowKey, calculatePagination, exportTableToCsv, downloadCsv, groupDataByColumn, getExpandIconCellClasses, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, tableGroupHeaderClasses, getGroupHeaderCellClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, tableSummaryRowClasses, getTableCellClasses, getTableWrapperClasses, tableExportButtonClasses, tableBaseClasses, tableLoadingOverlayClasses, editableCellInputClasses, getEditableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -22,6 +22,20 @@ var SortIcon = ({ direction }) => {
 var LockIcon = ({ locked }) => {
   return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
 };
+var ExpandIcon = ({ expanded }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: expandChevronIcon16PathD })
+    }
+  );
+};
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -59,19 +73,35 @@ function Table({
     showTotal: true
   },
   rowSelection,
+  expandable,
   rowKey = "id",
   rowClassName,
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
-  expandable,
+  // v0.6.0 props
+  virtual = false,
+  virtualHeight = 400,
+  virtualItemHeight = 40,
+  editable = false,
+  editableCells,
+  filterMode = "basic",
+  advancedFilterRules = [],
+  columnDraggable = false,
+  summaryRow,
+  groupBy,
+  exportable = false,
+  exportFilename = "export",
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
-  onExpandedRowsChange,
+  onExpandChange,
+  onCellChange,
+  onColumnOrderChange,
+  onExport,
   className,
   ...props
 }) {
@@ -81,6 +111,7 @@ function Table({
   const isCurrentPageControlled = paginationConfig?.current !== void 0;
   const isPageSizeControlled = paginationConfig?.pageSize !== void 0;
   const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0 && Array.isArray(rowSelection.selectedRowKeys);
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0 && Array.isArray(expandable.expandedRowKeys);
   const [uncontrolledSortState, setUncontrolledSortState] = useState(
     defaultSort ?? { key: null, direction: null }
   );
@@ -94,11 +125,13 @@ function Table({
     () => paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10
   );
   const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
   const sortState = isSortControlled ? sort : uncontrolledSortState;
   const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
   const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
   const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
   const selectedRowKeys = isSelectionControlled ? rowSelection.selectedRowKeys : uncontrolledSelectedRowKeys;
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
   useEffect(() => {
     if (isSortControlled && sort) {
       setUncontrolledSortState(sort);
@@ -124,24 +157,11 @@ function Table({
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
-  const isExpandControlled = expandable?.expandedRowKeys !== void 0;
-  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
-  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
-  const expandedRowKeySet = useMemo(
-    () => new Set(expandedRowKeys),
-    [expandedRowKeys]
-  );
-  const handleToggleExpand = useCallback(
-    (key) => {
-      const isExp = expandedRowKeySet.has(key);
-      const next = isExp ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
-      if (!isExpandControlled) {
-        setUncontrolledExpandedRowKeys(next);
-      }
-      onExpandedRowsChange?.(next);
-    },
-    [expandedRowKeys, expandedRowKeySet, isExpandControlled, onExpandedRowsChange]
-  );
+  useEffect(() => {
+    if (isExpandControlled) {
+      setUncontrolledExpandedRowKeys(expandable?.expandedRowKeys ?? []);
+    }
+  }, [isExpandControlled, expandable?.expandedRowKeys]);
   const [fixedOverrides, setFixedOverrides] = useState({});
   const displayColumns = useMemo(() => {
     return columns.map((column) => {
@@ -184,13 +204,17 @@ function Table({
   );
   const processedData = useMemo(() => {
     let data = dataSource;
-    data = filterData(data, filterState);
+    if (filterMode === "advanced" && advancedFilterRules.length > 0) {
+      data = filterDataAdvanced(data, advancedFilterRules);
+    } else {
+      data = filterData(data, filterState);
+    }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
       data = sortData(data, sortState.key, sortState.direction, column?.sortFn);
     }
     return data;
-  }, [dataSource, filterState, sortState, columnByKey]);
+  }, [dataSource, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
   const paginatedData = useMemo(() => {
     if (pagination === false) {
       return processedData;
@@ -205,6 +229,10 @@ function Table({
     () => new Set(selectedRowKeys),
     [selectedRowKeys]
   );
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
   const paginationInfo = useMemo(() => {
     if (pagination === false) {
       return null;
@@ -316,11 +344,29 @@ function Table({
     },
     [sortState, filterState, onPageChange, onChange]
   );
+  const handleToggleExpand = useCallback(
+    (key, record) => {
+      const isExpanded = expandedRowKeySet.has(key);
+      const newKeys = isExpanded ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
+      if (!isExpandControlled) {
+        setUncontrolledExpandedRowKeys(newKeys);
+      }
+      onExpandChange?.(newKeys, record, !isExpanded);
+    },
+    [expandedRowKeySet, expandedRowKeys, isExpandControlled, onExpandChange]
+  );
   const handleRowClick = useCallback(
     (record, index) => {
       onRowClick?.(record, index);
+      if (expandable?.expandRowByClick) {
+        const key = getRowKey(record, rowKey, index);
+        const isExpandableRow = expandable?.rowExpandable ? expandable.rowExpandable(record) : true;
+        if (isExpandableRow) {
+          handleToggleExpand(key, record);
+        }
+      }
     },
-    [onRowClick]
+    [onRowClick, expandable, rowKey, handleToggleExpand]
   );
   const handleSelectRow = useCallback(
     (key, checked) => {
@@ -367,9 +413,64 @@ function Table({
   const someSelected = useMemo(() => {
     return selectedRowKeys.length > 0 && !allSelected;
   }, [selectedRowKeys.length, allSelected]);
+  const [editingCell, setEditingCell] = useState(
+    null
+  );
+  const [editingValue, setEditingValue] = useState("");
+  const isCellEditable = useCallback(
+    (columnKey, rowIndex) => {
+      if (!editable) return false;
+      if (!editableCells) return true;
+      return !!editableCells.get(columnKey)?.has(rowIndex);
+    },
+    [editable, editableCells]
+  );
+  const startEditing = useCallback((rowIndex, columnKey, currentValue) => {
+    setEditingCell({ rowIndex, columnKey });
+    setEditingValue(String(currentValue ?? ""));
+  }, []);
+  const commitEdit = useCallback(() => {
+    if (editingCell) {
+      onCellChange?.(editingCell.rowIndex, editingCell.columnKey, editingValue);
+      setEditingCell(null);
+    }
+  }, [editingCell, editingValue, onCellChange]);
+  const cancelEdit = useCallback(() => {
+    setEditingCell(null);
+  }, []);
+  const handleExport = useCallback(() => {
+    const csv = exportTableToCsv(displayColumns, processedData);
+    downloadCsv(csv, exportFilename);
+    onExport?.(csv);
+  }, [displayColumns, processedData, exportFilename, onExport]);
+  const [dragColumnKey, setDragColumnKey] = useState(null);
+  const handleDragStart = useCallback((columnKey) => {
+    setDragColumnKey(columnKey);
+  }, []);
+  const handleDrop = useCallback(
+    (targetKey) => {
+      if (!dragColumnKey || dragColumnKey === targetKey) return;
+      const cols = [...displayColumns];
+      const fromIdx = cols.findIndex((c) => c.key === dragColumnKey);
+      const toIdx = cols.findIndex((c) => c.key === targetKey);
+      if (fromIdx >= 0 && toIdx >= 0) {
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        onColumnOrderChange?.(cols);
+      }
+      setDragColumnKey(null);
+    },
+    [dragColumnKey, displayColumns, onColumnOrderChange]
+  );
+  const groupedData = useMemo(() => {
+    if (!groupBy) return null;
+    return groupDataByColumn(paginatedData, groupBy);
+  }, [groupBy, paginatedData]);
   const renderTableHeader = useCallback(() => {
+    const expandHeaderTh = expandable ? /* @__PURE__ */ jsx("th", { className: getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
+    const expandAtStart = expandable?.expandIconPosition !== "end";
     return /* @__PURE__ */ jsx("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
-      expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) }),
+      expandAtStart && expandHeaderTh,
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -415,6 +516,10 @@ function Table({
               (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
             ),
             style,
+            draggable: columnDraggable ? true : void 0,
+            onDragStart: columnDraggable ? () => handleDragStart(column.key) : void 0,
+            onDragOver: columnDraggable ? (e) => e.preventDefault() : void 0,
+            onDrop: columnDraggable ? () => handleDrop(column.key) : void 0,
             onClick: column.sortable ? () => handleSort(column.key) : void 0,
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -463,7 +568,7 @@ function Table({
           column.key
         );
       }),
-      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) })
+      !expandAtStart && expandHeaderTh
     ] }) });
   }, [
     displayColumns,
@@ -471,6 +576,7 @@ function Table({
     stickyHeader,
     sortState,
     rowSelection,
+    expandable,
     allSelected,
     someSelected,
     handleSort,
@@ -479,7 +585,9 @@ function Table({
     columnLockable,
     toggleColumnLock,
     fixedColumnsInfo,
-    expandable
+    columnDraggable,
+    handleDragStart,
+    handleDrop
   ]);
   const renderTableBody = useCallback(() => {
     if (loading) {
@@ -488,131 +596,156 @@ function Table({
     if (paginatedData.length === 0) {
       return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, className: tableEmptyStateClasses, children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
-    const ExpandToggle = ({ rowKey: rk, expandableRow, expanded }) => expandableRow ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: classNames(expandIconButtonClasses, getExpandIconRotationClasses(expanded)),
-        "aria-label": expanded ? "Collapse row" : "Expand row",
-        onClick: (e) => {
-          e.stopPropagation();
-          handleToggleExpand(rk);
-        },
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: icon16ViewBox,
-            fill: "currentColor",
-            className: "w-4 h-4",
-            children: /* @__PURE__ */ jsx("path", { d: "M6 3l6 5-6 5V3z" })
-          }
-        )
-      }
-    ) : null;
-    return /* @__PURE__ */ jsx("tbody", { children: paginatedData.map((record, index) => {
+    const renderDataRow = (record, index) => {
       const key = pageRowKeys[index];
       const isSelected = selectedRowKeySet.has(key);
       const isExpanded = expandedRowKeySet.has(key);
-      const isExpandableRow = expandable ? expandable.rowExpandable?.(record) ?? true : false;
+      const isRowExpandable = expandable ? expandable.rowExpandable ? expandable.rowExpandable(record) : true : false;
       const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            className: classNames(
-              getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
-              fixedColumnsInfo.hasFixedColumns && "group"
-            ),
-            onClick: () => handleRowClick(record, index),
-            children: [
-              expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
-                ExpandToggle,
-                {
-                  rowKey: key,
-                  expandableRow: isExpandableRow,
-                  expanded: isExpanded
-                }
-              ) }),
-              rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: rowSelection?.type === "radio" ? "radio" : "checkbox",
-                  className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
-                  checked: isSelected,
-                  disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
-                  onChange: (e) => handleSelectRow(key, e.target.checked),
-                  onClick: (e) => e.stopPropagation()
-                }
-              ) }),
-              displayColumns.map((column) => {
-                const dataKey = column.dataKey || column.key;
-                const cellValue = record[dataKey];
-                const isFixedLeft = column.fixed === "left";
-                const isFixedRight = column.fixed === "right";
-                const fixedStyle = isFixedLeft ? {
-                  position: "sticky",
-                  left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
-                  zIndex: 10
-                } : isFixedRight ? {
-                  position: "sticky",
-                  right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
-                  zIndex: 10
-                } : void 0;
-                const widthStyle = column.width ? {
-                  width: typeof column.width === "number" ? `${column.width}px` : column.width
-                } : void 0;
-                const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-                const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
-                const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
-                  stickyBgClass,
-                  hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-                ) : void 0;
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: classNames(
-                      getTableCellClasses(size, column.align || "left", column.className),
-                      stickyCellClass
-                    ),
-                    style,
-                    children: column.render ? column.render(record, index) : cellValue
-                  },
-                  column.key
-                );
-              }),
-              expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
-                ExpandToggle,
+      const expandToggleCell = expandable ? /* @__PURE__ */ jsx("td", { className: getExpandIconCellClasses(size), children: isRowExpandable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center justify-center",
+          "aria-label": isExpanded ? "Collapse row" : "Expand row",
+          "aria-expanded": isExpanded,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleToggleExpand(key, record);
+          },
+          children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+        }
+      ) }) : null;
+      const expandAtStart = expandable?.expandIconPosition !== "end";
+      const rowNode = /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: classNames(
+            getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+            fixedColumnsInfo.hasFixedColumns && "group"
+          ),
+          onClick: () => handleRowClick(record, index),
+          children: [
+            expandAtStart && expandToggleCell,
+            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: rowSelection?.type === "radio" ? "radio" : "checkbox",
+                className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+                checked: isSelected,
+                disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+                onChange: (e) => handleSelectRow(key, e.target.checked),
+                onClick: (e) => e.stopPropagation()
+              }
+            ) }),
+            displayColumns.map((column) => {
+              const dataKey = column.dataKey || column.key;
+              const cellValue = record[dataKey];
+              const isFixedLeft = column.fixed === "left";
+              const isFixedRight = column.fixed === "right";
+              const fixedStyle = isFixedLeft ? {
+                position: "sticky",
+                left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
+                zIndex: 10
+              } : isFixedRight ? {
+                position: "sticky",
+                right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
+                zIndex: 10
+              } : void 0;
+              const widthStyle = column.width ? {
+                width: typeof column.width === "number" ? `${column.width}px` : column.width
+              } : void 0;
+              const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+              const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+              const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
+                stickyBgClass,
+                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+              ) : void 0;
+              const isEditing = editingCell?.rowIndex === index && editingCell?.columnKey === column.key;
+              const cellEditable = isCellEditable(column.key, index);
+              return /* @__PURE__ */ jsx(
+                "td",
                 {
-                  rowKey: key,
-                  expandableRow: isExpandableRow,
-                  expanded: isExpanded
-                }
-              ) })
-            ]
-          }
-        ),
-        expandable && isExpanded && isExpandableRow && /* @__PURE__ */ jsx("tr", { className: expandedRowContentClasses, children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, children: expandable.expandedRowRender(record, index) }) })
-      ] }, key);
-    }) });
+                  className: classNames(
+                    getTableCellClasses(size, column.align || "left", column.className),
+                    stickyCellClass,
+                    cellEditable && getEditableCellClasses(!!isEditing)
+                  ),
+                  style,
+                  onDoubleClick: cellEditable ? () => startEditing(index, column.key, cellValue) : void 0,
+                  children: isEditing ? /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: editableCellInputClasses,
+                      value: editingValue,
+                      onChange: (e) => setEditingValue(e.target.value),
+                      onBlur: commitEdit,
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") commitEdit();
+                        if (e.key === "Escape") cancelEdit();
+                      },
+                      autoFocus: true
+                    }
+                  ) : column.render ? column.render(record, index) : cellValue
+                },
+                column.key
+              );
+            }),
+            !expandAtStart && expandToggleCell
+          ]
+        },
+        key
+      );
+      if (expandable && isExpanded && isRowExpandable) {
+        const expandedContent = expandable.expandedRowRender ? expandable.expandedRowRender(record, index) : null;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          rowNode,
+          /* @__PURE__ */ jsx("tr", { className: getExpandedRowClasses(), children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, className: getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
+        ] }, key);
+      }
+      return rowNode;
+    };
+    if (groupedData) {
+      return /* @__PURE__ */ jsx("tbody", { children: Array.from(groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("tr", { className: tableGroupHeaderClasses, children: /* @__PURE__ */ jsxs("td", { colSpan: totalColumnCount, className: getGroupHeaderCellClasses(size), children: [
+          groupKey,
+          " (",
+          groupItems.length,
+          ")"
+        ] }) }),
+        groupItems.map((record, idx) => {
+          const globalIndex = paginatedData.indexOf(record);
+          return renderDataRow(record, globalIndex >= 0 ? globalIndex : idx);
+        })
+      ] }, `group-${groupKey}`)) });
+    }
+    return /* @__PURE__ */ jsx("tbody", { children: paginatedData.map((record, index) => renderDataRow(record, index)) });
   }, [
     loading,
     paginatedData,
     displayColumns,
     rowSelection,
+    expandable,
     emptyText,
     pageRowKeys,
     selectedRowKeySet,
+    expandedRowKeySet,
+    totalColumnCount,
     rowClassName,
     hoverable,
     striped,
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo,
-    expandable,
-    expandedRowKeySet,
     handleToggleExpand,
-    totalColumnCount
+    fixedColumnsInfo,
+    groupedData,
+    editingCell,
+    editingValue,
+    isCellEditable,
+    startEditing,
+    commitEdit,
+    cancelEdit
   ]);
   const renderPagination = useCallback(() => {
     if (pagination === false || !paginationInfo) {
@@ -673,19 +806,36 @@ function Table({
     handlePageChange,
     handlePageSizeChange
   ]);
-  const wrapperStyle = useMemo(
-    () => maxHeight ? {
+  const renderSummaryRow = useCallback(() => {
+    if (!summaryRow?.show) return null;
+    return /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { className: tableSummaryRowClasses, children: [
+      rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, "left") }),
+      expandable && /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, "left") }),
+      displayColumns.map((column) => /* @__PURE__ */ jsx("td", { className: getTableCellClasses(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
+    ] }) });
+  }, [summaryRow, displayColumns, size, rowSelection, expandable]);
+  const wrapperStyle = useMemo(() => {
+    if (virtual) {
+      return {
+        height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
+        overflow: "auto"
+      };
+    }
+    return maxHeight ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-    } : void 0,
-    [maxHeight]
-  );
+    } : void 0;
+  }, [maxHeight, virtual, virtualHeight]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: getTableWrapperClasses(bordered, maxHeight),
+      className: getTableWrapperClasses(
+        bordered,
+        maxHeight || (virtual ? virtualHeight : void 0)
+      ),
       style: wrapperStyle,
       "aria-busy": loading,
       children: [
+        exportable && /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsx("button", { type: "button", className: tableExportButtonClasses, onClick: handleExport, children: "Export CSV" }) }),
         /* @__PURE__ */ jsxs(
           "table",
           {
@@ -701,7 +851,8 @@ function Table({
             } : props.style,
             children: [
               renderTableHeader(),
-              renderTableBody()
+              renderTableBody(),
+              renderSummaryRow()
             ]
           }
         ),

package/dist/{chunk-ZFHTSHXS.mjs → chunk-RUROWRB5.mjs}

@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -45,6 +45,7 @@ var DatePicker = (props) => {
     onChange: _onChange,
     onClear: _onClear,
     className: _className,
+    shortcuts: _shortcuts,
     ...rest
   }) => rest)(props);
   const [isOpen, setIsOpen] = useState(false);
@@ -267,6 +268,24 @@ var DatePicker = (props) => {
   const setToday = () => {
     selectDate(/* @__PURE__ */ new Date());
   };
+  const handleShortcut = (shortcut) => {
+    const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+    if (!isRangeMode) {
+      const date = val instanceof Date ? normalizeDate(val) : val ? normalizeDate(parseDate(val)) : null;
+      if (!isControlled) setInternalValue(date);
+      props.onChange?.(date);
+    } else {
+      const range = val;
+      if (range && Array.isArray(range)) {
+        const parsed = [
+          range[0] ? normalizeDate(range[0] instanceof Date ? range[0] : parseDate(range[0])) : null,
+          range[1] ? normalizeDate(range[1] instanceof Date ? range[1] : parseDate(range[1])) : null
+        ];
+        setRangeValue(parsed);
+      }
+    }
+    closeCalendar();
+  };
   const clearDate = (event) => {
     event.stopPropagation();
     if (!isRangeMode) {
@@ -467,6 +486,16 @@ var DatePicker = (props) => {
               }
             );
           })(),
+          props.shortcuts && props.shortcuts.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]", children: props.shortcuts.map((sc, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: datePickerFooterButtonClasses,
+              onClick: () => handleShortcut(sc),
+              children: sc.label
+            },
+            i
+          )) }),
           isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
             /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
             /* @__PURE__ */ jsx(