sevago-library 1.0.75 → 1.0.79

package/dist/index.cjs.js

@@ -75363,9 +75363,6 @@ const SwitchContentElement = ({
     /* @__PURE__ */ jsxRuntime.jsx(SwitchElement, { name, value, onChange })
   ] });
 };
-const TableContainerPart = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { overflowY: "auto", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.TableContainer, { sx: { maxHeight: "100%", overflow: "auto" }, children }) });
-};
 var TableActions = /* @__PURE__ */ ((TableActions2) => {
   TableActions2["DISABLED_GET_ROW_MENU"] = "DISABLED_GET_ROW_MENU";
   TableActions2["HISTORY_GET_ROW_MENU"] = "HISTORY_GET_ROW_MENU";
@@ -75424,40 +75421,104 @@ const getStyleRow = (hasOnClick, palette, index, rowSx, indexLoadingRow) => {
     } : {}
   };
 };
-const TableHeadPart = ({ columns }) => {
+function TableRowPart({
+  columns,
+  row,
+  indexRow,
+  indexLoadingRow,
+  rowSx = {},
+  getRowId,
+  onClickRow,
+  onDisabled,
+  onClickSelectRow = false,
+  onSelectRowById,
+  enableTree = false,
+  rowLevels = {}
+}) {
   const { palette } = material.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(material.TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: columns.map((column) => {
-    var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.TableCell,
-      {
-        align: column.align,
-        sx: {
-          width: `${column.width}px !important`,
-          minWidth: `${column.width}px !important`,
-          maxWidth: `${column.width}px !important`,
-          fontWeight: 550,
-          padding: PADDING_GAP_ITEM,
-          borderRadius: "0 !important",
-          backgroundColor: "#F9FAFB",
-          verticalAlign: "top",
-          textAlign: column.alignHead ? column.alignHead : "center",
-          borderTop: BORDER_TABLE,
-          ...column.stickyCss ? {
-            ...column.stickyCss,
-            position: "sticky",
-            backgroundColor: palette.background.paper,
-            zIndex: 4,
-            borderRight: ((_a = column.stickyCss) == null ? void 0 : _a.left) != null ? BORDER_TABLE : ""
-          } : {},
-          ...column.sx ? column.sx : {}
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: column.label })
+  const rowId = getRowId(row);
+  const disabled = onDisabled ? onDisabled(row, indexRow) : { ...DISABLED_DEFAULT };
+  const renderCopyableCell = React.useCallback((displayNode, copyValue) => {
+    const content = copyValue || "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenterJustBetween, { sx: { color: BRAND[950] }, children: [
+      displayNode,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconElement,
+        {
+          icon: "content_copy",
+          sx: { color: BRAND[950], fontSize: FONT_SIZE_ICON.medium },
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!content) return;
+            void navigator.clipboard.writeText(content);
+          }
+        }
+      )
+    ] });
+  }, []);
+  const canSelectRowOnClick = Boolean(onClickSelectRow && onSelectRowById);
+  const isClickableRow = Boolean(onClickRow || canSelectRowOnClick);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: indexRow * 120, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableRow,
+    {
+      hover: true,
+      tabIndex: -1,
+      onClick: () => {
+        onClickRow == null ? void 0 : onClickRow(row, indexRow);
+        if (canSelectRowOnClick) {
+          onSelectRowById == null ? void 0 : onSelectRowById(rowId);
+        }
       },
-      column.id
-    );
-  }) }) });
-};
+      sx: {
+        ...getStyleRow(isClickableRow, palette, indexRow, rowSx, indexLoadingRow),
+        ...rowId === TableRowKey.TOTAL ? {
+          backgroundColor: COMMON.green2,
+          "& .MuiTableCell-root": {
+            backgroundColor: COMMON.green2
+          },
+          "& *": {
+            fontWeight: "bold"
+          }
+        } : {},
+        ...rowId === TableRowKey.TOTAL_INCOME ? {
+          backgroundColor: COMMON.gray7,
+          "& .MuiTableCell-root": {
+            backgroundColor: COMMON.gray7
+          },
+          "& *": {
+            fontWeight: "bold"
+          }
+        } : {}
+      },
+      children: columns.map((column, colIndex) => {
+        const level = enableTree ? rowLevels[rowId] ?? 0 : 0;
+        const firstDataColIndex = enableTree ? columns.findIndex((item) => item.id !== "treeToggle") : -1;
+        const isFirstDataCol = enableTree && colIndex === firstDataColIndex && column.id !== "treeToggle";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          material.TableCell,
+          {
+            align: column.align,
+            sx: {
+              ...getStyleCell(column, palette, disabled.DISABLED_ROW),
+              ...isFirstDataCol ? { pl: (theme) => `calc(${theme.spacing(1)} + ${level * 16}px)` } : {}
+            },
+            onClick: column.id === "actions" || column.id === "selectCheckbox" ? (e) => {
+              e.stopPropagation();
+            } : void 0,
+            children: (() => {
+              const rawValue = row[column.id];
+              const defaultNode = column.render ? column.render(row, indexRow) : rawValue;
+              if (!column.copyable) return defaultNode;
+              const copyValue = typeof column.copyable === "object" && column.copyable.getValue ? String(column.copyable.getValue(row, indexRow) || "") : String(rawValue || "");
+              return renderCopyableCell(defaultNode ?? String(rawValue), copyValue);
+            })()
+          },
+          column.id
+        );
+      })
+    }
+  ) });
+}
 const EMPTY_TREE_META = {
   visibleRows: [],
   rowLevels: {},
@@ -75562,7 +75623,83 @@ const TreeToggleCell = ({
     }
   );
 };
