@majoo-ui/react 1.50.2 → 1.51.0

package/index.umd.js

@@ -7433,7 +7433,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText"];
+  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
   var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
@@ -7552,7 +7552,9 @@
       max,
       maxChar,
       pattern,
-      helperText
+      helperText,
+      unremovableTags,
+      onRemoveItem
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7602,6 +7604,7 @@
       if (disabled || readOnly) {
         return tags;
       } else if (key === 'removeTag' || key === 'Backspace') {
+        onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     }; // const handleErrorMessage = () => {
@@ -7618,7 +7621,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 168,
+        lineNumber: 171,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputTagsComponent, _extends({
@@ -7631,7 +7634,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 169,
+        lineNumber: 172,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$8, {
@@ -7646,7 +7649,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 177,
+        lineNumber: 180,
         columnNumber: 9
       }
     })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7654,7 +7657,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 191,
+        lineNumber: 194,
         columnNumber: 11
       }
     }, pattern.errorMessage) : /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7662,7 +7665,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 193,
+        lineNumber: 196,
         columnNumber: 11
       }
     }, "Invalid Input")), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -7676,14 +7679,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 197,
+        lineNumber: 200,
         columnNumber: 9
       }
     }, helperText), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 201,
+        lineNumber: 204,
         columnNumber: 7
       }
     }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -7691,12 +7694,12 @@
       disabled: disabled,
       readOnly: readOnly,
       size: size === 'lg' ? 'sm' : 'lg',
-      isRemovable: disabled || readOnly ? false : true,
+      isRemovable: disabled || readOnly || unremovableTags.includes(tag) ? false : true,
       onRemove: () => removeTags(index, 'removeTag'),
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 203,
+        lineNumber: 206,
         columnNumber: 11
       }
     }, tag))));
@@ -7706,12 +7709,14 @@
     size: PropTypes__default["default"].string,
     value: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     onChange: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    onRemoveItem: PropTypes__default["default"].func,
     onEnter: PropTypes__default["default"].func,
     onInputChange: PropTypes__default["default"].func,
     max: PropTypes__default["default"].number,
     maxChar: PropTypes__default["default"].number,
     isInvalid: PropTypes__default["default"].bool,
     disabled: PropTypes__default["default"].bool,
+    unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     readOnly: PropTypes__default["default"].bool,
     helperText: PropTypes__default["default"].string,
     pattern: PropTypes__default["default"].shape({
@@ -7724,6 +7729,7 @@
     size: 'lg',
     isInvalid: false,
     disabled: false,
+    unremovableTags: [],
     readOnly: false
   };
 
@@ -8703,7 +8709,7 @@
               type: "button"
             }, {
               children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsxRuntime.jsx(Text$1, __assign({
-                color: "primary",
+                color: disabled ? 'disable' : 'primary',
                 css: StyledText$1
               }, {
                 children: selectedItem.name
@@ -9176,7 +9182,7 @@
     }
   }));
 
-  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "helperText", "css"];
+  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9409,27 +9415,30 @@
       onRemoveItem,
       isInvalid,
       sortBy,
+      showSelectAll,
+      selectAllLabel,
       showSelectedTag,
+      unremovableTags,
       helperText,
       css
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
-    const [initItem, setInitItem] = React__default["default"].useState(option); //init filter selectedItems on useMultipleSelection
+    const [initItem, setInitItems] = React__default["default"].useState(option); //init filter selectedItems on useMultipleSelection
 
-    const [item, setItem] = React__default["default"].useState([]);
+    const [items, setItems] = React__default["default"].useState([]);
     const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
     const [inputValue, setInputValue] = React__default["default"].useState('');
-    React.useEffect(() => {
-      setItem(option);
-    }, [option]);
-    const sortItem = React__default["default"].useCallback(() => {
+    const sortItems = React__default["default"].useCallback(() => {
       if (sortBy === 'id') {
         option.sort(function (a, b) {
           const idA = a.id.toUpperCase(); // ignore upper and lowercase
 
           const idB = b.id.toUpperCase(); // ignore upper and lowercase
 
+          if (a.id === '!all') return -1;
+          if (b.id === '!all') return 1;
+
           if (idA < idB) {
             return -1;
           }
@@ -9446,6 +9455,9 @@
 
           const nameB = b.name.toUpperCase(); // ignore upper and lowercase
 
+          if (a.id === '!all') return -1;
+          if (b.id === '!all') return 1;
+
           if (nameA < nameB) {
             return -1;
           }
@@ -9457,7 +9469,7 @@
           return 0;
         });
       }
-    }, [sortBy]);
+    }, [sortBy, option]);
     const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? value.reduce((res, id, i, {
       [i + 1]: next
     }) => {
@@ -9480,24 +9492,6 @@
         return [...res, ...filterOption]; // add the missing elements
       }
     }, []) : option;
-    React__default["default"].useEffect(() => {
-      if (selectedValue.length > 0 && disabledOptions.length === 0) {
-        setInitItem(sortValue);
-        setItem(sortValue);
-      }
-    }, []);
-    React__default["default"].useEffect(() => {
-      sortItem();
-    }, [sortBy]);
-    React__default["default"].useEffect(() => {
-      if (disabledOptions.length > 0) {
-        setInitItem(generateOptions(sortDisabled));
-        setItem(generateOptions(sortDisabled)); // setItem(generateOptions(option));
-      }
-    }, [disabledOptions]);
-    React__default["default"].useEffect(() => {
-      setSelectedValue(value);
-    }, [value]);
     const {
       getSelectedItemProps,
       getDropdownProps,
@@ -9531,13 +9525,13 @@
     const handleInputValue = input => {
       if (input === '') {
         if (disabledOptions.length > 0) {
-          setItem(generateOptions(sortDisabled));
+          setItems(generateOptions(sortDisabled));
         } else {
-          return setItem(sortValue);
+          return setItems(sortValue);
         }
       } else {
         let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
-        setItem(filterItems);
+        setItems(filterItems);
       }
     };
 
@@ -9545,10 +9539,13 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        let filterItems = selectedValue.filter(item => item !== selected.id);
+        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
         removeSelectedItem(selected);
         setSelectedValue(filterItems);
-        onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+
+        if (selected.id !== '!all') {
+          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+        }
       }
     };
 
