ms-react-table 2.0.1 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +6 -1
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +4 -1
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +49 -47
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +51 -49
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -4,6 +4,12 @@
4
4
  --bg-color: #F1F1F1;
5
5
  --overlay-color: #D2D2D260;
6
6
  --item-bg-color: #F2F2F2;
7
+ font-family:
8
+ "Segoe UI",
9
+ Tahoma,
10
+ Geneva,
11
+ Verdana,
12
+ sans-serif;
7
13
  }
8
14
  .text-center {
9
15
  text-align: center;
@@ -24,7 +30,6 @@
24
30
  .ms-table-wrapper {
25
31
  display: grid;
26
32
  margin: 15px;
27
- font-family: "Nunito Sans";
28
33
  position: relative;
29
34
  overflow: hidden;
30
35
  }
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/_assets/style.css"],"sourcesContent":[":root {\r\n --text-color : #434343;\r\n --bg-color: #F1F1F1;\r\n --overlay-color: #D2D2D260;\r\n --item-bg-color: #F2F2F2;\r\n}\r\n\r\n.text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-left {\r\n text-align: left;\r\n}\r\n\r\n.text-right {\r\n text-align: right;\r\n}\r\n\r\n.cursor-pointer {\r\n cursor: pointer;\r\n}\r\n\r\n.cursor-disabled {\r\n cursor: not-allowed !important;\r\n opacity: 0.6;\r\n}\r\n\r\n.ms-table-wrapper {\r\n display: grid;\r\n margin: 15px;\r\n font-family: 'Nunito Sans';\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ms-table-container {\r\n width: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n max-height: 600px;\r\n}\r\n\r\n/* Show scrollbars only on hover */\r\n.ms-table-container:hover {\r\n overflow: auto;\r\n}\r\n\r\n/* Optional: style scrollbar for WebKit browsers */\r\n.ms-table-container::-webkit-scrollbar {\r\n width: 4px;\r\n height: 4px;\r\n}\r\n\r\n.ms-table-container::-webkit-scrollbar-thumb {\r\n background-color: rgba(0,0,0,0.4);\r\n border-radius: 4px;\r\n}\r\n\r\n\r\n.ms-auto-width .ms-react-table {\r\n table-layout: auto !important;\r\n}\r\n\r\n.ms-react-table {\r\n table-layout: fixed;\r\n width: 100%;\r\n}\r\n\r\n.ms-react-table>thead {\r\n position: sticky;\r\n top: 0;\r\n background-color: var(--bg-color);\r\n z-index: 2\r\n}\r\n\r\n.ms-react-table .ms-table-header-cell {\r\n display: flex;\r\n flex: 0 0 1;\r\n justify-content: space-between;\r\n align-items: center;\r\n user-select: none;\r\n}\r\n\r\n.ms-react-table th {\r\n padding: 10px;\r\n position: relative;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action svg {\r\n cursor: pointer;\r\n}\r\n\r\n.ms-react-table td {\r\n padding: 5px 10px;\r\n border-top: 1px solid #e9e9e9;\r\n border-bottom: 1px solid #e9e9e9;\r\n width: auto;\r\n}\r\n\r\n.ms-react-table tbody>tr:hover {\r\n background-color: var(--item-bg-color);\r\n}\r\n\r\n.ms-table-header-cell-title {\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.ms-table-header-cell-title svg {\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n.ms-table-header-cell-title,\r\n.ms-react-table td {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.ms-table-column-resizer::after {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n width: 1.5px;\r\n height: 100%;\r\n cursor: e-resize;\r\n user-select: none;\r\n background-color: #a1a1a1;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.ms-table-column-resizer.disabled::after {\r\n cursor: auto;\r\n}\r\n\r\n.ms-react-table th:last-child .ms-table-header-cell {\r\n margin-right: 10px;\r\n}\r\n\r\n.table-footer {\r\n padding: 5px 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: var(--bg-color);\r\n}\r\n\r\n.table-footer label {\r\n font-size: 14px;\r\n}\r\n\r\n.pagination-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.pagination-buttons {\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n gap: 5px;\r\n}\r\n\r\n.pagination-buttons span {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n cursor: pointer;\r\n}\r\n\r\n.pagination-buttons span svg {\r\n width: 16px;\r\n color: #2e2e2e;\r\n}\r\n\r\n.pagination-info select {\r\n margin-left: 5px;\r\n padding: 2px 5px;\r\n border: 1px solid #2e2e2e;\r\n border-radius: 4px;\r\n background-color: white;\r\n}\r\n\r\n.pagination-info select option {\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.header-menu {\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.header-menu ul {\r\n background-color: #fff;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n list-style: none;\r\n padding: 0;\r\n border-radius: 2px;\r\n margin: 0;\r\n width: 200px;\r\n}\r\n\r\n.header-menu ul li {\r\n cursor: pointer;\r\n position: relative;\r\n font-size: 14px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: left;\r\n gap: 5px;\r\n border-bottom: 2px groove #f3f3f3;\r\n /* Adjust thickness as needed */\r\n}\r\n\r\n.header-menu ul li:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.header-menu ul li:hover {\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header-menu ul li:hover ul {\r\n transform: scaleX(1) !important;\r\n}\r\n\r\n.header-menu ul>li>span {\r\n line-height: .5;\r\n}\r\n\r\n.header-menu ul>li>span>svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n/* Child menu css */\r\n.header-menu ul li>ul {\r\n position: absolute;\r\n top: 0;\r\n right: -6.25rem;\r\n transform: scaleX(0);\r\n transition: all 0.25s ease-in-out;\r\n transform-origin: left;\r\n}\r\n\r\n.header-menu ul li>ul li span {\r\n width: 16px;\r\n}\r\n\r\n.header-menu .column-list {\r\n background-color: #fff;\r\n min-width: 160px;\r\n padding: 5px;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n}\r\n\r\n.header-menu .column-list .search {\r\n margin-bottom: 10px;\r\n}\r\n\r\ninput.search-input {\r\n width: 100%;\r\n display: inline-block;\r\n border: 1px solid rgb(77, 77, 77);\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n}\r\n\r\n.header-menu .column-list .list {\r\n border-top: 1px solid #ccc;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n}\r\n\r\n.ms-checkbox-input {\r\n height: 14px;\r\n width: 14px;\r\n}\r\n\r\n.header-menu .column-list .list .item {\r\n padding: 5px;\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n &:hover{\r\n background-color: var(--item-bg-color);\r\n }\r\n}\r\n\r\n.overlay-message {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n/* Pinned Style start*/\r\n.left-pinned {\r\n position: sticky !important;\r\n left: 0;\r\n}\r\n\r\n.right-pinned {\r\n position: sticky !important;\r\n right: 0;\r\n}\r\n\r\n/* Filter Modal Css */\r\n.filter-modal {\r\n position: absolute;\r\n right: -16rem;\r\n top: 5px;\r\n width: 15rem;\r\n height: 98%;\r\n background-color: #fff;\r\n z-index: 35;\r\n border-radius: 5px;\r\n box-shadow: 0px 0px 10px 1px #aaa;\r\n transition: all .5s ease-in-out;\r\n transform-origin: right;\r\n}\r\n\r\n.ms-overlay {\r\n height: 100%;\r\n width: 0;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background-color: var(--overlay-color);\r\n backdrop-filter: blur(1.5px);\r\n z-index: 2;\r\n transition: all .5s ease-in-out;\r\n transform-origin: left;\r\n}\r\n\r\n.filter-header {\r\n padding: 5px 10px;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.filter-header .close {\r\n float: right;\r\n}\r\n\r\n.filter-header .close svg {\r\n height: 20px;\r\n cursor: pointer;\r\n}\r\n\r\n.filter-footer {\r\n position: absolute;\r\n bottom: 0;\r\n width: -webkit-fill-available;\r\n padding: 5px 10px;\r\n border-top: 1px solid #ddd;\r\n text-align: right;\r\n}\r\n\r\n.ms-table-btn {\r\n padding: 5px 10px;\r\n background: #434343;\r\n color: rgb(255, 255, 255);\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n}\r\n\r\n.ms-table-btn.ms-table-btn-default {\r\n background-color: transparent;\r\n border: 1px solid #888;\r\n color: #434343;\r\n}\r\n\r\n.ms-table-btn:disabled {\r\n background-color: #ccc;\r\n color: #f2f2f2;\r\n border: 1px solid #888;\r\n cursor: not-allowed;\r\n}\r\n\r\n.filter-body {\r\n padding: 5px;\r\n overflow-y: hidden;\r\n\r\n &:hover {\r\n overflow-y: auto;\r\n }\r\n\r\n /* Optional: style scrollbar for WebKit browsers */\r\n &::-webkit-scrollbar {\r\n width: 4px;\r\n height: 4px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background-color: rgba(0,0,0,0.4);\r\n border-radius: 4px;\r\n }\r\n}\r\n\r\n.ms-form-item {\r\n margin-bottom: 5PX;\r\n\r\n label {\r\n font-size: 14px;\r\n color: #434343;\r\n font-weight: 600;\r\n }\r\n\r\n Select {\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n width: -webkit-fill-available;\r\n margin-bottom: 5px;\r\n color: #434343;\r\n }\r\n\r\n input {\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n width: -webkit-fill-available;\r\n color: #434343;\r\n }\r\n\r\n .ms-range-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 2px auto;\r\n }\r\n\r\n svg {\r\n width: 16px;\r\n }\r\n}\r\n\r\n.ms-radio-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n\r\n .ms-radio-item {\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n\r\n .ms-table-radio {\r\n margin: 0;\r\n margin-right: 5px;\r\n }\r\n }\r\n}\r\n\r\n.ms-table-clear-item {\r\n height: 14px;\r\n cursor: pointer;\r\n color: #ccc;\r\n}\r\n\r\n.ms-table-clear-item:hover {\r\n color: #434343;\r\n}\r\n\r\n.ms-loader-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 9;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n\r\n span {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n z-index: 1;\r\n }\r\n\r\n .ms-loader-overlay {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n background-color: #c5c5c56e;\r\n backdrop-filter: blur(1.5px);\r\n }\r\n\r\n .ms-loader {\r\n width: 35px;\r\n height: 35px;\r\n border: 5px solid #434343;\r\n border-bottom-color: #fff;\r\n border-radius: 50%;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n animation: rotation 1s linear infinite;\r\n }\r\n}\r\n\r\n@keyframes rotation {\r\n 0% {\r\n transform: rotate(0deg);\r\n\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.ms-checkbox-wrapper {\r\n --size: 14px;\r\n position: relative;\r\n display: inline-block;\r\n line-height:1;\r\n display: flex;\r\n align-items: center;\r\n .ms-promoted-input-checkbox {\r\n position: absolute;\r\n opacity: 0;\r\n cursor: pointer;\r\n margin: 0;\r\n }\r\n .ms-checkbox-box {\r\n display: inline-block;\r\n height: var(--size);\r\n width: var(--size);\r\n border: 2px solid var(--text-color);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n }\r\n svg {\r\n cursor: pointer;\r\n stroke: var(--text-color);\r\n stroke-width: 3px;\r\n height: 0;\r\n width: calc(var(--size) * 0.6);\r\n position: absolute;\r\n left: calc(var(--size) * 0.3);\r\n top: calc(var(--size) * 0.3);\r\n stroke-dasharray: 33;\r\n }\r\n\r\n /* When checked, show tick */\r\n .ms-promoted-input-checkbox:checked~svg {\r\n height: calc(var(--size) * 0.6);\r\n animation: ms-draw-checkbox ease-in-out 0.2s forwards;\r\n cursor: pointer;\r\n }\r\n .ms-promoted-input-checkbox:disabled{\r\n cursor: not-allowed;\r\n }\r\n .ms-promoted-input-checkbox:disabled + .ms-checkbox-box {\r\n background-color: #D2D2D2;\r\n cursor: not-allowed;\r\n }\r\n .ms-promoted-input-checkbox:disabled~svg {\r\n cursor: not-allowed;\r\n }\r\n}\r\n\r\n@keyframes ms-draw-checkbox {\r\n 0% {\r\n stroke-dashoffset: 33;\r\n }\r\n\r\n 100% {\r\n stroke-dashoffset: 0;\r\n }\r\n}"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/_assets/style.css"],"sourcesContent":[":root {\r\n --text-color : #434343;\r\n --bg-color: #F1F1F1;\r\n --overlay-color: #D2D2D260;\r\n --item-bg-color: #F2F2F2;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n\r\n.text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-left {\r\n text-align: left;\r\n}\r\n\r\n.text-right {\r\n text-align: right;\r\n}\r\n\r\n.cursor-pointer {\r\n cursor: pointer;\r\n}\r\n\r\n.cursor-disabled {\r\n cursor: not-allowed !important;\r\n opacity: 0.6;\r\n}\r\n\r\n.ms-table-wrapper {\r\n display: grid;\r\n margin: 15px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ms-table-container {\r\n width: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n max-height: 600px;\r\n}\r\n\r\n/* Show scrollbars only on hover */\r\n.ms-table-container:hover {\r\n overflow: auto;\r\n}\r\n\r\n/* Optional: style scrollbar for WebKit browsers */\r\n.ms-table-container::-webkit-scrollbar {\r\n width: 4px;\r\n height: 4px;\r\n}\r\n\r\n.ms-table-container::-webkit-scrollbar-thumb {\r\n background-color: rgba(0,0,0,0.4);\r\n border-radius: 4px;\r\n}\r\n\r\n\r\n.ms-auto-width .ms-react-table {\r\n table-layout: auto !important;\r\n}\r\n\r\n.ms-react-table {\r\n table-layout: fixed;\r\n width: 100%;\r\n}\r\n\r\n.ms-react-table>thead {\r\n position: sticky;\r\n top: 0;\r\n background-color: var(--bg-color);\r\n z-index: 2\r\n}\r\n\r\n.ms-react-table .ms-table-header-cell {\r\n display: flex;\r\n flex: 0 0 1;\r\n justify-content: space-between;\r\n align-items: center;\r\n user-select: none;\r\n}\r\n\r\n.ms-react-table th {\r\n padding: 10px;\r\n position: relative;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action svg {\r\n cursor: pointer;\r\n}\r\n\r\n.ms-react-table td {\r\n padding: 5px 10px;\r\n border-top: 1px solid #e9e9e9;\r\n border-bottom: 1px solid #e9e9e9;\r\n width: auto;\r\n}\r\n\r\n.ms-react-table tbody>tr:hover {\r\n background-color: var(--item-bg-color);\r\n}\r\n\r\n.ms-table-header-cell-title {\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.ms-table-header-cell-title svg {\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n.ms-table-header-cell-title,\r\n.ms-react-table td {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.ms-table-column-resizer::after {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n width: 1.5px;\r\n height: 100%;\r\n cursor: e-resize;\r\n user-select: none;\r\n background-color: #a1a1a1;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.ms-table-column-resizer.disabled::after {\r\n cursor: auto;\r\n}\r\n\r\n.ms-react-table th:last-child .ms-table-header-cell {\r\n margin-right: 10px;\r\n}\r\n\r\n.table-footer {\r\n padding: 5px 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: var(--bg-color);\r\n}\r\n\r\n.table-footer label {\r\n font-size: 14px;\r\n}\r\n\r\n.pagination-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.pagination-buttons {\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n gap: 5px;\r\n}\r\n\r\n.pagination-buttons span {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n cursor: pointer;\r\n}\r\n\r\n.pagination-buttons span svg {\r\n width: 16px;\r\n color: #2e2e2e;\r\n}\r\n\r\n.pagination-info select {\r\n margin-left: 5px;\r\n padding: 2px 5px;\r\n border: 1px solid #2e2e2e;\r\n border-radius: 4px;\r\n background-color: white;\r\n}\r\n\r\n.pagination-info select option {\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.header-menu {\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.header-menu ul {\r\n background-color: #fff;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n list-style: none;\r\n padding: 0;\r\n border-radius: 2px;\r\n margin: 0;\r\n width: 200px;\r\n}\r\n\r\n.header-menu ul li {\r\n cursor: pointer;\r\n position: relative;\r\n font-size: 14px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: left;\r\n gap: 5px;\r\n border-bottom: 2px groove #f3f3f3;\r\n /* Adjust thickness as needed */\r\n}\r\n\r\n.header-menu ul li:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.header-menu ul li:hover {\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header-menu ul li:hover ul {\r\n transform: scaleX(1) !important;\r\n}\r\n\r\n.header-menu ul>li>span {\r\n line-height: .5;\r\n}\r\n\r\n.header-menu ul>li>span>svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n/* Child menu css */\r\n.header-menu ul li>ul {\r\n position: absolute;\r\n top: 0;\r\n right: -6.25rem;\r\n transform: scaleX(0);\r\n transition: all 0.25s ease-in-out;\r\n transform-origin: left;\r\n}\r\n\r\n.header-menu ul li>ul li span {\r\n width: 16px;\r\n}\r\n\r\n.header-menu .column-list {\r\n background-color: #fff;\r\n min-width: 160px;\r\n padding: 5px;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n}\r\n\r\n.header-menu .column-list .search {\r\n margin-bottom: 10px;\r\n}\r\n\r\ninput.search-input {\r\n width: 100%;\r\n display: inline-block;\r\n border: 1px solid rgb(77, 77, 77);\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n}\r\n\r\n.header-menu .column-list .list {\r\n border-top: 1px solid #ccc;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n}\r\n\r\n.ms-checkbox-input {\r\n height: 14px;\r\n width: 14px;\r\n}\r\n\r\n.header-menu .column-list .list .item {\r\n padding: 5px;\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n &:hover{\r\n background-color: var(--item-bg-color);\r\n }\r\n}\r\n\r\n.overlay-message {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n/* Pinned Style start*/\r\n.left-pinned {\r\n position: sticky !important;\r\n left: 0;\r\n}\r\n\r\n.right-pinned {\r\n position: sticky !important;\r\n right: 0;\r\n}\r\n\r\n/* Filter Modal Css */\r\n.filter-modal {\r\n position: absolute;\r\n right: -16rem;\r\n top: 5px;\r\n width: 15rem;\r\n height: 98%;\r\n background-color: #fff;\r\n z-index: 35;\r\n border-radius: 5px;\r\n box-shadow: 0px 0px 10px 1px #aaa;\r\n transition: all .5s ease-in-out;\r\n transform-origin: right;\r\n}\r\n\r\n.ms-overlay {\r\n height: 100%;\r\n width: 0;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background-color: var(--overlay-color);\r\n backdrop-filter: blur(1.5px);\r\n z-index: 2;\r\n transition: all .5s ease-in-out;\r\n transform-origin: left;\r\n}\r\n\r\n.filter-header {\r\n padding: 5px 10px;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.filter-header .close {\r\n float: right;\r\n}\r\n\r\n.filter-header .close svg {\r\n height: 20px;\r\n cursor: pointer;\r\n}\r\n\r\n.filter-footer {\r\n position: absolute;\r\n bottom: 0;\r\n width: -webkit-fill-available;\r\n padding: 5px 10px;\r\n border-top: 1px solid #ddd;\r\n text-align: right;\r\n}\r\n\r\n.ms-table-btn {\r\n padding: 5px 10px;\r\n background: #434343;\r\n color: rgb(255, 255, 255);\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n}\r\n\r\n.ms-table-btn.ms-table-btn-default {\r\n background-color: transparent;\r\n border: 1px solid #888;\r\n color: #434343;\r\n}\r\n\r\n.ms-table-btn:disabled {\r\n background-color: #ccc;\r\n color: #f2f2f2;\r\n border: 1px solid #888;\r\n cursor: not-allowed;\r\n}\r\n\r\n.filter-body {\r\n padding: 5px;\r\n overflow-y: hidden;\r\n\r\n &:hover {\r\n overflow-y: auto;\r\n }\r\n\r\n /* Optional: style scrollbar for WebKit browsers */\r\n &::-webkit-scrollbar {\r\n width: 4px;\r\n height: 4px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background-color: rgba(0,0,0,0.4);\r\n border-radius: 4px;\r\n }\r\n}\r\n\r\n.ms-form-item {\r\n margin-bottom: 5PX;\r\n\r\n label {\r\n font-size: 14px;\r\n color: #434343;\r\n font-weight: 600;\r\n }\r\n\r\n Select {\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n width: -webkit-fill-available;\r\n margin-bottom: 5px;\r\n color: #434343;\r\n }\r\n\r\n input {\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n width: -webkit-fill-available;\r\n color: #434343;\r\n }\r\n\r\n .ms-range-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 2px auto;\r\n }\r\n\r\n svg {\r\n width: 16px;\r\n }\r\n}\r\n\r\n.ms-radio-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n\r\n .ms-radio-item {\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n\r\n .ms-table-radio {\r\n margin: 0;\r\n margin-right: 5px;\r\n }\r\n }\r\n}\r\n\r\n.ms-table-clear-item {\r\n height: 14px;\r\n cursor: pointer;\r\n color: #ccc;\r\n}\r\n\r\n.ms-table-clear-item:hover {\r\n color: #434343;\r\n}\r\n\r\n.ms-loader-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 9;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n\r\n span {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n z-index: 1;\r\n }\r\n\r\n .ms-loader-overlay {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n background-color: #c5c5c56e;\r\n backdrop-filter: blur(1.5px);\r\n }\r\n\r\n .ms-loader {\r\n width: 35px;\r\n height: 35px;\r\n border: 5px solid #434343;\r\n border-bottom-color: #fff;\r\n border-radius: 50%;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n animation: rotation 1s linear infinite;\r\n }\r\n}\r\n\r\n@keyframes rotation {\r\n 0% {\r\n transform: rotate(0deg);\r\n\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.ms-checkbox-wrapper {\r\n --size: 14px;\r\n position: relative;\r\n display: inline-block;\r\n line-height:1;\r\n display: flex;\r\n align-items: center;\r\n .ms-promoted-input-checkbox {\r\n position: absolute;\r\n opacity: 0;\r\n cursor: pointer;\r\n margin: 0;\r\n }\r\n .ms-checkbox-box {\r\n display: inline-block;\r\n height: var(--size);\r\n width: var(--size);\r\n border: 2px solid var(--text-color);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n }\r\n svg {\r\n cursor: pointer;\r\n stroke: var(--text-color);\r\n stroke-width: 3px;\r\n height: 0;\r\n width: calc(var(--size) * 0.6);\r\n position: absolute;\r\n left: calc(var(--size) * 0.3);\r\n top: calc(var(--size) * 0.3);\r\n stroke-dasharray: 33;\r\n }\r\n\r\n /* When checked, show tick */\r\n .ms-promoted-input-checkbox:checked~svg {\r\n height: calc(var(--size) * 0.6);\r\n animation: ms-draw-checkbox ease-in-out 0.2s forwards;\r\n cursor: pointer;\r\n }\r\n .ms-promoted-input-checkbox:disabled{\r\n cursor: not-allowed;\r\n }\r\n .ms-promoted-input-checkbox:disabled + .ms-checkbox-box {\r\n background-color: #D2D2D2;\r\n cursor: not-allowed;\r\n }\r\n .ms-promoted-input-checkbox:disabled~svg {\r\n cursor: not-allowed;\r\n }\r\n}\r\n\r\n@keyframes ms-draw-checkbox {\r\n 0% {\r\n stroke-dashoffset: 33;\r\n }\r\n\r\n 100% {\r\n stroke-dashoffset: 0;\r\n }\r\n}"],"mappings":"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","names":[]}
package/dist/index.d.mts CHANGED
@@ -6,6 +6,8 @@ interface GridFunctions {
6
6
  setRowData: (data: any[], count: number) => void;
7
7
  exportToCSV: (fileName: string) => void;
8
8
  exportToExcel: (fileName: string) => void;
9
+ getSelectedRows: () => void;
10
+ reloadServerSideData: () => void;
9
11
  }
10
12
  type dataType = "string" | "number" | "date" | "boolean" | "object" | undefined;
11
13
  type Operation = "include" | "not include" | "=" | "!=" | ">" | "<" | "<>";
@@ -63,6 +65,7 @@ interface MsTablePropsTypes {
63
65
  ref?: React.RefObject<GridFunctions>;
64
66
  customComponentForNoRecords?: React.ReactNode;
65
67
  customComponentForFooter?: React.ReactNode;
68
+ CustomComponentForLoading?: React.ReactNode;
66
69
  hideDefaultFilterButton?: true | false;
67
70
  rowSelectConfig?: rowSelectionConfig;
68
71
  onPageChange?: (currentPage: number, pageSize: number) => void;
@@ -77,4 +80,4 @@ interface MsTablePropsTypes {
77
80
 
78
81
  declare const MsReactTable: React.FC<MsTablePropsTypes>;
79
82
 
80
- export { type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type rowSelectionConfig };
83
+ export { type GridFunctions, type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type filterValuesType, type rowSelectionConfig, type sortDirection };
package/dist/index.d.ts CHANGED
@@ -6,6 +6,8 @@ interface GridFunctions {
6
6
  setRowData: (data: any[], count: number) => void;
7
7
  exportToCSV: (fileName: string) => void;
8
8
  exportToExcel: (fileName: string) => void;
9
+ getSelectedRows: () => void;
10
+ reloadServerSideData: () => void;
9
11
  }
10
12
  type dataType = "string" | "number" | "date" | "boolean" | "object" | undefined;
11
13
  type Operation = "include" | "not include" | "=" | "!=" | ">" | "<" | "<>";
@@ -63,6 +65,7 @@ interface MsTablePropsTypes {
63
65
  ref?: React.RefObject<GridFunctions>;
64
66
  customComponentForNoRecords?: React.ReactNode;
65
67
  customComponentForFooter?: React.ReactNode;
68
+ CustomComponentForLoading?: React.ReactNode;
66
69
  hideDefaultFilterButton?: true | false;
67
70
  rowSelectConfig?: rowSelectionConfig;
68
71
  onPageChange?: (currentPage: number, pageSize: number) => void;
@@ -77,4 +80,4 @@ interface MsTablePropsTypes {
77
80
 
78
81
  declare const MsReactTable: React.FC<MsTablePropsTypes>;
79
82
 
80
- export { type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type rowSelectionConfig };
83
+ export { type GridFunctions, type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type filterValuesType, type rowSelectionConfig, type sortDirection };
package/dist/index.js CHANGED
@@ -91,11 +91,11 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
91
91
  var CheckBox = (props) => {
92
92
  const { id, name, checked, onChange, disabled } = props;
93
93
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "ms-checkbox-wrapper", children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", className: "ms-promoted-input-checkbox", disabled, checked, onChange: disabled ? () => {
94
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { id: `ms_checkbox_${id}`, type: "checkbox", className: "ms-promoted-input-checkbox", disabled, checked, onChange: disabled ? () => {
95
95
  } : onChange }),
96
96
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-checkbox-box" }),
97
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("use", { xlinkHref: `#${id}` }) }),
98
- /* @__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" }) }) })
97
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("use", { xlinkHref: `#svg_ms_checkbox_${id}` }) }),
98
+ /* @__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: `svg_ms_checkbox_${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" }) }) })
99
99
  ] }) });
100
100
  };
101
101
  var CheckBox_default = (0, import_react2.memo)(CheckBox);
@@ -110,12 +110,12 @@ var HeaderActionMenu = (props) => {
110
110
  (0, import_react3.useEffect)(() => {
111
111
  setColumnList(state.colConfigs);
112
112
  onSearchHeader(searchkey);
113
- }, [state.colConfigs]);
114
- const onCheckboxChange = (0, import_react3.useCallback)((dataIndex, e) => {
115
- let newConfig = state.colConfigs.map((item) => {
113
+ }, []);
114
+ const onCheckboxChange = (dataIndex, e) => {
115
+ let newConfig = columnList.map((item) => {
116
116
  return {
117
117
  ...item,
118
- isHidden: item.dataIndex == dataIndex ? !e.target.checked : item.isHidden || false
118
+ isHidden: item.dataIndex == dataIndex ? e.target.checked ? false : true : item.isHidden
119
119
  };
120
120
  });
121
121
  updateState({
@@ -123,7 +123,7 @@ var HeaderActionMenu = (props) => {
123
123
  colConfigs: newConfig
124
124
  });
125
125
  setColumnList(newConfig);
126
- }, []);
126
+ };
127
127
  const onSearchHeader = (value) => {
128
128
  let newlist = [];
129
129
  if (value) {
@@ -398,7 +398,9 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
398
398
  }
399
399
  setState((prevState) => ({
400
400
  ...prevState,
401
- currentPage: goToPageNo
401
+ currentPage: goToPageNo,
402
+ selectedIndex: [],
403
+ selectedRows: []
402
404
  }));
403
405
  if (!isClientSideRendering) {
404
406
  setRefreshPage(true);
@@ -427,17 +429,6 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
427
429
  rowData: list
428
430
  }));
429
431
  };
430
- const toggleActionMenu = (dataIndex, showMenu, ref2) => {
431
- const position = ref2.current.getBoundingClientRect();
432
- let left = position.x + position.width;
433
- setMenuPosition({
434
- top: position.height,
435
- right: 0,
436
- left: left > 200 ? left - 200 : position.x
437
- });
438
- setActionMenu(true);
439
- setHeaderCell(dataIndex);
440
- };
441
432
  const onSortColumn = (dataIndex, sortBy) => {
442
433
  let columns2 = state.colConfigs.map((item) => {
443
434
  return {
@@ -489,21 +480,11 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
489
480
  }
490
481
  };
491
482
  const onColumnReset = () => {
492
- setState({
483
+ setState((prevState) => ({
484
+ ...prevState,
493
485
  prevColConfig: columns,
494
- colConfigs: columns,
495
- rowData: data,
496
- allRowData: data,
497
- currentPage: 1,
498
- pageSize: pageSizeOptions.length > 0 ? pageSizeOptions[0] : 50,
499
- totalRecords: isClientSideRendering ? data.length : props?.totalRecords || 0,
500
- selectedRows: [],
501
- selectedIndex: [],
502
- pageSizeOptions: pageSizeOptions.length > 0 ? pageSizeOptions : [20, 50, 100],
503
- isAutoSizeAllColumns: false,
504
- hideDefaultFilterButton,
505
- filters: {}
506
- });
486
+ colConfigs: columns
487
+ }));
507
488
  setActionMenu(false);
508
489
  };
509
490
  const onFilterApply = (filters) => {
@@ -531,7 +512,6 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
531
512
  onAutoColumnResize,
532
513
  onPageChange,
533
514
  onPageSizeChange,
534
- toggleActionMenu,
535
515
  onColumnPin,
536
516
  onSortColumn,
537
517
  updateState,
@@ -540,7 +520,7 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
540
520
  onFilterReset,
541
521
  toggleModalFilter
542
522
  }),
543
- [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, toggleActionMenu, onColumnPin, onSortColumn, updateState, onColumnReset]
523
+ [onRowSelectionChange, onColumnResize, onAutoColumnResize, onPageChange, onPageSizeChange, onColumnPin, onSortColumn, updateState, onColumnReset]
544
524
  );
545
525
  const contextValue = { state, api, ssrList, totalSSRCount };
546
526
  (0, import_react4.useEffect)(() => {
@@ -623,9 +603,29 @@ var TableProvider = (0, import_react4.forwardRef)((props, ref) => {
623
603
  },
624
604
  getSelectedRows() {
625
605
  return state.selectedRows;
606
+ },
607
+ reloadServerSideData() {
608
+ setRefreshPage(true);
626
609
  }
627
610
  }), [refreshPage]);
628
- 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: [
611
+ const handleClick = (e) => {
612
+ const target = e.target;
613
+ const spanElement = target.closest("span.ms-table-header-action");
614
+ if (!spanElement) return;
615
+ const rect = e.currentTarget.getBoundingClientRect();
616
+ const dataIndex = spanElement.id;
617
+ const parentWidth = rect.width;
618
+ const x = e.clientX - rect.left;
619
+ const popupWidth = actionMenuRef.current ? actionMenuRef.current.offsetWidth : 200;
620
+ setMenuPosition({
621
+ top: 42,
622
+ right: 0,
623
+ left: parentWidth / 2 > x ? x - 20 : x - popupWidth
624
+ });
625
+ setActionMenu(true);
626
+ setHeaderCell(dataIndex);
627
+ };
628
+ 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" : ""}`, onClick: handleClick, children: [
629
629
  children,
630
630
  state.rowData.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Overlay_default, { customComponentForNoRecords }),
631
631
  showActionMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderActionMenu_default, { ref: actionMenuRef, dataIndex: selectedHeaderCell, style: { top: menuPosition.top, left: menuPosition.left } })
@@ -689,7 +689,7 @@ var HeaderCell = (props) => {
689
689
  rest.filters[dataIndex] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("sup", { children: "*" }) : "",
690
690
  props.sortKey == "asc" ? angleUpIcon : props.sortKey == "desc" ? angleDownIcon : null
691
691
  ] }),
692
- !hideActionMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ms-table-header-action", title: "View Menu", onClick: () => api.toggleActionMenu(dataIndex, true, thRef), children: verticleThreeDotsIcon })
692
+ !hideActionMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ms-table-header-action", title: "View Menu", id: dataIndex, children: verticleThreeDotsIcon })
693
693
  ] }),
694
694
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `ms-table-column-resizer ${resizable ? "" : "disabled"}`, onMouseDown: resizable ? onMouseDown : void 0 })
695
695
  ] })
@@ -837,15 +837,15 @@ var MsTableFooter = (props) => {
837
837
  ] }) }),
838
838
  /* @__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}` }) }),
839
839
  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pagination-buttons", children: [
840
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => api.onPageChange("first"), children: angleLeftIcon }),
841
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => api.onPageChange("prev"), children: prevIcon }),
840
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Go to First Page", onClick: () => currentPage == 1 ? {} : api.onPageChange("first"), children: angleLeftIcon }),
841
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == 1 ? "cursor-disabled" : ""}`, title: "Previous Page", onClick: () => currentPage == 1 ? {} : api.onPageChange("prev"), children: prevIcon }),
842
842
  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "current-page", children: [
843
843
  currentPage,
844
844
  " of ",
845
845
  Math.ceil(totalRecords / pageSize)
846
846
  ] }),
847
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => api.onPageChange("next"), children: nextIcon }),
848
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => api.onPageChange("last"), children: angleRightIcon })
847
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Next Page", onClick: () => currentPage == lastPageNo ? {} : api.onPageChange("next"), children: nextIcon }),
848
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${currentPage == lastPageNo ? "cursor-disabled" : ""}`, title: "Go to Last Page", onClick: () => currentPage == lastPageNo ? {} : api.onPageChange("last"), children: angleRightIcon })
849
849
  ] })
850
850
  ] })
851
851
  ] });
@@ -1202,11 +1202,13 @@ var FilterModal_default = (0, import_react11.memo)(FilterModal);
1202
1202
 
1203
1203
  // src/components/Loader.tsx
1204
1204
  var import_jsx_runtime19 = require("react/jsx-runtime");
1205
- var Loader = () => {
1205
+ var Loader = ({ CustomComponentForLoading }) => {
1206
1206
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ms-loader-wrapper", children: [
1207
1207
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ms-loader-overlay" }),
1208
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ms-loader" }),
1209
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Loading..." })
1208
+ CustomComponentForLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { zIndex: 1 }, children: CustomComponentForLoading }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
1209
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ms-loader" }),
1210
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Loading..." })
1211
+ ] })
1210
1212
  ] });
1211
1213
  };
1212
1214
  var Loader_default = Loader;
@@ -1214,7 +1216,7 @@ var Loader_default = Loader;
1214
1216
  // src/MsReactTable.tsx
1215
1217
  var import_jsx_runtime20 = require("react/jsx-runtime");
1216
1218
  var MsReactTable = (props) => {
1217
- const { showPagination = true, ref, isLoading } = props;
1219
+ const { showPagination = true, ref, isLoading, CustomComponentForLoading = null } = props;
1218
1220
  const containerRef = import_react12.default.useRef(null);
1219
1221
  const tbodyRef = import_react12.default.useRef(null);
1220
1222
  const theadRef = import_react12.default.useRef(null);
@@ -1228,7 +1230,7 @@ var MsReactTable = (props) => {
1228
1230
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
1229
1231
  showModalFilter && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FilterModal_default, { isVisible: showModalFilter, toggleFilterModal: toggleModalFilter, containerRef }),
1230
1232
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ms-overlay", style: showModalFilter ? { width: "100%" } : {} }),
1231
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader_default, {})
1233
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader_default, { CustomComponentForLoading })
1232
1234
  ] })
1233
1235
  ] });
1234
1236
  };