-const TableComponent = ({
+const TableContainerPart = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { overflowY: "auto", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.TableContainer, { sx: { maxHeight: "100%", overflow: "auto" }, children }) });
+};
+const TableHeadPart = ({ columns }) => {
+  const { palette } = material.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(material.TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: columns.map((column) => {
+    var _a;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.TableCell,
+      {
+        align: column.align,
+        sx: {
+          width: `${column.width}px !important`,
+          minWidth: `${column.width}px !important`,
+          maxWidth: `${column.width}px !important`,
+          fontWeight: 550,
+          padding: PADDING_GAP_ITEM,
+          borderRadius: "0 !important",
+          backgroundColor: "#F9FAFB",
+          verticalAlign: "top",
+          textAlign: column.alignHead ? column.alignHead : "center",
+          borderTop: BORDER_TABLE,
+          ...column.stickyCss ? {
+            ...column.stickyCss,
+            position: "sticky",
+            backgroundColor: palette.background.paper,
+            zIndex: 4,
+            borderRight: ((_a = column.stickyCss) == null ? void 0 : _a.left) != null ? BORDER_TABLE : ""
+          } : {},
+          ...column.sx ? column.sx : {}
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: column.label })
+      },
+      column.id
+    );
+  }) }) });
+};
+const TableBaseComponent = ({
+  columns,
+  rows = [],
+  loading = false,
+  indexLoadingRow,
+  stickyHeader = true,
+  tableSx,
+  tableRef,
+  renderRow,
+  renderLoading,
+  renderEmpty
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContainerPart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Table,
+    {
+      ref: tableRef,
+      stickyHeader,
+      sx: [
+        {
+          height: loading || rows.length === 0 ? "100%" : "none",
+          borderCollapse: "separate !important",
+          "& .MuiTableCell-root": {
+            borderRight: BORDER_TABLE,
+            borderBottom: BORDER_TABLE,
+            "&:first-of-type": {
+              borderLeft: BORDER_TABLE
+            }
+          }
+        },
+        ...Array.isArray(tableSx) ? tableSx : [tableSx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeadPart, { columns }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.TableBody, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: renderLoading() }) }) : rows.length ? rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderRow(row, index) }, index)) : /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: renderEmpty() }) }) })
+      ]
+    }
+  ) });
+};
+const EMPTY_ROWS = [];
+function TableRendererComponent({
   loading = false,
   rows,
   columns: initialColumns,
@@ -75575,10 +75712,8 @@ const TableComponent = ({
   getChildren,
   onClickRow,
   onDisabled,
-  // start row
   selectedRows,
   onSelectRows,
-  // end row
   onSelectRow,
   onDeleteRow,
   onInfoRow,
@@ -75586,20 +75721,32 @@ const TableComponent = ({
   onHistoryRow,
   onUpdateRow,
   getActionIcon,
-  getRowMenu
-}) => {
-  rows = rows || [];
+  getRowMenu,
+  extraActionCount = 0,
+  stickyHeader = true,
+  tableSx,
+  tableRef,
+  renderRow
+}) {
+  const tableRows = React.useMemo(() => rows ?? EMPTY_ROWS, [rows]);
   const [tooltipOpen, setTooltipOpen] = React.useState({});
   const [expandedRowIds, setExpandedRowIds] = React.useState(/* @__PURE__ */ new Set());
   const { palette } = material.useTheme();
-  const lengthActions = [onSelectRow, onDeleteRow, onInfoRow, onCopyRow, onHistoryRow, onUpdateRow, getRowMenu].filter(
-    Boolean
-  ).length;
-  const widthActions = lengthActions * 19 + (lengthActions - 1) * 16;
+  const baseActionCount = [
+    onSelectRow,
+    onDeleteRow,
+    onInfoRow,
+    onCopyRow,
+    onHistoryRow,
+    onUpdateRow,
+    getRowMenu
+  ].filter(Boolean).length;
+  const lengthActions = baseActionCount + extraActionCount;
+  const widthActions = lengthActions > 0 ? lengthActions * 19 + Math.max(lengthActions - 1, 0) * 16 : 0;
   const getRowId = React.useCallback(
     (row) => {
       if (rowKey) return rowKey(row);
-      return row.id;
+      return String(row.id);
     },
     [rowKey]
   );
@@ -75627,16 +75774,16 @@ const TableComponent = ({
         }
       });
     };
-    walkIds(rows);
+    walkIds(tableRows);
     setExpandedRowIds(next);
-  }, [enableTree, getRowId, childrenGetter]);
+  }, [enableTree, getRowId, childrenGetter, tableRows]);
   const { visibleRows, rowLevels, hasChildrenById } = React.useMemo(
-    () => buildTreeMeta({ rows, enableTree, expandedRowIds, getRowId, getChildren: childrenGetter }),
-    [rows, enableTree, expandedRowIds, getRowId, childrenGetter]
+    () => buildTreeMeta({ rows: tableRows, enableTree, expandedRowIds, getRowId, getChildren: childrenGetter }),
+    [tableRows, enableTree, expandedRowIds, getRowId, childrenGetter]
   );
   const allRowIds = React.useMemo(() => visibleRows.map(getRowId), [visibleRows, getRowId]);
