@pnkx-lib/ui 1.9.208 → 1.9.209

package/es/ui/index.js

@@ -5028,6 +5028,171 @@ const BulkActions = ({
   ] });
 };
 
+const useTableHeightWrapper = (options = {}) => {
+  const {
+    tableContainerId = "table_content",
+    extraOffset = 24,
+    // Layout padding bottom mặc định
+    minHeight = 200
+  } = options;
+  const [tableHeight, setTableHeight] = useState(minHeight);
+  const calculateTableHeight = useCallback(() => {
+    try {
+      const viewportHeight = window.innerHeight;
+      const layoutWrapper = document.getElementById("layout-wrapper-table");
+      if (!layoutWrapper) {
+        console.error("Layout wrapper table container not found");
+        setTableHeight(minHeight);
+        return;
+      }
+      const wrapperRect = layoutWrapper.getBoundingClientRect();
+      const availableHeight = viewportHeight - wrapperRect.top;
+      const tableContainer = document.getElementById(tableContainerId);
+      if (!tableContainer) {
+        console.error(`Table container "${tableContainerId}" not found`);
+        setTableHeight(minHeight);
+        return;
+      }
+      const directChildren = Array.from(layoutWrapper.children);
+      let otherElementsHeight = 0;
+      directChildren.forEach((child, index) => {
+        const rect = child.getBoundingClientRect();
+        const styles = window.getComputedStyle(child);
+        const marginTop = parseInt(styles.marginTop, 10) || 0;
+        const marginBottom = parseInt(styles.marginBottom, 10) || 0;
+        const totalHeight = rect.height + marginTop + marginBottom;
+        const isTableContent = child.id === tableContainerId;
+        const isBulkActionTable = child.id === "bulkaction_table";
+        if (!isTableContent && !isBulkActionTable) {
+          otherElementsHeight += totalHeight;
+        } else if (isBulkActionTable) {
+          console.log(`  -> Ignoring bulkaction_table (id: ${child.id})`);
+        }
+      });
+      const wrapperStyles = window.getComputedStyle(layoutWrapper);
+      const wrapperPaddingTop = parseInt(wrapperStyles.paddingTop, 10) || 0;
+      const wrapperPaddingBottom = parseInt(wrapperStyles.paddingBottom, 10) || 0;
+      console.log("5. Wrapper padding:", {
+        top: wrapperPaddingTop,
+        bottom: wrapperPaddingBottom
+      });
+      const tableStyles = window.getComputedStyle(tableContainer);
+      const tablePaddingTop = parseInt(tableStyles.paddingTop, 10) || 0;
+      const tablePaddingBottom = parseInt(tableStyles.paddingBottom, 10) || 0;
+      console.log("6. Table container padding:", {
+        top: tablePaddingTop,
+        bottom: tablePaddingBottom
+      });
+      const tableHeader = tableContainer.querySelector(".ant-table-header");
+      const headerHeight = tableHeader ? tableHeader.getBoundingClientRect().height : 0;
+      console.log("7. Table header height:", headerHeight);
+      let paginationHeight = 0;
+      const paginationSelectors = [
+        ".ant-pagination",
+        ".ant-table-pagination",
+        ".ant-pagination-mini"
+      ];
+      for (const selector of paginationSelectors) {
+        const pagination = tableContainer.querySelector(selector);
+        if (pagination) {
+          const paginationRect = pagination.getBoundingClientRect();
+          const paginationStyles = window.getComputedStyle(pagination);
+          const paginationMarginTop = parseInt(paginationStyles.marginTop, 10) || 0;
+          const paginationMarginBottom = parseInt(paginationStyles.marginBottom, 10) || 0;
+          paginationHeight = paginationRect.height + paginationMarginTop + paginationMarginBottom;
+          console.log(`8. Found pagination with ${selector}:`, {
+            height: paginationRect.height,
+            marginTop: paginationMarginTop,
+            marginBottom: paginationMarginBottom,
+            totalHeight: paginationHeight
+          });
+          break;
+        }
+      }
+      if (paginationHeight === 0) {
+        console.log("8. No pagination found, assuming 44px");
+        paginationHeight = 44;
+      }
+      const bulkActionHeight = 0;
+      console.log("9. Bulk action detection temporarily disabled for testing");
+      if (bulkActionHeight > 0) ; else {
+        console.log(
+          "9. No bulk action found, not visible, or is fixed positioned"
+        );
+      }
+      const tableBodyHeight = availableHeight - otherElementsHeight - tablePaddingTop - tablePaddingBottom - headerHeight - paginationHeight - bulkActionHeight - extraOffset;
+      console.log("10. Calculation breakdown:", {
+        availableHeight,
+        otherElementsHeight,
+        wrapperPaddingTop: `${wrapperPaddingTop} (not used in calculation)`,
+        wrapperPaddingBottom: `${wrapperPaddingBottom} (not used in calculation)`,
+        tablePaddingTop,
+        tablePaddingBottom,
+        headerHeight,
+        paginationHeight,
+        bulkActionHeight,
+        extraOffset,
+        calculatedTableBodyHeight: tableBodyHeight
+      });
+      const finalHeight = Math.max(tableBodyHeight, minHeight);
+      console.log("11. Final height:", finalHeight);
+      console.log("=== END WRAPPER ===");
+      setTableHeight(finalHeight);
+    } catch (error) {
+      console.error("Error calculating table height:", error);
+      setTableHeight(minHeight);
+    }
+  }, [tableContainerId, extraOffset, minHeight]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      calculateTableHeight();
+    }, 300);
+    const handleResize = () => {
+      console.log("Window resized, recalculating...");
+      calculateTableHeight();
+    };
+    window.addEventListener("resize", handleResize);
+    const observer = new MutationObserver((mutations) => {
+      let shouldRecalculate = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          shouldRecalculate = true;
+        }
+      });
+      if (shouldRecalculate) {
+        setTimeout(calculateTableHeight, 100);
+      }
+    });
+    const layoutWrapper = document.getElementById("layout-wrapper-table");
+    const tableContainer = document.getElementById(tableContainerId);
+    if (layoutWrapper) {
+      observer.observe(layoutWrapper, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+    }
+    if (tableContainer && tableContainer !== layoutWrapper) {
+      observer.observe(tableContainer, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+    }
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", handleResize);
+      observer.disconnect();
+    };
+  }, [calculateTableHeight, tableContainerId]);
+  return {
+    tableHeight,
+    recalculate: calculateTableHeight
+  };
+};
+
 const Table = ({
   dataSource = [],
   columns,
@@ -5116,71 +5281,92 @@ const Table = ({
     }
     onRowClick2?.(record);
   };
+  const { tableHeight } = useTableHeightWrapper({
+    tableContainerId: "table_content",
+    // ID của table container
+    minHeight: 200
+    // chiều cao tối thiểu
+  });
   //! Render
-  return /* @__PURE__ */ jsxs("div", { className: twMerge(showSetting ? "relative" : ""), children: [
-    /* @__PURE__ */ jsx(
-      HeadingTable,
-      {
-        rightHeadingContent,
-        renderHeadingSearch,
-        setOpenStting,
-        showSetting,
-        menu,
-        groupHeadingButtonItems,
-        setFilters,
-        filters,
-        noBreadcum
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: "table_content",
-        className: "bg-[#FFFFFF] p-6 rounded-bl-lg rounded-br-lg",
-        children: /* @__PURE__ */ jsx(
-          Table$1,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "layout-wrapper-table",
+      className: twMerge(showSetting ? "relative" : ""),
+      children: [
+        /* @__PURE__ */ jsx(
+          HeadingTable,
+          {
+            rightHeadingContent,
+            renderHeadingSearch,
+            setOpenStting,
+            showSetting,
+            menu,
+            groupHeadingButtonItems,
+            setFilters,
+            filters,
+            noBreadcum
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "table_content",
+            className: "bg-[#FFFFFF] p-6 rounded-bl-lg rounded-br-lg",
+            children: /* @__PURE__ */ jsx(
+              Table$1,
+              {
+                rowKey,
+                dataSource: data,
+                columns: columnsWithIndex,
+                pagination: !isEmpty(data) ? paginationConfig : false,
+                loading,
+                rowSelection: rowsSelected ? rowSelection : void 0,
+                onChange: handleTableChange,
+                onRow: (record) => ({
+                  onClick: handleOnClickRow(record, onRowClick)
+                }),
+                locale: {
+                  emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
+                },
+                rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
+                scroll: { y: tableHeight },
+                size,
+                ...rest
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingTable,
           {
-            rowKey,
-            dataSource: data,
-            columns: columnsWithIndex,
-            pagination: !isEmpty(data) ? paginationConfig : false,
-            loading,
-            rowSelection: rowsSelected ? rowSelection : void 0,
-            onChange: handleTableChange,
-            onRow: (record) => ({
-              onClick: handleOnClickRow(record, onRowClick)
-            }),
-            locale: {
-              emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
-            },
-            rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
-            size,
-            ...rest
+            open: openSetting,
+            setOpen: setOpenStting,
+            title: titleSettingTableModal,
+            showSetting,
+            defaultSettingColumnItems: columns,
+            setDefaultSettingColumnItems: setColumns
+          }
+        ),
+        rowsSelected && !isEmpty(rowsSelected) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "bulkaction_table",
+            className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            children: /* @__PURE__ */ jsx(
+              BulkActions,
+              {
+                type: TypeBulkActions.BULKACTION,
+                quantity: rowsSelected?.length,
+                status,
+                ...bulkActionHandlers
+              }
+            )
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      SettingTable,
-      {
-        open: openSetting,
-        setOpen: setOpenStting,
-        title: titleSettingTableModal,
-        showSetting,
-        defaultSettingColumnItems: columns,
-        setDefaultSettingColumnItems: setColumns
-      }
-    ),
-    rowsSelected && !isEmpty(rowsSelected) && /* @__PURE__ */ jsx("div", { className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
-      BulkActions,
-      {
-        type: TypeBulkActions.BULKACTION,
-        quantity: rowsSelected?.length,
-        status,
-        ...bulkActionHandlers
-      }
-    ) })
-  ] });
+      ]
+    }
+  );
 };
 const EmptyTable = () => {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.208",
+  "version": "1.9.209",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",

package/types/components/ui/BulkActions/BulkAction.d.ts

@@ -1,10 +1,9 @@
 import { ConfirmModalProps } from '../ConfirmModal';
 import { TListIcon } from '.';
-import { TypeStatusTable } from '../../../constants';
 export interface BulkActionProps {
     quantity?: number;
     listIcon?: TListIcon[];
-    status?: TypeStatusTable;
+    status?: unknown;
     setNotifyContent: React.Dispatch<React.SetStateAction<ConfirmModalProps>>;
     toggle: () => void;
 }

package/types/components/ui/BulkActions/index.d.ts

@@ -1,10 +1,10 @@
 import { ConfirmModalProps } from '../ConfirmModal';
 import { BulkActionHandlers } from '@pnkx-lib/core';
-import { TypeBulkActions, TypeStatusTable } from '../../../constants';
+import { TypeBulkActions } from '../../../constants';
 import { CATEGORY_LIST_ENUM } from '../CategoryStatus';
 interface IBulkActionsProps extends Partial<BulkActionHandlers> {
     quantity?: number;
-    status?: TypeStatusTable;
+    status?: unknown;
     type?: TypeBulkActions;
 }
 export type TListIcon = {

package/types/components/ui/Table/HeadingTable/components/GroupHeadingButton.d.ts

@@ -1,9 +1,9 @@
 import { InitialFiltersSearch } from '@pnkx-lib/core';
-import { TFilters, TypeStatusTable } from '../../..';
+import { TFilters } from '../../..';
 export interface GroupHeadingButtonItem {
     label: string;
     quantity: number;
-    status: TypeStatusTable;
+    status: unknown;
 }
 export interface GroupHeadingButtonProps {
     groupHeadingButtonItems?: GroupHeadingButtonItem[];

package/types/components/ui/Table/index.d.ts

@@ -5,7 +5,6 @@ import { SorterResult } from 'antd/es/table/interface';
 import { BulkActionHandlers, InitialFiltersSearch } from '@pnkx-lib/core';
 import { MenuType } from '../Sidebar';
 import { GroupHeadingButtonItem } from './HeadingTable/components/GroupHeadingButton';
-import { TypeStatusTable } from '../../../constants';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
 interface RowCommon {
     [x: string]: any;
@@ -14,7 +13,7 @@ type ColumnTypes<T> = Exclude<TableProps<T>["columns"], undefined>;
 export type TableColumnsTypeEditable<T> = (ColumnTypes<T>[number] & {})[];
 export type TableColumnsType<T> = TableColumnsTypeAntd<T> & TableColumnsTypeEditable<T>;
 export type TFilters = {
-    status?: TypeStatusTable;
+    status?: unknown;
 };
 export interface TableCommonProps<T> extends Omit<TableProps<T>, "columns"> {
     dataSource?: T[];