ms-react-table 1.0.0 → 2.0.1

package/dist/index.js

@@ -30,15 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  MsReactTable: () => MsReactTable_default
+  default: () => MsReactTable_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/MsReactTable.tsx
-var import_react5 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // src/contextAPI/MsTableProvider.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/contextAPI/MsTableContext.tsx
 var import_react = require("react");
@@ -53,7 +53,7 @@ var useTable = () => {
 };
 
 // src/components/HeaderActionMenu/HeaderActionMenu.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/_assets/icons/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -71,19 +71,47 @@ var prevIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http
 var nextIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }) });
 var doublePipeArrow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M112,48V208a8,8,0,0,1-16,0V136H43.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L43.31,120H96V48a8,8,0,0,1,16,0Zm125.66,74.34-32-32a8,8,0,0,0-11.32,11.32L212.69,120H160V48a8,8,0,0,0-16,0V208a8,8,0,0,0,16,0V136h52.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,237.66,122.34Z" }) });
 var hideShow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z" }) });
+var closeIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "64", height: "64", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "200", y1: "56", x2: "56", y2: "200", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "200", y1: "200", x2: "56", y2: "56", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })
+] });
+var rangeIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "256", height: "256", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "216", y1: "128", x2: "40", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "128", y1: "16", x2: "128", y2: "96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "160 64 128 96 96 64", fill: "none", stroke: "currentColor", "stroke-linecap": "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "128", y1: "240", x2: "128", y2: "160", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "96 192 128 160 160 192", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })
+] });
 
-// src/components/HeaderActionMenu/HeaderActionMenu.tsx
+// src/components/FormElements/CheckBox.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var CheckBox = (props) => {
+  const { id, name, checked, onChange, disabled } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "ms-checkbox-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", className: "ms-promoted-input-checkbox", disabled, checked, onChange: disabled ? () => {
+    } : onChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-checkbox-box" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("use", { xlinkHref: `#${id}` }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("symbol", { id, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeMiterlimit: "10", fill: "none", d: "M22.9 3.7l-15.2 16.6-6.6-7.1" }) }) })
+  ] }) });
+};
+var CheckBox_default = (0, import_react2.memo)(CheckBox);
+
+// src/components/HeaderActionMenu/HeaderActionMenu.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var HeaderActionMenu = (props) => {
   const { state, api: { onColumnPin, onSortColumn, onAutoColumnResize, onColumnReset, updateState } } = useTable();
-  const [showColumnList, toggleColumnList] = (0, import_react2.useState)(false);
-  const [columnList, setColumnList] = (0, import_react2.useState)(state.colConfigs);
-  const [searchkey, setSearchkey] = (0, import_react2.useState)("");
-  (0, import_react2.useEffect)(() => {
+  const [showColumnList, toggleColumnList] = (0, import_react3.useState)(false);
+  const [columnList, setColumnList] = (0, import_react3.useState)(state.colConfigs);
+  const [searchkey, setSearchkey] = (0, import_react3.useState)("");
+  (0, import_react3.useEffect)(() => {
     setColumnList(state.colConfigs);
     onSearchHeader(searchkey);
   }, [state.colConfigs]);
-  const onCheckboxChange = (dataIndex, e) => {
+  const onCheckboxChange = (0, import_react3.useCallback)((dataIndex, e) => {
     let newConfig = state.colConfigs.map((item) => {
       return {
         ...item,
@@ -95,7 +123,7 @@ var HeaderActionMenu = (props) => {
       colConfigs: newConfig
     });
     setColumnList(newConfig);
-  };
+  }, []);
   const onSearchHeader = (value) => {
     let newlist = [];
     if (value) {
@@ -110,31 +138,31 @@ var HeaderActionMenu = (props) => {
     }
     setSearchkey(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: props.ref, className: "header-menu", style: props.style, children: showColumnList ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "column-list", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "search", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "text", placeholder: "Search header", className: "search-input", onChange: (e) => onSearchHeader(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "list", children: columnList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { className: "ms-checkbox-input", type: "checkbox", id: item.dataIndex, checked: !item.isHidden, onChange: (e) => onCheckboxChange(item.dataIndex, e) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: item.dataIndex, children: item.title })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: props.ref, className: "header-menu", style: props.style, children: showColumnList ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "column-list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "search", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { type: "text", placeholder: "Search header", className: "search-input", onChange: (e) => onSearchHeader(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "list", children: columnList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBox_default, { id: item.dataIndex, checked: !item.isHidden, onChange: (e) => onCheckboxChange(item.dataIndex, e) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: item.dataIndex, children: item.title })
     ] }, item.dataIndex + "_item")) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { onClick: () => onSortColumn(props.dataIndex, "asc"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: angleUpIcon }),
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { onClick: () => onSortColumn(props.dataIndex, "asc"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: angleUpIcon }),
       `Sort By Ascending`
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { onClick: () => onSortColumn(props.dataIndex, "desc"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: angleDownIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { onClick: () => onSortColumn(props.dataIndex, "desc"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: angleDownIcon }),
       `Sort By Descending`
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { onClick: () => onAutoColumnResize("all"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: doublePipeArrow }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { onClick: () => onAutoColumnResize("all"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: doublePipeArrow }),
       `Autosize All Column`
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { onClick: () => toggleColumnList(true), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: hideShow }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { onClick: () => toggleColumnList(true), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: hideShow }),
       `Hide/Show Columns`
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { onClick: onColumnReset, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: reloadIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { onClick: onColumnReset, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: reloadIcon }),
       `Reset Columns`
     ] })
   ] }) });
