@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/{chunk-6OVVMHZJ.js → chunk-J23B66DJ.js}

@@ -1,9 +1,13 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 // src/components/Table.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var SortIcon = ({ direction }) => {
@@ -24,6 +28,20 @@ var SortIcon = ({ direction }) => {
 var LockIcon = ({ locked }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: tigercatCore.icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: locked ? tigercatCore.lockClosedIcon24PathD : tigercatCore.lockOpenIcon24PathD }) });
 };
+var ExpandIcon = ({ expanded }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: tigercatCore.getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: tigercatCore.icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.expandChevronIcon16PathD })
+    }
+  );
+};
 var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -61,19 +79,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
 }) {
@@ -83,69 +117,59 @@ 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 [uncontrolledSortState, setUncontrolledSortState] = react.useState(
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0 && Array.isArray(expandable.expandedRowKeys);
+  const [uncontrolledSortState, setUncontrolledSortState] = React.useState(
     defaultSort ?? { key: null, direction: null }
   );
-  const [uncontrolledFilterState, setUncontrolledFilterState] = react.useState(
+  const [uncontrolledFilterState, setUncontrolledFilterState] = React.useState(
     defaultFilters ?? {}
   );
-  const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = react.useState(
+  const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = React.useState(
     () => paginationConfig?.defaultCurrent ?? paginationConfig?.current ?? 1
   );
-  const [uncontrolledCurrentPageSize, setUncontrolledCurrentPageSize] = react.useState(
+  const [uncontrolledCurrentPageSize, setUncontrolledCurrentPageSize] = React.useState(
     () => paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10
   );
-  const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = react.useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
+  const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = React.useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.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;
-  react.useEffect(() => {
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
+  React.useEffect(() => {
     if (isSortControlled && sort) {
       setUncontrolledSortState(sort);
     }
   }, [isSortControlled, sort?.key, sort?.direction]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isFiltersControlled && filters) {
       setUncontrolledFilterState(filters);
     }
   }, [isFiltersControlled, filters]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isCurrentPageControlled) {
       setUncontrolledCurrentPage(paginationConfig.current);
     }
   }, [isCurrentPageControlled, paginationConfig?.current]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isPageSizeControlled) {
       setUncontrolledCurrentPageSize(paginationConfig.pageSize);
     }
   }, [isPageSizeControlled, paginationConfig?.pageSize]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isSelectionControlled) {
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
-  const isExpandControlled = expandable?.expandedRowKeys !== void 0;
-  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = react.useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
-  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
-  const expandedRowKeySet = react.useMemo(
-    () => new Set(expandedRowKeys),
-    [expandedRowKeys]
-  );
-  const handleToggleExpand = react.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]
-  );
-  const [fixedOverrides, setFixedOverrides] = react.useState({});
-  const displayColumns = react.useMemo(() => {
+  React.useEffect(() => {
+    if (isExpandControlled) {
+      setUncontrolledExpandedRowKeys(expandable?.expandedRowKeys ?? []);
+    }
+  }, [isExpandControlled, expandable?.expandedRowKeys]);
+  const [fixedOverrides, setFixedOverrides] = React.useState({});
+  const displayColumns = React.useMemo(() => {
     return columns.map((column) => {
       const hasOverride = Object.prototype.hasOwnProperty.call(fixedOverrides, column.key);
       return {
@@ -154,23 +178,23 @@ function Table({
       };
     });
   }, [columns, fixedOverrides]);
-  const totalColumnCount = react.useMemo(() => {
+  const totalColumnCount = React.useMemo(() => {
     let count = displayColumns.length;
     if (rowSelection && rowSelection.showCheckbox !== false) count++;
     if (expandable) count++;
     return count;
   }, [displayColumns.length, rowSelection, expandable]);
-  const columnByKey = react.useMemo(() => {
+  const columnByKey = React.useMemo(() => {
     const map = {};
     for (const column of displayColumns) {
       map[column.key] = column;
     }
     return map;
   }, [displayColumns]);
-  const fixedColumnsInfo = react.useMemo(() => {
+  const fixedColumnsInfo = React.useMemo(() => {
     return tigercatCore.getFixedColumnOffsets(displayColumns);
   }, [displayColumns]);
-  const toggleColumnLock = react.useCallback(
+  const toggleColumnLock = React.useCallback(
     (columnKey) => {
       setFixedOverrides((prev) => {
         const original = columns.find((c) => c.key === columnKey)?.fixed;
@@ -184,37 +208,45 @@ function Table({
     },
     [columns]
   );
-  const processedData = react.useMemo(() => {
+  const processedData = React.useMemo(() => {
     let data = dataSource;
-    data = tigercatCore.filterData(data, filterState);
+    if (filterMode === "advanced" && advancedFilterRules.length > 0) {
+      data = tigercatCore.filterDataAdvanced(data, advancedFilterRules);
+    } else {
+      data = tigercatCore.filterData(data, filterState);
+    }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
       data = tigercatCore.sortData(data, sortState.key, sortState.direction, column?.sortFn);
     }
     return data;
-  }, [dataSource, filterState, sortState, columnByKey]);
-  const paginatedData = react.useMemo(() => {
+  }, [dataSource, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
+  const paginatedData = React.useMemo(() => {
     if (pagination === false) {
       return processedData;
     }
     return tigercatCore.paginateData(processedData, currentPage, currentPageSize);
   }, [processedData, currentPage, currentPageSize, pagination]);
-  const pageRowKeys = react.useMemo(
+  const pageRowKeys = React.useMemo(
     () => paginatedData.map((record, index) => tigercatCore.getRowKey(record, rowKey, index)),
     [paginatedData, rowKey]
   );
-  const selectedRowKeySet = react.useMemo(
+  const selectedRowKeySet = React.useMemo(
     () => new Set(selectedRowKeys),
     [selectedRowKeys]
   );
-  const paginationInfo = react.useMemo(() => {
+  const expandedRowKeySet = React.useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
+  const paginationInfo = React.useMemo(() => {
     if (pagination === false) {
       return null;
     }
     const total = processedData.length;
     return tigercatCore.calculatePagination(total, currentPage, currentPageSize);
   }, [processedData.length, currentPage, currentPageSize, pagination]);
-  const handleSort = react.useCallback(
+  const handleSort = React.useCallback(
     (columnKey) => {
       const column = columnByKey[columnKey];
       if (!column || !column.sortable) {
@@ -257,7 +289,7 @@ function Table({
       onChange
     ]
   );
-  const handleFilter = react.useCallback(
+  const handleFilter = React.useCallback(
     (columnKey, value) => {
       const newFilterState = {
         ...filterState,
@@ -287,7 +319,7 @@ function Table({
       onChange
     ]
   );
-  const handlePageChange = react.useCallback(
+  const handlePageChange = React.useCallback(
     (page) => {
       setUncontrolledCurrentPage(page);
       onPageChange?.({ current: page, pageSize: currentPageSize });
@@ -302,7 +334,7 @@ function Table({
     },
     [currentPageSize, sortState, filterState, onPageChange, onChange]
   );
-  const handlePageSizeChange = react.useCallback(
+  const handlePageSizeChange = React.useCallback(
     (pageSize) => {
       setUncontrolledCurrentPageSize(pageSize);
       setUncontrolledCurrentPage(1);
@@ -318,13 +350,31 @@ function Table({
     },
     [sortState, filterState, onPageChange, onChange]
   );
-  const handleRowClick = react.useCallback(
+  const handleToggleExpand = React.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 = React.useCallback(
     (record, index) => {
       onRowClick?.(record, index);
+      if (expandable?.expandRowByClick) {
+        const key = tigercatCore.getRowKey(record, rowKey, index);
+        const isExpandableRow = expandable?.rowExpandable ? expandable.rowExpandable(record) : true;
+        if (isExpandableRow) {
+          handleToggleExpand(key, record);
+        }
+      }
     },
-    [onRowClick]
+    [onRowClick, expandable, rowKey, handleToggleExpand]
   );
-  const handleSelectRow = react.useCallback(
+  const handleSelectRow = React.useCallback(
     (key, checked) => {
       let newKeys;
       if (rowSelection?.type === "radio") {
@@ -343,7 +393,7 @@ function Table({
     },
     [rowSelection, selectedRowKeys, isSelectionControlled, onSelectionChange]
   );
-  const handleSelectAll = react.useCallback(
+  const handleSelectAll = React.useCallback(
     (checked) => {
       if (checked) {
         const newKeys = pageRowKeys;
@@ -360,18 +410,73 @@ function Table({
     },
     [pageRowKeys, isSelectionControlled, onSelectionChange]
   );
-  const allSelected = react.useMemo(() => {
+  const allSelected = React.useMemo(() => {
     if (pageRowKeys.length === 0) {
       return false;
     }
     return pageRowKeys.every((key) => selectedRowKeySet.has(key));
   }, [pageRowKeys, selectedRowKeySet]);
-  const someSelected = react.useMemo(() => {
+  const someSelected = React.useMemo(() => {
     return selectedRowKeys.length > 0 && !allSelected;
   }, [selectedRowKeys.length, allSelected]);
-  const renderTableHeader = react.useCallback(() => {
+  const [editingCell, setEditingCell] = React.useState(
+    null
+  );
+  const [editingValue, setEditingValue] = React.useState("");
+  const isCellEditable = React.useCallback(
+    (columnKey, rowIndex) => {
+      if (!editable) return false;
+      if (!editableCells) return true;
+      return !!editableCells.get(columnKey)?.has(rowIndex);
+    },
+    [editable, editableCells]
+  );
+  const startEditing = React.useCallback((rowIndex, columnKey, currentValue) => {
+    setEditingCell({ rowIndex, columnKey });
+    setEditingValue(String(currentValue ?? ""));
+  }, []);
+  const commitEdit = React.useCallback(() => {
+    if (editingCell) {
+      onCellChange?.(editingCell.rowIndex, editingCell.columnKey, editingValue);
+      setEditingCell(null);
+    }
+  }, [editingCell, editingValue, onCellChange]);
+  const cancelEdit = React.useCallback(() => {
+    setEditingCell(null);
+  }, []);
+  const handleExport = React.useCallback(() => {
+    const csv = tigercatCore.exportTableToCsv(displayColumns, processedData);
+    tigercatCore.downloadCsv(csv, exportFilename);
+    onExport?.(csv);
+  }, [displayColumns, processedData, exportFilename, onExport]);
+  const [dragColumnKey, setDragColumnKey] = React.useState(null);
+  const handleDragStart = React.useCallback((columnKey) => {
+    setDragColumnKey(columnKey);
+  }, []);
+  const handleDrop = React.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 = React.useMemo(() => {
+    if (!groupBy) return null;
+    return tigercatCore.groupDataByColumn(paginatedData, groupBy);
+  }, [groupBy, paginatedData]);
+  const renderTableHeader = React.useCallback(() => {
+    const expandHeaderTh = expandable ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
+    const expandAtStart = expandable?.expandIconPosition !== "end";
     return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: tigercatCore.getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandCellClasses(size) }),
+      expandAtStart && expandHeaderTh,
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -417,6 +522,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -465,7 +574,7 @@ function Table({
           column.key
         );
       }),
-      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandCellClasses(size) })
+      !expandAtStart && expandHeaderTh
     ] }) });
   }, [
     displayColumns,
@@ -473,6 +582,7 @@ function Table({
     stickyHeader,
     sortState,
     rowSelection,
+    expandable,
     allSelected,
     someSelected,
     handleSort,
@@ -481,142 +591,169 @@ function Table({
     columnLockable,
     toggleColumnLock,
     fixedColumnsInfo,
-    expandable
+    columnDraggable,
+    handleDragStart,
+    handleDrop
   ]);
-  const renderTableBody = react.useCallback(() => {
+  const renderTableBody = React.useCallback(() => {
     if (loading) {
       return null;
     }
     if (paginatedData.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, className: tigercatCore.tableEmptyStateClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
-    const ExpandToggle = ({ rowKey: rk, expandableRow, expanded }) => expandableRow ? /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: tigercatCore.classNames(tigercatCore.expandIconButtonClasses, tigercatCore.getExpandIconRotationClasses(expanded)),
-        "aria-label": expanded ? "Collapse row" : "Expand row",
-        onClick: (e) => {
-          e.stopPropagation();
-          handleToggleExpand(rk);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: tigercatCore.icon16ViewBox,
-            fill: "currentColor",
-            className: "w-4 h-4",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l6 5-6 5V3z" })
-          }
-        )
-      }
-    ) : null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "tr",
-          {
-            className: tigercatCore.classNames(
-              tigercatCore.getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
-              fixedColumnsInfo.hasFixedColumns && "group"
-            ),
-            onClick: () => handleRowClick(record, index),
-            children: [
-              expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getExpandCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
-                ExpandToggle,
-                {
-                  rowKey: key,
-                  expandableRow: isExpandableRow,
-                  expanded: isExpanded
-                }
-              ) }),
-              rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.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 ? tigercatCore.classNames(
-                  stickyBgClass,
-                  hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-                ) : void 0;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    className: tigercatCore.classNames(
-                      tigercatCore.getTableCellClasses(size, column.align || "left", column.className),
-                      stickyCellClass
-                    ),
-                    style,
-                    children: column.render ? column.render(record, index) : cellValue
-                  },
-                  column.key
-                );
-              }),
-              expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getExpandCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
-                ExpandToggle,
+      const expandToggleCell = expandable ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getExpandIconCellClasses(size), children: isRowExpandable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded })
+        }
+      ) }) : null;
+      const expandAtStart = expandable?.expandIconPosition !== "end";
+      const rowNode = /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: tigercatCore.classNames(
+            tigercatCore.getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+            fixedColumnsInfo.hasFixedColumns && "group"
+          ),
+          onClick: () => handleRowClick(record, index),
+          children: [
+            expandAtStart && expandToggleCell,
+            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.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 ? tigercatCore.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__ */ jsxRuntime.jsx(
+                "td",
                 {
-                  rowKey: key,
-                  expandableRow: isExpandableRow,
-                  expanded: isExpanded
-                }
-              ) })
-            ]
-          }
-        ),
-        expandable && isExpanded && isExpandableRow && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tigercatCore.expandedRowContentClasses, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, children: expandable.expandedRowRender(record, index) }) })
-      ] }, key);
-    }) });
+                  className: tigercatCore.classNames(
+                    tigercatCore.getTableCellClasses(size, column.align || "left", column.className),
+                    stickyCellClass,
+                    cellEditable && tigercatCore.getEditableCellClasses(!!isEditing)
+                  ),
+                  style,
+                  onDoubleClick: cellEditable ? () => startEditing(index, column.key, cellValue) : void 0,
+                  children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      className: tigercatCore.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__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+          rowNode,
+          /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tigercatCore.getExpandedRowClasses(), children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, className: tigercatCore.getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
+        ] }, key);
+      }
+      return rowNode;
+    };
+    if (groupedData) {
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from(groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tigercatCore.tableGroupHeaderClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: totalColumnCount, className: tigercatCore.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__ */ jsxRuntime.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 = react.useCallback(() => {
+  const renderPagination = React.useCallback(() => {
     if (pagination === false || !paginationInfo) {
       return null;
     }
@@ -675,19 +812,36 @@ function Table({
     handlePageChange,
     handlePageSizeChange
   ]);
-  const wrapperStyle = react.useMemo(
-    () => maxHeight ? {
+  const renderSummaryRow = React.useCallback(() => {
+    if (!summaryRow?.show) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: tigercatCore.tableSummaryRowClasses, children: [
+      rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, "left") }),
+      expandable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, "left") }),
+      displayColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
+    ] }) });
+  }, [summaryRow, displayColumns, size, rowSelection, expandable]);
+  const wrapperStyle = React.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__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: tigercatCore.getTableWrapperClasses(bordered, maxHeight),
+      className: tigercatCore.getTableWrapperClasses(
+        bordered,
+        maxHeight || (virtual ? virtualHeight : void 0)
+      ),
       style: wrapperStyle,
       "aria-busy": loading,
       children: [
+        exportable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: tigercatCore.tableExportButtonClasses, onClick: handleExport, children: "Export CSV" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "table",
           {
@@ -703,7 +857,8 @@ function Table({
             } : props.style,
             children: [
               renderTableHeader(),
-              renderTableBody()
+              renderTableBody(),
+              renderSummaryRow()
             ]
           }
         ),