ms-react-table 2.0.1 → 2.1.1

package/dist/index.mjs

@@ -17,7 +17,7 @@ var useTable = () => {
 };
 
 // src/components/HeaderActionMenu/HeaderActionMenu.tsx
-import { useCallback, useEffect, useState as useState2 } from "react";
+import { useEffect, useState as useState2 } from "react";
 
 // src/_assets/icons/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -55,11 +55,11 @@ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const { id, name, checked, onChange, disabled } = props;
   return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsxs2("label", { className: "ms-checkbox-wrapper", children: [
-    /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "ms-promoted-input-checkbox", disabled, checked, onChange: disabled ? () => {
+    /* @__PURE__ */ jsx2("input", { id: `ms_checkbox_${id}`, type: "checkbox", className: "ms-promoted-input-checkbox", disabled, checked, onChange: disabled ? () => {
     } : onChange }),
     /* @__PURE__ */ jsx2("span", { className: "ms-checkbox-box" }),
-    /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#${id}` }) }),
-    /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ jsx2("symbol", { id, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeMiterlimit: "10", fill: "none", d: "M22.9 3.7l-15.2 16.6-6.6-7.1" }) }) })
+    /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#svg_ms_checkbox_${id}` }) }),
+    /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ jsx2("symbol", { id: `svg_ms_checkbox_${id}`, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeMiterlimit: "10", fill: "none", d: "M22.9 3.7l-15.2 16.6-6.6-7.1" }) }) })
   ] }) });
 };
 var CheckBox_default = memo(CheckBox);