@@ -142,10 +170,10 @@ var HeaderActionMenu = (props) => {
 var HeaderActionMenu_default = HeaderActionMenu;
 
 // src/components/Overlay.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Overlay = (props) => {
-  const { message = "No Records to show", style } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overlay-message", style, children: message });
+  const { message = "No Records to show", style, customComponentForNoRecords } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "overlay-message", style, children: customComponentForNoRecords ? customComponentForNoRecords : message });
 };
 var Overlay_default = Overlay;
 
@@ -164,61 +192,190 @@ function sortData(data, dataIndex, sortBy) {
     return sortBy === "asc" ? comparison : -comparison;
   });
 }
+function applyOperation(fieldValue, rule) {
+  if (rule.type === "string") {
+    const val = String(fieldValue).toLowerCase();
+    const target = String(rule.value).toLowerCase();
+    switch (rule.operation) {
+      case "include":
+        return val.includes(target);
+      case "not include":
+        return !val.includes(target);
+      case "=":
+        return val === target;
+      case "!=":
+        return val !== target;
+      default:
+        return true;
+    }
+  }
+  if (rule.type === "number") {
+    const val = Number(fieldValue);
+    const target = Number(rule.value);
+    switch (rule.operation) {
+      case "=":
+        return val === target;
+      case "!=":
+        return val !== target;
+      case ">":
+        return val > target;
+      case "<":
+        return val < target;
+      default:
+        return true;
+    }
+  }
+  if (rule.type === "date") {
+    let [fromDate, toDate] = rule.value;
+    const val = new Date(fieldValue)?.getTime();
+    const target_1 = new Date(fromDate)?.getTime();
+    const target_2 = new Date(toDate)?.getTime();
+    switch (rule.operation) {
+      case "=":
+        return val === target_1;
+      case "!=":
+        return val !== target_1;
+      case ">":
+        return val >= target_1;
+      case "<":
+        return val < target_1;
+      case "<>":
+        return val > target_1 && val < target_2;
+      default:
+        return true;
+    }
+  }
+  if (rule.type === "boolean") {
+    const val = Boolean(fieldValue);
+    const target = rule.value == "true" ? true : false;
+    return val === target;
+  }
+  return true;
+}
+function exportToCSV(data, fileName) {
+  const headers = Object.keys(data[0]).join(",");
+  const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
+  const csvContent = headers + "\n" + rows;
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = fileName + ".csv";
+  link.click();
+}
+function exportToExcel(data, fileName) {
+  const headers = Object.keys(data[0]);
+  const rows = data.map((obj) => Object.values(obj));
+  let html = "<table border='1'><tr>";
+  headers.forEach((h) => html += `<th>${h}</th>`);
+  html += "</tr>";
+  rows.forEach((row) => {
+    html += "<tr>";
+    row.forEach((val) => html += `<td>${val}</td>`);
+    html += "</tr>";
+  });
+  html += "</table>";
+  const blob = new Blob([html], { type: "application/vnd.ms-excel" });
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = fileName + ".xls";
+  link.click();
+}
 
 // src/contextAPI/MsTableProvider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TableProvider = (props) => {
-  const actionMenuRef = (0, import_react3.useRef)(null);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
+  const actionMenuRef = (0, import_react4.useRef)(null);
   const {
     columns,
-    data,
+    data = [],
     children,
     pageSizeOptions = [],
     isClientSideRendering = true,
-    totalRecords,
-    tbodyRef,
-    theadRef,
-    onRowClick
+    hideDefaultFilterButton = false,
+    onRowSelect,
+    toggleModalFilter,
+    customComponentForNoRecords,
+    customComponentForFooter,
+    setRowData,
+    rowSelectConfig,
+    showPagination = true
   } = props;