@@ -9564,7 +9561,7 @@
       isOpen
     } = Downshift.useCombobox({
       inputValue,
-      items: item,
+      items: items,
       selectedItem: selectedValue,
       itemToString: item => item ? item.name : '',
       onStateChange: ({
@@ -9582,17 +9579,38 @@
           case Downshift.useCombobox.stateChangeTypes.ItemClick:
           case Downshift.useCombobox.stateChangeTypes.InputBlur:
             if (selectedItem) {
+              openMenu();
+
               if (selectedItems.length !== 0 && selectedValue.includes(selectedItem.id)) {
                 if (disabled === false && readOnly === false) {
-                  removeSelectedItem(selectedItem);
-                  removeItem(selectedItem);
+                  if (selectedItem.id === '!all') {
+                    items.forEach(item => {
+                      removeSelectedItem(item);
+                    });
+                    setSelectedValue([]);
+                    onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                  } else {
+                    removeItem(selectedItem);
+                  }
+
                   selectItem(null);
                 }
               } else {
-                openMenu();
-                addSelectedItem(selectedItem);
-                setSelectedValue([...selectedValue, selectedItem.id]);
-                onChange === null || onChange === void 0 ? void 0 : onChange([...selectedValue, selectedItem.id]);
+                if (selectedItem.id === '!all') {
+                  const itemIds = [];
+                  items.forEach(item => {
+                    addSelectedItem(item);
+                    itemIds.push(item.id);
+                  });
+                  setSelectedValue(itemIds);
+                  onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
+                } else {
+                  addSelectedItem(selectedItem);
+                  setSelectedValue([...selectedValue, selectedItem.id]);
+                  const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
+                  onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+                }
+
                 selectItem(null);
               }
             }
@@ -9603,13 +9621,49 @@
         }
       }
     });
+    React.useEffect(() => {
+      sortItems();
+      setItems(showSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel
+      }, ...option] : option);
+      setInitItems(showSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel
+      }, ...option] : option);
+    }, [option, showSelectAll]);
+    React.useEffect(() => {
+      if (selectedValue.length > 0 && disabledOptions.length === 0) {
+        setInitItems(sortValue);
+        setItems(sortValue);
+      }
+    }, []);
+    React.useEffect(() => {
+      sortItems();
+    }, [sortBy]);
+    React.useEffect(() => {
+      if (disabledOptions.length > 0) {
+        const options = generateOptions(sortDisabled);
+        setItems(showSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel
+        }, ...options] : options);
+        setInitItems(showSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel
+        }, ...options] : options);
+      }
+    }, [disabledOptions, showSelectAll]);
+    React.useEffect(() => {
+      setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
+    }, [value]);
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 421,
+        lineNumber: 490,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9619,7 +9673,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 422,
+        lineNumber: 491,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9634,7 +9688,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 423,
+        lineNumber: 492,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9650,7 +9704,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 433,
+        lineNumber: 502,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9663,7 +9717,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 439,
+        lineNumber: 508,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9674,7 +9728,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 449,
+        lineNumber: 518,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9682,7 +9736,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 454,
+        lineNumber: 523,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9695,7 +9749,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 458,
+        lineNumber: 527,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9703,11 +9757,11 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 463,
+        lineNumber: 532,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
-      isRemovable: readOnly || disabled ? false : true,
+      isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       disabled: disabled,
       size: "lg",
       readOnly: readOnly,
@@ -9727,7 +9781,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 465,
+        lineNumber: 534,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9739,19 +9793,19 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 486,
+        lineNumber: 555,
         columnNumber: 9
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
+    }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
       suppressRefError: true
     }), {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 491,
+        lineNumber: 560,
         columnNumber: 13
       }
-    }), isOpen && item.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
+    }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
       key: item.id
     }, getItemProps({
       item,
@@ -9766,7 +9820,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 494,
+        lineNumber: 563,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9779,7 +9833,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 507,
+        lineNumber: 576,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9787,7 +9841,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 516,
+        lineNumber: 585,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9795,7 +9849,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 520,
+        lineNumber: 589,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -9805,7 +9859,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 524,
+        lineNumber: 593,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9818,14 +9872,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 529,
+        lineNumber: 598,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 530,
+        lineNumber: 599,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9835,7 +9889,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 531,
+        lineNumber: 600,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9847,7 +9901,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 532,
+        lineNumber: 601,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -9866,7 +9920,11 @@
     search: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
+    showSelectAll: PropTypes__default["default"].bool,
+    selectAllLabel: PropTypes__default["default"].string,
+    showSelectedTag: PropTypes__default["default"].bool,
     css: PropTypes__default["default"].object,
     helperText: PropTypes__default["default"].string
   };
@@ -9880,8 +9938,11 @@
     placement: 'bottom',
     value: [],
     disabledOptions: [],
+    unremovableTags: [],
     textEmptyItem: 'Item tidak ditemukan',
-    sortBy: 'name'
+    sortBy: 'name',
+    showSelectAll: false,
+    selectAllLabel: 'Pilih Semua'
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -9911,6 +9972,7 @@
     onRemoveItem: PropTypes__default["default"].func,
     search: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
+    unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
     helperText: PropTypes__default["default"].string
@@ -9925,6 +9987,7 @@
     placement: 'bottom',
     value: [],
     disabledOptions: [],
+    unremovableTags: [],
     textEmptyItem: 'Item tidak ditemukan',
     sortBy: 'name'
   };
