ms-react-table 1.0.0 → 2.0.1

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // src/MsReactTable.tsx
-import React5 from "react";
+import React12 from "react";
 
 // src/contextAPI/MsTableProvider.tsx
-import { useState as useState3, useMemo as useMemo2, useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useState as useState3, useMemo as useMemo2, useCallback as useCallback2, useEffect as useEffect2, useRef, forwardRef, useImperativeHandle } from "react";
 
 // src/contextAPI/MsTableContext.tsx
 import { createContext, useContext } from "react";
@@ -17,7 +17,7 @@ var useTable = () => {
 };
 
 // src/components/HeaderActionMenu/HeaderActionMenu.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useCallback, useEffect, useState as useState2 } from "react";
 
 // src/_assets/icons/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,9 +35,37 @@ var prevIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg",
 var nextIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", viewBox: "0 0 256 256", children: /* @__PURE__ */ 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__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ jsx("rect", { width: "64", height: "64", fill: "none" }),
+  /* @__PURE__ */ jsx("line", { x1: "200", y1: "56", x2: "56", y2: "200", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ jsx("line", { x1: "200", y1: "200", x2: "56", y2: "56", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })
+] });
+var rangeIcon = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ jsx("rect", { width: "256", height: "256", fill: "none" }),
+  /* @__PURE__ */ jsx("line", { x1: "216", y1: "128", x2: "40", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ jsx("line", { x1: "128", y1: "16", x2: "128", y2: "96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ jsx("polyline", { points: "160 64 128 96 96 64", fill: "none", stroke: "currentColor", "stroke-linecap": "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ jsx("line", { x1: "128", y1: "240", x2: "128", y2: "160", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
+  /* @__PURE__ */ jsx("polyline", { points: "96 192 128 160 160 192", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })
+] });
+
+// src/components/FormElements/CheckBox.tsx
+import { memo } from "react";
+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 ? () => {
+    } : 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" }) }) })
+  ] }) });
+};
+var CheckBox_default = memo(CheckBox);
 
 // src/components/HeaderActionMenu/HeaderActionMenu.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var HeaderActionMenu = (props) => {
   const { state, api: { onColumnPin, onSortColumn, onAutoColumnResize, onColumnReset, updateState } } = useTable();
   const [showColumnList, toggleColumnList] = useState2(false);
@@ -47,7 +75,7 @@ var HeaderActionMenu = (props) => {
     setColumnList(state.colConfigs);
     onSearchHeader(searchkey);
   }, [state.colConfigs]);