-  const tbodyHeight = tbodyRef?.current?.clientHeight;
-  const theadHeight = theadRef?.current?.clientHeight;
-  const [showActionMenu, setActionMenu] = (0, import_react3.useState)(false);
-  const [selectedHeaderCell, setHeaderCell] = (0, import_react3.useState)("");
-  const [menuPosition, setMenuPosition] = (0, import_react3.useState)({
+  const [showActionMenu, setActionMenu] = (0, import_react4.useState)(false);
+  const [selectedHeaderCell, setHeaderCell] = (0, import_react4.useState)("");
+  const [ssrList, setSSRList] = (0, import_react4.useState)([]);
+  const [totalSSRCount, setTotalSSRCount] = (0, import_react4.useState)(0);
+  const [menuPosition, setMenuPosition] = (0, import_react4.useState)({
     top: 0,
     right: 0,
     left: 0
   });
-  const [state, setState] = (0, import_react3.useState)({
-    prevColConfig: columns,
-    colConfigs: columns,
+  const getColumnConfig = (0, import_react4.useMemo)(() => {
+    let list = columns.map((item) => {
+      let { title, dataIndex, isHidden = false, width = 80, type = "string", align = "left", sortable = true, resizable = true, pinned = "", isFilterEnabled = false, hideActionMenu = false, cellRenderer, sortKey = "", displayAs } = item;
+      return {
+        title,
+        dataIndex,
+        isHidden,
+        width,
+        type,
+        align,
+        sortable,
+        sortKey,
+        resizable,
+        pinned,
+        isFilterEnabled,
+        hideActionMenu,
+        displayAs,
+        cellRenderer
+      };
+    });
+    return list;
+  }, [columns]);
+  const [state, setState] = (0, import_react4.useState)({
+    prevColConfig: getColumnConfig,
+    colConfigs: getColumnConfig,
     rowData: [],
     allRowData: data,
     currentPage: 1,
     pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
     totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
     selectedRows: [],
-    pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],
-    isAutoSizeAllColumns: false
+    selectedIndex: [],
+    pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [20, 50, 100],
+    isAutoSizeAllColumns: false,
+    filters: {},
+    customComponentForFooter,
+    hideDefaultFilterButton: hideDefaultFilterButton || false,
+    isClientSideRendering,
+    rowSelectConfig
   });
-  (0, import_react3.useEffect)(() => {
+  const [refreshPage, setRefreshPage] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (refreshPage) {
+      getListFromServer();
+    }
+  }, [refreshPage]);
+  (0, import_react4.useEffect)(() => {
     if (isClientSideRendering) {
       const { currentPage, pageSize } = state;
       let list = data.slice(currentPage - 1, pageSize * currentPage - 1);
       setState((prevState) => ({
         ...prevState,
-        rowData: list
+        rowData: showPagination ? list : data
       }));
+    } else {
+      getListFromServer();
     }
   }, []);
-  const onRowSelect = (0, import_react3.useCallback)((rowData) => {
+  const onRowSelectionChange = (0, import_react4.useCallback)((rowData, selectedIndex) => {
     setState((prevState) => ({
       ...prevState,
-      selectedRows: [...prevState.selectedRows, rowData]
+      selectedRows: rowData,
+      selectedIndex
     }));
-    onRowClick ? onRowClick(rowData) : null;
+    onRowSelect ? onRowSelect(rowData) : null;
   }, []);
-  const onColumnResize = (0, import_react3.useCallback)((dataIndex, newWidth) => {
+  const onColumnResize = (0, import_react4.useCallback)((dataIndex, newWidth) => {
     setState((prevState) => ({
       ...prevState,
       colConfigs: prevState.colConfigs.map(
@@ -228,36 +385,50 @@ var TableProvider = (props) => {
     }));
   }, []);
   const onPageChange = (direction) => {
-    const { pageSize, totalRecords: totalRecords2, allRowData, currentPage } = state;
+    const { pageSize, totalRecords, allRowData, currentPage } = state;
     var goToPageNo = 0;
     if (direction == "first") {
       goToPageNo = 1;
     } else if (direction == "last") {
-      goToPageNo = Math.ceil(totalRecords2 / pageSize);
+      goToPageNo = Math.ceil(totalRecords / pageSize);
     } else if (direction == "next") {
       goToPageNo = currentPage + 1;
     } else if (direction == "prev") {
       goToPageNo = currentPage - 1;
     }
-    let list = data.slice(goToPageNo - 1, pageSize * goToPageNo - 1);
     setState((prevState) => ({
       ...prevState,
-      currentPage: goToPageNo,
-      rowData: list
+      currentPage: goToPageNo
     }));
+    if (!isClientSideRendering) {
+      setRefreshPage(true);
+    }
   };
   const onPageSizeChange = (pageSize) => {
+    if (!isClientSideRendering) {
+      setState((prevState) => ({
+        ...prevState,
+        selectedIndex: [],
+        selectedRows: [],
+        currentPage: 1,
+        pageSize
+      }));
+      setRefreshPage(true);
+      return;
+    }
     const { allRowData } = state;
     let list = allRowData.slice(0, pageSize - 1);
     setState((prevState) => ({
       ...prevState,
+      selectedIndex: [],
+      selectedRows: [],
       currentPage: 1,
       pageSize,
       rowData: list
     }));
   };
-  const toggleActionMenu = (dataIndex, showMenu, ref) => {
-    const position = ref.current.getBoundingClientRect();
+  const toggleActionMenu = (dataIndex, showMenu, ref2) => {
+    const position = ref2.current.getBoundingClientRect();
     let left = position.x + position.width;
     setMenuPosition({
       top: position.height,
@@ -277,19 +448,22 @@ var TableProvider = (props) => {
     if (sortBy == "") {
       setState((prevState) => ({
         ...prevState,
-        colConfigs: columns2,
-        rowData: data
+        colConfigs: columns2
       }));
+      if (!isClientSideRendering) {
+        setRefreshPage(true);
+      }
       return;
     }
-    let sortedList = sortData(data, dataIndex, sortBy);
     setState((prevState) => ({
       ...prevState,
-      colConfigs: columns2,
-      rowData: sortedList
+      colConfigs: columns2
     }));
     setActionMenu(false);
     setHeaderCell("");
+    if (!isClientSideRendering) {
+      setRefreshPage(true);
+    }
   };
   const onColumnPin = (pinDirection) => {
     const { colConfigs } = state;
@@ -324,20 +498,35 @@ var TableProvider = (props) => {
       pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
       totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
       selectedRows: [],
-      pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [50, 100, 200, 500],
-      isAutoSizeAllColumns: false
+      selectedIndex: [],
+      pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [20, 50, 100],
+      isAutoSizeAllColumns: false,
+      hideDefaultFilterButton,
+      filters: {}
     });
     setActionMenu(false);
   };
-  const updateState = (0, import_react3.useCallback)((newState) => {
+  const onFilterApply = (filters) => {
+    setState((prev) => ({
+      ...prev,
+      filters
+    }));
+    toggleModalFilter(false);
+    if (!isClientSideRendering) {
+      setRefreshPage(true);
+    }
+  };
+  const onFilterReset = () => {
+  };
+  const updateState = (0, import_react4.useCallback)((newState) => {
     setState((prev) => ({
       ...prev,
       ...newState
     }));
   }, []);
-  const api = (0, import_react3.useMemo)(
+  const api = (0, import_react4.useMemo)(
     () => ({
-      onRowSelect,
+      onRowSelectionChange,
       onColumnResize,
       onAutoColumnResize,
       onPageChange,
@@ -346,15 +535,15 @@ var TableProvider = (props) => {
       onColumnPin,
       onSortColumn,
       updateState,
-      onColumnReset
+      onColumnReset,
+      onFilterApply,
+      onFilterReset,
+      toggleModalFilter
     }),
-    [onRowSelect, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
-  );
-  const contextValue = (0, import_react3.useMemo)(
-    () => ({ state, api }),
-    [state, api]
+    [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
   );
-  (0, import_react3.useEffect)(() => {
+  const contextValue = { state, api, ssrList, totalSSRCount };
+  (0, import_react4.useEffect)(() => {
     function handleClickOutside(event) {
       if (actionMenuRef && "current" in actionMenuRef && actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
         setActionMenu(false);
@@ -363,25 +552,101 @@ var TableProvider = (props) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [actionMenuRef, setActionMenu]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `table-wrapper ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, children: [
+  const reformData = () => {
+    let list = data;
+    const { filters, colConfigs, pageSize, currentPage } = state;
+    if (Object.keys(filters).length > 0) {
+      list = data.filter(
+        (row) => Object.entries(filters).every(
+          ([key, rule]) => applyOperation(row[key], rule)
+        )
+      );
+    }
+    let sortedCol = colConfigs.filter((item) => item.sortKey != "");
+    if (sortedCol.length > 0) {
+      list = sortData(list, sortedCol[0].dataIndex, sortedCol[0].sortKey || "");
+    }
+    let x = showPagination ? list.slice((currentPage - 1) * pageSize, pageSize * currentPage) : list;
+    setState((prev) => ({
+      ...prev,
+      rowData: x,
+      totalRecords: list.length
+    }));
+  };
+  const getListFromServer = () => {
+    const { filters, colConfigs, pageSize, currentPage } = state;
+    let sortedCol = colConfigs.filter((item) => item.sortKey != "");
+    let sortBy = {};
+    if (sortedCol.length > 0) {
+      sortBy.key = sortedCol[0]?.dataIndex;
+      sortBy.sortBy = sortedCol[0]?.sortKey;
+    }
+    if (typeof setRowData === "function") {
+      setRowData(currentPage, pageSize, filters, sortBy);
+      setRefreshPage(false);
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    if (isClientSideRendering) {
+      reformData();
+    }
+  }, [state.pageSize, state.colConfigs, state.filters, state.currentPage]);
+  (0, import_react4.useImperativeHandle)(ref, () => ({
+    showFilterModal(status) {
+      toggleModalFilter(status);
+    },
+    setRowData(list, totalCount) {
+      const { rowSelectConfig: rowSelectConfig2 } = state;
+      let defaultCheckedIndex = [];
+      let defaultSelectedRows = [];
+      if (rowSelectConfig2 && rowSelectConfig2?.isChecked) {
+        list.map((row, index) => {
+          if (rowSelectConfig2?.isChecked?.(row)) {
+            defaultSelectedRows.push(row);
+            defaultCheckedIndex.push(index);
+          }
+        });
+      }
+      setState((prev) => ({
+        ...prev,
+        selectedIndex: defaultCheckedIndex,
+        selectedRows: defaultSelectedRows,
+        rowData: list,
+        totalRecords: totalCount
+      }));
+    },
+    exportToCSV(fileName) {
+      exportToCSV(state.rowData, fileName);
+    },
+    exportToExcel(fileName) {
+      exportToExcel(state.rowData, fileName);
+    },
+    getSelectedRows() {
+      return state.selectedRows;
+    }
+  }), [refreshPage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `ms-table-wrapper ${props.className} ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, children: [
     children,
-    state.rowData.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Overlay_default, { style: { height: tbodyHeight, top: theadHeight } }),
-    showActionMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
+    state.rowData.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Overlay_default, { customComponentForNoRecords }),
+    showActionMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
   ] }) });
-};
+});
+
+// src/components/Header/msTableHeader.tsx
+var import_react6 = require("react");
 
 // src/components/Header/HeaderCell.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var HeaderCell = (props) => {
-  const thRef = (0, import_react4.useRef)(null);
+  const thRef = (0, import_react5.useRef)(null);
   const { title, cellRenderer, hideActionMenu, dataIndex, width: defaultWidth, resizable = true, pinned } = props;
   const minWidth = title === "" ? 30 : 50;
-  const [width, setWidth] = (0, import_react4.useState)(defaultWidth || 80);
-  const startX = (0, import_react4.useRef)(0);
-  const startWidth = (0, import_react4.useRef)(0);
+  const [width, setWidth] = (0, import_react5.useState)(defaultWidth || 80);
+  const startX = (0, import_react5.useRef)(0);
+  const startWidth = (0, import_react5.useRef)(0);
   const { state: { isAutoSizeAllColumns, ...rest }, api } = useTable();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isAutoSizeAllColumns) {
       let element = thRef.current.getBoundingClientRect();
       if (api.onColumnResize) {
@@ -392,7 +657,6 @@ var HeaderCell = (props) => {
   const onMouseDown = (e) => {
     startX.current = e.clientX;
     startWidth.current = thRef.current?.offsetWidth || width;
-    console.log("Start Width:", startWidth.current);
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   };
@@ -411,107 +675,563 @@ var HeaderCell = (props) => {
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "th",
     {
       className: `${props.headerCellClassName} ${pinned ? pinned + "-pinned" : ""}`,
       ref: thRef,
-      style: { width: width || 80 },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "ms-table-header-cell ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "ms-table-header-cell-title", onClick: () => api.onSortColumn(dataIndex, !props.sortKey ? "asc" : props.sortKey == "asc" ? "desc" : ""), children: [
+      style: { width },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "header-cell-wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ms-table-header-cell ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ms-table-header-cell-title", onClick: () => api.onSortColumn(dataIndex, !props.sortKey ? "asc" : props.sortKey == "asc" ? "desc" : ""), children: [
             title,
+            " ",
+            rest.filters[dataIndex] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("sup", { children: "*" }) : "",
             props.sortKey == "asc" ? angleUpIcon : props.sortKey == "desc" ? angleDownIcon : null
           ] }),
-          !hideActionMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ms-table-header-action", title: "View Menu", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
+          !hideActionMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ms-table-header-action", title: "View Menu", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
         ] }),
-        resizable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ms-table-column-resizer", onMouseDown })
-      ]
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `ms-table-column-resizer ${resizable ? "" : "disabled"}`, onMouseDown: resizable ? onMouseDown : void 0 })
+      ] })
     },
     dataIndex
   );
 };
-var HeaderCell_default = HeaderCell;
+var HeaderCell_default = (0, import_react5.memo)(HeaderCell);
 
 // src/components/Header/msTableHeader.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var msTableHeader = (props) => {
-  const { state, api } = useTable();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("colgroup", { children: state.colConfigs.map((col) => !col.isHidden && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("col", { width: col.width || 80 }, col.dataIndex)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { ref: props.ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: state.colConfigs.map((col) => {
-      if (!col.isHidden) {
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderCell_default, { ...col }, col.dataIndex);
-      }
-    }) }) })
+  const { state: { rowSelectConfig, rowData, colConfigs, selectedIndex, ...rest }, api } = useTable();
+  const [isAllChecked, setIsAllChecked] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (selectedIndex.length > 0) {
+      setIsAllChecked(rowData.length == selectedIndex.length);
+    } else {
+      setIsAllChecked(false);
+    }
+  }, [selectedIndex]);
+  const handleAllSelection = (isChecked) => {
+    let nextIndex = [];
+    let rows = [];
+    if (isChecked) {
+      rowData.map((item, key) => {
+        let isDisabled = rowSelectConfig?.isDisabled?.(item) || false;
+        let isDefaultChecked = rowSelectConfig?.isChecked?.(item) || false;
+        if (isDisabled && isDefaultChecked) {
+          nextIndex.push(key);
+          rows.push(item);
+        } else if (!isDisabled) {
+          nextIndex.push(key);
+          rows.push(item);
+        }
+      });
+    } else {
+      rowData.map((item, key) => {
+        let isDisabled = rowSelectConfig?.isDisabled?.(item) || false;
+        let isDefaultChecked = rowSelectConfig?.isChecked?.(item) || false;
+        if (isDisabled && isDefaultChecked) {
+          nextIndex.push(key);
+          rows.push(item);
+        }
+      });
+    }
+    api.onRowSelectionChange(rows, nextIndex);
+    setIsAllChecked(isChecked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("colgroup", { children: [
+      rowSelectConfig && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("col", { width: 50 }, "all_checkbox"),
+      colConfigs.map((col) => !col.isHidden && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("col", { width: col.width }, col.dataIndex))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { ref: props.ref, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { children: [
+      rowSelectConfig && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "header-cell-wrapper ", children: [
+        rowSelectConfig.selectionMode == "multiple" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckBox_default, { id: "all", checked: isAllChecked, onChange: (e) => handleAllSelection(e.target.checked) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `ms-table-column-resizer ${rowSelectConfig?.isResizable ? "" : "disabled"}` })
+      ] }) }, "all_checkbox"),
+      colConfigs.map((col) => {
+        if (!col.isHidden) {
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCell_default, { ...col }, col.dataIndex);
+        }
+      })
+    ] }) })
   ] });
 };
 var msTableHeader_default = msTableHeader;
 
 // src/components/Body/DataRowCell.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DataRowCell = ({ dataIndex, value, cellRenderer, width, pinned }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { style: dataIndex !== "name" ? { width: width || "80" } : { width: "80" }, className: `${pinned ? pinned + "-pinned" : ""}`, children: cellRenderer ? cellRenderer(value) : value });
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DataRowCell = ({ rowData, dataIndex, value, cellRenderer, width, pinned, ...rest }) => {
+  const renderData = () => {
+    switch (rest.type) {
+      case "string":
+        return value;
+      case "boolean":
+        return rest?.displayAs ? value ? rest.displayAs.true : rest.displayAs.false : JSON.stringify(value);
+      case "object":
+        return JSON.stringify(value);
+      default:
+        return value;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { width }, className: `${pinned ? pinned + "-pinned" : ""}`, children: cellRenderer ? cellRenderer(rowData, dataIndex) : renderData() });
 };
 var DataRowCell_default = DataRowCell;
 
 // src/components/Body/msTableBody.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var msTableBody = (props) => {
