ms-react-table 1.0.0 → 2.0.1

package/dist/index.css

@@ -1,4 +1,10 @@
 /* src/_assets/style.css */
+:root {
+  --text-color: #434343;
+  --bg-color: #F1F1F1;
+  --overlay-color: #D2D2D260;
+  --item-bg-color: #F2F2F2;
+}
 .text-center {
   text-align: center;
 }
@@ -15,30 +21,42 @@
   cursor: not-allowed !important;
   opacity: 0.6;
 }
-.table-wrapper {
+.ms-table-wrapper {
   display: grid;
   margin: 15px;
   font-family: "Nunito Sans";
   position: relative;
+  overflow: hidden;
 }
-.table-container {
+.ms-table-container {
   width: 100%;
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   max-height: 600px;
 }
+.ms-table-container:hover {
+  overflow: auto;
+}
+.ms-table-container::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.ms-table-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+}
 .ms-auto-width .ms-react-table {
   table-layout: auto !important;
 }
 .ms-react-table {
   table-layout: fixed;
   width: 100%;
-  height: 100%;
 }
 .ms-react-table > thead {
   position: sticky;
   top: 0;
-  background-color: #ddd;
+  background-color: var(--bg-color);
+  z-index: 2;
 }
 .ms-react-table .ms-table-header-cell {
   display: flex;
@@ -65,7 +83,7 @@
   width: auto;
 }
 .ms-react-table tbody > tr:hover {
-  background-color: #f4f4f4;
+  background-color: var(--item-bg-color);
 }
 .ms-table-header-cell-title {
   cursor: pointer;
@@ -89,18 +107,14 @@
   right: 0;
   top: 50%;
   width: 1.5px;
-  height: 1.5rem;
-  cursor: col-resize;
+  height: 100%;
+  cursor: e-resize;
   user-select: none;
-  background-color: #2e2e2e;
+  background-color: #a1a1a1;
   transform: translateY(-50%);
 }
-.ms-react-table th:last-child .ms-table-column-resizer {
-  position: absolute;
-  width: 10px;
-  right: 5px !important;
-  top: 0;
-  height: 100%;
+.ms-table-column-resizer.disabled::after {
+  cursor: auto;
 }
 .ms-react-table th:last-child .ms-table-header-cell {
   margin-right: 10px;
@@ -110,7 +124,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #ddd;
+  background-color: var(--bg-color);
 }
 .table-footer label {
   font-size: 14px;
@@ -200,7 +214,7 @@
   width: 16px;
 }
 .header-menu .column-list {
-  background-color: #f2f2f2;
+  background-color: #fff;
   min-width: 160px;
   padding: 5px;
   box-shadow: 0px 0px 10px 2px #aaa;
@@ -216,8 +230,6 @@ input.search-input {
   box-sizing: border-box;
   padding: 5px;
 }
-.search-input:active {
-}
 .header-menu .column-list .list {
   border-top: 1px solid #ccc;
   max-height: 300px;
@@ -232,15 +244,15 @@ input.search-input {
   display: flex;
   gap: 10px;
   align-items: center;
+  &:hover {
+    background-color: var(--item-bg-color);
+  }
 }
 .overlay-message {
   position: absolute;
-  width: 100%;
-  left: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .left-pinned {
   position: sticky !important;
@@ -250,4 +262,238 @@ input.search-input {
   position: sticky !important;
   right: 0;
 }
+.filter-modal {
+  position: absolute;
+  right: -16rem;
+  top: 5px;
+  width: 15rem;
+  height: 98%;
+  background-color: #fff;
+  z-index: 35;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px 1px #aaa;
+  transition: all .5s ease-in-out;
+  transform-origin: right;
+}
+.ms-overlay {
+  height: 100%;
+  width: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: var(--overlay-color);
+  backdrop-filter: blur(1.5px);
+  z-index: 2;
+  transition: all .5s ease-in-out;
+  transform-origin: left;
+}
+.filter-header {
+  padding: 5px 10px;
+  border-bottom: 1px solid #ddd;
+}
+.filter-header .close {
+  float: right;
+}
+.filter-header .close svg {
+  height: 20px;
+  cursor: pointer;
+}
+.filter-footer {
+  position: absolute;
+  bottom: 0;
+  width: -webkit-fill-available;
+  padding: 5px 10px;
+  border-top: 1px solid #ddd;
+  text-align: right;
+}
+.ms-table-btn {
+  padding: 5px 10px;
+  background: #434343;
+  color: rgb(255, 255, 255);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ms-table-btn.ms-table-btn-default {
+  background-color: transparent;
+  border: 1px solid #888;
+  color: #434343;
+}
+.ms-table-btn:disabled {
+  background-color: #ccc;
+  color: #f2f2f2;
+  border: 1px solid #888;
+  cursor: not-allowed;
+}
+.filter-body {
+  padding: 5px;
+  overflow-y: hidden;
+  &:hover {
+    overflow-y: auto;
+  }
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+  }
+}
+.ms-form-item {
+  margin-bottom: 5PX;
+  label {
+    font-size: 14px;
+    color: #434343;
+    font-weight: 600;
+  }
+  Select {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 5px;
+    width: -webkit-fill-available;
+    margin-bottom: 5px;
+    color: #434343;
+  }
+  input {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 5px;
+    width: -webkit-fill-available;
+    color: #434343;
+  }
+  .ms-range-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px auto;
+  }
+  svg {
+    width: 16px;
+  }
+}
+.ms-radio-group {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  .ms-radio-item {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    .ms-table-radio {
+      margin: 0;
+      margin-right: 5px;
+    }
+  }
+}
+.ms-table-clear-item {
+  height: 14px;
+  cursor: pointer;
+  color: #ccc;
+}
+.ms-table-clear-item:hover {
+  color: #434343;
+}
+.ms-loader-wrapper {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  span {
+    font-size: 1rem;
+    font-weight: 500;
+    z-index: 1;
+  }
+  .ms-loader-overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background-color: #c5c5c56e;
+    backdrop-filter: blur(1.5px);
+  }
+  .ms-loader {
+    width: 35px;
+    height: 35px;
+    border: 5px solid #434343;
+    border-bottom-color: #fff;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.ms-checkbox-wrapper {
+  --size: 14px;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  .ms-promoted-input-checkbox {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+  }
+  .ms-checkbox-box {
+    display: inline-block;
+    height: var(--size);
+    width: var(--size);
+    border: 2px solid var(--text-color);
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  svg {
+    cursor: pointer;
+    stroke: var(--text-color);
+    stroke-width: 3px;
+    height: 0;
+    width: calc(var(--size) * 0.6);
+    position: absolute;
+    left: calc(var(--size) * 0.3);
+    top: calc(var(--size) * 0.3);
+    stroke-dasharray: 33;
+  }
+  .ms-promoted-input-checkbox:checked ~ svg {
+    height: calc(var(--size) * 0.6);
+    animation: ms-draw-checkbox ease-in-out 0.2s forwards;
+    cursor: pointer;
+  }
+  .ms-promoted-input-checkbox:disabled {
+    cursor: not-allowed;
+  }
+  .ms-promoted-input-checkbox:disabled + .ms-checkbox-box {
+    background-color: #D2D2D2;
+    cursor: not-allowed;
+  }
+  .ms-promoted-input-checkbox:disabled ~ svg {
+    cursor: not-allowed;
+  }
+}
+@keyframes ms-draw-checkbox {
+  0% {
+    stroke-dashoffset: 33;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/_assets/style.css"],"sourcesContent":[".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.table-wrapper {\r\n    display: grid;\r\n    margin: 15px;\r\n    font-family: 'Nunito Sans';\r\n    position: relative;\r\n}\r\n\r\n.table-container {\r\n    width: 100%;\r\n    position: relative;\r\n    overflow: auto;\r\n    max-height: 600px;\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    height: 100%;\r\n}\r\n\r\n.ms-react-table>thead {\r\n    position: sticky;\r\n    top: 0;\r\n    background-color: #ddd;\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.ms-react-table tbody > tr:hover{\r\n    background-color: #f4f4f4;\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: 1.5rem;\r\n    cursor: col-resize;\r\n    user-select: none;\r\n    background-color: #2e2e2e;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.ms-react-table th:last-child .ms-table-column-resizer {\r\n    position: absolute;\r\n    width: 10px;\r\n    right: 5px !important;\r\n    top: 0;\r\n    height: 100%;\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: #ddd;\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: #f2f2f2;\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.search-input:active {\r\n    /* border: 1px solid ; */\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.ms-checkbox-input{\r\n    height: 14px;\r\n    width: 14px;\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}\r\n\r\n.overlay-message {\r\n    position: absolute;\r\n    width: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\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"],"mappings":"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","names":[]}
+{"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":[]}

package/dist/index.d.mts

@@ -1,45 +1,80 @@
 import React, { JSX } from 'react';
 
+type sortDirection = "asc" | "desc" | "";
+interface GridFunctions {
+    showFilterModal: (visible: boolean) => void;
+    setRowData: (data: any[], count: number) => void;
+    exportToCSV: (fileName: string) => void;
+    exportToExcel: (fileName: string) => void;
+}
+type dataType = "string" | "number" | "date" | "boolean" | "object" | undefined;
+type Operation = "include" | "not include" | "=" | "!=" | ">" | "<" | "<>";
+interface FilterRule {
+    type: dataType;
+    operation: Operation;
+    value: any;
+}
+interface filterValuesType {
+    [dataIndex: string]: FilterRule;
+}
+
+type DisplayAs = {
+    true: string;
+    false: string;
+};
 interface MsTableHeaderCellTypes {
     title: string;
     dataIndex: string;
     isHidden?: boolean;
     width?: number;
-    type?: 'string' | 'number' | 'date' | 'custom';
+    type?: 'string' | 'number' | 'date' | 'boolean' | 'object';
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
     sortKey?: 'asc' | 'desc' | '';
     resizable?: boolean;
     pinned?: 'left' | 'right' | "";
-    pinIndex?: number | null;
+    displayAs?: DisplayAs;
     headerCellClassName?: string;
     dataCellClassName?: string;
-    cellRenderer?: (data: any) => JSX.Element;
+    cellRenderer?: (rowData: any, dataIndex: string) => JSX.Element;
+    isFilterEnabled?: boolean;
     hideActionMenu?: boolean;
 }
+interface rowSelectionConfig {
+    showHeaderCheckbox: boolean;
+    headerCheckBoxTitle: string;
+    selectionMode?: 'single' | 'multiple';
+    isResizable?: true | false;
+    isDisabled?: (data: any) => boolean;
+    isChecked?: (data: any) => boolean;
+}
 interface MsTablePropsTypes {
     columns: MsTableHeaderCellTypes[];
-    data: any[];
+    data?: any[];
+    isLoading?: true | false;
     height?: string;
     isClientSideRendering?: boolean;
     showPagination?: boolean;
     pageSizeOptions?: number[];
     defaultPageSize?: number;
-    totalRecords?: number;
     className?: string;
     headerClassName?: string;
-    showCheckBoxSelector?: boolean;
-    selectAllCheckbox?: boolean;
-    selectionMode?: 'single' | 'multiple';
     style?: React.CSSProperties;
-    onSelectionChange?: (selectedRows: any[]) => void;
+    ref?: React.RefObject<GridFunctions>;
+    customComponentForNoRecords?: React.ReactNode;
+    customComponentForFooter?: React.ReactNode;
+    hideDefaultFilterButton?: true | false;
+    rowSelectConfig?: rowSelectionConfig;
     onPageChange?: (currentPage: number, pageSize: number) => void;
     onSortChange?: (dataIndex: string, sortKey: 'asc' | 'desc' | null) => void;
     onFilterChange?: (dataIndex: string, filterValue: any) => void;
-    onRowClick?: (rowData: any) => void;
-    ref?: React.Ref<HTMLTableElement>;
+    onRowSelect?: (rowData: any) => void;
+    setRowData?: (pageNo: number, pageSize: number, filters: filterValuesType, sortBy: {
+        key: string;
+        sortBy: sortDirection;
+    }) => void;
 }
 
 declare const MsReactTable: React.FC<MsTablePropsTypes>;
 
-export { MsReactTable, type MsTableHeaderCellTypes, type MsTablePropsTypes };
+export { type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type rowSelectionConfig };

package/dist/index.d.ts

@@ -1,45 +1,80 @@
 import React, { JSX } from 'react';
 
+type sortDirection = "asc" | "desc" | "";
+interface GridFunctions {
+    showFilterModal: (visible: boolean) => void;
+    setRowData: (data: any[], count: number) => void;
+    exportToCSV: (fileName: string) => void;
+    exportToExcel: (fileName: string) => void;
+}
+type dataType = "string" | "number" | "date" | "boolean" | "object" | undefined;
+type Operation = "include" | "not include" | "=" | "!=" | ">" | "<" | "<>";
+interface FilterRule {
+    type: dataType;
+    operation: Operation;
+    value: any;
+}
+interface filterValuesType {
+    [dataIndex: string]: FilterRule;
+}
+
+type DisplayAs = {
+    true: string;
+    false: string;
+};
 interface MsTableHeaderCellTypes {
     title: string;
     dataIndex: string;
     isHidden?: boolean;
     width?: number;
-    type?: 'string' | 'number' | 'date' | 'custom';
+    type?: 'string' | 'number' | 'date' | 'boolean' | 'object';
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
     sortKey?: 'asc' | 'desc' | '';
     resizable?: boolean;
     pinned?: 'left' | 'right' | "";
-    pinIndex?: number | null;
+    displayAs?: DisplayAs;
     headerCellClassName?: string;
     dataCellClassName?: string;
-    cellRenderer?: (data: any) => JSX.Element;
+    cellRenderer?: (rowData: any, dataIndex: string) => JSX.Element;
+    isFilterEnabled?: boolean;
     hideActionMenu?: boolean;
 }
+interface rowSelectionConfig {
+    showHeaderCheckbox: boolean;
+    headerCheckBoxTitle: string;
+    selectionMode?: 'single' | 'multiple';
+    isResizable?: true | false;
+    isDisabled?: (data: any) => boolean;
+    isChecked?: (data: any) => boolean;
+}
 interface MsTablePropsTypes {
     columns: MsTableHeaderCellTypes[];
-    data: any[];
+    data?: any[];
+    isLoading?: true | false;
     height?: string;
     isClientSideRendering?: boolean;
     showPagination?: boolean;
     pageSizeOptions?: number[];
     defaultPageSize?: number;
-    totalRecords?: number;
     className?: string;
     headerClassName?: string;
-    showCheckBoxSelector?: boolean;
-    selectAllCheckbox?: boolean;
-    selectionMode?: 'single' | 'multiple';
     style?: React.CSSProperties;
-    onSelectionChange?: (selectedRows: any[]) => void;
+    ref?: React.RefObject<GridFunctions>;
+    customComponentForNoRecords?: React.ReactNode;
+    customComponentForFooter?: React.ReactNode;
+    hideDefaultFilterButton?: true | false;
+    rowSelectConfig?: rowSelectionConfig;
     onPageChange?: (currentPage: number, pageSize: number) => void;
     onSortChange?: (dataIndex: string, sortKey: 'asc' | 'desc' | null) => void;
     onFilterChange?: (dataIndex: string, filterValue: any) => void;
-    onRowClick?: (rowData: any) => void;
-    ref?: React.Ref<HTMLTableElement>;
+    onRowSelect?: (rowData: any) => void;
+    setRowData?: (pageNo: number, pageSize: number, filters: filterValuesType, sortBy: {
+        key: string;
+        sortBy: sortDirection;
+    }) => void;
 }
 
 declare const MsReactTable: React.FC<MsTablePropsTypes>;
 
-export { MsReactTable, type MsTableHeaderCellTypes, type MsTablePropsTypes };
+export { type MsTableHeaderCellTypes, type MsTablePropsTypes, MsReactTable as default, type rowSelectionConfig };