-  const isAllSelected = selectedRows && allRowIds.every((id) => selectedRows.includes(id));
-  const isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;
+  const isAllSelected = selectedRows ? allRowIds.every((id) => selectedRows.includes(id)) : false;
+  const isIndeterminate = selectedRows ? selectedRows.length > 0 && !isAllSelected : false;
   const handleSelectAll = React.useCallback(() => {
     if (isAllSelected) onSelectRows == null ? void 0 : onSelectRows([]);
     else onSelectRows == null ? void 0 : onSelectRows(allRowIds);
@@ -75645,7 +75792,7 @@ const TableComponent = ({
     (id) => {
       if (!selectedRows) return;
       if (selectedRows.includes(id)) {
-        onSelectRows == null ? void 0 : onSelectRows(selectedRows.filter((i) => i !== id));
+        onSelectRows == null ? void 0 : onSelectRows(selectedRows.filter((item) => item !== id));
       } else {
         onSelectRows == null ? void 0 : onSelectRows([...selectedRows, id]);
       }
@@ -75660,6 +75807,133 @@ const TableComponent = ({
       return next;
     });
   }, []);
+  const renderActionsContent = React.useCallback(
+    (row, index) => {
+      const rowIdValue = getRowId(row);
+      if (rowIdValue === TableRowKey.TOTAL || rowIdValue === TableRowKey.TOTAL_INCOME) return null;
+      const disabled = onDisabled ? onDisabled(row, index) : { ...DISABLED_DEFAULT };
+      const disabledByParent = disabled.DISABLED_ROW || disabled.DISABLED_ALL_ACTIONS;
+      const tooltipRowId = String(rowKey ? rowKey(row) : row.id || index);
+      const createMenuWithCloseHandler = () => {
+        if (!getRowMenu) return [];
+        return getRowMenu(row, index).map((menuItem) => ({
+          ...menuItem,
+          onClick: () => {
+            menuItem.onClick();
+            setTooltipOpen((prev) => ({ ...prev, [tooltipRowId]: false }));
+          }
+        }));
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        onSelectRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: "remove_red_eye",
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelectRow(row, index);
+            },
+            disabled: disabledByParent || disabled.SELECT
+          }
+        ),
+        onDeleteRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: "delete",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDeleteRow(row, index);
+            },
+            color: "error",
+            disabled: disabledByParent || disabled.DELETE
+          }
+        ),
+        onInfoRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: "view_cozy",
+            onClick: (e) => {
+              e.stopPropagation();
+              onInfoRow(row, index);
+            },
+            disabled: disabledByParent || disabled.INFO
+          }
+        ),
+        onCopyRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: getActionIcon && getActionIcon(row, index, "COPY") || "content_copy",
+            onClick: (e) => {
+              e.stopPropagation();
+              onCopyRow(row, index);
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            },
+            disabled: disabledByParent || disabled.COPY
+          }
+        ),
+        onHistoryRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: "history",
+            onClick: (e) => {
+              e.stopPropagation();
+              onHistoryRow(row, index);
+            },
+            disabled: disabledByParent || disabled.HISTORY_GET_ROW_MENU
+          }
+        ),
+        onUpdateRow && /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: getActionIcon && getActionIcon(row, index, "UPDATE") || "settings",
+            onClick: (e) => {
+              e.stopPropagation();
+              onUpdateRow(row, index);
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            },
+            disabled: disabledByParent || disabled.UPDATE
+          }
+        ),
+        getRowMenu && (!disabled.DISABLED_GET_ROW_MENU ? /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipOnHoverElement,
+          {
+            style: {
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center"
+            },
+            placement: "bottom-end",
+            open: !!tooltipOpen[tooltipRowId],
+            onOpen: () => setTooltipOpen((prev) => ({ ...prev, [tooltipRowId]: true })),
+            onClose: () => setTooltipOpen((prev) => ({ ...prev, [tooltipRowId]: false })),
+            content: /* @__PURE__ */ jsxRuntime.jsx(ListIconContentElement, { list: createMenuWithCloseHandler() }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "open_in_browser", onClick: (e) => e.stopPropagation() })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          IconElement,
+          {
+            icon: "open_in_browser",
+            disabled: disabledByParent || disabled.DISABLED_GET_ROW_MENU,
+            onClick: (e) => e.stopPropagation()
+          }
+        ))
+      ] });
+    },
+    [
+      getActionIcon,
+      getRowId,
+      getRowMenu,
+      onCopyRow,
+      onDeleteRow,
+      onDisabled,
+      onHistoryRow,
+      onInfoRow,
+      onSelectRow,
+      onUpdateRow,
+      rowKey,
+      tooltipOpen
+    ]
+  );
   const columns = React.useMemo(() => {
     const updateColumns = [...initialColumns];
     if (enableTree) {
@@ -75717,375 +75991,158 @@ const TableComponent = ({
         }
       });
     }
-    if (onSelectRow || onDeleteRow || onInfoRow || onCopyRow || onHistoryRow || onUpdateRow || getRowMenu) {
+    if (lengthActions > 0) {
       updateColumns.push({
         id: "actions",
         label: "Actions",
         width: widthActions > 70 ? widthActions : 70,
+        align: "center",
         alignHead: "center",
         stickyCss: isStickyActions ? { right: 0, borderLeft: BORDER_TABLE, zIndex: 1.5 } : void 0,
-        render: (row, index) => {
-          const rowIdValue = getRowId(row);
-          if (rowIdValue === TableRowKey.TOTAL || rowIdValue === TableRowKey.TOTAL_INCOME) return null;
-          const disabled = onDisabled ? onDisabled(row, index) : { ...DISABLED_DEFAULT };
-          const disabledByParent = disabled.DISABLED_ROW || disabled.DISABLED_ALL_ACTIONS;
-          const rowId = rowKey ? rowKey(row) : row.id || index;
-          const createMenuWithCloseHandler = () => {
-            if (!getRowMenu) return [];
-            return getRowMenu(row, index).map((menuItem) => ({
-              ...menuItem,
-              onClick: () => {
-                menuItem.onClick();
-                setTooltipOpen((prev) => ({ ...prev, [rowId]: false }));
-              }
-            }));
-          };
-          return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignJustCenter, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
-            onSelectRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: "remove_red_eye",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSelectRow(row, index);
-                },
-                disabled: disabledByParent || disabled.SELECT
-              }
-            ),
-            onDeleteRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: "delete",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onDeleteRow(row, index);
-                },
-                color: "error",
-                disabled: disabledByParent || disabled.DELETE
-              }
-            ),
-            onInfoRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: "view_cozy",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onInfoRow(row, index);
-                },
-                disabled: disabledByParent || disabled.INFO
-              }
-            ),
-            onCopyRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: getActionIcon && getActionIcon(row, index, "COPY") || "content_copy",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onCopyRow(row, index);
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                },
-                disabled: disabledByParent || disabled.COPY
-              }
-            ),
-            onHistoryRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: "history",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onHistoryRow(row, index);
-                },
-                disabled: disabledByParent || disabled.HISTORY_GET_ROW_MENU
-              }
-            ),
-            onUpdateRow && /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: getActionIcon && getActionIcon(row, index, "UPDATE") || "settings",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onUpdateRow(row, index);
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                },
-                disabled: disabledByParent || disabled.UPDATE
-              }
-            ),
-            getRowMenu && (!disabled.DISABLED_GET_ROW_MENU ? /* @__PURE__ */ jsxRuntime.jsx(
-              TooltipOnHoverElement,
-              {
-                style: {
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center"
-                },
-                placement: "bottom-end",
-                open: !!tooltipOpen[rowId],
-                onOpen: () => setTooltipOpen((prev) => ({ ...prev, [rowId]: true })),
-                onClose: () => setTooltipOpen((prev) => ({ ...prev, [rowId]: false })),
-                content: /* @__PURE__ */ jsxRuntime.jsx(ListIconContentElement, { list: createMenuWithCloseHandler() }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "open_in_browser", onClick: (e) => e.stopPropagation() })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              IconElement,
-              {
-                icon: "open_in_browser",
-                disabled: disabledByParent || disabled.DISABLED_GET_ROW_MENU,
-                onClick: (e) => e.stopPropagation()
-              }
-            ))
-          ] });
-        }
+        render: (row, index) => /* @__PURE__ */ jsxRuntime.jsx(StackRowAlignJustCenter, { gap: 1, onClick: (e) => e.stopPropagation(), children: renderActionsContent(row, index) })
       });
     }
     return updateColumns;
   }, [
     initialColumns,
+    enableTree,
     onSelectRows,
-    selectedRows,
+    lengthActions,
+    getRowId,
+    rowLevels,
+    hasChildrenById,
+    expandedRowIds,
+    handleToggleTreeRow,
+    palette,
+    handleSelectAll,
     isAllSelected,
     isIndeterminate,
-    handleSelectAll,
+    onDisabled,
+    selectedRows,
     handleSelectRow,
-    getRowId,
-    onSelectRow,
-    onDeleteRow,
-    onInfoRow,
-    onCopyRow,
-    onHistoryRow,
-    onUpdateRow,
-    getRowMenu,
     widthActions,
     isStickyActions,
-    onDisabled,
-    rowKey,
-    tooltipOpen,
-    enableTree,
-    rowLevels,
-    expandedRowIds,
-    hasChildrenById,
-    handleToggleTreeRow
+    renderActionsContent
   ]);