-  const onCheckboxChange = (dataIndex, e) => {
+  const onCheckboxChange = useCallback((dataIndex, e) => {
     let newConfig = state.colConfigs.map((item) => {
       return {
         ...item,
@@ -59,7 +87,7 @@ var HeaderActionMenu = (props) => {
       colConfigs: newConfig
     });
     setColumnList(newConfig);
-  };
+  }, []);
   const onSearchHeader = (value) => {
     let newlist = [];
     if (value) {
@@ -74,31 +102,31 @@ var HeaderActionMenu = (props) => {
     }
     setSearchkey(value);
   };
-  return /* @__PURE__ */ jsx2("div", { ref: props.ref, className: "header-menu", style: props.style, children: showColumnList ? /* @__PURE__ */ jsxs2("div", { className: "column-list", children: [
-    /* @__PURE__ */ jsx2("div", { className: "search", children: /* @__PURE__ */ jsx2("input", { type: "text", placeholder: "Search header", className: "search-input", onChange: (e) => onSearchHeader(e.target.value) }) }),
-    /* @__PURE__ */ jsx2("div", { className: "list", children: columnList.map((item) => /* @__PURE__ */ jsxs2("div", { className: "item", children: [
-      /* @__PURE__ */ jsx2("input", { className: "ms-checkbox-input", type: "checkbox", id: item.dataIndex, checked: !item.isHidden, onChange: (e) => onCheckboxChange(item.dataIndex, e) }),
-      /* @__PURE__ */ jsx2("label", { htmlFor: item.dataIndex, children: item.title })
+  return /* @__PURE__ */ jsx3("div", { ref: props.ref, className: "header-menu", style: props.style, children: showColumnList ? /* @__PURE__ */ jsxs3("div", { className: "column-list", children: [
+    /* @__PURE__ */ jsx3("div", { className: "search", children: /* @__PURE__ */ jsx3("input", { type: "text", placeholder: "Search header", className: "search-input", onChange: (e) => onSearchHeader(e.target.value) }) }),
+    /* @__PURE__ */ jsx3("div", { className: "list", children: columnList.map((item) => /* @__PURE__ */ jsxs3("div", { className: "item", children: [
+      /* @__PURE__ */ jsx3(CheckBox_default, { id: item.dataIndex, checked: !item.isHidden, onChange: (e) => onCheckboxChange(item.dataIndex, e) }),
+      /* @__PURE__ */ jsx3("label", { htmlFor: item.dataIndex, children: item.title })
     ] }, item.dataIndex + "_item")) })
-  ] }) : /* @__PURE__ */ jsxs2("ul", { children: [
-    /* @__PURE__ */ jsxs2("li", { onClick: () => onSortColumn(props.dataIndex, "asc"), children: [
-      /* @__PURE__ */ jsx2("span", { children: angleUpIcon }),
+  ] }) : /* @__PURE__ */ jsxs3("ul", { children: [
+    /* @__PURE__ */ jsxs3("li", { onClick: () => onSortColumn(props.dataIndex, "asc"), children: [
+      /* @__PURE__ */ jsx3("span", { children: angleUpIcon }),
       `Sort By Ascending`
     ] }),
-    /* @__PURE__ */ jsxs2("li", { onClick: () => onSortColumn(props.dataIndex, "desc"), children: [
-      /* @__PURE__ */ jsx2("span", { children: angleDownIcon }),
+    /* @__PURE__ */ jsxs3("li", { onClick: () => onSortColumn(props.dataIndex, "desc"), children: [
+      /* @__PURE__ */ jsx3("span", { children: angleDownIcon }),
       `Sort By Descending`
     ] }),
-    /* @__PURE__ */ jsxs2("li", { onClick: () => onAutoColumnResize("all"), children: [
-      /* @__PURE__ */ jsx2("span", { children: doublePipeArrow }),
+    /* @__PURE__ */ jsxs3("li", { onClick: () => onAutoColumnResize("all"), children: [
+      /* @__PURE__ */ jsx3("span", { children: doublePipeArrow }),
       `Autosize All Column`
     ] }),
-    /* @__PURE__ */ jsxs2("li", { onClick: () => toggleColumnList(true), children: [
-      /* @__PURE__ */ jsx2("span", { children: hideShow }),
+    /* @__PURE__ */ jsxs3("li", { onClick: () => toggleColumnList(true), children: [
+      /* @__PURE__ */ jsx3("span", { children: hideShow }),
       `Hide/Show Columns`
     ] }),
-    /* @__PURE__ */ jsxs2("li", { onClick: onColumnReset, children: [
-      /* @__PURE__ */ jsx2("span", { children: reloadIcon }),
+    /* @__PURE__ */ jsxs3("li", { onClick: onColumnReset, children: [
+      /* @__PURE__ */ jsx3("span", { children: reloadIcon }),
       `Reset Columns`
     ] })
   ] }) });
@@ -106,10 +134,10 @@ var HeaderActionMenu = (props) => {
 var HeaderActionMenu_default = HeaderActionMenu;
 
 // src/components/Overlay.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Overlay = (props) => {
-  const { message = "No Records to show", style } = props;
-  return /* @__PURE__ */ jsx3("div", { className: "overlay-message", style, children: message });
+  const { message = "No Records to show", style, customComponentForNoRecords } = props;
+  return /* @__PURE__ */ jsx4("div", { className: "overlay-message", style, children: customComponentForNoRecords ? customComponentForNoRecords : message });
 };
 var Overlay_default = Overlay;
 
@@ -128,61 +156,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
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var TableProvider = (props) => {
-  const actionMenuRef = useRef2(null);
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TableProvider = forwardRef((props, ref) => {
+  const actionMenuRef = 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] = useState3(false);
   const [selectedHeaderCell, setHeaderCell] = useState3("");
+  const [ssrList, setSSRList] = useState3([]);
+  const [totalSSRCount, setTotalSSRCount] = useState3(0);
   const [menuPosition, setMenuPosition] = useState3({
     top: 0,
     right: 0,
     left: 0
   });
+  const getColumnConfig = useMemo2(() => {
+    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] = useState3({
-    prevColConfig: columns,
-    colConfigs: columns,
+    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
   });
+  const [refreshPage, setRefreshPage] = useState3(false);
+  useEffect2(() => {
+    if (refreshPage) {
+      getListFromServer();
+    }
+  }, [refreshPage]);
   useEffect2(() => {
     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 = useCallback((rowData) => {
+  const onRowSelectionChange = useCallback2((rowData, selectedIndex) => {
     setState((prevState) => ({
       ...prevState,
-      selectedRows: [...prevState.selectedRows, rowData]
+      selectedRows: rowData,
+      selectedIndex
     }));
-    onRowClick ? onRowClick(rowData) : null;
+    onRowSelect ? onRowSelect(rowData) : null;
   }, []);
-  const onColumnResize = useCallback((dataIndex, newWidth) => {
+  const onColumnResize = useCallback2((dataIndex, newWidth) => {
     setState((prevState) => ({
       ...prevState,
       colConfigs: prevState.colConfigs.map(
@@ -192,36 +349,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,
@@ -241,19 +412,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;
@@ -288,12 +462,27 @@ 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 = useCallback((newState) => {
+  const onFilterApply = (filters) => {
+    setState((prev) => ({
+      ...prev,
+      filters
+    }));
+    toggleModalFilter(false);
+    if (!isClientSideRendering) {
+      setRefreshPage(true);
+    }
+  };
+  const onFilterReset = () => {
+  };
+  const updateState = useCallback2((newState) => {
     setState((prev) => ({
       ...prev,
       ...newState
@@ -301,7 +490,7 @@ var TableProvider = (props) => {
   }, []);
   const api = useMemo2(
     () => ({
-      onRowSelect,
+      onRowSelectionChange,
       onColumnResize,
       onAutoColumnResize,
       onPageChange,
@@ -310,14 +499,14 @@ var TableProvider = (props) => {
       onColumnPin,
       onSortColumn,
       updateState,
-      onColumnReset
+      onColumnReset,
+      onFilterApply,
+      onFilterReset,
+      toggleModalFilter
     }),
-    [onRowSelect, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
-  );
-  const contextValue = useMemo2(
-    () => ({ state, api }),
-    [state, api]
+    [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
   );
+  const contextValue = { state, api, ssrList, totalSSRCount };
   useEffect2(() => {
     function handleClickOutside(event) {
       if (actionMenuRef && "current" in actionMenuRef && actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
@@ -327,23 +516,99 @@ var TableProvider = (props) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [actionMenuRef, setActionMenu]);
-  return /* @__PURE__ */ jsx4(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3("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);
+    }
+  };
+  useEffect2(() => {
+    if (isClientSideRendering) {
+      reformData();
+    }
+  }, [state.pageSize, state.colConfigs, state.filters, state.currentPage]);
+  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__ */ jsx5(MsTableContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { className: `ms-table-wrapper ${props.className} ${state.isAutoSizeAllColumns ? "ms-auto-width" : ""}`, children: [
     children,
-    state.rowData.length == 0 && /* @__PURE__ */ jsx4(Overlay_default, { style: { height: tbodyHeight, top: theadHeight } }),
-    showActionMenu && /* @__PURE__ */ jsx4(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
+    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 } })
   ] }) });
-};
+});
+
+// src/components/Header/msTableHeader.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/components/Header/HeaderCell.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { memo as memo2, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var HeaderCell = (props) => {
-  const thRef = useRef3(null);
+  const thRef = useRef2(null);
   const { title, cellRenderer, hideActionMenu, dataIndex, width: defaultWidth, resizable = true, pinned } = props;
   const minWidth = title === "" ? 30 : 50;
   const [width, setWidth] = useState4(defaultWidth || 80);
-  const startX = useRef3(0);
-  const startWidth = useRef3(0);
+  const startX = useRef2(0);
+  const startWidth = useRef2(0);
   const { state: { isAutoSizeAllColumns, ...rest }, api } = useTable();
   useEffect3(() => {
     if (isAutoSizeAllColumns) {
@@ -356,7 +621,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);
   };
@@ -375,106 +639,566 @@ var HeaderCell = (props) => {
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx6(
     "th",
     {
       className: `${props.headerCellClassName} ${pinned ? pinned + "-pinned" : ""}`,
       ref: thRef,
-      style: { width: width || 80 },
-      children: [
-        /* @__PURE__ */ jsxs4("span", { className: "ms-table-header-cell ", children: [
-          /* @__PURE__ */ jsxs4("span", { className: "ms-table-header-cell-title", onClick: () => api.onSortColumn(dataIndex, !props.sortKey ? "asc" : props.sortKey == "asc" ? "desc" : ""), children: [
+      style: { width },
+      children: /* @__PURE__ */ jsxs5("div", { className: "header-cell-wrapper", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "ms-table-header-cell ", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "ms-table-header-cell-title", onClick: () => api.onSortColumn(dataIndex, !props.sortKey ? "asc" : props.sortKey == "asc" ? "desc" : ""), children: [
             title,
+            " ",
+            rest.filters[dataIndex] ? /* @__PURE__ */ jsx6("sup", { children: "*" }) : "",
             props.sortKey == "asc" ? angleUpIcon : props.sortKey == "desc" ? angleDownIcon : null
           ] }),
-          !hideActionMenu && /* @__PURE__ */ jsx5("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", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
         ] }),
-        resizable && /* @__PURE__ */ jsx5("span", { className: "ms-table-column-resizer", onMouseDown })
-      ]
+        /* @__PURE__ */ jsx6("div", { className: `ms-table-column-resizer ${resizable ? "" : "disabled"}`, onMouseDown: resizable ? onMouseDown : void 0 })
+      ] })
     },
     dataIndex
   );
 };
-var HeaderCell_default = HeaderCell;
+var HeaderCell_default = memo2(HeaderCell);
 
 // src/components/Header/msTableHeader.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var msTableHeader = (props) => {
-  const { state, api } = useTable();
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx6("colgroup", { children: state.colConfigs.map((col) => !col.isHidden && /* @__PURE__ */ jsx6("col", { width: col.width || 80 }, col.dataIndex)) }),
-    /* @__PURE__ */ jsx6("thead", { ref: props.ref, children: /* @__PURE__ */ jsx6("tr", { children: state.colConfigs.map((col) => {
-      if (!col.isHidden) {
-        return /* @__PURE__ */ jsx6(HeaderCell_default, { ...col }, col.dataIndex);
-      }
-    }) }) })
+  const { state: { rowSelectConfig, rowData, colConfigs, selectedIndex, ...rest }, api } = useTable();
+  const [isAllChecked, setIsAllChecked] = useState5(false);
+  useEffect4(() => {
+    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__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6("colgroup", { children: [
+      rowSelectConfig && /* @__PURE__ */ jsx7("col", { width: 50 }, "all_checkbox"),
+      colConfigs.map((col) => !col.isHidden && /* @__PURE__ */ jsx7("col", { width: col.width }, col.dataIndex))
+    ] }),
+    /* @__PURE__ */ jsx7("thead", { ref: props.ref, children: /* @__PURE__ */ jsxs6("tr", { children: [
+      rowSelectConfig && /* @__PURE__ */ jsx7("th", { children: /* @__PURE__ */ jsxs6("div", { className: "header-cell-wrapper ", children: [
+        rowSelectConfig.selectionMode == "multiple" && /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsx7(CheckBox_default, { id: "all", checked: isAllChecked, onChange: (e) => handleAllSelection(e.target.checked) }) }),
+        /* @__PURE__ */ jsx7("div", { className: `ms-table-column-resizer ${rowSelectConfig?.isResizable ? "" : "disabled"}` })
+      ] }) }, "all_checkbox"),
+      colConfigs.map((col) => {
+        if (!col.isHidden) {
+          return /* @__PURE__ */ jsx7(HeaderCell_default, { ...col }, col.dataIndex);
+        }
+      })
+    ] }) })
   ] });
 };
 var msTableHeader_default = msTableHeader;
 
 // src/components/Body/DataRowCell.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var DataRowCell = ({ dataIndex, value, cellRenderer, width, pinned }) => {
-  return /* @__PURE__ */ jsx7("td", { style: dataIndex !== "name" ? { width: width || "80" } : { width: "80" }, className: `${pinned ? pinned + "-pinned" : ""}`, children: cellRenderer ? cellRenderer(value) : value });
+import { jsx as jsx8 } from "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__ */ jsx8("td", { style: { width }, className: `${pinned ? pinned + "-pinned" : ""}`, children: cellRenderer ? cellRenderer(rowData, dataIndex) : renderData() });
 };
 var DataRowCell_default = DataRowCell;
 
 // src/components/Body/msTableBody.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var msTableBody = (props) => {
-  const { state, api } = useTable();
-  return /* @__PURE__ */ jsx8("tbody", { ref: props.ref, children: state.rowData?.map((row, rowIndex) => /* @__PURE__ */ jsx8("tr", { onClick: () => api.onRowSelect(row), children: state.colConfigs?.map((col, colIndex) => !col.isHidden && /* @__PURE__ */ jsx8(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__ */ jsx9("tbody", { ref: props.ref, children: rowData?.map((row, rowIndex) => /* @__PURE__ */ jsxs7("tr", { children: [
+    rowSelectConfig && rowSelectConfig.selectionMode && /* @__PURE__ */ jsx9("td", { style: { width: "50px" }, children: /* @__PURE__ */ jsx9("div", { className: "text-center d-flex", children: /* @__PURE__ */ jsx9(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__ */ jsx9(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
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Button = (props) => {
+  const { className, label, ...rest } = props;
+  return /* @__PURE__ */ jsx10("button", { className: `ms-table-btn ${className}`, ...rest, children: label });
+};
+var Button_default = Button;
+
 // src/components/Footer/msTableFooter.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var MsTableFooter = () => {
+import { jsx as jsx11, jsxs as jsxs8 } from "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__ */ jsxs6("div", { className: "table-footer", children: [
-    /* @__PURE__ */ jsx9("div", { className: "extra-actions" }),
-    /* @__PURE__ */ jsxs6("div", { className: "pagination-controls", children: [
-      /* @__PURE__ */ jsx9("div", { className: "pagination-info", children: /* @__PURE__ */ jsxs6("div", { className: "page-size", children: [
-        /* @__PURE__ */ jsx9("label", { children: "Rows Per Page:" }),
-        /* @__PURE__ */ jsx9("select", { onChange: (e) => api.onPageSizeChange(parseInt(e.target.value)), value: pageSize, children: state.pageSizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size)) })
+  return /* @__PURE__ */ jsxs8("div", { className: "table-footer", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "extra-actions", children: [
+      hideDefaultFilterButton == false && /* @__PURE__ */ jsx11(Button_default, { label: `Filters ${filterCount > 0 ? `(${filterCount})` : ""}`, className: "", onClick: () => props.toggleFilterModal(true) }),
+      customComponentForFooter
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "pagination-controls", children: [
+      /* @__PURE__ */ jsx11("div", { className: "pagination-info", children: /* @__PURE__ */ jsxs8("div", { className: "page-size", children: [
+        /* @__PURE__ */ jsx11("label", { children: "Rows Per Page:" }),
+        /* @__PURE__ */ jsx11("select", { onChange: (e) => api.onPageSizeChange(parseInt(e.target.value)), value: pageSize, children: state.pageSizeOptions.map((size) => /* @__PURE__ */ jsx11("option", { value: size, children: size }, size)) })
       ] }) }),
-      /* @__PURE__ */ jsx9("div", { className: "record-info", children: /* @__PURE__ */ jsx9("label", { children: `${(currentPage - 1) * pageSize + 1} to ${Math.min(currentPage * pageSize, totalRecords)} of ${totalRecords}` }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "pagination-buttons", children: [
-        /* @__PURE__ */ jsx9("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
-        /* @__PURE__ */ jsx9("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
-        /* @__PURE__ */ jsxs6("span", { className: "current-page", children: [
+      /* @__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__ */ jsxs8("span", { className: "current-page", children: [
           currentPage,
           " of ",
           Math.ceil(totalRecords / pageSize)
         ] }),
-        /* @__PURE__ */ jsx9("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
-        /* @__PURE__ */ jsx9("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: () => api.onPageChange("next"), children: nextIcon }),
+        /* @__PURE__ */ jsx11("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
+import { memo as memo4, useCallback as useCallback3, useEffect as useEffect9, useRef as useRef3, useState as useState10 } from "react";
+
+// src/components/Filter/String/TextFilter.tsx
+import { memo as memo3, useEffect as useEffect5, useState as useState6 } from "react";
+
+// src/components/FormElements/Input.tsx
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
+var Input = (props) => {
+  return /* @__PURE__ */ jsx12(Fragment3, { children: /* @__PURE__ */ jsx12("input", { ...props }) });
+};
+var Input_default = Input;
+
+// src/components/FormElements/Select.tsx
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
+var Select = (props) => {
+  return /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsx13("select", { onChange: props.onChange, value: props.value, children: props.option.map((item) => /* @__PURE__ */ jsx13("option", { value: item.value, children: item.label }, props.name + "_" + item.value)) }) });
+};
+var Select_default = Select;
+
+// src/components/Filter/String/TextFilter.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var TextFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, type } = colConfig;
+  const [selectedOps, setSelectedOps] = useState6("include");
+  const [value, setValue] = useState6("");
+  const options = [
+    {
+      label: "Contains",
+      value: "include"
+    },
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "Not Equal to",
+      value: "!="
+    },
+    {
+      label: "Does not contain",
+      value: "not include"
+    }
+  ];
+  useEffect5(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("include");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, [filterOps]);
+  useEffect5(() => {
+    onChange(dataIndex, { type, operation: selectedOps, value });
+  }, [selectedOps, value]);
+  return /* @__PURE__ */ jsxs9("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ jsx14("label", { children: title }),
+    /* @__PURE__ */ jsxs9("div", { className: "", children: [
+      /* @__PURE__ */ jsx14(Select_default, { option: options, onChange: (e) => setSelectedOps(e.target.value), value: selectedOps }),
+      /* @__PURE__ */ jsx14(Input_default, { name: dataIndex, onChange: (e) => setValue(e.target.value), value })
+    ] })
+  ] });
+};
+var TextFilter_default = memo3(TextFilter);
+
+// src/components/Filter/Number/NumberFilter.tsx
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var NumberFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps } = colConfig;
+  const [selectedOps, setSelectedOps] = useState7(filterOps?.operation || "=");
+  const [value, setValue] = useState7(filterOps?.value || "");
+  const options = [
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "Not Equal to",
+      value: "!="
+    },
+    {
+      label: "Greater than",
+      value: ">"
+    },
+    {
+      label: "Less than",
+      value: "<"
+    }
+  ];
+  useEffect6(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("=");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, []);
+  useEffect6(() => {
+    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__ */ jsxs10("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ jsx15("label", { children: title }),
+    /* @__PURE__ */ jsxs10("div", { className: "", children: [
+      /* @__PURE__ */ jsx15(Select_default, { option: options, onChange: (e) => setSelectedOps(e.target.value), value: selectedOps }),
+      /* @__PURE__ */ jsx15(
+        Input_default,
+        {
+          name: dataIndex,
+          onChange: (e) => setValue(e.target.value),
+          value,
+          onBeforeInput: handleKeyPress
+        }
+      )
+    ] })
+  ] });
+};
+var NumberFilter_default = NumberFilter;
+
+// src/components/Filter/Date/DateFilter.tsx
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var DateFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, type } = colConfig;
+  const [selectedOps, setSelectedOps] = useState8("=");
+  const [[fromDate, toDate], setValue] = useState8(["", ""]);
+  const options = [
+    {
+      label: "Equal to",
+      value: "="
+    },
+    {
+      label: "No Equal to",
+      value: "!="
+    },
+    {
+      label: "After",
+      value: ">"
+    },
+    {
+      label: "Before",
+      value: "<"
+    },
+    {
+      label: "Range",
+      value: "<>"
+    }
+  ];
+  useEffect7(() => {
+    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__ */ jsxs11("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ jsx16("label", { children: title }),
+    /* @__PURE__ */ jsx16(Select_default, { name: dataIndex, option: options, onChange: handleChange }),
+    /* @__PURE__ */ jsx16(Input_default, { name: "from", type: "date", onChange: handleDateSelect, value: fromDate, max: toDate ? new Date(toDate).toISOString().split("T")[0] : void 0 }),
+    selectedOps == "<>" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx16("div", { className: "text-center ms-range-icon", children: rangeIcon }),
+      /* @__PURE__ */ jsx16(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
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var BooleanFilter = (colConfig) => {
+  const { title, dataIndex, onChange, filterOps, displayAs } = colConfig;
+  const [selectedOps, setSelectedOps] = useState9("=");
+  const [value, setValue] = useState9("");
+  useEffect8(() => {
+    if (filterOps === void 0) {
+      setSelectedOps("=");
+      setValue("");
+    } else {
+      setSelectedOps(filterOps.operation);
+      setValue(filterOps.value);
+    }
+  }, []);
+  useEffect8(() => {
+    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__ */ jsxs12("div", { className: "ms-form-item", children: [
+    /* @__PURE__ */ jsx17("label", { children: title }),
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs12("div", { className: "ms-radio-group", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "ms-radio-item", children: [
+          /* @__PURE__ */ jsx17(Input_default, { name: dataIndex, type: "radio", id: dataIndex + "_true", value: "true", className: "ms-table-radio", onChange: handleSelection, checked: value == "true" }),
+          /* @__PURE__ */ jsxs12("label", { htmlFor: dataIndex + "_true", children: [
+            " ",
+            displayAs ? displayAs.true : "True"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "ms-radio-item", children: [
+          /* @__PURE__ */ jsx17(Input_default, { name: dataIndex, type: "radio", id: dataIndex + "_false", value: "false", className: "ms-table-radio", onChange: handleSelection, checked: value == "false" }),
+          /* @__PURE__ */ jsxs12("label", { htmlFor: dataIndex + "_false", children: [
+            " ",
+            displayAs ? displayAs.false : "False"
+          ] })
+        ] })
+      ] }),
+      value !== "" && /* @__PURE__ */ jsx17("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
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var FilterModal = (props) => {
+  const filterRef = useRef3(null);
+  const headerRef = useRef3(null);
+  const footerRef = useRef3(null);
+  const [height, setHeight] = useState10(0);
+  const [show, toggleShow] = useState10(false);
+  const { state: { colConfigs, filters }, api: { onFilterApply } } = useTable();
+  const [filterValues, setFilterValues] = useState10({});
+  useEffect9(() => {
+    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);
+  }, []);
+  useEffect9(() => {
+    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 = useCallback3((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
+    }));
+  }, []);
+  useEffect9(() => {
+    if (Object.keys(filters).length > 0) {
+      setFilterValues(filters);
+    }
+  }, [filters]);
+  const renderFieldItem = (colConfig) => {
+    if (colConfig.isHidden || !colConfig.isFilterEnabled) {
+      return /* @__PURE__ */ jsx18(Fragment6, {});
+    }
+    switch (colConfig.type) {
+      case "string":
+        return /* @__PURE__ */ jsx18(TextFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `text_ ${colConfig.dataIndex}`);
+      case "date":
+        return /* @__PURE__ */ jsx18(DateFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `date_ ${colConfig.dataIndex}`);
+      case "number":
+        return /* @__PURE__ */ jsx18(NumberFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `numvber_ ${colConfig.dataIndex}`);
+      case "boolean":
+        return /* @__PURE__ */ jsx18(BooleanFilter_default, { ...colConfig, onChange: onChangeFilterItems, filterOps: filterValues[colConfig.dataIndex] }, `numvber_ ${colConfig.dataIndex}`);
+      default:
+        /* @__PURE__ */ jsx18(Fragment6, {});
+    }
+  };
+  const ClearAllFilterItems = () => {
+    setFilterValues({});
+    onFilterApply({});
+  };
+  const handleApply = () => {
+    onFilterApply(filterValues);
+  };
+  useEffect9(() => {
+    if (props.isVisible) {
+      setTimeout(() => toggleShow(true), 100);
+    }
+  }, [props.isVisible]);
+  const onFilterModal = () => {
+    toggleShow(false);
+    setTimeout(() => {
+      props.toggleFilterModal(false);
+    }, 300);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "filter-modal", style: show ? { right: "5px" } : {}, ref: filterRef, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "filter-header", ref: headerRef, children: [
+      "Filter",
+      /* @__PURE__ */ jsx18("div", { className: "close", onClick: onFilterModal, children: closeIcon })
+    ] }),
+    /* @__PURE__ */ jsx18("div", { className: "filter-body", style: { height }, children: colConfigs.map((col) => {
+      return renderFieldItem(col);
+    }) }),
+    /* @__PURE__ */ jsxs13("div", { className: "filter-footer", ref: footerRef, children: [
+      /* @__PURE__ */ jsx18(Button_default, { label: "Apply", className: "", disabled: Object.keys(filterValues).length > 0 ? false : true, onClick: handleApply }),
+      /* @__PURE__ */ jsx18(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 = memo4(FilterModal);
+
+// src/components/Loader.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var Loader = () => {
+  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..." })
+  ] });
+};
+var Loader_default = Loader;
+
 // src/MsReactTable.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var MsReactTable = (props) => {
-  const { showPagination = true } = props;
-  const containerRef = React5.useRef(null);
-  const tbodyRef = React5.useRef(null);
-  const theadRef = React5.useRef(null);
-  return /* @__PURE__ */ jsxs7(TableProvider, { ...props, tbodyRef, theadRef, children: [
-    /* @__PURE__ */ jsx10("div", { className: "table-container", ref: containerRef, style: { height: props.height || "200px" }, children: /* @__PURE__ */ jsxs7("table", { ref: props.ref, className: `ms-react-table ${props.className}`, border: 0, cellPadding: 0, cellSpacing: 0, style: { width: "100%", ...props.style }, children: [
-      /* @__PURE__ */ jsx10(msTableHeader_default, { ref: theadRef }),
-      /* @__PURE__ */ jsx10(msTableBody_default, { ref: tbodyRef })
+  const { showPagination = true, ref, isLoading } = props;
+  const containerRef = React12.useRef(null);
+  const tbodyRef = React12.useRef(null);
+  const theadRef = React12.useRef(null);
+  const [showModalFilter, toggleModalFilter] = React12.useState(false);
+  return /* @__PURE__ */ jsxs15(TableProvider, { ...props, ref, tContainerRef: containerRef, theadRef, toggleModalFilter, children: [
+    /* @__PURE__ */ jsx20("div", { className: "ms-table-container", ref: containerRef, style: { height: props.height || "200px" }, children: /* @__PURE__ */ jsxs15("table", { className: `ms-react-table ${props.className}`, border: 0, cellPadding: 0, cellSpacing: 0, style: { width: "100%", ...props.style }, children: [
+      /* @__PURE__ */ jsx20(msTableHeader_default, { ref: theadRef }),
+      /* @__PURE__ */ jsx20(msTableBody_default, { ref: tbodyRef })
     ] }) }),
-    showPagination && /* @__PURE__ */ jsx10(msTableFooter_default, {})
+    showPagination && /* @__PURE__ */ jsx20(msTableFooter_default, { toggleFilterModal: toggleModalFilter }),
+    /* @__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, {})
+    ] })
   ] });
 };
 MsReactTable.displayName = "MsReactTable";
 var MsReactTable_default = MsReactTable;
 export {
-  MsReactTable_default as MsReactTable
+  MsReactTable_default as default
 };
 //# sourceMappingURL=index.mjs.map