-  const { state, api } = useTable();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { ref: props.ref, children: state.rowData?.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { onClick: () => api.onRowSelect(row), children: state.colConfigs?.map((col, colIndex) => !col.isHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataRowCell_default, { dataIndex: col.dataIndex, value: row[col.dataIndex], width: col.width, cellRenderer: col.cellRenderer, pinned: col.pinned })) }, rowIndex)) });
+  const { state: { rowData, rowSelectConfig, colConfigs, selectedIndex, ...rest }, api } = useTable();
+  const onCheckboxSelectionChange = (currentSelectedRow, index, isChecked) => {
+    let prevIndexes = [...selectedIndex];
+    let rows = [];
+    if (rowSelectConfig?.selectionMode == "multiple") {
+      if (isChecked) {
+        prevIndexes = [...prevIndexes, index];
+        rows = [...rest.selectedRows, currentSelectedRow];
+      } else {
+        prevIndexes = selectedIndex.filter((key) => index != key);
+        rows = rowData.filter((row, key) => prevIndexes.includes(key));
+      }
+    } else {
+      if (isChecked) {
+        prevIndexes = [index];
+        rows = [currentSelectedRow];
+      } else {
+        prevIndexes = [];
+      }
+    }
+    api.onRowSelectionChange(rows, prevIndexes);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { ref: props.ref, children: rowData?.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { children: [
+    rowSelectConfig && rowSelectConfig.selectionMode && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { style: { width: "50px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-center d-flex", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckBox_default, { id: `checkbox_${rowIndex}`, checked: selectedIndex.includes(rowIndex), onChange: (e) => onCheckboxSelectionChange(row, rowIndex, e.target.checked), disabled: rowSelectConfig.isDisabled?.(row) }) }) }),
+    colConfigs?.map((col, colIndex) => !col.isHidden && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataRowCell_default, { type: col.type, dataIndex: col.dataIndex, rowData: row, value: row[col.dataIndex], width: col.width, cellRenderer: col.cellRenderer, pinned: col.pinned, displayAs: col.displayAs }, colIndex + "_col_" + rowIndex))
+  ] }, rowIndex + "_row")) });
 };
 var msTableBody_default = msTableBody;
 