@@ -74,12 +74,12 @@ var HeaderActionMenu = (props) => {
   useEffect(() => {
     setColumnList(state.colConfigs);
     onSearchHeader(searchkey);
-  }, [state.colConfigs]);
-  const onCheckboxChange = useCallback((dataIndex, e) => {
-    let newConfig = state.colConfigs.map((item) => {
+  }, []);
+  const onCheckboxChange = (dataIndex, e) => {
+    let newConfig = columnList.map((item) => {
       return {
         ...item,
-        isHidden: item.dataIndex == dataIndex ? !e.target.checked : item.isHidden || false
+        isHidden: item.dataIndex == dataIndex ? e.target.checked ? false : true : item.isHidden
       };
     });
     updateState({
@@ -87,7 +87,7 @@ var HeaderActionMenu = (props) => {
       colConfigs: newConfig
     });
     setColumnList(newConfig);
-  }, []);
+  };
   const onSearchHeader = (value) => {
     let newlist = [];
     if (value) {
@@ -362,7 +362,9 @@ var TableProvider = forwardRef((props, ref) => {
     }
     setState((prevState) => ({
       ...prevState,
-      currentPage: goToPageNo
+      currentPage: goToPageNo,
+      selectedIndex: [],
+      selectedRows: []
     }));
     if (!isClientSideRendering) {
       setRefreshPage(true);
@@ -391,17 +393,6 @@ var TableProvider = forwardRef((props, ref) => {
       rowData: list
     }));
   };
-  const toggleActionMenu = (dataIndex, showMenu, ref2) => {
-    const position = ref2.current.getBoundingClientRect();
-    let left = position.x + position.width;
-    setMenuPosition({
-      top: position.height,
-      right: 0,
-      left: left > 200 ? left - 200 : position.x
-    });
-    setActionMenu(true);
-    setHeaderCell(dataIndex);
-  };
   const onSortColumn = (dataIndex, sortBy) => {
     let columns2 = state.colConfigs.map((item) => {
       return {
@@ -453,21 +444,11 @@ var TableProvider = forwardRef((props, ref) => {
     }
   };
   const onColumnReset = () => {
-    setState({
+    setState((prevState) => ({
+      ...prevState,
       prevColConfig: columns,
-      colConfigs: columns,
-      rowData: data,
-      allRowData: data,
-      currentPage: 1,
-      pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
-      totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
-      selectedRows: [],
-      selectedIndex: [],
-      pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [20, 50, 100],
-      isAutoSizeAllColumns: false,
-      hideDefaultFilterButton,
-      filters: {}
-    });
+      colConfigs: columns
+    }));
     setActionMenu(false);
   };
   const onFilterApply = (filters) => {
@@ -495,7 +476,6 @@ var TableProvider = forwardRef((props, ref) => {
       onAutoColumnResize,
       onPageChange,
       onPageSizeChange,
-      toggleActionMenu,
       onColumnPin,
       onSortColumn,
       updateState,
@@ -504,7 +484,7 @@ var TableProvider = forwardRef((props, ref) => {
       onFilterReset,
       toggleModalFilter
     }),
-    [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
+    [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, onColumnPin, onSortColumn, updateState, onColumnReset]
   );
   const contextValue = { state, api, ssrList, totalSSRCount };
   useEffect2(() => {
@@ -587,9 +567,29 @@ var TableProvider = forwardRef((props, ref) => {
     },
     getSelectedRows() {
       return state.selectedRows;
+    },
+    reloadServerSideData() {
+      setRefreshPage(true);
     }
   }), [refreshPage]);
-  return /* @__PURE__ */ jsx5(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { className: `ms-table-wrapper ${props.className} ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, children: [
+  const handleClick = (e) => {
+    const target = e.target;
+    const spanElement = target.closest("span.ms-table-header-action");
+    if (!spanElement) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const dataIndex = spanElement.id;
+    const parentWidth = rect.width;
+    const x = e.clientX - rect.left;
+    const popupWidth = actionMenuRef.current ? actionMenuRef.current.offsetWidth : 200;
+    setMenuPosition({
+      top: 42,
+      right: 0,
+      left: parentWidth / 2 > x ? x - 20 : x - popupWidth
+    });
+    setActionMenu(true);
+    setHeaderCell(dataIndex);
+  };
+  return /* @__PURE__ */ jsx5(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { className: `ms-table-wrapper ${props.className} ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, onClick: handleClick, children: [
     children,
     state.rowData.length == 0 && /* @__PURE__ */ jsx5(Overlay_default, { customComponentForNoRecords }),
     showActionMenu && /* @__PURE__ */ jsx5(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
@@ -653,7 +653,7 @@ var HeaderCell = (props) => {
             rest.filters[dataIndex] ? /* @__PURE__ */ jsx6("sup", { children: "*" }) : "",
             props.sortKey == "asc" ? angleUpIcon : props.sortKey == "desc" ? angleDownIcon : null
           ] }),
-          !hideActionMenu && /* @__PURE__ */ jsx6("span", { className: "ms-table-header-action", title: "View Menu", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
+          !hideActionMenu && /* @__PURE__ */ jsx6("span", { className: "ms-table-header-action", title: "View Menu", id: dataIndex, children: verticleThreeDotsIcon })
         ] }),
         /* @__PURE__ */ jsx6("div", { className: `ms-table-column-resizer ${resizable ? "" : "disabled"}`, onMouseDown: resizable ? onMouseDown : void 0 })
       ] })
@@ -801,15 +801,15 @@ var MsTableFooter = (props) => {
       ] }) }),
       /* @__PURE__ */ jsx11("div", { className: "record-info", children: /* @__PURE__ */ jsx11("label", { children: `${(currentPage - 1) * pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}` }) }),
       /* @__PURE__ */ jsxs8("div", { className: "pagination-buttons", children: [
-        /* @__PURE__ */ jsx11("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
-        /* @__PURE__ */ jsx11("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
+        /* @__PURE__ */ jsx11("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => currentPage == 1 ? {} : api.onPageChange("first"), children: angleLeftIcon }),
+        /* @__PURE__ */ jsx11("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => currentPage == 1 ? {} : api.onPageChange("prev"), children: prevIcon }),
         /* @__PURE__ */ jsxs8("span", { className: "current-page", children: [
           currentPage,
           " of ",
           Math.ceil(totalRecords / pageSize)
         ] }),
-        /* @__PURE__ */ jsx11("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
-        /* @__PURE__ */ jsx11("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => api.onPageChange("last"), children: angleRightIcon })
+        /* @__PURE__ */ jsx11("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => currentPage == lastPageNo ? {} : api.onPageChange("next"), children: nextIcon }),
+        /* @__PURE__ */ jsx11("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => currentPage == lastPageNo ? {} : api.onPageChange("last"), children: angleRightIcon })
       ] })
     ] })
   ] });
@@ -1165,12 +1165,14 @@ var FilterModal = (props) => {
 var FilterModal_default = memo4(FilterModal);
 
 // src/components/Loader.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-var Loader = () => {
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var Loader = ({ CustomComponentForLoading }) => {
   return /* @__PURE__ */ jsxs14("div", { className: "ms-loader-wrapper", children: [
     /* @__PURE__ */ jsx19("div", { className: "ms-loader-overlay" }),
-    /* @__PURE__ */ jsx19("div", { className: "ms-loader" }),
-    /* @__PURE__ */ jsx19("span", { children: "Loading..." })
+    CustomComponentForLoading ? /* @__PURE__ */ jsx19("div", { style: { zIndex: 1 }, children: CustomComponentForLoading }) : /* @__PURE__ */ jsxs14(Fragment7, { children: [
+      /* @__PURE__ */ jsx19("div", { className: "ms-loader" }),
+      /* @__PURE__ */ jsx19("span", { children: "Loading..." })
+    ] })
   ] });
 };
 var Loader_default = Loader;
@@ -1178,7 +1180,7 @@ var Loader_default = Loader;
 // src/MsReactTable.tsx
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var MsReactTable = (props) => {
-  const { showPagination = true, ref, isLoading } = props;
+  const { showPagination = true, ref, isLoading, CustomComponentForLoading = null } = props;
   const containerRef = React12.useRef(null);
   const tbodyRef = React12.useRef(null);
   const theadRef = React12.useRef(null);
@@ -1192,7 +1194,7 @@ var MsReactTable = (props) => {
     /* @__PURE__ */ jsxs15("div", { children: [
       showModalFilter && /* @__PURE__ */ jsx20(FilterModal_default, { isVisible: showModalFilter, toggleFilterModal: toggleModalFilter, containerRef }),
       /* @__PURE__ */ jsx20("div", { className: "ms-overlay", style: showModalFilter ? { width: "100%" } : {} }),
-      isLoading && /* @__PURE__ */ jsx20(Loader_default, {})
+      isLoading && /* @__PURE__ */ jsx20(Loader_default, { CustomComponentForLoading })
     ] })
   ] });
 };