-  const renderCopyableCell = React.useCallback((displayNode, copyValue) => {
-    const content = copyValue || "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenterJustBetween, { sx: { color: BRAND[950] }, children: [
-      displayNode,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "content_copy",
-          sx: { color: BRAND[950], fontSize: FONT_SIZE_ICON.medium },
-          onClick: (e) => {
-            e.stopPropagation();
-            if (!content) return;
-            void navigator.clipboard.writeText(content);
-          }
-        }
-      )
-    ] });
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContainerPart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    material.Table,
+  const renderDefaultRow = React.useCallback(
+    (row, index, columnsOverride) => /* @__PURE__ */ jsxRuntime.jsx(
+      TableRowPart,
+      {
+        columns: columnsOverride ?? columns,
+        row,
+        indexRow: index,
+        indexLoadingRow,
+        rowSx,
+        getRowId,
+        onClickRow,
+        onDisabled,
+        onClickSelectRow,
+        onSelectRowById: handleSelectRow,
+        enableTree,
+        rowLevels
+      }
+    ),
+    [
+      columns,
+      enableTree,
+      getRowId,
+      handleSelectRow,
+      indexLoadingRow,
+      onClickRow,
+      onClickSelectRow,
+      onDisabled,
+      rowLevels,
+      rowSx
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableBaseComponent,
     {
-      stickyHeader: true,
-      sx: {
-        height: loading || rows.length === 0 ? "100%" : "none",
-        borderCollapse: "separate !important",
-        "& .MuiTableCell-root": {
-          borderRight: BORDER_TABLE,
-          borderBottom: BORDER_TABLE,
-          "&:first-of-type": {
-            borderLeft: BORDER_TABLE
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeadPart, { columns }),
-        /* @__PURE__ */ jsxRuntime.jsx(material.TableBody, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.TableCell,
-          {
-            sx: { borderTopLeftRadius: "0 !important", borderTopRightRadius: "0 !important" },
-            colSpan: columns.length,
-            children: /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {})
-          }
-        ) }) : visibleRows.length ? visibleRows.map((row, index) => {
-          const disabled = onDisabled ? onDisabled(row, index) : { ...DISABLED_DEFAULT };
-          return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: index * 120, children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.TableRow,
-            {
-              hover: true,
-              tabIndex: -1,
-              onClick: () => {
-                if (onClickRow) onClickRow(row, index);
-                if (onClickSelectRow && onSelectRows && getRowId) {
-                  const id = getRowId(row);
-                  handleSelectRow(id);
-                }
-              },
-              sx: {
-                ...getStyleRow(Boolean(onClickRow), palette, index, rowSx, indexLoadingRow),
-                ...getRowId(row) === TableRowKey.TOTAL ? {
-                  backgroundColor: COMMON.green2,
-                  "& .MuiTableCell-root": {
-                    backgroundColor: COMMON.green2
-                  },
-                  "& *": {
-                    fontWeight: "bold"
-                  }
-                } : {},
-                ...getRowId(row) === TableRowKey.TOTAL_INCOME ? {
-                  backgroundColor: COMMON.gray7,
-                  "& .MuiTableCell-root": {
-                    backgroundColor: COMMON.gray7
-                  },
-                  "& *": {
-                    fontWeight: "bold"
-                  }
-                } : {}
-              },
-              children: columns.map((column, colIndex) => {
-                const level = enableTree ? rowLevels[getRowId(row)] ?? 0 : 0;
-                const firstDataColIndex = enableTree ? columns.findIndex((c) => c.id !== "treeToggle") : -1;
-                const isFirstDataCol = enableTree && colIndex === firstDataColIndex && column.id !== "treeToggle";
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  material.TableCell,
-                  {
-                    align: column.align,
-                    sx: {
-                      ...getStyleCell(column, palette, disabled.DISABLED_ROW),
-                      ...isFirstDataCol ? { pl: (theme) => `calc(${theme.spacing(1)} + ${level * 16}px)` } : {}
-                    },
-                    onClick: column.id === "actions" || column.id === "selectCheckbox" ? (e) => {
-                      e.stopPropagation();
-                    } : void 0,
-                    children: (() => {
-                      const rawValue = row[column.id];
-                      const defaultNode = column.render ? column.render(row, index) : rawValue;
-                      if (!column.copyable) return defaultNode;
-                      const copyValue = typeof column.copyable === "object" && column.copyable.getValue ? String(column.copyable.getValue(row, index) || "") : String(rawValue || "");
-                      return renderCopyableCell(defaultNode ?? String(rawValue), copyValue);
-                    })()
-                  },
-                  column.id
-                );
-              })
-            },
-            index
-          ) }, index);
-        }) : /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.TableCell,
-          {
-            sx: { height: 200, borderTopLeftRadius: "0 !important", borderTopRightRadius: "0 !important" },
-            colSpan: columns.length,
-            children: /* @__PURE__ */ jsxRuntime.jsx(EmptyComponent, {})
-          }
-        ) }) })
-      ]
+      columns,
+      rows: visibleRows,
+      loading,
+      indexLoadingRow,
+      stickyHeader,
+      tableRef,
+      tableSx,
+      renderLoading: () => /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}),
+      renderEmpty: () => /* @__PURE__ */ jsxRuntime.jsx(EmptyComponent, {}),
+      renderRow: (row, index) => {
+        if (!renderRow) return renderDefaultRow(row, index);
+        return renderRow({
+          row,
+          index,
+          columns,
+          renderDefaultRow: (columnsOverride) => renderDefaultRow(row, index, columnsOverride),
+          renderActionsContent
+        });
+      }
     }