+// src/components/FormElements/Button.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Button = (props) => {
+  const { className, label, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: `ms-table-btn ${className}`, ...rest, children: label });
+};
+var Button_default = Button;
+
 // src/components/Footer/msTableFooter.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var MsTableFooter = () => {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MsTableFooter = (props) => {
   const { state, api } = useTable();
-  const { pageSizeOptions, currentPage, pageSize, totalRecords } = state;
+  const { pageSizeOptions, currentPage, pageSize, totalRecords, filters, hideDefaultFilterButton, customComponentForFooter } = state;
+  let filterCount = Object.keys(filters).length;
   const lastPageNo = Math.ceil(totalRecords / pageSize);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "table-footer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "extra-actions" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pagination-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pagination-info", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "page-size", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { children: "Rows Per Page:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("select", { onChange: (e) => api.onPageSizeChange(parseInt(e.target.value)), value: pageSize, children: state.pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: size, children: size }, size)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "table-footer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "extra-actions", children: [
+      hideDefaultFilterButton == false && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default, { label: `Filters ${filterCount > 0 ? `(${filterCount})` : ""}`, className: "", onClick: () => props.toggleFilterModal(true) }),
+      customComponentForFooter
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pagination-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pagination-info", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "page-size", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { children: "Rows Per Page:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("select", { onChange: (e) => api.onPageSizeChange(parseInt(e.target.value)), value: pageSize, children: state.pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: size, children: size }, size)) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "record-info", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { children: `${(currentPage - 1) * pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}` }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pagination-buttons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "current-page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "record-info", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { children: `${(currentPage - 1) * pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}` }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pagination-buttons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "current-page", children: [
           currentPage,
           " of ",
           Math.ceil(totalRecords / pageSize)
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => api.onPageChange("last"), children: angleRightIcon })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => api.onPageChange("last"), children: angleRightIcon })
       ] })
     ] })
   ] });
 };
 var msTableFooter_default = MsTableFooter;
 
