@expcat/tigercat-react 0.4.2 → 0.4.3

package/dist/{chunk-PJ7NS7NX.mjs → chunk-KBTFBEPE.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, filterData, sortData, paginateData, getRowKey, calculatePagination, getExpandIconCellClasses, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getExpandIconClasses, expandChevronIcon16PathD, getLoadingOverlaySpinnerClasses } 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,19 @@ function Table({
     showTotal: true
   },
   rowSelection,
+  expandable,
   rowKey = "id",
   rowClassName,
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
-  expandable,
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
-  onExpandedRowsChange,
+  onExpandChange,
   className,
   ...props
 }) {
@@ -81,6 +95,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 +109,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 +141,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) => {
@@ -205,6 +209,10 @@ function Table({
     () => new Set(selectedRowKeys),
     [selectedRowKeys]
   );
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
   const paginationInfo = useMemo(() => {
     if (pagination === false) {
       return null;
@@ -316,11 +324,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) => {
@@ -368,8 +394,10 @@ function Table({
     return selectedRowKeys.length > 0 && !allSelected;
   }, [selectedRowKeys.length, allSelected]);
   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",
         {
@@ -463,7 +491,7 @@ function Table({
           column.key
         );
       }),
-      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) })
+      !expandAtStart && expandHeaderTh
     ] }) });
   }, [
     displayColumns,
@@ -471,6 +499,7 @@ function Table({
     stickyHeader,
     sortState,
     rowSelection,
+    expandable,
     allSelected,
     someSelected,
     handleSort,
@@ -478,8 +507,7 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo,
-    expandable
+    fixedColumnsInfo
   ]);
   const renderTableBody = useCallback(() => {
     if (loading) {
@@ -488,131 +516,117 @@ 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 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;
+              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
+                  ),
+                  style,
+                  children: 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;
     }) });
   }, [
     loading,
     paginatedData,
     displayColumns,
     rowSelection,
+    expandable,
     emptyText,
     pageRowKeys,
     selectedRowKeySet,
+    expandedRowKeySet,
+    totalColumnCount,
     rowClassName,
     hoverable,
     striped,
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo,
-    expandable,
-    expandedRowKeySet,
     handleToggleExpand,
-    totalColumnCount
+    fixedColumnsInfo
   ]);
   const renderPagination = useCallback(() => {
     if (pagination === false || !paginationInfo) {

package/dist/{chunk-FX2IBA4W.mjs → chunk-LLHUBM6E.mjs}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-PJ7NS7NX.mjs';
+import { Table } from './chunk-KBTFBEPE.mjs';
 import { Select } from './chunk-MDZDPGRK.mjs';
 import { Pagination } from './chunk-NZLOLMT2.mjs';
 import { Input } from './chunk-RPTLVIBF.mjs';

package/dist/{chunk-Q7GUWWG5.js → chunk-LXX2ZDJN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6OVVMHZJ_js = require('./chunk-6OVVMHZJ.js');
+var chunkZBVFM3GJ_js = require('./chunk-ZBVFM3GJ.js');
 var chunkTDRINUMH_js = require('./chunk-TDRINUMH.js');
 var chunk3GW3UAKB_js = require('./chunk-3GW3UAKB.js');
 var chunkOYCMGKQ7_js = require('./chunk-OYCMGKQ7.js');
@@ -187,7 +187,7 @@ var DataTableWithToolbar = ({
   const showPagination = pagination && typeof pagination === "object";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
     renderToolbar(),
-    /* @__PURE__ */ jsxRuntime.jsx(chunk6OVVMHZJ_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkZBVFM3GJ_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
     showPagination ? /* @__PURE__ */ jsxRuntime.jsx(chunk3GW3UAKB_js.Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
   ] });
 };

package/dist/{chunk-6OVVMHZJ.js → chunk-ZBVFM3GJ.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,19 @@ function Table({
     showTotal: true
   },
   rowSelection,
+  expandable,
   rowKey = "id",
   rowClassName,
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
-  expandable,
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
-  onExpandedRowsChange,
+  onExpandChange,
   className,
   ...props
 }) {
@@ -83,69 +101,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 +162,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,7 +192,7 @@ function Table({
     },
     [columns]
   );
-  const processedData = react.useMemo(() => {
+  const processedData = React.useMemo(() => {
     let data = dataSource;
     data = tigercatCore.filterData(data, filterState);
     if (sortState.key && sortState.direction) {
@@ -193,28 +201,32 @@ function Table({
     }
     return data;
   }, [dataSource, filterState, sortState, columnByKey]);
-  const paginatedData = react.useMemo(() => {
+  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 +269,7 @@ function Table({
       onChange
     ]
   );
-  const handleFilter = react.useCallback(
+  const handleFilter = React.useCallback(
     (columnKey, value) => {
       const newFilterState = {
         ...filterState,
@@ -287,7 +299,7 @@ function Table({
       onChange
     ]
   );
-  const handlePageChange = react.useCallback(
+  const handlePageChange = React.useCallback(
     (page) => {
       setUncontrolledCurrentPage(page);
       onPageChange?.({ current: page, pageSize: currentPageSize });
@@ -302,7 +314,7 @@ function Table({
     },
     [currentPageSize, sortState, filterState, onPageChange, onChange]
   );
-  const handlePageSizeChange = react.useCallback(
+  const handlePageSizeChange = React.useCallback(
     (pageSize) => {
       setUncontrolledCurrentPageSize(pageSize);
       setUncontrolledCurrentPage(1);
@@ -318,13 +330,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 +373,7 @@ function Table({
     },
     [rowSelection, selectedRowKeys, isSelectionControlled, onSelectionChange]
   );
-  const handleSelectAll = react.useCallback(
+  const handleSelectAll = React.useCallback(
     (checked) => {
       if (checked) {
         const newKeys = pageRowKeys;
@@ -360,18 +390,20 @@ 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 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",
         {
@@ -465,7 +497,7 @@ function Table({
           column.key
         );
       }),
-      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandCellClasses(size) })
+      !expandAtStart && expandHeaderTh
     ] }) });
   }, [
     displayColumns,
@@ -473,6 +505,7 @@ function Table({
     stickyHeader,
     sortState,
     rowSelection,
+    expandable,
     allSelected,
     someSelected,
     handleSort,
@@ -480,143 +513,128 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo,
-    expandable
+    fixedColumnsInfo
   ]);
-  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 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;
+              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
+                  ),
+                  style,
+                  children: 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;
     }) });
   }, [
     loading,
     paginatedData,
     displayColumns,
     rowSelection,
+    expandable,
     emptyText,
     pageRowKeys,
     selectedRowKeySet,
+    expandedRowKeySet,
+    totalColumnCount,
     rowClassName,
     hoverable,
     striped,
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo,
-    expandable,
-    expandedRowKeySet,
     handleToggleExpand,
-    totalColumnCount
+    fixedColumnsInfo
   ]);
-  const renderPagination = react.useCallback(() => {
+  const renderPagination = React.useCallback(() => {
     if (pagination === false || !paginationInfo) {
       return null;
     }
@@ -675,7 +693,7 @@ function Table({
     handlePageChange,
     handlePageSizeChange
   ]);
-  const wrapperStyle = react.useMemo(
+  const wrapperStyle = React.useMemo(
     () => maxHeight ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : void 0,

package/dist/components/DataTableWithToolbar.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkQ7GUWWG5_js = require('../chunk-Q7GUWWG5.js');
-require('../chunk-6OVVMHZJ.js');
+var chunkLXX2ZDJN_js = require('../chunk-LXX2ZDJN.js');
+require('../chunk-ZBVFM3GJ.js');
 require('../chunk-TDRINUMH.js');
 require('../chunk-3GW3UAKB.js');
 require('../chunk-OYCMGKQ7.js');
@@ -13,9 +13,9 @@ require('../chunk-F24IF2QL.js');
 
 Object.defineProperty(exports, "DataTableWithToolbar", {
   enumerable: true,
-  get: function () { return chunkQ7GUWWG5_js.DataTableWithToolbar; }
+  get: function () { return chunkLXX2ZDJN_js.DataTableWithToolbar; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkQ7GUWWG5_js.DataTableWithToolbar_default; }
+  get: function () { return chunkLXX2ZDJN_js.DataTableWithToolbar_default; }
 });

package/dist/components/DataTableWithToolbar.mjs

@@ -1,5 +1,5 @@
-export { DataTableWithToolbar, DataTableWithToolbar_default as default } from '../chunk-FX2IBA4W.mjs';
-import '../chunk-PJ7NS7NX.mjs';
+export { DataTableWithToolbar, DataTableWithToolbar_default as default } from '../chunk-LLHUBM6E.mjs';
+import '../chunk-KBTFBEPE.mjs';
 import '../chunk-MDZDPGRK.mjs';
 import '../chunk-NZLOLMT2.mjs';
 import '../chunk-RPTLVIBF.mjs';

package/dist/components/Table.d.mts

@@ -37,14 +37,14 @@ interface TableProps<T = Record<string, unknown>> extends TableProps$1<T> {
         pageSize: number;
     }) => void;
     /**
-     * Expanded rows change handler
+     * Expand change handler
      */
-    onExpandedRowsChange?: (expandedRowKeys: (string | number)[]) => void;
+    onExpandChange?: (expandedKeys: (string | number)[], record: T, expanded: boolean) => void;
     /**
      * Additional CSS classes
      */
     className?: string;
 }
-declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, columnLockable, dataSource, sort, defaultSort, filters, defaultFilters, size, bordered, striped, hoverable, loading, emptyText, pagination, rowSelection, rowKey, rowClassName, stickyHeader, maxHeight, tableLayout, expandable, onChange, onRowClick, onSelectionChange, onSortChange, onFilterChange, onPageChange, onExpandedRowsChange, className, ...props }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, columnLockable, dataSource, sort, defaultSort, filters, defaultFilters, size, bordered, striped, hoverable, loading, emptyText, pagination, rowSelection, expandable, rowKey, rowClassName, stickyHeader, maxHeight, tableLayout, onChange, onRowClick, onSelectionChange, onSortChange, onFilterChange, onPageChange, onExpandChange, className, ...props }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 export { Table, type TableProps };

package/dist/components/Table.d.ts

@@ -37,14 +37,14 @@ interface TableProps<T = Record<string, unknown>> extends TableProps$1<T> {
         pageSize: number;
     }) => void;
     /**
-     * Expanded rows change handler
+     * Expand change handler
      */
-    onExpandedRowsChange?: (expandedRowKeys: (string | number)[]) => void;
+    onExpandChange?: (expandedKeys: (string | number)[], record: T, expanded: boolean) => void;
     /**
      * Additional CSS classes
      */
     className?: string;
 }
-declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, columnLockable, dataSource, sort, defaultSort, filters, defaultFilters, size, bordered, striped, hoverable, loading, emptyText, pagination, rowSelection, rowKey, rowClassName, stickyHeader, maxHeight, tableLayout, expandable, onChange, onRowClick, onSelectionChange, onSortChange, onFilterChange, onPageChange, onExpandedRowsChange, className, ...props }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, columnLockable, dataSource, sort, defaultSort, filters, defaultFilters, size, bordered, striped, hoverable, loading, emptyText, pagination, rowSelection, expandable, rowKey, rowClassName, stickyHeader, maxHeight, tableLayout, onChange, onRowClick, onSelectionChange, onSortChange, onFilterChange, onPageChange, onExpandChange, className, ...props }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 export { Table, type TableProps };

package/dist/components/Table.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunk6OVVMHZJ_js = require('../chunk-6OVVMHZJ.js');
+var chunkZBVFM3GJ_js = require('../chunk-ZBVFM3GJ.js');
 
 
 
 Object.defineProperty(exports, "Table", {
   enumerable: true,
-  get: function () { return chunk6OVVMHZJ_js.Table; }
+  get: function () { return chunkZBVFM3GJ_js.Table; }
 });

package/dist/components/Table.mjs

@@ -1 +1 @@
-export { Table } from '../chunk-PJ7NS7NX.mjs';
+export { Table } from '../chunk-KBTFBEPE.mjs';

package/dist/index.js

@@ -44,8 +44,8 @@ var chunkIHH2O7YK_js = require('./chunk-IHH2O7YK.js');
 var chunkEHYSER2Z_js = require('./chunk-EHYSER2Z.js');
 var chunk3T7L3MHX_js = require('./chunk-3T7L3MHX.js');
 var chunkU3JOBIDU_js = require('./chunk-U3JOBIDU.js');
-var chunkQ7GUWWG5_js = require('./chunk-Q7GUWWG5.js');
-var chunk6OVVMHZJ_js = require('./chunk-6OVVMHZJ.js');
+var chunkLXX2ZDJN_js = require('./chunk-LXX2ZDJN.js');
+var chunkZBVFM3GJ_js = require('./chunk-ZBVFM3GJ.js');
 var chunkTDRINUMH_js = require('./chunk-TDRINUMH.js');
 var chunk3GW3UAKB_js = require('./chunk-3GW3UAKB.js');
 var chunkKAWE5LQZ_js = require('./chunk-KAWE5LQZ.js');
@@ -312,11 +312,11 @@ Object.defineProperty(exports, "ImageCropper", {
 });
 Object.defineProperty(exports, "DataTableWithToolbar", {
   enumerable: true,
-  get: function () { return chunkQ7GUWWG5_js.DataTableWithToolbar; }
+  get: function () { return chunkLXX2ZDJN_js.DataTableWithToolbar; }
 });
 Object.defineProperty(exports, "Table", {
   enumerable: true,
-  get: function () { return chunk6OVVMHZJ_js.Table; }
+  get: function () { return chunkZBVFM3GJ_js.Table; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,

package/dist/index.mjs

@@ -42,8 +42,8 @@ export { Icon } from './chunk-TUA5PDRX.mjs';
 export { CropUpload } from './chunk-QFYS5QIZ.mjs';
 export { Modal } from './chunk-JNLX47UL.mjs';
 export { ImageCropper } from './chunk-2EOXY2LP.mjs';
-export { DataTableWithToolbar } from './chunk-FX2IBA4W.mjs';
-export { Table } from './chunk-PJ7NS7NX.mjs';
+export { DataTableWithToolbar } from './chunk-LLHUBM6E.mjs';
+export { Table } from './chunk-KBTFBEPE.mjs';
 export { Select } from './chunk-MDZDPGRK.mjs';
 export { Pagination } from './chunk-NZLOLMT2.mjs';
 export { DatePicker } from './chunk-ZFHTSHXS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expcat/tigercat-react",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "React components for Tigercat UI library",
   "license": "MIT",
   "author": "Yizhe Wang",
@@ -42,7 +42,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@expcat/tigercat-core": "0.4.2"
+    "@expcat/tigercat-core": "0.4.3"
   },
   "devDependencies": {
     "@types/node": "^25.0.3",