-  ) });
-};
-const RowCollapsePart = ({
+  );
+}
+function RowCollapsePart({
   columns,
   row,
   indexRow,
-  indexLoadingRow,
   collapse,
-  rowSx = {},
   collapseTableWidth,
-  onClickRow,
-  onDisabled,
-  // end row
-  onSelectRow,
-  onDeleteRow,
-  onInfoRow,
-  onCopyRow,
-  onUpdateRow
-}) => {
+  renderDefaultRow,
+  renderActionsContent,
+  onDisabled
+}) {
   const { palette } = material.useTheme();
   const [open2, setOpen] = React.useState(false);
   const [state, setState] = React.useState();
   const [loading, setLoading] = React.useState(false);
-  const toggleCollapse = async (row2, indexRow2) => {
-    setOpen(!open2);
-    if (!collapse.onOpenCollapse || state) return;
-    setLoading(true);
-    try {
-      const data = await collapse.onOpenCollapse(row2, indexRow2);
-      setState(collapse.property ? data[collapse.property] : data);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-  columns[columns.length - 1].render = (row2, index) => {
-    const disabled2 = onDisabled ? onDisabled(row2, index) : { ...DISABLED_DEFAULT };
-    const disabledByParent = disabled2.DISABLED_ROW || disabled2.DISABLED_ALL_ACTIONS;
-    return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignJustCenter, { gap: 1, children: [
-      onSelectRow && /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "info",
-          onClick: () => onSelectRow(row2, index),
-          disabled: disabledByParent || disabled2.SELECT
-        }
-      ),
-      onInfoRow && /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "view_cozy",
-          onClick: () => onInfoRow(row2, index),
-          disabled: disabledByParent || disabled2.INFO
-        }
-      ),
-      onDeleteRow && /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "delete",
-          onClick: () => onDeleteRow(row2, index),
-          disabled: disabledByParent || disabled2.DELETE
-        }
-      ),
-      onCopyRow && /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "content_copy",
-          onClick: () => onCopyRow(row2, index),
-          disabled: disabledByParent || disabled2.COPY
-        }
-      ),
-      onUpdateRow && /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          icon: "settings",
-          onClick: () => {
-            window.scrollTo({ top: 0, behavior: "smooth" });
-            onUpdateRow(row2, index);
-          },
-          disabled: disabledByParent || disabled2.UPDATE
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        IconElement,
-        {
-          onClick: () => toggleCollapse(row2, indexRow),
-          icon: open2 ? "keyboard_arrow_down" : "keyboard_arrow_up",
-          disabled: disabledByParent || disabled2.COLLAPSE
+  const toggleCollapse = React.useCallback(
+    async (targetRow, targetIndex) => {
+      const nextOpen = !open2;
+      setOpen(nextOpen);
+      if (!nextOpen || !collapse.onOpenCollapse || state !== void 0) return;
+      setLoading(true);
+      try {
+        const data = await collapse.onOpenCollapse(targetRow, targetIndex);
+        const nextRows = collapse.property ? data == null ? void 0 : data[collapse.property] : data;
+        setState(nextRows);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [collapse, open2, state]
+  );
+  const columnsWithCollapseAction = React.useMemo(
+    () => columns.map((column) => {
+      if (column.id !== "actions") return column;
+      return {
+        ...column,
+        render: (actionRow, actionIndex) => {
+          const disabled = onDisabled ? onDisabled(actionRow, actionIndex) : { ...DISABLED_DEFAULT };
+          const disabledByParent = disabled.DISABLED_ROW || disabled.DISABLED_ALL_ACTIONS;
+          return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignJustCenter, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
+            renderActionsContent(actionRow, actionIndex),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconElement,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  void toggleCollapse(actionRow, actionIndex);
+                },
+                icon: open2 ? "keyboard_arrow_down" : "keyboard_arrow_up",
+                disabled: disabledByParent || disabled.COLLAPSE
+              }
+            )
+          ] });
         }
-      )
-    ] });
-  };
-  const disabled = onDisabled ? onDisabled(row, indexRow) : { ...DISABLED_DEFAULT };
+      };
+    }),
+    [columns, onDisabled, open2, renderActionsContent, toggleCollapse]
+  );
+  const { iconTitle, title, property, onOpenCollapse, ...collapseTableProps } = collapse;
+  const collapseRows = onOpenCollapse ? state : property ? row[property] : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: indexRow * 120, children: /* @__PURE__ */ jsxRuntime.jsx(
-      material.TableRow,
-      {
-        hover: true,
-        tabIndex: -1,
-        onClick: () => onClickRow && onClickRow(row, indexRow),
-        sx: getStyleRow(Boolean(onClickRow), palette, indexRow, rowSx, indexLoadingRow),
-        children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { align: column.align, sx: getStyleCell(column, palette, disabled.DISABLED_ROW), children: column.render ? column.render(row, indexRow) : row[column.id] }, column.id))
-      }
-    ) }),
+    renderDefaultRow(columnsWithCollapseAction),
     /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: columns.length + 2, children: /* @__PURE__ */ jsxRuntime.jsx(
       material.Stack,
       {
@@ -76104,88 +76161,55 @@ const RowCollapsePart = ({
               backgroundColor: palette.background.default
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(IconContentElement, { icon: collapse.iconTitle || "filter_list", content: collapse.title, size: "medium" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                TableComponent,
-                {
-                  loading,
-                  columns: collapse.columns,
-                  isStickyActions: collapse.isStickyActions,
-                  rows: collapse.onOpenCollapse ? state : row[collapse.property],
-                  onClickRow: collapse.onClickRow,
-                  onDisabled: collapse.onDisabled,
-                  onSelectRow: collapse.onSelectRow,
-                  onDeleteRow: collapse.onDeleteRow,
-                  onInfoRow: collapse.onInfoRow,
-                  onCopyRow: collapse.onCopyRow,
-                  onUpdateRow: collapse.onUpdateRow
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(IconContentElement, { icon: iconTitle || "filter_list", content: title, size: "medium" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableRendererComponent, { ...collapseTableProps, loading, rows: collapseRows })
             ]
           }
         ) })
       }
     ) }) })
   ] });