+// src/components/Filter/FilterModal.tsx
+var import_react11 = require("react");
+
+// src/components/Filter/String/TextFilter.tsx
+var import_react7 = require("react");
+
+// src/components/FormElements/Input.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Input = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { ...props }) });
+};
+var Input_default = Input;
+
+// src/components/FormElements/Select.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Select = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { onChange: props.onChange, value: props.value, children: props.option.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: item.value, children: item.label }, props.name + "_" + item.value)) }) });
+};
+var Select_default = Select;
+
+// src/components/Filter/String/TextFilter.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, type } = colConfig;
+  const [selectedOps, setSelectedOps] = (0, import_react7.useState)("include");
+  const [value, setValue] = (0, import_react7.useState)("");
+  const options = [
+    {
+      label: "Contains",
+      value: "include"
+    },
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "Not Equal to",
+      value: "!="
+    },
+    {
+      label: "Does not contain",
+      value: "not include"
+    }
+  ];
+  (0, import_react7.useEffect)(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("include");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, [filterOps]);
+  (0, import_react7.useEffect)(() => {
+    onChange(dataIndex, { type, operation: selectedOps, value });
+  }, [selectedOps, value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select_default, { option: options, onChange: (e) => setSelectedOps(e.target.value), value: selectedOps }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input_default, { name: dataIndex, onChange: (e) => setValue(e.target.value), value })
+    ] })
+  ] });
+};
+var TextFilter_default = (0, import_react7.memo)(TextFilter);
+
+// src/components/Filter/Number/NumberFilter.tsx
+var import_react8 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var NumberFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps } = colConfig;
+  const [selectedOps, setSelectedOps] = (0, import_react8.useState)(filterOps?.operation || "=");
+  const [value, setValue] = (0, import_react8.useState)(filterOps?.value || "");
+  const options = [
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "Not Equal to",
+      value: "!="
+    },
+    {
+      label: "Greater than",
+      value: ">"
+    },
+    {
+      label: "Less than",
+      value: "<"
+    }
+  ];
+  (0, import_react8.useEffect)(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("=");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    onChange(dataIndex, { type: "number", operation: selectedOps, value });
+  }, [selectedOps, value]);
+  const handleKeyPress = (e) => {
+    const inputEvent = e.nativeEvent;
+    if (!/^\d*$/.test(inputEvent.data ?? "")) {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select_default, { option: options, onChange: (e) => setSelectedOps(e.target.value), value: selectedOps }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Input_default,
+        {
+          name: dataIndex,
+          onChange: (e) => setValue(e.target.value),
+          value,
+          onBeforeInput: handleKeyPress
+        }
+      )
+    ] })
+  ] });
+};
+var NumberFilter_default = NumberFilter;
+
+// src/components/Filter/Date/DateFilter.tsx
+var import_react9 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DateFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, type } = colConfig;
+  const [selectedOps, setSelectedOps] = (0, import_react9.useState)("=");
+  const [[fromDate, toDate], setValue] = (0, import_react9.useState)(["", ""]);
+  const options = [
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "No Equal to",
+      value: "!="
+    },
+    {
+      label: "After",
+      value: ">"
+    },
+    {
+      label: "Before",
+      value: "<"
+    },
+    {
+      label: "Range",
+      value: "<>"
+    }
+  ];
+  (0, import_react9.useEffect)(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("=");
+      setValue(["", ""]);
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, [filterOps]);
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setSelectedOps(value);
+    onChange(dataIndex, { type, operation: value, value: [fromDate, toDate] });
+  };
+  const handleDateSelect = (e) => {
+    let { name, value } = e.target;
+    if (name == "from") {
+      setValue([value, toDate]);
+      onChange(dataIndex, { type, operation: selectedOps, value: [value, toDate] });
+    } else {
+      setValue([fromDate, value]);
+      onChange(dataIndex, { type, operation: selectedOps, value: [fromDate, value] });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Select_default, { name: dataIndex, option: options, onChange: handleChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Input_default, { name: "from", type: "date", onChange: handleDateSelect, value: fromDate, max: toDate ? new Date(toDate).toISOString().split("T")[0] : void 0 }),
+    selectedOps == "<>" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center ms-range-icon", children: rangeIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Input_default, { name: `to`, type: "date", onChange: handleDateSelect, value: toDate, min: fromDate ? new Date(fromDate).toISOString().split("T")[0] : void 0 })
+    ] })
+  ] });
+};
+var DateFilter_default = DateFilter;
+
+// src/components/Filter/Boolean/BooleanFilter.tsx
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BooleanFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, displayAs } = colConfig;
+  const [selectedOps, setSelectedOps] = (0, import_react10.useState)("=");
+  const [value, setValue] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("=");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    if (filterOps?.value)
+      setValue(filterOps?.value);
+  }, [filterOps?.value]);
+  const handleSelection = (e) => {
+    setValue(e.target.value);
+    onChange(dataIndex, { type: "boolean", operation: "=", value: e.target.value });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ms-radio-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ms-radio-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { name: dataIndex, type: "radio", id: dataIndex + "_true", value: "true", className: "ms-table-radio", onChange: handleSelection, checked: value == "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { htmlFor: dataIndex + "_true", children: [
+            " ",
+            displayAs ? displayAs.true : "True"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ms-radio-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { name: dataIndex, type: "radio", id: dataIndex + "_false", value: "false", className: "ms-table-radio", onChange: handleSelection, checked: value == "false" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { htmlFor: dataIndex + "_false", children: [
+            " ",
+            displayAs ? displayAs.false : "False"
+          ] })
+        ] })
+      ] }),
+      value !== "" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { title: "clear", className: "ms-table-clear-item", onClick: () => {
+        setValue("");
+        onChange(dataIndex, { type: "boolean", operation: "=", value: "" });
+      }, children: closeIcon })
+    ] })
+  ] });
+};
+var BooleanFilter_default = BooleanFilter;
+
+// src/components/Filter/FilterModal.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FilterModal = (props) => {
+  const filterRef = (0, import_react11.useRef)(null);
+  const headerRef = (0, import_react11.useRef)(null);
+  const footerRef = (0, import_react11.useRef)(null);
+  const [height, setHeight] = (0, import_react11.useState)(0);
+  const [show, toggleShow] = (0, import_react11.useState)(false);
+  const { state: { colConfigs, filters }, api: { onFilterApply } } = useTable();
+  const [filterValues, setFilterValues] = (0, import_react11.useState)({});
+  (0, import_react11.useEffect)(() => {
+    let ref = props.containerRef;
+    let totalHeight = ref?.current.clientHeight || 200;
+    let headerHeight = headerRef?.current.clientHeight || 35;
+    let footerHeight = footerRef?.current.clientHeight || 35;
+    setHeight(totalHeight + 20 - headerHeight - footerHeight);
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (!props.isVisible)
+        return;
+      if (filterRef && "current" in filterRef && filterRef.current && !filterRef.current.contains(event.target)) {
+        toggleShow(false);
+        setTimeout(() => {
+          props.toggleFilterModal(false);
+          setFilterValues({});
+        }, 300);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [filterRef, props.toggleFilterModal]);
+  const onChangeFilterItems = (0, import_react11.useCallback)((dataIndex, value) => {
+    if (value.value == "") {
+      let newFilter = {};
+      for (let key in filterValues) {
+        if (key != dataIndex) {
+          newFilter[key] = filterValues[key];
+        }
+      }
+      setFilterValues(newFilter);
+      return;
+    }
+    setFilterValues((prev) => ({
+      ...prev,
+      [dataIndex]: value
+    }));
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (Object.keys(filters).length > 0) {
+      setFilterValues(filters);
+    }
+  }, [filters]);
+  const renderFieldItem = (colConfig) => {
+    if (colConfig.isHidden || !colConfig.isFilterEnabled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
+    }
+    switch (colConfig.type) {
+      case "string":
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `text_ ${colConfig.dataIndex}`);
+      case "date":
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DateFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `date_ ${colConfig.dataIndex}`);
+      case "number":
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumberFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `numvber_ ${colConfig.dataIndex}`);
+      case "boolean":
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BooleanFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `numvber_ ${colConfig.dataIndex}`);
+      default:
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
+    }
+  };
+  const ClearAllFilterItems = () => {
+    setFilterValues({});
+    onFilterApply({});
+  };
+  const handleApply = () => {
+    onFilterApply(filterValues);
+  };
+  (0, import_react11.useEffect)(() => {
+    if (props.isVisible) {
+      setTimeout(() => toggleShow(true), 100);
+    }
+  }, [props.isVisible]);
+  const onFilterModal = () => {
+    toggleShow(false);
+    setTimeout(() => {
+      props.toggleFilterModal(false);
+    }, 300);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "filter-modal", style: show ? { right: "5px" } : {}, ref: filterRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "filter-header", ref: headerRef, children: [
+      "Filter",
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "close", onClick: onFilterModal, children: closeIcon })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "filter-body", style: { height }, children: colConfigs.map((col) => {
+      return renderFieldItem(col);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "filter-footer", ref: footerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default, { label: "Apply", className: "", disabled: Object.keys(filterValues).length > 0 ? false : true, onClick: handleApply }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default, { label: "Clear All", className: "ms-table-btn-default", style: { marginLeft: "5px" }, disabled: Object.keys(filterValues).length > 0 ? false : true, onClick: ClearAllFilterItems })
+    ] })
+  ] });
+};
+var FilterModal_default = (0, import_react11.memo)(FilterModal);
+
+// src/components/Loader.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Loader = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ms-loader-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ms-loader-overlay" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ms-loader" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Loading..." })
+  ] });
+};
+var Loader_default = Loader;
+
 // src/MsReactTable.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var MsReactTable = (props) => {