@@ -10660,7 +10723,9 @@
         allowNegative = props.allowNegative,
         min = props.min,
         max = props.max,
-        disabled = props.disabled;
+        disabled = props.disabled,
+        prefix = props.prefix,
+        suffix = props.suffix;
 
     var _b = React.useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0),
         inputValue = _b[0],
@@ -10719,7 +10784,9 @@
         disabled: disabled,
         value: inputValue,
         allowNegative: allowNegative,
-        onChange: handleChange
+        onChange: handleChange,
+        prefix: prefix,
+        suffix: suffix
       }, void 0), jsxRuntime.jsx(Button, __assign({
         disabled: disabled,
         buttonType: "secondary",
@@ -16714,7 +16781,7 @@
   };
   Pagination.displayName = 'Pagination';
 
-  var TableContainer$3 = styled(Flex$1, {
+  var TableContainer$4 = styled(Flex$1, {
     position: 'relative',
     flexDirection: 'column',
     width: '100%',
@@ -16723,7 +16790,7 @@
     overflowX: 'hidden',
     padding: '0 $spacing-05'
   });
-  var TableHeadRow$3 = styled('tr', {
+  var TableHeadRow$4 = styled('tr', {
     borderBottom: '1pt solid $bgBorder',
     '& th': {
       paddingLeft: '$spacing-05'
@@ -16732,10 +16799,10 @@
       padding: 0
     }
   });
-  var TableHeadCell$3 = styled('th', {
+  var TableHeadCell$4 = styled('th', {
     height: '40px'
   });
-  var TableRow$3 = styled('tr', {
+  var TableRow$4 = styled('tr', {
     borderBottom: '1pt solid $bgBorder',
     '& td': {
       paddingLeft: '$spacing-05'
@@ -16744,7 +16811,7 @@
       padding: 0
     }
   });
-  var TableCell$3 = styled('td', {
+  var TableCell$4 = styled('td', {
     height: '40px',
     fontSize: '$short-content-regular',
     lineHeight: '$short-content-regular',
@@ -16773,19 +16840,19 @@
         state = instance.state,
         toggleAllRowsExpanded = instance.toggleAllRowsExpanded,
         sortBy = instance.state.sortBy;
-    return jsxRuntime.jsx(TableContainer$3, __assign({
+    return jsxRuntime.jsx(TableContainer$4, __assign({
       css: css,
       ref: ref
     }, {
-      children: infiniteScrollWrapper(jsxRuntime.jsxs(TableContent$2, __assign({}, getTableProps(), {
-        children: [jsxRuntime.jsx(TableHead$2, {
+      children: infiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
+        children: [jsxRuntime.jsx(TableHead$3, {
           children: headerGroups.map(function (headerGroup) {
-            return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
+            return jsxRuntime.jsx(TableHeadRow$4, __assign({}, headerGroup.getHeaderGroupProps(), {
               children: headerGroup.headers.filter(function (column) {
                 return column.isMobileHeader || column.id === 'selection';
               }).map(function (column) {
                 var headerRender = column.render('Header');
-                return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
+                return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
                   title: 'Urutkan'
                 }) : {}), {
                   children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
@@ -16805,7 +16872,7 @@
               })
             }), void 0);
           })
-        }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
+        }, void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
           children: page.map(function (row) {
             prepareRow(row);
             var actionCells = row.allCells.filter(function (cell) {
@@ -16828,13 +16895,13 @@
                 variant: "contentButton"
               }, {
                 children: row.cells[0].render('Cell')
-              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
+              }), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
                 css: customStyle
               }, row.getRowProps(), {
                 children: row.cells.filter(function (cell) {
                   return cell.column.isMobileHeader || cell.column.id === 'selection';
                 }).map(function (cell) {
-                  return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                  return jsxRuntime.jsx(TableCell$4, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                     children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
                       justify: "between",
                       align: "center",
@@ -16853,8 +16920,8 @@
                     }), void 0) : cell.render('Cell')
                   }), void 0);
                 })
-              }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$3, {
-                children: jsxRuntime.jsxs(TableCell$3, __assign({
+              }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$4, {
+                children: jsxRuntime.jsxs(TableCell$4, __assign({
                   colSpan: visibleColumns.length
                 }, {
                   children: [jsxRuntime.jsx(Flex$1, __assign({
@@ -16925,7 +16992,7 @@
     }), void 0);
   });
 
-  var TableContainer$2 = styled('div', {
+  var TableContainer$3 = styled('div', {
     display: 'block',
     flexDirection: 'column',
     maxWidth: '100%',
@@ -16933,7 +17000,7 @@
     height: '100%',
     overflow: 'auto'
   });
-  var TableContent$2 = styled('table', {
+  var TableContent$3 = styled('table', {
     width: '100%',
     borderSpacing: 0,
     borderCollapse: 'collapse',
@@ -16941,7 +17008,7 @@
       backgroundColor: '$bgWhite'
     }
   });
-  var TableHead$2 = styled('thead', {
+  var TableHead$3 = styled('thead', {
     position: 'sticky',
     top: 0,
     backgroundColor: '$bgWhite',
@@ -16949,8 +17016,8 @@
     borderBottom: '1pt solid $bgBorder',
     color: '$textPrimary'
   });
-  var TableHeadRow$2 = styled('tr');
-  var TableHeadCell$2 = styled('th', {
+  var TableHeadRow$3 = styled('tr');
+  var TableHeadCell$3 = styled('th', {
     height: '64px'
   });
   var TableHeaderCellContainer = styled(Flex$1, {
@@ -17051,8 +17118,8 @@
       }
     }
   });
-  var TableBody$2 = styled('tbody', {});
-  var TableRow$2 = styled('tr', {
+  var TableBody$3 = styled('tbody', {});
+  var TableRow$3 = styled('tr', {
     borderBottom: '1pt solid $bgBorder',
     '&:hover': {
       backgroundColor: '$bgGray',
@@ -17072,7 +17139,7 @@
       }
     }
   });
-  var TableCell$2 = styled('td', {
+  var TableCell$3 = styled('td', {
     height: '68px',
     fontSize: '$short-content-regular',
     lineHeight: '$short-content-regular',
@@ -17379,22 +17446,22 @@
           children: "Loading .... "
         }), void 0)
       }), void 0), !isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(TableContainer$2, __assign({
+        children: [jsxRuntime.jsx(TableContainer$3, __assign({
           css: css,
           ref: scrollerRef
         }, {
-          children: renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$2, __assign({}, getTableProps(), {
-            children: [jsxRuntime.jsx(TableHead$2, __assign({
+          children: renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
+            children: [jsxRuntime.jsx(TableHead$3, __assign({
               css: headerCss
             }, {
               children: headerGroups.map(function (headerGroup) {
                 var visibleHeaders = headerGroup.headers.filter(function (column) {
                   return !column.isSubRow;
                 });
-                return jsxRuntime.jsx(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
+                return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
                   children: visibleHeaders.map(function (column, index) {
                     var headerRender = column.render('Header');
-                    return jsxRuntime.jsx(TableHeadCell$2, __assign({}, column.getHeaderProps(function (props) {
+                    return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
                       return [props, // column.getSortByToggleProps && !column.unsortable
                       !column.unsortable ? column.getSortByToggleProps({
                         title: 'Urutkan'
@@ -17438,7 +17505,7 @@
                   })
                 }), void 0);
               })
-            }), void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
+            }), void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
               children: page.map(function (row, i) {
                 var _a;
 
@@ -17467,13 +17534,13 @@
                     variant: "contentButton"
                   }, {
                     children: row.cells[0].render('Cell')
-                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({
+                  }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
                     css: customStyle
                   }, row.getRowProps(), {
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
-                      return jsxRuntime.jsx(TableCell$2, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                      return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign({
                           padding: cell.column.accessor ? '20px 8px' : '20px 20px',
                           verticalAlign: cell.column.accessor ? cellAlign : 'center'
@@ -17483,13 +17550,13 @@
                       }), void 0);
                     })
                   }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? subRowCells.map(function (cell, index) {
-                    return jsxRuntime.jsxs(TableRow$2, __assign({
+                    return jsxRuntime.jsxs(TableRow$3, __assign({
                       subRow: true
                     }, {
                       children: [leftAddOnCells.map(function (_, index) {
                         return jsxRuntime.jsx("td", {}, index);
                       }), jsxRuntime.jsxs(React__namespace.Fragment, {
-                        children: [jsxRuntime.jsx(TableCell$2, __assign({
+                        children: [jsxRuntime.jsx(TableCell$3, __assign({
                           subCell: true,
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
@@ -17503,7 +17570,7 @@
                           }, {
                             children: cell.column.Header
                           }), void 0)
-                        }), void 0), jsxRuntime.jsx(TableCell$2, __assign({
+                        }), void 0), jsxRuntime.jsx(TableCell$3, __assign({
                           subCell: true,
                           colSpan: visibleColumns.length - subRowCells.length,
                           css: {
@@ -26745,29 +26812,29 @@
     isOpen: false
   };
 
-  var TableContainer$1 = styled('div', {
+  var TableContainer$2 = styled('div', {
     display: 'block',
     flexDirection: 'column',
     maxWidth: '100%',
     position: 'relative',
     height: '100%'
   });
-  var TableContent$1 = styled('table', {
+  var TableContent$2 = styled('table', {
     width: '100%',
     borderSpacing: 0,
     borderCollapse: 'collapse'
   });
-  var TableHead$1 = styled('thead', {
+  var TableHead$2 = styled('thead', {
     position: 'sticky',
     top: 0,
     backgroundColor: '$gray50',
     boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
     zIndex: 10
   });
-  var TableHeadRow$1 = styled('tr', {
+  var TableHeadRow$2 = styled('tr', {
     borderBottom: '1pt solid $bgBorder'
   });
-  var TableHeadCell$1 = styled('th', {
+  var TableHeadCell$2 = styled('th', {
     height: '41px',
     fontSize: '$header-table',
     fontWeight: 600,
@@ -26775,8 +26842,8 @@
     textAlign: 'left',
     paddingLeft: 8
   });
-  var TableBody$1 = styled('tbody', {});
-  var TableRow$1 = styled('tr', {
+  var TableBody$2 = styled('tbody', {});
+  var TableRow$2 = styled('tr', {
     '&:hover': {
       backgroundColor: '$bgGray'
     }
@@ -26787,7 +26854,7 @@
       backgroundColor: '$bgGray'
     }
   });
-  var TableCell$1 = styled('td', {
+  var TableCell$2 = styled('td', {
     fontSize: '$short-content-regular',
     lineHeight: '$short-content-regular',
     letterSpacing: '$short-content-regular',
@@ -26817,7 +26884,7 @@
       paddingRight: 16
     }
   });
-  var Required$1 = styled('span', {
+  var Required$2 = styled('span', {
     marginLeft: 4,
     color: '$textRed !important'
   });
@@ -26831,16 +26898,16 @@
         prepareRow = instance.prepareRow,
         state = instance.state,
         toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
-    return jsxRuntime.jsx(TableContainer$1, __assign({
+    return jsxRuntime.jsx(TableContainer$2, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
-      children: jsxRuntime.jsxs(TableContent$1, __assign({}, getTableProps(), {
-        children: [jsxRuntime.jsx(TableHead$1, {
+      children: jsxRuntime.jsxs(TableContent$2, __assign({}, getTableProps(), {
+        children: [jsxRuntime.jsx(TableHead$2, {
           children: headerGroups.map(function (headerGroup, index) {
-            return /*#__PURE__*/React.createElement(TableHeadRow$1, __assign({}, headerGroup.getHeaderGroupProps(), {
+            return /*#__PURE__*/React.createElement(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
               key: index
             }), headerGroup.headers.map(function (column, index) {
-              return (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/React.createElement(TableHeadCell$1, __assign({}, column.getHeaderProps({
+              return (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
                 style: {
                   minWidth: column.minWidth,
                   width: column.width,
@@ -26848,19 +26915,19 @@
                 }
               }), {
                 key: index
-              }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required$1, {
+              }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required$2, {
                 children: "*"
               }, void 0) : '');
             }));
           })
-        }, void 0), jsxRuntime.jsx(TableBody$1, __assign({}, getTableBodyProps(), {
+        }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
             prepareRow(row);
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [/*#__PURE__*/React.createElement(TableRow$1, __assign({}, row.getRowProps(), {
+              children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
                 key: "row_mobile_".concat(index)
               }), row.cells.map(function (cell, index) {
-                return cell.column.isMobileHeader && /*#__PURE__*/React.createElement(TableCell$1, __assign({}, cell.getCellProps({
+                return cell.column.isMobileHeader && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
                   style: {
                     minWidth: cell.column.minWidth,
                     width: cell.column.width,
@@ -26874,20 +26941,20 @@
                   css: {
                     cursor: 'pointer',
                     minHeight: 40
-                  },
-                  onClick: function () {
-                    if (!Object.keys(state.expanded).includes(row.id)) {
-                      toggleAllRowsExpanded(false);
-                    }
-
-                    row.toggleRowExpanded(!row.isExpanded);
                   }
                 }, {
                   children: [jsxRuntime.jsx(Box, {
                     children: cell.render('Cell')
                   }, void 0), jsxRuntime.jsx(Flex$1, __assign({
                     justify: "center",
-                    align: "center"
+                    align: "center",
+                    onClick: function () {
+                      if (!Object.keys(state.expanded).includes(row.id)) {
+                        toggleAllRowsExpanded(false);
+                      }
+
+                      row.toggleRowExpanded(!row.isExpanded);
+                    }
                   }, {
                     children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
                   }), void 0)]
@@ -26937,7 +27004,7 @@
                               color: "secondary"
                             }, {
                               children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsxRuntime.jsx(Required$1, {
+                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsxRuntime.jsx(Required$2, {
                                   children: "*"
                                 }, void 0) : '']
                               }, void 0) : headerRender
@@ -26985,7 +27052,7 @@
     }), void 0);
   }
 
-  var TableContainer = styled('div', {
+  var TableContainer$1 = styled('div', {
     display: 'block',
     flexDirection: 'column',
     maxWidth: '100%',
@@ -26993,22 +27060,22 @@
     height: '100%',
     overflow: 'auto'
   });
-  var TableContent = styled('table', {
+  var TableContent$1 = styled('table', {
     width: '100%',
     borderSpacing: 0,
     borderCollapse: 'collapse'
   });
-  var TableHead = styled('thead', {
+  var TableHead$1 = styled('thead', {
     position: 'sticky',
     top: 0,
     backgroundColor: '$gray50',
     boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
     zIndex: 10
   });
-  var TableHeadRow = styled('tr', {
+  var TableHeadRow$1 = styled('tr', {
     borderBottom: '1pt solid $bgBorder'
   });
-  var TableHeadCell = styled('th', {
+  var TableHeadCell$1 = styled('th', {
     height: '48px',
     fontSize: '$header-table',
     fontWeight: 600,
@@ -27016,8 +27083,8 @@
     textAlign: 'left',
     paddingLeft: 8
   });
-  var TableBody = styled('tbody', {});
-  var TableRow = styled('tr', {
+  var TableBody$1 = styled('tbody', {});
+  var TableRow$1 = styled('tr', {
     borderTop: '1pt solid $bgBorder',
     '&:last-child': {
       borderBottom: '1pt solid $bgBorder'
@@ -27034,7 +27101,7 @@
       }
     }
   });
-  var TableCell = styled('td', {
+  var TableCell$1 = styled('td', {
     fontSize: '$short-content-regular',
     lineHeight: '$short-content-regular',
     letterSpacing: '$short-content-regular',
@@ -27063,7 +27130,7 @@
       }
     }
   });
-  var TableCellContent = styled('div', {
+  var TableCellContent$1 = styled('div', {
     height: '100%',
     paddingTop: 10,
     paddingBottom: 10,
@@ -27154,7 +27221,7 @@
   var Input$1 = styled(InputText, {
     height: '32px !important'
   });
-  var Required = styled('span', {
+  var Required$1 = styled('span', {
     marginLeft: 4,
     color: '$textRed !important'
   });
@@ -27277,7 +27344,8 @@
         data = props.data,
         emptyDataMessage = props.emptyDataMessage,
         rowHeight = props.rowHeight,
-        align = props.align;
+        align = props.align,
+        customRows = props.customRows;
     var instance = reactTable.useTable({
       columns: columns,
       data: data,
@@ -27290,33 +27358,35 @@
         prepareRow = instance.prepareRow,
         visibleColumns = instance.visibleColumns;
     var isDesktop = useMediaQuery('(min-width: 767px)');
-    return isDesktop ? jsxRuntime.jsx(TableContainer, __assign({
+    return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
-      children: jsxRuntime.jsxs(TableContent, __assign({}, getTableProps(), {
-        children: [jsxRuntime.jsx(TableHead, {
+      children: jsxRuntime.jsxs(TableContent$1, __assign({}, getTableProps(), {
+        children: [jsxRuntime.jsx(TableHead$1, {
           children: headerGroups.map(function (headerGroup) {
             var visibleHeaders = headerGroup.headers.filter(function (column) {
               return !column.isSubRow;
             });
-            return jsxRuntime.jsx(TableHeadRow, __assign({}, headerGroup.getHeaderGroupProps(), {
+            return jsxRuntime.jsx(TableHeadRow$1, __assign({}, headerGroup.getHeaderGroupProps(), {
               children: visibleHeaders.map(function (column) {
-                return !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsxRuntime.jsxs(TableHeadCell, __assign({}, column.getHeaderProps({
+                return !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsxRuntime.jsxs(TableHeadCell$1, __assign({}, column.getHeaderProps({
                   style: {
                     minWidth: column.minWidth,
                     width: column.width,
                     maxWidth: column.maxWidth
                   }
                 }), {
-                  children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required, {
+                  children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required$1, {
                     children: "*"
                   }, void 0) : '']
                 }), void 0);
               })
             }), void 0);
           })
-        }, void 0), jsxRuntime.jsx(TableBody, __assign({}, getTableBodyProps(), {
+        }, void 0), jsxRuntime.jsx(TableBody$1, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
+            var _a;
+
             prepareRow(row);
             var subRowCells = row.cells.filter(function (cell) {
               return cell.column.isSubRow;
@@ -27324,14 +27394,39 @@
             var notNullHeaderColumns = visibleColumns.filter(function (column) {
               return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
             });
+            var customStyle = {};
+            var CustomRow;
+
+            if (customRows && customRows(row).length) {
+              var _loop_1 = function _loop_1(i) {
+                if (customRows(row)[i].predicate) {
+                  customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+                  CustomRow = function () {
+                    var _a;
+
+                    return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
+                  };
+                }
+              };
+
+              for (var i = 0; i < customRows(row).length; i++) {
+                _loop_1(i);
+              }
+            }
+
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [jsxRuntime.jsx(TableRow, __assign({}, row.getRowProps(), {
+              children: [CustomRow ? jsxRuntime.jsx(CustomRow, {
+                style: customStyle
+              }, void 0) : jsxRuntime.jsx(TableRow$1, __assign({
+                css: customStyle
+              }, row.getRowProps(), {
                 children: row.cells.filter(function (cell) {
                   return !cell.column.isSubRow;
                 }).map(function (cell) {
                   var _a;
 
-                  return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell, __assign({}, cell.getCellProps({
+                  return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell$1, __assign({}, cell.getCellProps({
                     style: {
                       minWidth: cell.column.minWidth,
                       width: cell.column.width,
@@ -27344,7 +27439,7 @@
                       }
                     }
                   }, {
-                    children: jsxRuntime.jsx(TableCellContent, __assign({
+                    children: jsxRuntime.jsx(TableCellContent$1, __assign({
                       align: align
                     }, {
                       children: cell.render('Cell')
@@ -27354,11 +27449,11 @@
               }), void 0), subRowCells.map(function (cell) {
                 var _a;
 
-                return jsxRuntime.jsx(TableRow, __assign({
+                return jsxRuntime.jsx(TableRow$1, __assign({
                   subRow: true
                 }, {
                   children: jsxRuntime.jsxs(React__default["default"].Fragment, {
-                    children: [jsxRuntime.jsx(TableCell, __assign({
+                    children: [jsxRuntime.jsx(TableCell$1, __assign({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
@@ -27376,7 +27471,7 @@
                       }, {
                         children: cell.column.Header
                       }), void 0)
-                    }), void 0), jsxRuntime.jsx(TableCell, __assign({
+                    }), void 0), jsxRuntime.jsx(TableCell$1, __assign({
                       subCell: true,
                       colSpan: visibleColumns.length - subRowCells.length,
                       css: {
@@ -27429,6 +27524,8 @@
   EditableTable.Input = Input$1;
   EditableTable.Switch = Switch;
   EditableTable.Remove = Remove;
+  EditableTable.TableRow = TableRow$1;
+  EditableTable.TableCell = TableCell$1;
 
   var Container$3 = react.styled('div', {});
   var ProgressText = react.styled('p', {
@@ -29362,6 +29459,305 @@
     period: undefined
   };
 
+  var TableContainer = styled('div', {
+    display: 'block',
+    flexDirection: 'column',
+    maxWidth: '100%',
+    position: 'relative',
+    height: '100%',
+    overflow: 'auto'
+  });
+  var TableContent = styled('table', {
+    width: '100%',
+    borderSpacing: 0,
+    borderCollapse: 'collapse'
+  });
+  var TableHead = styled('thead', {
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '$white',
+    zIndex: 10
+  });
+  var TableHeadRow = styled('tr', {
+    borderBottom: '1px solid $bgBorder'
+  });
+  var TableHeadCell = styled('th', {
+    height: 44,
+    fontSize: '$header-table',
+    fontWeight: 600,
+    color: '$textPrimary',
+    textAlign: 'left',
+    paddingLeft: 8
+  });
+  var TableBody = styled('tbody', {});
+  var TableRow = styled('tr', {
+    borderTop: '1pt solid $bgBorder',
+    '&:last-child': {
+      borderBottom: '1pt solid $bgBorder'
+    },
+    '&:hover': {
+      backgroundColor: '$bgGray'
+    },
+    variants: {
+      subRow: {
+        true: {
+          borderTop: 'none',
+          borderBottom: '1pt solid $bgBorder'
+        }
+      }
+    }
+  });
+  var TableCell = styled('td', {
+    fontSize: '$short-content-regular',
+    lineHeight: '$short-content-regular',
+    letterSpacing: '$short-content-regular',
+    fontWeight: 400,
+    color: '$textPrimary',
+    position: 'relative',
+    paddingLeft: 8,
+    height: 44,
+    '&:last-child': {
+      paddingRight: 8
+    },
+    variants: {
+      verticalAlign: {
+        top: {
+          verticalAlign: 'top'
+        },
+        middle: {
+          verticalAlign: 'middle'
+        },
+        bottom: {
+          verticalAlign: 'bottom'
+        }
+      }
+    }
+  });
+  var TableCellContent = styled('div', {
+    height: '100%',
+    paddingTop: 10,
+    paddingBottom: 10,
+    display: 'flex',
+    userSelect: 'none',
+    variants: {
+      align: {
+        top: {
+          alignItems: 'start'
+        },
+        center: {
+          alignItems: 'center'
+        },
+        bottom: {
+          alignItems: 'end'
+        }
+      }
+    }
+  });
+  var Required = styled('span', {
+    marginLeft: 4,
+    color: '$textRed !important'
+  });
+  function CheckboxTable(props) {
+    var columns = props.columns,
+        data = props.data,
+        emptyDataMessage = props.emptyDataMessage,
+        rowHeight = props.rowHeight,
+        align = props.align,
+        onChange = props.onChange;
+
+    var _a = React.useState(__spreadArray([], data, true)),
+        datasets = _a[0],
+        setDatasets = _a[1];
+
+    var instance = reactTable.useTable({
+      columns: columns,
+      data: datasets,
+      autoResetExpanded: false
+    }, reactTable.useExpanded);
+    var getTableProps = instance.getTableProps,
+        getTableBodyProps = instance.getTableBodyProps,
+        rows = instance.rows,
+        headerGroups = instance.headerGroups,
+        prepareRow = instance.prepareRow,
+        toggleAllRowsExpanded = instance.toggleAllRowsExpanded,
+        state = instance.state;
+    return jsxRuntime.jsxs(TableContainer, __assign({
+      css: props === null || props === void 0 ? void 0 : props.css
+    }, {
+      children: [jsxRuntime.jsxs(TableContent, __assign({}, getTableProps(), {
+        children: [jsxRuntime.jsx(TableHead, {
+          children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup) {
+            var visibleHeaders = headerGroup.headers.filter(function (column) {
+              return !column.isSubRow;
+            });
+            return jsxRuntime.jsx(TableHeadRow, __assign({}, headerGroup.getHeaderGroupProps(), {
+              children: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(function (column) {
+                return jsxRuntime.jsxs(TableHeadCell, __assign({}, column.getHeaderProps({
+                  style: {
+                    minWidth: column.minWidth,
+                    width: column.width,
+                    maxWidth: column.maxWidth
+                  }
+                }), {
+                  children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required, {
+                    children: "*"
+                  }, void 0) : '']
+                }), void 0);
+              })
+            }), void 0);
+          })
+        }, void 0), jsxRuntime.jsx(TableBody, __assign({}, getTableBodyProps(), {
+          children: rows === null || rows === void 0 ? void 0 : rows.map(function (row, index) {
+            var _a, _b, _c;
+
+            prepareRow(row);
+            var originalRow = row.original;
+            return jsxRuntime.jsxs(React__default["default"].Fragment, {
+              children: [/*#__PURE__*/React.createElement(TableRow, __assign({}, row.getRowProps(), {
+                key: index
+              }), (_b = (_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.filter(function (cell) {
+                return !cell.column.isSubRow;
+              })) === null || _b === void 0 ? void 0 : _b.map(function (cell, indexCell) {
+                var _a;
+
+                var column = cell.column;
+                var originalCell = cell.row.original;
+                return /*#__PURE__*/React.createElement(TableCell, __assign({}, cell.getCellProps({
+                  style: {
+                    minWidth: column.minWidth,
+                    width: column.width,
+                    maxWidth: column.maxWidth
+                  }
+                }), {
+                  key: index + indexCell + 'tb-cell',
+                  css: {
+                    '@md': {
+                      height: rowHeight
+                    }
+                  }
+                }), jsxRuntime.jsxs(TableCellContent, __assign({
+                  align: align
+                }, {
+                  children: [indexCell === 0 && jsxRuntime.jsx(Flex$1, __assign({
+                    justify: "center",
+                    align: "center",
+                    css: {
+                      marginRight: 12,
+                      cursor: 'pointer',
+                      display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none'
+                    },
+                    onClick: function () {
+                      if (!Object.keys(state.expanded).includes(row.id)) {
+                        toggleAllRowsExpanded(false);
+                      }
+
+                      row.toggleRowExpanded(!row.isExpanded);
+                    }
+                  }, {
+                    children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+                  }), void 0), cell.render('Cell')]
+                }), void 0));
+              })), (_c = originalRow === null || originalRow === void 0 ? void 0 : originalRow.detail) === null || _c === void 0 ? void 0 : _c.map(function (cell, index) {
+                var id_row = originalRow === null || originalRow === void 0 ? void 0 : originalRow.id;
+                var id_subrow = cell.id,
+                    name = cell.name,
+                    detail_method = cell.detail_method;
+                var headerRender = name;
+                return /*#__PURE__*/React.createElement(TableRow, __assign({}, row.getRowProps(), {
+                  key: "row_collapse_".concat(index),
+                  css: {
+                    display: row.isExpanded ? 'table-row' : 'none'
+                  }
+                }), jsxRuntime.jsx(TableCell, __assign({
+                  css: {
+                    '@md': {
+                      height: rowHeight
+                    }
+                  }
+                }, {
+                  children: jsxRuntime.jsx(Box, __assign({
+                    css: {
+                      paddingLeft: 36
+                    }
+                  }, {
+                    children: headerRender
+                  }), void 0)
+                }), index + 'tb-cell-collapse'), detail_method === null || detail_method === void 0 ? void 0 : detail_method.map(function (subRow, indexSubRow) {
+                  var id_col = subRow.id,
+                      is_grant = subRow.is_grant,
+                      is_show = subRow.is_show;
+                  return jsxRuntime.jsx(TableCell, __assign({
+                    css: {
+                      '@md': {
+                        height: rowHeight
+                      }
+                    }
+                  }, {
+                    children: jsxRuntime.jsx(Box, {
+                      children: Number(is_show) === 1 ? jsxRuntime.jsx(InputCheckbox, {
+                        checked: Number(is_grant) === 1,
+                        indeterminate: false,
+                        onCheckedChange: function (e) {
+                          var newDatasets = __spreadArray([], datasets, true);
+
+                          for (var _i = 0, _a = newDatasets.entries(); _i < _a.length; _i++) {
+                            var _b = _a[_i],
+                                indexDataRow = _b[0],
+                                dataRow = _b[1];
+                            var rowData = dataRow;
+
+                            if ((rowData === null || rowData === void 0 ? void 0 : rowData.id) === id_row) {
+                              for (var _c = 0, _d = rowData.detail.entries(); _c < _d.length; _c++) {
+                                var _e = _d[_c],
+                                    indexDataSubRow = _e[0],
+                                    dataSubRow = _e[1];
+
+                                if ((dataSubRow === null || dataSubRow === void 0 ? void 0 : dataSubRow.id) === id_subrow) {
+                                  for (var _f = 0, _g = dataSubRow.detail_method.entries(); _f < _g.length; _f++) {
+                                    var _h = _g[_f],
+                                        indexDataCol = _h[0],
+                                        dataCol = _h[1];
+
+                                    if ((dataCol === null || dataCol === void 0 ? void 0 : dataCol.id) === id_col) {
+                                      newDatasets[indexDataRow].detail[indexDataSubRow].detail_method[indexDataCol].is_grant = e ? 1 : 0;
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
+
+                          setDatasets(newDatasets);
+                          onChange === null || onChange === void 0 ? void 0 : onChange(newDatasets);
+                        }
+                      }, void 0) : jsxRuntime.jsx(icons.MinusOutline, {
+                        size: 16,
+                        color: colors$4.iconDisable
+                      }, void 0)
+                    }, void 0)
+                  }), index + indexSubRow + 'tb-cell-collapse');
+                }));
+              })]
+            }, void 0);
+          })
+        }), void 0)]
+      }), void 0), rows.length < 1 && jsxRuntime.jsx(Flex$1, __assign({
+        css: {
+          padding: '$spacing-07'
+        },
+        align: "center",
+        justify: "center"
+      }, {
+        children: jsxRuntime.jsx(Paragraph, __assign({
+          paragraph: "shortContentRegular",
+          color: "secondary"
+        }, {
+          children: emptyDataMessage || 'Tidak ada data'
+        }), void 0)
+      }), void 0)]
+    }), void 0);
+  }
+
   var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
@@ -30902,6 +31298,7 @@
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
   exports.CheckboxGroup = CheckboxGroup;
+  exports.CheckboxTable = CheckboxTable;
   exports.ColorPicker = ColorPicker$1;
   exports.Colors = Colors;
   exports.DateColumn = DateColumn;
@@ -31039,19 +31436,19 @@
   exports.TOP_LEFT_POSITION = TOP_LEFT_POSITION;
   exports.TOP_RIGHT_POSITION = TOP_RIGHT_POSITION;
   exports.Table = Table;
-  exports.TableBody = TableBody$2;
-  exports.TableCell = TableCell$2;
+  exports.TableBody = TableBody$3;
+  exports.TableCell = TableCell$3;
   exports.TableColumn = TableColumn;
-  exports.TableContent = TableContent$2;
+  exports.TableContent = TableContent$3;
   exports.TableFoot = TableFoot$2;
   exports.TableFootCell = TableFootCell$2;
   exports.TableFootRow = TableFootRow$2;
-  exports.TableHead = TableHead$2;
+  exports.TableHead = TableHead$3;
   exports.TableHeadCellContent = TableHeadCellContent;
   exports.TableHeaderCellContainer = TableHeaderCellContainer;
   exports.TableOfContent = TableOfContent;
   exports.TableOfContentPage = TableOfContentPage;
-  exports.TableRow = TableRow$2;
+  exports.TableRow = TableRow$3;
   exports.Tabs = Tabs$1;
   exports.TabsContent = TabsContent$1;
   exports.TabsList = TabsList$1;