-};
-const TableCollapseComponent = ({
-  loading,
+}
+function TableCollapseComponent({
+  loading = false,
   rows,
-  columns: initialColumns,
-  indexLoadingRow,
+  columns,
   collapse,
-  isStickyActions = false,
-  onClickRow,
-  onDisabled,
-  // end row + 1 icon collapse
-  onSelectRow,
-  onDeleteRow,
-  onInfoRow,
-  onCopyRow,
-  onUpdateRow
-}) => {
-  rows = rows || [];
-  const lengthActions = [onSelectRow, onDeleteRow, onInfoRow, onCopyRow, onUpdateRow].filter(Boolean).length + 1;
-  const widthActions = lengthActions * 19 + (lengthActions - 1) * 16;
-  const columns = React.useMemo(() => {
-    const updateColumns = [...initialColumns];
-    updateColumns.push({
-      id: "actions",
-      label: "Actions",
-      width: widthActions > 70 ? widthActions : 70,
-      align: "center",
-      stickyCss: isStickyActions ? { right: 0 } : void 0
-    });
-    return updateColumns;
-  }, [initialColumns, widthActions, isStickyActions]);
+  ...tableProps
+}) {
+  const tableRows = React.useMemo(() => rows || [], [rows]);
   const ref = React.useRef(null);
   const [widthTable, setWidthTable] = React.useState(0);
   React.useEffect(() => {
     if (ref.current) setWidthTable(ref.current.clientWidth);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContainerPart, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Table, { sx: { height: loading || rows.length === 0 ? "100%" : "none" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TableHeadPart, { columns }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.TableBody, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) }) }) : rows.length ? rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      RowCollapsePart,