-  const { showPagination = true } = props;
-  const containerRef = import_react5.default.useRef(null);
-  const tbodyRef = import_react5.default.useRef(null);
-  const theadRef = import_react5.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TableProvider, { ...props, tbodyRef, theadRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "table-container", ref: containerRef, style: { height: props.height || "200px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { ref: props.ref, className: `ms-react-table ${props.className}`, border: 0, cellPadding: 0, cellSpacing: 0, style: { width: "100%", ...props.style }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(msTableHeader_default, { ref: theadRef }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(msTableBody_default, { ref: tbodyRef })
+  const { showPagination = true, ref, isLoading } = props;
+  const containerRef = import_react12.default.useRef(null);
+  const tbodyRef = import_react12.default.useRef(null);
+  const theadRef = import_react12.default.useRef(null);
+  const [showModalFilter, toggleModalFilter] = import_react12.default.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TableProvider, { ...props, ref, tContainerRef: containerRef, theadRef, toggleModalFilter, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ms-table-container", ref: containerRef, style: { height: props.height || "200px" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { className: `ms-react-table ${props.className}`, border: 0, cellPadding: 0, cellSpacing: 0, style: { width: "100%", ...props.style }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(msTableHeader_default, { ref: theadRef }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(msTableBody_default, { ref: tbodyRef })
     ] }) }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(msTableFooter_default, {})
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(msTableFooter_default, { toggleFilterModal: toggleModalFilter }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      showModalFilter && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FilterModal_default, { isVisible: showModalFilter, toggleFilterModal: toggleModalFilter, containerRef }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ms-overlay", style: showModalFilter ? { width: "100%" } : {} }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader_default, {})
+    ] })
   ] });
 };
 MsReactTable.displayName = "MsReactTable";
 var MsReactTable_default = MsReactTable;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  MsReactTable
-});
 //# sourceMappingURL=index.js.map