shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/table/enhanced-table.mjs

@@ -0,0 +1,388 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+import { useState, useMemo, useCallback } from 'react';
+import { MinusIcon16 } from '../../../assets/Icon';
+import { Button } from '../../../components/button';
+import { Checkbox } from '../../../components/checkbox';
+import { Skeleton } from '../../../components/skeleton';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '../../../components/table';
+import { cn } from '../../../lib/utils';
+import { StatusState } from '../../display/status-state';
+import { TablePagination } from './table-pagination';
+
+function getValueByPath(obj, path) {
+  if (!path) return "";
+  if (!path.includes(".")) {
+    return obj[path];
+  }
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current === null || current === void 0) {
+      return "";
+    }
+    current = current[key];
+  }
+  return current;
+}
+function EnhancedTable({
+  dataSource,
+  columns,
+  loading = false,
+  rowKey,
+  rowSelection,
+  pagination,
+  onChange,
+  scroll,
+  hasRefreshDataSource,
+  className,
+  tableClassName,
+  headerClassName,
+  bodyClassName,
+  rowClassName,
+  onRowClick,
+  emptyStateProps
+}) {
+  const [sort, setSort] = useState({});
+  const { leftOffsets, rightOffsets, totalColumnWidth } = useMemo(() => {
+    const left = {};
+    const right = {};
+    let totalWidth = 0;
+    let currentLeft = 0;
+    let currentRight = 0;
+    if (rowSelection) {
+      const selectionWidth = 50;
+      currentLeft += selectionWidth;
+      totalWidth += selectionWidth;
+    }
+    columns.forEach((col) => {
+      const key = String(col.key || col.dataIndex);
+      const colWidth = Number(col.width) || 150;
+      totalWidth += colWidth;
+      if (col.fixed === "left") {
+        left[key] = currentLeft;
+        currentLeft += colWidth;
+      }
+    });
+    [...columns].reverse().forEach((col) => {
+      const key = String(col.key || col.dataIndex);
+      if (col.fixed === "right") {
+        const colWidth = Number(col.width) || 150;
+        right[key] = currentRight;
+        currentRight += colWidth;
+      }
+    });
+    return { leftOffsets: left, rightOffsets: right, totalColumnWidth: totalWidth };
+  }, [columns, rowSelection]);
+  const tableStyle = useMemo(() => {
+    if (scroll?.x !== void 0) {
+      if (scroll.x === 0 || scroll.x === "auto" || scroll.x === "100%") {
+        return { minWidth: `${totalColumnWidth}px` };
+      }
+      return { minWidth: typeof scroll.x === "number" ? `${scroll.x}px` : scroll.x };
+    }
+    return {};
+  }, [scroll, totalColumnWidth]);
+  const getRowKey = useCallback(
+    (record) => {
+      if (typeof rowKey === "function") {
+        return rowKey(record);
+      }
+      return record[rowKey];
+    },
+    [rowKey]
+  );
+  const handleSort = (column) => {
+    const columnKey = column.key || column.dataIndex;
+    let newOrder = "ascend";
+    if (sort.columnKey === columnKey && sort.order === "ascend") {
+      newOrder = "descend";
+    } else if (sort.columnKey === columnKey && sort.order === "descend") {
+      newOrder = void 0;
+    }
+    const newSorter = { columnKey, order: newOrder, column };
+    setSort(newSorter);
+    if (onChange && pagination) {
+      onChange({ current: pagination.current, pageSize: pagination.pageSize }, newSorter);
+    }
+  };
+  const handleSelectAll = (checked) => {
+    if (rowSelection) {
+      const allRowKeysOnPage = processedData.filter((row) => !rowSelection.isDisable?.(row)).map(getRowKey);
+      if (checked) {
+        const newSelectedKeys = [
+          .../* @__PURE__ */ new Set([...rowSelection.selectedRowKeys, ...allRowKeysOnPage])
+        ];
+        const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));
+        rowSelection.onChange?.(newSelectedKeys, newSelectedRows);
+      } else {
+        const newSelectedKeys = rowSelection.selectedRowKeys.filter(
+          (k) => !allRowKeysOnPage.includes(k)
+        );
+        const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));
+        rowSelection.onChange?.(newSelectedKeys, newSelectedRows);
+      }
+    }
+  };
+  const handleSelectRow = (record, checked) => {
+    if (rowSelection) {
+      const key = getRowKey(record);
+      const currentSelected = rowSelection.selectedRowKeys;
+      const newSelectedKeys = checked ? [...currentSelected, key] : currentSelected.filter((k) => k !== key);
+      const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));
+      rowSelection.onChange?.(newSelectedKeys, newSelectedRows);
+    }
+  };
+  const processedData = useMemo(() => {
+    let data = [...dataSource];
+    const { column, order } = sort;
+    if (column && order && column.sorter) {
+      data.sort((a, b) => {
+        if (typeof column.sorter === "function") {
+          return order === "ascend" ? column.sorter(a, b) : -column.sorter(a, b);
+        }
+        const valA = a[column.dataIndex];
+        const valB = b[column.dataIndex];
+        if (valA < valB) return order === "ascend" ? -1 : 1;
+        if (valA > valB) return order === "ascend" ? 1 : -1;
+        return 0;
+      });
+    }
+    if (pagination && !hasRefreshDataSource) {
+      const { current, pageSize } = pagination;
+      const startIndex = (current - 1) * pageSize;
+      data = data.slice(startIndex, startIndex + pageSize);
+    }
+    return data;
+  }, [dataSource, sort, pagination]);
+  const getStickyStyles = (col, baseZIndex) => {
+    const key = String(col.key || col.dataIndex);
+    const styles = {
+      minWidth: `${col.width}px`
+    };
+    if (col.fixed === "left") {
+      styles.position = "sticky";
+      styles.left = leftOffsets[key] ?? 0;
+      styles.zIndex = baseZIndex + 1;
+      styles.boxShadow = "10px 0 5px -2px #888";
+      styles.width = `${col.width}px`;
+      styles.maxWidth = `${col.width}px`;
+      styles.boxSizing = "border-box";
+    }
+    if (col.fixed === "right") {
+      styles.position = "sticky";
+      styles.right = rightOffsets[key] ?? 0;
+      styles.zIndex = baseZIndex + 1;
+      styles.boxShadow = "-10px 0px 10px 1px #aaaaaa";
+      styles.width = `${col.width}px`;
+      styles.maxWidth = `${col.width}px`;
+      styles.boxSizing = "border-box";
+    }
+    return styles;
+  };
+  const renderHeader = () => {
+    const enabledRows = processedData.filter((row) => !rowSelection?.isDisable?.(row));
+    const selectedEnabledRowsCount = enabledRows.filter(
+      (row) => rowSelection?.selectedRowKeys.includes(getRowKey(row))
+    ).length;
+    const isAllSelected = enabledRows.length > 0 && selectedEnabledRowsCount === enabledRows.length;
+    const isIndeterminate = selectedEnabledRowsCount > 0 && selectedEnabledRowsCount < enabledRows.length;
+    return /* @__PURE__ */ jsxs(TableRow, { className: cn("", typeof rowClassName === "string" ? rowClassName : ""), children: [
+      rowSelection && /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          style: { width: 50, minWidth: 50, maxWidth: 50, maxHeight: 40 },
+          className: cn("bg-muted text-t14m sticky left-0 h-10"),
+          children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isAllSelected || isIndeterminate,
+              disabled: (
+                // Disable nếu không có row nào, hoặc tất cả row trên page đều bị disable
+                processedData.length === 0 || processedData.every((row) => rowSelection.isDisable?.(row))
+              ),
+              onCheckedChange: handleSelectAll,
+              className: "border-border bg-background",
+              indicator: isIndeterminate ? /* @__PURE__ */ jsx(MinusIcon16, { className: "ic-white h-4 w-4" }) : void 0
+            }
+          )
+        }
+      ),
+      columns.map((col) => {
+        const styles = getStickyStyles(col, 10);
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            style: {
+              ...styles
+            },
+            className: cn(
+              "text-t14m text-foreground bg-muted h-10 px-4 py-2 font-medium",
+              col.fixed === "right" && `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,
+              col.fixed === "left" && `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`
+            ),
+            children: col.sorter ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "ghost",
+                onClick: () => handleSort(col),
+                className: "text-t14m -ml-4",
+                children: [
+                  col.title,
+                  sort.columnKey !== (col.key || col.dataIndex) && /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-2 size-4" }),
+                  sort.columnKey === (col.key || col.dataIndex) && sort.order === "ascend" && /* @__PURE__ */ jsx(ArrowUp, { className: "ml-2 size-4" }),
+                  sort.columnKey === (col.key || col.dataIndex) && sort.order === "descend" && /* @__PURE__ */ jsx(ArrowDown, { className: "ml-2 size-4" })
+                ]
+              }
+            ) : col.title
+          },
+          col.key || col.dataIndex
+        );
+      })
+    ] });
+  };
+  const handleRowClick = (record) => () => {
+    onRowClick?.(record);
+  };
+  const renderBody = () => {
+    if (loading && !processedData?.length) {
+      const skeletonRows = Array.from({ length: 5 }, (_, rowIndex) => /* @__PURE__ */ jsxs(TableRow, { className: "text-t14m", children: [
+        rowSelection && /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            style: { width: 50, minWidth: 50, maxWidth: 50 },
+            className: "sticky left-0 h-12 px-4 py-2",
+            children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" })
+          }
+        ),
+        columns.map((col) => {
+          const styles = getStickyStyles(col, 10);
+          const colKey = String(col.key || col.dataIndex);
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              style: styles,
+              className: cn(
+                "h-12 px-4 py-2",
+                col.fixed === "right" && `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,
+                col.fixed === "left" && `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`
+              ),
+              children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+            },
+            `skeleton-${rowIndex}-${colKey}`
+          );
+        })
+      ] }, `skeleton-row-${rowIndex}`));
+      return /* @__PURE__ */ jsx(Fragment, { children: skeletonRows });
+    }
+    if (processedData.length === 0) {
+      return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length + (rowSelection ? 1 : 0),
+          className: "text-muted-foreground text-t16m h-24 text-center",
+          children: /* @__PURE__ */ jsx(StatusState, { type: "noData", ...emptyStateProps })
+        }
+      ) });
+    }
+    return processedData.map((record, index) => {
+      const dynamicRowClassName = typeof rowClassName === "function" ? rowClassName(record, index) : typeof rowClassName === "string" ? rowClassName : "";
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          className: cn("text-t14m group", dynamicRowClassName),
+          "data-state": rowSelection?.selectedRowKeys.includes(getRowKey(record)) && "selected",
+          onClick: handleRowClick(record),
+          children: [
+            rowSelection && /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                style: { width: 50, minWidth: 50, maxWidth: 50 },
+                className: cn(
+                  "group-hover:bg-accent sticky left-0 h-12 px-4 py-2 transition duration-300",
+                  rowSelection.selectedRowKeys.includes(getRowKey(record)) ? "bg-primary/10" : "bg-background"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: rowSelection.selectedRowKeys.includes(getRowKey(record)),
+                    onCheckedChange: (checked) => handleSelectRow(record, !!checked),
+                    className: cn("border-border bg-background"),
+                    disabled: rowSelection?.isDisable?.(record)
+                  }
+                )
+              }
+            ),
+            columns.map((col) => {
+              const styles = getStickyStyles(col, 10);
+              if (scroll?.y) {
+                styles.position = "sticky";
+                styles.top = 0;
+                styles.zIndex = styles.zIndex || 20;
+              }
+              return /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  style: {
+                    ...styles,
+                    wordBreak: "break-word"
+                  },
+                  className: cn(
+                    "text-t14m text-foreground group-hover:bg-accent bg-background h-12 px-4 py-2 !pr-4 transition duration-300",
+                    col.fixed === "right" && `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,
+                    col.fixed === "left" && `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`,
+                    rowSelection && rowSelection.selectedRowKeys.includes(getRowKey(record)) && "bg-primary/10"
+                  ),
+                  children: col.render ? col.render(getValueByPath(record, col.dataIndex), record, index) : String(getValueByPath(record, col.dataIndex) ?? "")
+                },
+                col.key || col.dataIndex
+              );
+            })
+          ]
+        },
+        getRowKey(record)
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-bl-md rounded-br-md bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative overflow-auto",
+            style: {
+              maxHeight: scroll?.y,
+              overflowY: scroll?.y ? "auto" : "hidden",
+              overflowX: scroll?.x ? "auto" : "hidden"
+            },
+            children: /* @__PURE__ */ jsxs(Table, { style: tableStyle, className: tableClassName, children: [
+              /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-muted h-14", headerClassName), children: renderHeader() }),
+              /* @__PURE__ */ jsx(TableBody, { className: bodyClassName, children: renderBody() })
+            ] })
+          }
+        ) }),
+        pagination && /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            config: {
+              ...pagination,
+              total: isNaN(pagination?.total) ? dataSource.length : pagination?.total,
+              loading
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { EnhancedTable };
+//# sourceMappingURL=enhanced-table.mjs.map
+//# sourceMappingURL=enhanced-table.mjs.map

package/dist/common/interactive/table/enhanced-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/table/enhanced-table.tsx"],"names":[],"mappings":"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","file":"enhanced-table.mjs","sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { MinusIcon16 } from '../../../assets/Icon';\nimport { Button } from '../../../components/button';\nimport { Checkbox } from '../../../components/checkbox';\nimport { Skeleton } from '../../../components/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../../../components/table';\nimport { cn } from '../../../lib/utils';\nimport { StatusState } from '../../display/status-state';\nimport { TablePagination } from './table-pagination';\nimport { ColumnType, EnhancedTableProps, SorterInfo } from './types';\n\n// Modified function to get value from nested objects using dot notation\nfunction getValueByPath(obj: any, path: string): any {\n  if (!path) return '';\n\n  // Handle regular dataIndex (no dots)\n  if (!path.includes('.')) {\n    return obj[path];\n  }\n\n  // Handle nested paths with dot notation\n  const keys = path.split('.');\n  let current = obj;\n\n  for (const key of keys) {\n    if (current === null || current === undefined) {\n      return '';\n    }\n    current = current[key];\n  }\n\n  return current;\n}\n\nexport function EnhancedTable<T extends { [key: string]: any }>({\n  dataSource,\n  columns,\n  loading = false,\n  rowKey,\n  rowSelection,\n  pagination,\n  onChange,\n  scroll,\n  hasRefreshDataSource,\n  className,\n  tableClassName,\n  headerClassName,\n  bodyClassName,\n  rowClassName,\n  onRowClick,\n  emptyStateProps,\n}: EnhancedTableProps<T>) {\n  const [sort, setSort] = useState<SorterInfo<T>>({});\n\n  const { leftOffsets, rightOffsets, totalColumnWidth } = useMemo(() => {\n    const left: { [key: string]: number } = {};\n    const right: { [key: string]: number } = {};\n    let totalWidth = 0;\n    let currentLeft = 0;\n    let currentRight = 0;\n\n    if (rowSelection) {\n      const selectionWidth = 50; // Chiều rộng cho cột checkbox\n      currentLeft += selectionWidth;\n      totalWidth += selectionWidth;\n    }\n\n    columns.forEach((col) => {\n      const key = String(col.key || col.dataIndex);\n      const colWidth = Number(col.width) || 150; // Default width nếu không được cung cấp\n      totalWidth += colWidth;\n      if (col.fixed === 'left') {\n        left[key] = currentLeft;\n        currentLeft += colWidth;\n      }\n    });\n\n    [...columns].reverse().forEach((col) => {\n      const key = String(col.key || col.dataIndex);\n      if (col.fixed === 'right') {\n        const colWidth = Number(col.width) || 150;\n        right[key] = currentRight;\n        currentRight += colWidth;\n      }\n    });\n\n    return { leftOffsets: left, rightOffsets: right, totalColumnWidth: totalWidth };\n  }, [columns, rowSelection]);\n\n  const tableStyle = useMemo((): React.CSSProperties => {\n    if (scroll?.x !== undefined) {\n      if (scroll.x === 0 || scroll.x === 'auto' || scroll.x === '100%') {\n        return { minWidth: `${totalColumnWidth}px` };\n      }\n      return { minWidth: typeof scroll.x === 'number' ? `${scroll.x}px` : scroll.x };\n    }\n    return {};\n  }, [scroll, totalColumnWidth]);\n\n  const getRowKey = useCallback(\n    (record: T): React.Key => {\n      if (typeof rowKey === 'function') {\n        return rowKey(record);\n      }\n      return record[rowKey];\n    },\n    [rowKey],\n  );\n\n  const handleSort = (column: ColumnType<T>) => {\n    const columnKey = column.key || (column.dataIndex as React.Key);\n    let newOrder: 'ascend' | 'descend' | undefined = 'ascend';\n\n    if (sort.columnKey === columnKey && sort.order === 'ascend') {\n      newOrder = 'descend';\n    } else if (sort.columnKey === columnKey && sort.order === 'descend') {\n      newOrder = undefined;\n    }\n\n    const newSorter: SorterInfo<T> = { columnKey, order: newOrder, column };\n    setSort(newSorter);\n    if (onChange && pagination) {\n      onChange({ current: pagination.current, pageSize: pagination.pageSize }, newSorter);\n    }\n  };\n\n  const handleSelectAll = (checked: boolean) => {\n    if (rowSelection) {\n      // Lấy rowKey của các dòng trên trang và không bị disabled\n      const allRowKeysOnPage = processedData\n        .filter((row) => !rowSelection.isDisable?.(row)) // chỉ lấy row không disabled\n        .map(getRowKey);\n\n      if (checked) {\n        // Khi checked: chỉ thêm các row không disable trên page vào danh sách selected (giữ các row đã chọn trước đó)\n        const newSelectedKeys = [\n          ...new Set([...rowSelection.selectedRowKeys, ...allRowKeysOnPage]),\n        ];\n        const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));\n        rowSelection.onChange?.(newSelectedKeys, newSelectedRows);\n      } else {\n        // Khi uncheck: chỉ bỏ chọn các row không disabled trên page khỏi danh sách selected\n        const newSelectedKeys = rowSelection.selectedRowKeys.filter(\n          (k) => !allRowKeysOnPage.includes(k),\n        );\n        const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));\n        rowSelection.onChange?.(newSelectedKeys, newSelectedRows);\n      }\n    }\n  };\n\n  const handleSelectRow = (record: T, checked: boolean) => {\n    if (rowSelection) {\n      const key = getRowKey(record);\n      const currentSelected = rowSelection.selectedRowKeys;\n      const newSelectedKeys = checked\n        ? [...currentSelected, key]\n        : currentSelected.filter((k) => k !== key);\n      const newSelectedRows = dataSource.filter((r) => newSelectedKeys.includes(getRowKey(r)));\n      rowSelection.onChange?.(newSelectedKeys, newSelectedRows);\n    }\n  };\n\n  const processedData = useMemo(() => {\n    let data = [...dataSource];\n\n    const { column, order } = sort;\n    if (column && order && column.sorter) {\n      data.sort((a, b) => {\n        if (typeof column.sorter === 'function') {\n          return order === 'ascend' ? column.sorter(a, b) : -column.sorter(a, b);\n        }\n        const valA = a[column.dataIndex as string];\n        const valB = b[column.dataIndex as string];\n        if (valA < valB) return order === 'ascend' ? -1 : 1;\n        if (valA > valB) return order === 'ascend' ? 1 : -1;\n        return 0;\n      });\n    }\n\n    if (pagination && !hasRefreshDataSource) {\n      const { current, pageSize } = pagination;\n      const startIndex = (current - 1) * pageSize;\n      data = data.slice(startIndex, startIndex + pageSize);\n    }\n\n    return data;\n  }, [dataSource, sort, pagination]);\n\n  const getStickyStyles = (col: ColumnType<T>, baseZIndex: number): React.CSSProperties => {\n    const key = String(col.key || col.dataIndex);\n    const styles: React.CSSProperties = {\n      minWidth: `${col.width}px`,\n    };\n\n    if (col.fixed === 'left') {\n      styles.position = 'sticky';\n      styles.left = leftOffsets[key] ?? 0;\n      styles.zIndex = baseZIndex + 1;\n      styles.boxShadow = '10px 0 5px -2px #888';\n      styles.width = `${col.width}px`;\n      styles.maxWidth = `${col.width}px`;\n      styles.boxSizing = 'border-box';\n    }\n\n    if (col.fixed === 'right') {\n      styles.position = 'sticky';\n      styles.right = rightOffsets[key] ?? 0;\n      styles.zIndex = baseZIndex + 1;\n      styles.boxShadow = '-10px 0px 10px 1px #aaaaaa';\n      styles.width = `${col.width}px`;\n      styles.maxWidth = `${col.width}px`;\n      styles.boxSizing = 'border-box';\n    }\n\n    return styles;\n  };\n\n  const renderHeader = () => {\n    // Calculate checkbox state for select all\n    const enabledRows = processedData.filter((row) => !rowSelection?.isDisable?.(row));\n    const selectedEnabledRowsCount = enabledRows.filter((row) =>\n      rowSelection?.selectedRowKeys.includes(getRowKey(row)),\n    ).length;\n    const isAllSelected = enabledRows.length > 0 && selectedEnabledRowsCount === enabledRows.length;\n    const isIndeterminate =\n      selectedEnabledRowsCount > 0 && selectedEnabledRowsCount < enabledRows.length;\n\n    return (\n      <TableRow className={cn('', typeof rowClassName === 'string' ? rowClassName : '')}>\n        {rowSelection && (\n          <TableHead\n            style={{ width: 50, minWidth: 50, maxWidth: 50, maxHeight: 40 }}\n            className={cn('bg-muted text-t14m sticky left-0 h-10')}\n          >\n            <Checkbox\n              checked={isAllSelected || isIndeterminate}\n              disabled={\n                // Disable nếu không có row nào, hoặc tất cả row trên page đều bị disable\n                processedData.length === 0 ||\n                processedData.every((row) => rowSelection.isDisable?.(row))\n              }\n              onCheckedChange={handleSelectAll}\n              className=\"border-border bg-background\"\n              indicator={isIndeterminate ? <MinusIcon16 className=\"ic-white h-4 w-4\" /> : undefined}\n            />\n          </TableHead>\n        )}\n        {columns.map((col) => {\n          const styles = getStickyStyles(col, 10);\n          return (\n            <TableHead\n              key={col.key || (col.dataIndex as string)}\n              style={{\n                ...styles,\n              }}\n              className={cn(\n                'text-t14m text-foreground bg-muted h-10 px-4 py-2 font-medium',\n                col.fixed === 'right' &&\n                  `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,\n                col.fixed === 'left' &&\n                  `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`,\n              )}\n            >\n              {col.sorter ? (\n                <Button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  onClick={() => handleSort(col)}\n                  className=\"text-t14m -ml-4\"\n                >\n                  {col.title}\n                  {sort.columnKey !== (col.key || col.dataIndex) && (\n                    <ArrowUpDown className=\"ml-2 size-4\" />\n                  )}\n                  {sort.columnKey === (col.key || col.dataIndex) && sort.order === 'ascend' && (\n                    <ArrowUp className=\"ml-2 size-4\" />\n                  )}\n                  {sort.columnKey === (col.key || col.dataIndex) && sort.order === 'descend' && (\n                    <ArrowDown className=\"ml-2 size-4\" />\n                  )}\n                </Button>\n              ) : (\n                col.title\n              )}\n            </TableHead>\n          );\n        })}\n      </TableRow>\n    );\n  };\n\n  const handleRowClick = (record: T) => () => {\n    onRowClick?.(record);\n  };\n\n  const renderBody = () => {\n    if (loading && !processedData?.length) {\n      // Show skeleton rows matching table structure\n      const skeletonRows = Array.from({ length: 5 }, (_, rowIndex) => (\n        <TableRow key={`skeleton-row-${rowIndex}`} className=\"text-t14m\">\n          {rowSelection && (\n            <TableCell\n              style={{ width: 50, minWidth: 50, maxWidth: 50 }}\n              className=\"sticky left-0 h-12 px-4 py-2\"\n            >\n              <Skeleton className=\"h-4 w-4 rounded\" />\n            </TableCell>\n          )}\n          {columns.map((col) => {\n            const styles = getStickyStyles(col, 10);\n            const colKey = String(col.key || col.dataIndex);\n            return (\n              <TableCell\n                key={`skeleton-${rowIndex}-${colKey}`}\n                style={styles}\n                className={cn(\n                  'h-12 px-4 py-2',\n                  col.fixed === 'right' &&\n                    `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,\n                  col.fixed === 'left' &&\n                    `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`,\n                )}\n              >\n                <Skeleton className=\"h-4 w-full\" />\n              </TableCell>\n            );\n          })}\n        </TableRow>\n      ));\n      return <>{skeletonRows}</>;\n    }\n\n    if (processedData.length === 0) {\n      return (\n        <TableRow>\n          <TableCell\n            colSpan={columns.length + (rowSelection ? 1 : 0)}\n            className=\"text-muted-foreground text-t16m h-24 text-center\"\n          >\n            <StatusState type=\"noData\" {...emptyStateProps} />\n          </TableCell>\n        </TableRow>\n      );\n    }\n\n    return processedData.map((record, index) => {\n      const dynamicRowClassName =\n        typeof rowClassName === 'function'\n          ? rowClassName(record, index)\n          : typeof rowClassName === 'string'\n            ? rowClassName\n            : '';\n\n      return (\n        <TableRow\n          key={getRowKey(record)}\n          className={cn('text-t14m group', dynamicRowClassName)}\n          data-state={rowSelection?.selectedRowKeys.includes(getRowKey(record)) && 'selected'}\n          onClick={handleRowClick(record)}\n        >\n          {rowSelection && (\n            <TableCell\n              style={{ width: 50, minWidth: 50, maxWidth: 50 }}\n              className={cn(\n                'group-hover:bg-accent sticky left-0 h-12 px-4 py-2 transition duration-300',\n                rowSelection.selectedRowKeys.includes(getRowKey(record))\n                  ? 'bg-primary/10'\n                  : 'bg-background',\n              )}\n            >\n              <Checkbox\n                checked={rowSelection.selectedRowKeys.includes(getRowKey(record))}\n                onCheckedChange={(checked) => handleSelectRow(record, !!checked)}\n                className={cn('border-border bg-background')}\n                disabled={rowSelection?.isDisable?.(record)}\n              />\n            </TableCell>\n          )}\n          {columns.map((col) => {\n            const styles = getStickyStyles(col, 10);\n            if (scroll?.y) {\n              styles.position = 'sticky';\n              styles.top = 0;\n              styles.zIndex = styles.zIndex || 20;\n            }\n\n            return (\n              <TableCell\n                key={col.key || (col.dataIndex as string)}\n                style={{\n                  ...styles,\n                  wordBreak: 'break-word',\n                }}\n                className={cn(\n                  'text-t14m text-foreground group-hover:bg-accent bg-background h-12 px-4 py-2 !pr-4 transition duration-300',\n                  col.fixed === 'right' &&\n                    `after:absolute after:inset-0 after:size-full after:shadow-[-8px_0_30px_-10px_rgba(0,0,0,0.2)] after:content-['']`,\n                  col.fixed === 'left' &&\n                    `after:absolute after:inset-0 after:size-full after:shadow-[10px_0_30px_-15px_rgba(0,0,0,0.2)] after:content-['']`,\n                  rowSelection &&\n                    rowSelection.selectedRowKeys.includes(getRowKey(record)) &&\n                    'bg-primary/10',\n                )}\n              >\n                {col.render\n                  ? col.render(getValueByPath(record, col.dataIndex as string), record, index)\n                  : String(getValueByPath(record, col.dataIndex as string) ?? '')}\n              </TableCell>\n            );\n          })}\n        </TableRow>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col overflow-hidden rounded-bl-md rounded-br-md bg-white',\n        className,\n      )}\n    >\n      <div className=\"relative\">\n        <div\n          className=\"relative overflow-auto\"\n          style={{\n            maxHeight: scroll?.y,\n            overflowY: scroll?.y ? 'auto' : 'hidden',\n            overflowX: scroll?.x ? 'auto' : 'hidden',\n          }}\n        >\n          <Table style={tableStyle} className={tableClassName}>\n            <TableHeader className={cn('bg-muted h-14', headerClassName)}>\n              {renderHeader()}\n            </TableHeader>\n            <TableBody className={bodyClassName}>{renderBody()}</TableBody>\n          </Table>\n        </div>\n      </div>\n\n      {pagination && (\n        <TablePagination\n          config={{\n            ...pagination,\n            total: isNaN(pagination?.total) ? dataSource.length : pagination?.total,\n            loading,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/dist/common/interactive/table/index.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var enhancedTable = require('./enhanced-table');
+var react = require('react');
+var helpers = require('../../../lib/helpers');
+var types = require('./types');
+var tablePagination = require('./table-pagination');
+
+function ListingTable(props) {
+  const containerRef = react.useRef();
+  const [scrollY, setScrollY] = react.useState(0);
+  const calculateScrollY = helpers.debounce(() => {
+    if (!containerRef?.current) return;
+    const table = containerRef.current?.getElementsByClassName("ant-table-wrapper")?.[0];
+    if (containerRef.current?.clientHeight < table?.clientHeight) {
+      const thead = containerRef.current?.getElementsByClassName("ant-table-header")?.[0];
+      const pagination = containerRef.current?.getElementsByClassName("ant-pagination")?.[0];
+      setScrollY(
+        containerRef.current.clientHeight - (thead?.clientHeight ?? 0) - (pagination?.clientHeight ?? 0) - 18
+      );
+    }
+    const parentTable = containerRef?.current?.querySelector(".ant-table-body") || containerRef?.current?.querySelector(".ant-table-content");
+    const onScrollParent = (e) => {
+      const childTables = e.target.querySelectorAll(".ant-table-content");
+      childTables.forEach((childTable) => {
+        childTable.scrollLeft = e.target.scrollLeft;
+      });
+    };
+    parentTable?.addEventListener("scroll", onScrollParent);
+  }, 100);
+  react.useEffect(() => {
+    let mutationObserver;
+    let resizeObserver;
+    if (containerRef?.current) {
+      calculateScrollY();
+      mutationObserver = new MutationObserver(calculateScrollY);
+      mutationObserver.observe(containerRef?.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+      resizeObserver = new ResizeObserver(calculateScrollY);
+      resizeObserver.observe(containerRef?.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      if (mutationObserver) mutationObserver.disconnect();
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [containerRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+    enhancedTable.EnhancedTable,
+    {
+      ...props,
+      scroll: {
+        y: scrollY ? scrollY : void 0,
+        x: 0
+      }
+    }
+  ) });
+}
+
+Object.defineProperty(exports, "EnhancedTable", {
+  enumerable: true,
+  get: function () { return enhancedTable.EnhancedTable; }
+});
+Object.defineProperty(exports, "TablePagination", {
+  enumerable: true,
+  get: function () { return tablePagination.TablePagination; }
+});
+exports.ListingTable = ListingTable;
+Object.keys(types).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return types[k]; }
+  });
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/common/interactive/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/table/index.tsx"],"names":["useRef","useState","debounce","useEffect","jsx","EnhancedTable"],"mappings":";;;;;;;;;AAOO,SAAS,aAA+C,KAAA,EAA6B;AAC1F,EAAA,MAAM,eAAeA,YAAA,EAAY;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,CAAC,CAAA;AAExC,EAAA,MAAM,gBAAA,GAAmBC,iBAAS,MAAM;AACtC,IAAA,IAAI,CAAC,cAAc,OAAA,EAAS;AAE5B,IAAA,MAAM,QAAQ,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,mBAAmB,IAAI,CAAC,CAAA;AAEnF,IAAA,IAAI,YAAA,CAAa,OAAA,EAAS,YAAA,GAAe,KAAA,EAAO,YAAA,EAAc;AAC5D,MAAA,MAAM,QAAQ,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,kBAAkB,IAAI,CAAC,CAAA;AAClF,MAAA,MAAM,aAAa,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,gBAAgB,IAAI,CAAC,CAAA;AACrF,MAAA,UAAA;AAAA,QACE,YAAA,CAAa,QAAQ,YAAA,IAClB,KAAA,EAAO,gBAAgB,CAAA,CAAA,IACvB,UAAA,EAAY,gBAAgB,CAAA,CAAA,GAC7B;AAAA,OACJ;AAAA,IACF;AAGA,IAAA,MAAM,WAAA,GACJ,cAAc,OAAA,EAAS,aAAA,CAAc,iBAAiB,CAAA,IACtD,YAAA,EAAc,OAAA,EAAS,aAAA,CAAc,oBAAoB,CAAA;AAE3D,IAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAW;AACjC,MAAA,MAAM,WAAA,GAAc,CAAA,CAAE,MAAA,CAAO,gBAAA,CAAiB,oBAAoB,CAAA;AAClE,MAAA,WAAA,CAAY,OAAA,CAAQ,CAAC,UAAA,KAAoB;AACvC,QAAA,UAAA,CAAW,UAAA,GAAa,EAAE,MAAA,CAAO,UAAA;AAAA,MACnC,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,WAAA,EAAa,gBAAA,CAAiB,UAAU,cAAc,CAAA;AAAA,EACxD,GAAG,GAAG,CAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA;AACJ,IAAA,IAAI,cAAA;AAEJ,IAAA,IAAI,cAAc,OAAA,EAAS;AACzB,MAAA,gBAAA,EAAiB;AAEjB,MAAA,gBAAA,GAAmB,IAAI,iBAAiB,gBAAgB,CAAA;AACxD,MAAA,gBAAA,CAAiB,OAAA,CAAQ,cAAc,OAAA,EAAS;AAAA,QAC9C,UAAA,EAAY,IAAA;AAAA,QACZ,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAED,MAAA,cAAA,GAAiB,IAAI,eAAe,gBAAgB,CAAA;AACpD,MAAA,cAAA,CAAe,OAAA,CAAQ,cAAc,OAAA,EAAS;AAAA,QAC5C,UAAA,EAAY,IAAA;AAAA,QACZ,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAA,mBAAmC,UAAA,EAAW;AAClD,MAAA,IAAI,cAAA,iBAA+B,UAAA,EAAW;AAAA,IAChD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,YAAA,EAAc,WAAU,qBAAA,EAEhC,QAAA,kBAAAA,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,CAAA,EAAG,UAAU,OAAA,GAAU,MAAA;AAAA,QACvB,CAAA,EAAG;AAAA;AACL;AAAA,GACF,EACF,CAAA;AAEJ","file":"index.js","sourcesContent":["import { EnhancedTable } from './enhanced-table';\nimport { EnhancedTableProps } from './types';\nimport { useEffect, useRef, useState } from 'react';\nimport { debounce } from '../../../lib/helpers';\n\ninterface ListingTableProps<T extends object> extends EnhancedTableProps<T> {}\n\nexport function ListingTable<T extends { [key: string]: any }>(props: ListingTableProps<T>) {\n  const containerRef = useRef<any>();\n  const [scrollY, setScrollY] = useState(0);\n\n  const calculateScrollY = debounce(() => {\n    if (!containerRef?.current) return;\n\n    const table = containerRef.current?.getElementsByClassName('ant-table-wrapper')?.[0];\n\n    if (containerRef.current?.clientHeight < table?.clientHeight) {\n      const thead = containerRef.current?.getElementsByClassName('ant-table-header')?.[0];\n      const pagination = containerRef.current?.getElementsByClassName('ant-pagination')?.[0];\n      setScrollY(\n        containerRef.current.clientHeight -\n          (thead?.clientHeight ?? 0) -\n          (pagination?.clientHeight ?? 0) -\n          18,\n      );\n    }\n\n    // Scroll\n    const parentTable =\n      containerRef?.current?.querySelector('.ant-table-body') ||\n      containerRef?.current?.querySelector('.ant-table-content');\n\n    const onScrollParent = (e: any) => {\n      const childTables = e.target.querySelectorAll('.ant-table-content');\n      childTables.forEach((childTable: any) => {\n        childTable.scrollLeft = e.target.scrollLeft;\n      });\n    };\n\n    parentTable?.addEventListener('scroll', onScrollParent);\n  }, 100);\n\n  useEffect(() => {\n    let mutationObserver: any;\n    let resizeObserver: any;\n\n    if (containerRef?.current) {\n      calculateScrollY();\n\n      mutationObserver = new MutationObserver(calculateScrollY);\n      mutationObserver.observe(containerRef?.current, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      resizeObserver = new ResizeObserver(calculateScrollY);\n      resizeObserver.observe(containerRef?.current, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    return () => {\n      if (mutationObserver) mutationObserver.disconnect();\n      if (resizeObserver) resizeObserver.disconnect();\n    };\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef} className=\"flex flex-col gap-4\">\n      {/*<Filter />*/}\n      <EnhancedTable\n        {...props}\n        scroll={{\n          y: scrollY ? scrollY : undefined,\n          x: 0,\n        }}\n      />\n    </div>\n  );\n}\n\n// Export all types and components\nexport * from './types';\nexport { EnhancedTable } from './enhanced-table';\nexport { TablePagination } from './table-pagination';\n"]}

package/dist/common/interactive/table/index.mjs

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { EnhancedTable } from './enhanced-table';
+export { EnhancedTable } from './enhanced-table';
+import { useRef, useState, useEffect } from 'react';
+import { debounce } from '../../../lib/helpers';
+export * from './types';
+export { TablePagination } from './table-pagination';
+
+function ListingTable(props) {
+  const containerRef = useRef();
+  const [scrollY, setScrollY] = useState(0);
+  const calculateScrollY = debounce(() => {
+    if (!containerRef?.current) return;
+    const table = containerRef.current?.getElementsByClassName("ant-table-wrapper")?.[0];
+    if (containerRef.current?.clientHeight < table?.clientHeight) {
+      const thead = containerRef.current?.getElementsByClassName("ant-table-header")?.[0];
+      const pagination = containerRef.current?.getElementsByClassName("ant-pagination")?.[0];
+      setScrollY(
+        containerRef.current.clientHeight - (thead?.clientHeight ?? 0) - (pagination?.clientHeight ?? 0) - 18
+      );
+    }
+    const parentTable = containerRef?.current?.querySelector(".ant-table-body") || containerRef?.current?.querySelector(".ant-table-content");
+    const onScrollParent = (e) => {
+      const childTables = e.target.querySelectorAll(".ant-table-content");
+      childTables.forEach((childTable) => {
+        childTable.scrollLeft = e.target.scrollLeft;
+      });
+    };
+    parentTable?.addEventListener("scroll", onScrollParent);
+  }, 100);
+  useEffect(() => {
+    let mutationObserver;
+    let resizeObserver;
+    if (containerRef?.current) {
+      calculateScrollY();
+      mutationObserver = new MutationObserver(calculateScrollY);
+      mutationObserver.observe(containerRef?.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+      resizeObserver = new ResizeObserver(calculateScrollY);
+      resizeObserver.observe(containerRef?.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      if (mutationObserver) mutationObserver.disconnect();
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [containerRef]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx(
+    EnhancedTable,
+    {
+      ...props,
+      scroll: {
+        y: scrollY ? scrollY : void 0,
+        x: 0
+      }
+    }
+  ) });
+}
+
+export { ListingTable };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/common/interactive/table/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/table/index.tsx"],"names":[],"mappings":";;;;;;;;AAOO,SAAS,aAA+C,KAAA,EAA6B;AAC1F,EAAA,MAAM,eAAe,MAAA,EAAY;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,CAAC,CAAA;AAExC,EAAA,MAAM,gBAAA,GAAmB,SAAS,MAAM;AACtC,IAAA,IAAI,CAAC,cAAc,OAAA,EAAS;AAE5B,IAAA,MAAM,QAAQ,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,mBAAmB,IAAI,CAAC,CAAA;AAEnF,IAAA,IAAI,YAAA,CAAa,OAAA,EAAS,YAAA,GAAe,KAAA,EAAO,YAAA,EAAc;AAC5D,MAAA,MAAM,QAAQ,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,kBAAkB,IAAI,CAAC,CAAA;AAClF,MAAA,MAAM,aAAa,YAAA,CAAa,OAAA,EAAS,sBAAA,CAAuB,gBAAgB,IAAI,CAAC,CAAA;AACrF,MAAA,UAAA;AAAA,QACE,YAAA,CAAa,QAAQ,YAAA,IAClB,KAAA,EAAO,gBAAgB,CAAA,CAAA,IACvB,UAAA,EAAY,gBAAgB,CAAA,CAAA,GAC7B;AAAA,OACJ;AAAA,IACF;AAGA,IAAA,MAAM,WAAA,GACJ,cAAc,OAAA,EAAS,aAAA,CAAc,iBAAiB,CAAA,IACtD,YAAA,EAAc,OAAA,EAAS,aAAA,CAAc,oBAAoB,CAAA;AAE3D,IAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAW;AACjC,MAAA,MAAM,WAAA,GAAc,CAAA,CAAE,MAAA,CAAO,gBAAA,CAAiB,oBAAoB,CAAA;AAClE,MAAA,WAAA,CAAY,OAAA,CAAQ,CAAC,UAAA,KAAoB;AACvC,QAAA,UAAA,CAAW,UAAA,GAAa,EAAE,MAAA,CAAO,UAAA;AAAA,MACnC,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,WAAA,EAAa,gBAAA,CAAiB,UAAU,cAAc,CAAA;AAAA,EACxD,GAAG,GAAG,CAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA;AACJ,IAAA,IAAI,cAAA;AAEJ,IAAA,IAAI,cAAc,OAAA,EAAS;AACzB,MAAA,gBAAA,EAAiB;AAEjB,MAAA,gBAAA,GAAmB,IAAI,iBAAiB,gBAAgB,CAAA;AACxD,MAAA,gBAAA,CAAiB,OAAA,CAAQ,cAAc,OAAA,EAAS;AAAA,QAC9C,UAAA,EAAY,IAAA;AAAA,QACZ,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAED,MAAA,cAAA,GAAiB,IAAI,eAAe,gBAAgB,CAAA;AACpD,MAAA,cAAA,CAAe,OAAA,CAAQ,cAAc,OAAA,EAAS;AAAA,QAC5C,UAAA,EAAY,IAAA;AAAA,QACZ,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAA,mBAAmC,UAAA,EAAW;AAClD,MAAA,IAAI,cAAA,iBAA+B,UAAA,EAAW;AAAA,IAChD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,YAAA,EAAc,WAAU,qBAAA,EAEhC,QAAA,kBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,CAAA,EAAG,UAAU,OAAA,GAAU,MAAA;AAAA,QACvB,CAAA,EAAG;AAAA;AACL;AAAA,GACF,EACF,CAAA;AAEJ","file":"index.mjs","sourcesContent":["import { EnhancedTable } from './enhanced-table';\nimport { EnhancedTableProps } from './types';\nimport { useEffect, useRef, useState } from 'react';\nimport { debounce } from '../../../lib/helpers';\n\ninterface ListingTableProps<T extends object> extends EnhancedTableProps<T> {}\n\nexport function ListingTable<T extends { [key: string]: any }>(props: ListingTableProps<T>) {\n  const containerRef = useRef<any>();\n  const [scrollY, setScrollY] = useState(0);\n\n  const calculateScrollY = debounce(() => {\n    if (!containerRef?.current) return;\n\n    const table = containerRef.current?.getElementsByClassName('ant-table-wrapper')?.[0];\n\n    if (containerRef.current?.clientHeight < table?.clientHeight) {\n      const thead = containerRef.current?.getElementsByClassName('ant-table-header')?.[0];\n      const pagination = containerRef.current?.getElementsByClassName('ant-pagination')?.[0];\n      setScrollY(\n        containerRef.current.clientHeight -\n          (thead?.clientHeight ?? 0) -\n          (pagination?.clientHeight ?? 0) -\n          18,\n      );\n    }\n\n    // Scroll\n    const parentTable =\n      containerRef?.current?.querySelector('.ant-table-body') ||\n      containerRef?.current?.querySelector('.ant-table-content');\n\n    const onScrollParent = (e: any) => {\n      const childTables = e.target.querySelectorAll('.ant-table-content');\n      childTables.forEach((childTable: any) => {\n        childTable.scrollLeft = e.target.scrollLeft;\n      });\n    };\n\n    parentTable?.addEventListener('scroll', onScrollParent);\n  }, 100);\n\n  useEffect(() => {\n    let mutationObserver: any;\n    let resizeObserver: any;\n\n    if (containerRef?.current) {\n      calculateScrollY();\n\n      mutationObserver = new MutationObserver(calculateScrollY);\n      mutationObserver.observe(containerRef?.current, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      resizeObserver = new ResizeObserver(calculateScrollY);\n      resizeObserver.observe(containerRef?.current, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    return () => {\n      if (mutationObserver) mutationObserver.disconnect();\n      if (resizeObserver) resizeObserver.disconnect();\n    };\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef} className=\"flex flex-col gap-4\">\n      {/*<Filter />*/}\n      <EnhancedTable\n        {...props}\n        scroll={{\n          y: scrollY ? scrollY : undefined,\n          x: 0,\n        }}\n      />\n    </div>\n  );\n}\n\n// Export all types and components\nexport * from './types';\nexport { EnhancedTable } from './enhanced-table';\nexport { TablePagination } from './table-pagination';\n"]}

package/dist/common/interactive/table/table-pagination.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var pagination = require('../pagination');
+
+const TablePagination = ({ config }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-3 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(pagination.Pagination, { ...config }) });
+};
+
+exports.TablePagination = TablePagination;
+//# sourceMappingURL=table-pagination.js.map
+//# sourceMappingURL=table-pagination.js.map

package/dist/common/interactive/table/table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/table/table-pagination.tsx"],"names":["jsx","Pagination"],"mappings":";;;;;AAGO,MAAM,eAAA,GAAkB,CAAC,EAAE,MAAA,EAAO,KAAyC;AAChF,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAU,4BAAA,EACb,yCAACC,qBAAA,EAAA,EAAY,GAAG,QAAQ,CAAA,EAC1B,CAAA;AAEJ","file":"table-pagination.js","sourcesContent":["import { Pagination } from '../pagination';\nimport { TablePaginationConfig } from './types';\n\nexport const TablePagination = ({ config }: { config: TablePaginationConfig }) => {\n  return (\n    <div className=\"border-t px-4 py-3 md:px-6\">\n      <Pagination {...config} />\n    </div>\n  );\n};\n"]}