-      {
-        columns,
-        row,
-        indexRow: index,
-        onDisabled,
-        indexLoadingRow,
-        collapse: { ...collapse, columns: [...collapse.columns] },
-        collapseTableWidth: widthTable,
-        onSelectRow,
-        onInfoRow,
-        onClickRow,
-        onUpdateRow,
-        onCopyRow,
-        onDeleteRow
-      },
-      index
-    )) : /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyComponent, {}) }) }) })
-  ] }) });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableRendererComponent,
+    {
+      ...tableProps,
+      columns,
+      rows: tableRows,
+      loading,
+      extraActionCount: 1,
+      stickyHeader: false,
+      tableRef: ref,
+      tableSx: { height: loading || tableRows.length === 0 ? "100%" : "none" },
+      renderRow: ({ row, index, columns: renderColumns, renderDefaultRow, renderActionsContent }) => /* @__PURE__ */ jsxRuntime.jsx(
+        RowCollapsePart,
+        {
+          ...tableProps,
+          columns: renderColumns,
+          row,
+          indexRow: index,
+          collapse,
+          collapseTableWidth: widthTable,
+          renderDefaultRow,
+          renderActionsContent
+        }
+      )
+    }
+  );
+}
 const tableArgTypes = {
   loading: {
     control: "boolean",
@@ -76227,6 +76251,9 @@ const tableArgTypes = {
   getRowMenu: { control: false },
   onDisabled: { control: false }
 };
+function TableComponent(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRendererComponent, { ...props });
+}
 const UserInfo = ({
   name = "Hệ thống",
   department = "Hệ thống",