funda-ui 4.1.379 → 4.1.401

package/SyntheticTable/index.css

@@ -47,3 +47,9 @@
   width: max-content;
   max-width: 100%;
 }
+.syntable__wrapper .syntable__caption.syntable__caption--top {
+  caption-side: top;
+}
+.syntable__wrapper .syntable__caption.syntable__caption--bottom {
+  caption-side: bottom;
+}

package/SyntheticTable/index.d.ts

@@ -6,3 +6,5 @@ export { default as TableFoot } from './TableFoot';
 export { default as TableRow } from './TableRow';
 export { default as TableColgroup } from './TableColgroup';
 export { default as TableCaption } from './TableCaption';
+export { default as TableFilter } from './table-utils/TableFilter';
+export { default as ToggleSelection } from './table-utils/ToggleSelection';

package/SyntheticTable/index.js

@@ -100,9 +100,11 @@ __webpack_require__.d(__webpack_exports__, {
   "TableCaption": () => (/* reexport */ src_TableCaption),
   "TableCell": () => (/* reexport */ src_TableCell),
   "TableColgroup": () => (/* reexport */ src_TableColgroup),
+  "TableFilter": () => (/* reexport */ table_utils_TableFilter),
   "TableFoot": () => (/* reexport */ src_TableFoot),
   "TableHead": () => (/* reexport */ src_TableHead),
-  "TableRow": () => (/* reexport */ src_TableRow)
+  "TableRow": () => (/* reexport */ src_TableRow),
+  "ToggleSelection": () => (/* reexport */ table_utils_ToggleSelection)
 });
 
 // EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
@@ -119,47 +121,8 @@ var TableProvider = function TableProvider(props) {
   }, children);
 };
 
-;// CONCATENATED MODULE: ./src/table-utils/TableFilter.tsx
-
-
-var TableFilter = function TableFilter(props) {
-  var className = props.className,
-    placeholder = props.placeholder,
-    label = props.label,
-    _onChange = props.onChange;
-  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
-    originData = _useContext.originData,
-    filterFields = _useContext.filterFields,
-    setInstance = _useContext.setInstance;
-  var filterFieldsData = filterFields || [];
-  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    style: {
-      marginBottom: "16px"
-    }
-  }, label || null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
-    type: "text",
-    className: className || '',
-    onChange: function onChange(e) {
-      var filteredData = originData === null || originData === void 0 ? void 0 : originData.filter(function (item) {
-        return filterFieldsData.some(function (s) {
-          var _item$s;
-          return (_item$s = item[s]) === null || _item$s === void 0 ? void 0 : _item$s.toLowerCase().includes(e.target.value.toLowerCase());
-        });
-      });
-      if (e.target.value.trim() === '') {
-        setInstance(originData);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(originData);
-      } else {
-        setInstance(filteredData);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(filteredData);
-      }
-    },
-    placeholder: placeholder || ''
-  }));
-};
-/* harmony default export */ const table_utils_TableFilter = (TableFilter);
 ;// CONCATENATED MODULE: ./src/Table.tsx
-var _excluded = ["children", "wrapperClassName", "tableClassName", "responsive", "bordered", "colGroup", "cellAutoWidth", "data", "filterFields", "filterRow", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter"];
+var _excluded = ["children", "wrapperClassName", "tableClassName", "responsive", "bordered", "colGroup", "cellAutoWidth", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "checkboxSelection", "onChangeRowSelect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -171,7 +134,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 
-
 var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
     wrapperClassName = _ref.wrapperClassName,
@@ -182,11 +144,13 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     cellAutoWidth = _ref.cellAutoWidth,
     data = _ref.data,
     filterFields = _ref.filterFields,
-    filterRow = _ref.filterRow,
     filterControlClassName = _ref.filterControlClassName,
     filterControlPlaceholder = _ref.filterControlPlaceholder,
     filterLabel = _ref.filterLabel,
     onChangeFilter = _ref.onChangeFilter,
+    dataSelected = _ref.dataSelected,
+    checkboxSelection = _ref.checkboxSelection,
+    onChangeRowSelect = _ref.onChangeRowSelect,
     attributes = _objectWithoutProperties(_ref, _excluded);
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -197,6 +161,12 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     instance = _useState2[0],
     setInstance = _useState2[1];
 
+  // selection
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(new Set()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItems = _useState4[0],
+    setSelectedItems = _useState4[1];
+
   //
   var responsiveClasses = typeof responsive === 'undefined' || responsive === true ? 'table-responsive' : '';
 
@@ -208,19 +178,33 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     setInstance(data);
   }, [data]);
+
+  // The items are selected by default
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (Array.isArray(data) && Array.isArray(dataSelected) && dataSelected.length > 0) {
+      var newSelectedItems = new Set(selectedItems);
+      dataSelected.forEach(function (s) {
+        newSelectedItems.add(String(s));
+      });
+      setSelectedItems(newSelectedItems);
+    }
+  }, [data, dataSelected]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TableProvider, {
     value: {
       originData: data,
+      // filter
       filterFields: filterFields,
       instance: instance,
-      setInstance: setInstance
+      setInstance: setInstance,
+      onChangeFilter: onChangeFilter,
+      // selection
+      dataSelected: dataSelected,
+      checkboxSelection: checkboxSelection,
+      selectedItems: selectedItems,
+      setSelectedItems: setSelectedItems,
+      onChangeRowSelect: onChangeRowSelect
     }
-  }, filterRow ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(table_utils_TableFilter, {
-    className: filterControlClassName || '',
-    placeholder: filterControlPlaceholder || '',
-    onChange: onChangeFilter,
-    label: filterLabel
-  }) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
     id: uniqueID,
     ref: function ref(node) {
       rootRef.current = node;
@@ -306,6 +290,15 @@ var TableFoot = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
   }), children));
 });
 /* harmony default export */ const src_TableFoot = (TableFoot);
+;// CONCATENATED MODULE: ./src/table-utils/func.ts
+function valRes(setData) {
+  var res = [];
+  var s = setData;
+  for (var it = s.values(), val = null; val = it.next().value;) {
+    res.push(val);
+  }
+  return res;
+}
 ;// CONCATENATED MODULE: ./src/TableRow.tsx
 var TableRow_excluded = ["children", "active", "activeClassName", "className", "itemData"];
 function TableRow_extends() { TableRow_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TableRow_extends.apply(this, arguments); }
@@ -313,6 +306,7 @@ function TableRow_objectWithoutProperties(source, excluded) { if (source == null
 function TableRow_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 
+
 var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
     active = _ref.active,
@@ -323,9 +317,16 @@ var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     filterFields = _useContext.filterFields,
+    selectedItems = _useContext.selectedItems,
     instance = _useContext.instance;
   var filteredData = instance || [];
   var filterFieldsData = filterFields || [];
+
+  // selection
+  var _res = valRes(selectedItems);
+  var _selectedIndex = _res.map(function (v) {
+    return Number(v);
+  });
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", TableRow_extends({}, attributes, {
     ref: externalRef,
     className: "\n                    ".concat(className || '', " \n                    ").concat(active ? activeClassName || 'active' : '', " \n                    ").concat(itemData && originData ? filteredData.every(function (item) {
@@ -333,7 +334,9 @@ var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         var _item$s, _itemData$s;
         return !((_item$s = item[s]) !== null && _item$s !== void 0 && _item$s.toLowerCase().includes((_itemData$s = itemData[s]) === null || _itemData$s === void 0 ? void 0 : _itemData$s.toLowerCase()));
       });
-    }) ? 'd-none' : '' : '', "\n                ")
+    }) ? 'd-none' : '' : '', "\n                    ").concat(itemData && originData ? _selectedIndex.some(function (rowNum) {
+      return JSON.stringify(itemData) === JSON.stringify(originData[rowNum]) ? 'selected' : '';
+    }) : '', "\n                ")
   }), children));
 });
 /* harmony default export */ const src_TableRow = (TableRow);
@@ -362,21 +365,212 @@ var TableColgroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs
 });
 /* harmony default export */ const src_TableColgroup = (TableColgroup);
 ;// CONCATENATED MODULE: ./src/TableCaption.tsx
-var TableCaption_excluded = ["children", "className"];
+var TableCaption_excluded = ["children", "captionSide", "className"];
 function TableCaption_extends() { TableCaption_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TableCaption_extends.apply(this, arguments); }
 function TableCaption_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = TableCaption_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function TableCaption_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var TableCaption = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
+    captionSide = _ref.captionSide,
     className = _ref.className,
     attributes = TableCaption_objectWithoutProperties(_ref, TableCaption_excluded);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("caption", TableCaption_extends({}, attributes, {
     ref: externalRef,
-    className: className || ''
+    className: "syntable__caption ".concat(className || '', " syntable__caption--").concat(captionSide || 'top')
   }), children));
 });
 /* harmony default export */ const src_TableCaption = (TableCaption);
+;// CONCATENATED MODULE: ./src/table-utils/TableFilter.tsx
+
+
+var TableFilter = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, externalRef) {
+  var className = props.className,
+    placeholder = props.placeholder,
+    label = props.label,
+    _onChange = props.onChange;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
+    originData = _useContext.originData,
+    filterFields = _useContext.filterFields,
+    setInstance = _useContext.setInstance,
+    onChangeFilter = _useContext.onChangeFilter;
+  var filterFieldsData = filterFields || [];
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "syntable__filter-container"
+  }, label || null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+    type: "text",
+    ref: externalRef,
+    className: className || '',
+    onChange: function onChange(e) {
+      var filteredData = originData === null || originData === void 0 ? void 0 : originData.filter(function (item) {
+        return filterFieldsData.some(function (s) {
+          var _item$s;
+          return (_item$s = item[s]) === null || _item$s === void 0 ? void 0 : _item$s.toLowerCase().includes(e.target.value.toLowerCase());
+        });
+      });
+      if (e.target.value.trim() === '') {
+        setInstance(originData);
+        onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter(originData);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(e, originData);
+      } else {
+        setInstance(filteredData);
+        onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter(filteredData);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(e, filteredData);
+      }
+    },
+    placeholder: placeholder || ''
+  }));
+});
+/* harmony default export */ const table_utils_TableFilter = (TableFilter);
+;// CONCATENATED MODULE: ./src/table-utils/ToggleSelection.tsx
+var ToggleSelection_excluded = ["contentRef", "row", "className", "indeterminate", "disabled", "name", "value", "onChange", "checked"];
+function ToggleSelection_extends() { ToggleSelection_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToggleSelection_extends.apply(this, arguments); }
+function ToggleSelection_slicedToArray(arr, i) { return ToggleSelection_arrayWithHoles(arr) || ToggleSelection_iterableToArrayLimit(arr, i) || ToggleSelection_unsupportedIterableToArray(arr, i) || ToggleSelection_nonIterableRest(); }
+function ToggleSelection_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function ToggleSelection_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ToggleSelection_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ToggleSelection_arrayLikeToArray(o, minLen); }
+function ToggleSelection_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ToggleSelection_iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function ToggleSelection_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ToggleSelection_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = ToggleSelection_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function ToggleSelection_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+var ToggleSelection = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var contentRef = props.contentRef,
+    row = props.row,
+    className = props.className,
+    _props$indeterminate = props.indeterminate,
+    indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
+    disabled = props.disabled,
+    name = props.name,
+    value = props.value,
+    onChange = props.onChange,
+    checked = props.checked,
+    attributes = ToggleSelection_objectWithoutProperties(props, ToggleSelection_excluded);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
+    originData = _useContext.originData,
+    checkboxSelection = _useContext.checkboxSelection,
+    selectedItems = _useContext.selectedItems,
+    setSelectedItems = _useContext.setSelectedItems,
+    onChangeRowSelect = _useContext.onChangeRowSelect;
+  var totalSize = originData.length;
+  var defaultRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();
+  var resolvedRef = ref || defaultRef;
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState2 = ToggleSelection_slicedToArray(_useState, 2),
+    allChecked = _useState2[0],
+    setAllChecked = _useState2[1];
+
+  // exposes the following methods
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
+    return {
+      indeterminate: function indeterminate(value) {
+        resolvedRef.current.indeterminate = value;
+      },
+      setSelectAll: function setSelectAll(value) {
+        setAllChecked(value);
+      },
+      control: function control() {
+        return resolvedRef.current;
+      }
+    };
+  }, [contentRef, resolvedRef]);
+  function selectTarget(rowIndex) {
+    var _val = String(rowIndex);
+
+    // filter
+    // =================================================================
+    var _selectedIndex = [];
+    var filteredData = [];
+    if (!isNaN(row) && Array.isArray(originData)) {
+      // all
+      if (row === -1) {
+        var _target = Array.from({
+          length: totalSize
+        }, function (v, k) {
+          return String(k);
+        });
+        if (selectedItems.size === 0 || selectedItems.size < totalSize) {
+          _selectedIndex = valRes(checkedSpecItems(_target, true)).map(function (v) {
+            return Number(v);
+          });
+          setAllChecked(true);
+        } else {
+          _selectedIndex = valRes(checkedSpecItems(_target, false)).map(function (v) {
+            return Number(v);
+          });
+          setAllChecked(false);
+        }
+      } else {
+        var _newSelectedItems = checkedOneItem(_val);
+        var _res = valRes(_newSelectedItems);
+        _selectedIndex = _res.map(function (v) {
+          return Number(v);
+        });
+      }
+      filteredData = originData.filter(function (v, i) {
+        return _selectedIndex.includes(i);
+      });
+    }
+    return filteredData;
+  }
+  function checkedSpecItems(itemKey, check) {
+    // first, make a copy of the original set rather than mutating the original
+    var newSelectedItems = new Set(selectedItems);
+    itemKey.forEach(function (s) {
+      if (check) {
+        newSelectedItems.add(s);
+      } else {
+        newSelectedItems["delete"](s);
+      }
+    });
+    setSelectedItems(newSelectedItems);
+    return newSelectedItems;
+  }
+  function checkedOneItem(itemKey) {
+    // first, make a copy of the original set rather than mutating the original
+    var newSelectedItems = new Set(selectedItems);
+    if (!newSelectedItems.has(itemKey)) {
+      newSelectedItems.add(itemKey);
+    } else {
+      newSelectedItems["delete"](itemKey);
+    }
+    setSelectedItems(newSelectedItems);
+    return newSelectedItems;
+  }
+  function handleChange(event) {
+    var _val = event.target.value;
+    var filteredData = selectTarget(_val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, event.target.checked, filteredData);
+    onChangeRowSelect === null || onChangeRowSelect === void 0 ? void 0 : onChangeRowSelect(filteredData);
+  }
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (resolvedRef.current) {
+      resolvedRef.current.indeterminate = indeterminate;
+    }
+  }, [resolvedRef, indeterminate]);
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, checkboxSelection && row === -1 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", ToggleSelection_extends({
+    type: "checkbox",
+    ref: resolvedRef,
+    className: className || '',
+    name: name,
+    value: "".concat(row),
+    checked: allChecked,
+    onChange: handleChange
+  }, attributes)) : null, checkboxSelection && row != -1 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", ToggleSelection_extends({
+    type: "checkbox",
+    ref: resolvedRef,
+    className: className || '',
+    name: name,
+    value: "".concat(row),
+    "data-row": row,
+    "data-value": originData[row] ? JSON.stringify(originData[row]) : null,
+    checked: selectedItems.has("".concat(row)),
+    onChange: handleChange
+  }, attributes)) : null);
+});
+/* harmony default export */ const table_utils_ToggleSelection = (ToggleSelection);
 ;// CONCATENATED MODULE: ./src/index.tsx
 
 
@@ -386,6 +580,11 @@ var TableCaption = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_
 
 
 
+
+// utils
+
+
+
 })();
 
 /******/ 	return __webpack_exports__;

package/lib/cjs/SyntheticTable/index.d.ts

@@ -6,3 +6,5 @@ export { default as TableFoot } from './TableFoot';
 export { default as TableRow } from './TableRow';
 export { default as TableColgroup } from './TableColgroup';
 export { default as TableCaption } from './TableCaption';
+export { default as TableFilter } from './table-utils/TableFilter';
+export { default as ToggleSelection } from './table-utils/ToggleSelection';

package/lib/cjs/SyntheticTable/index.js

@@ -100,9 +100,11 @@ __webpack_require__.d(__webpack_exports__, {
   "TableCaption": () => (/* reexport */ src_TableCaption),
   "TableCell": () => (/* reexport */ src_TableCell),
   "TableColgroup": () => (/* reexport */ src_TableColgroup),
+  "TableFilter": () => (/* reexport */ table_utils_TableFilter),
   "TableFoot": () => (/* reexport */ src_TableFoot),
   "TableHead": () => (/* reexport */ src_TableHead),
-  "TableRow": () => (/* reexport */ src_TableRow)
+  "TableRow": () => (/* reexport */ src_TableRow),
+  "ToggleSelection": () => (/* reexport */ table_utils_ToggleSelection)
 });
 
 // EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
@@ -119,47 +121,8 @@ var TableProvider = function TableProvider(props) {
   }, children);
 };
 
-;// CONCATENATED MODULE: ./src/table-utils/TableFilter.tsx
-
-
-var TableFilter = function TableFilter(props) {
-  var className = props.className,
-    placeholder = props.placeholder,
-    label = props.label,
-    _onChange = props.onChange;
-  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
-    originData = _useContext.originData,
-    filterFields = _useContext.filterFields,
-    setInstance = _useContext.setInstance;
-  var filterFieldsData = filterFields || [];
-  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    style: {
-      marginBottom: "16px"
-    }
-  }, label || null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
-    type: "text",
-    className: className || '',
-    onChange: function onChange(e) {
-      var filteredData = originData === null || originData === void 0 ? void 0 : originData.filter(function (item) {
-        return filterFieldsData.some(function (s) {
-          var _item$s;
-          return (_item$s = item[s]) === null || _item$s === void 0 ? void 0 : _item$s.toLowerCase().includes(e.target.value.toLowerCase());
-        });
-      });
-      if (e.target.value.trim() === '') {
-        setInstance(originData);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(originData);
-      } else {
-        setInstance(filteredData);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(filteredData);
-      }
-    },
-    placeholder: placeholder || ''
-  }));
-};
-/* harmony default export */ const table_utils_TableFilter = (TableFilter);
 ;// CONCATENATED MODULE: ./src/Table.tsx
-var _excluded = ["children", "wrapperClassName", "tableClassName", "responsive", "bordered", "colGroup", "cellAutoWidth", "data", "filterFields", "filterRow", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter"];
+var _excluded = ["children", "wrapperClassName", "tableClassName", "responsive", "bordered", "colGroup", "cellAutoWidth", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "checkboxSelection", "onChangeRowSelect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -171,7 +134,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 
-
 var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
     wrapperClassName = _ref.wrapperClassName,
@@ -182,11 +144,13 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     cellAutoWidth = _ref.cellAutoWidth,
     data = _ref.data,
     filterFields = _ref.filterFields,
-    filterRow = _ref.filterRow,
     filterControlClassName = _ref.filterControlClassName,
     filterControlPlaceholder = _ref.filterControlPlaceholder,
     filterLabel = _ref.filterLabel,
     onChangeFilter = _ref.onChangeFilter,
+    dataSelected = _ref.dataSelected,
+    checkboxSelection = _ref.checkboxSelection,
+    onChangeRowSelect = _ref.onChangeRowSelect,
     attributes = _objectWithoutProperties(_ref, _excluded);
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -197,6 +161,12 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     instance = _useState2[0],
     setInstance = _useState2[1];
 
+  // selection
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(new Set()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItems = _useState4[0],
+    setSelectedItems = _useState4[1];
+
   //
   var responsiveClasses = typeof responsive === 'undefined' || responsive === true ? 'table-responsive' : '';
 
@@ -208,19 +178,33 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     setInstance(data);
   }, [data]);
+
+  // The items are selected by default
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (Array.isArray(data) && Array.isArray(dataSelected) && dataSelected.length > 0) {
+      var newSelectedItems = new Set(selectedItems);
+      dataSelected.forEach(function (s) {
+        newSelectedItems.add(String(s));
+      });
+      setSelectedItems(newSelectedItems);
+    }
+  }, [data, dataSelected]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TableProvider, {
     value: {
       originData: data,
+      // filter
       filterFields: filterFields,
       instance: instance,
-      setInstance: setInstance
+      setInstance: setInstance,
+      onChangeFilter: onChangeFilter,
+      // selection
+      dataSelected: dataSelected,
+      checkboxSelection: checkboxSelection,
+      selectedItems: selectedItems,
+      setSelectedItems: setSelectedItems,
+      onChangeRowSelect: onChangeRowSelect
     }
-  }, filterRow ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(table_utils_TableFilter, {
-    className: filterControlClassName || '',
-    placeholder: filterControlPlaceholder || '',
-    onChange: onChangeFilter,
-    label: filterLabel
-  }) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
     id: uniqueID,
     ref: function ref(node) {
       rootRef.current = node;
@@ -306,6 +290,15 @@ var TableFoot = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
   }), children));
 });
 /* harmony default export */ const src_TableFoot = (TableFoot);
+;// CONCATENATED MODULE: ./src/table-utils/func.ts
+function valRes(setData) {
+  var res = [];
+  var s = setData;
+  for (var it = s.values(), val = null; val = it.next().value;) {
+    res.push(val);
+  }
+  return res;
+}
 ;// CONCATENATED MODULE: ./src/TableRow.tsx
 var TableRow_excluded = ["children", "active", "activeClassName", "className", "itemData"];
 function TableRow_extends() { TableRow_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TableRow_extends.apply(this, arguments); }
@@ -313,6 +306,7 @@ function TableRow_objectWithoutProperties(source, excluded) { if (source == null
 function TableRow_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 
+
 var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
     active = _ref.active,
@@ -323,9 +317,16 @@ var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     filterFields = _useContext.filterFields,
+    selectedItems = _useContext.selectedItems,
     instance = _useContext.instance;
   var filteredData = instance || [];
   var filterFieldsData = filterFields || [];
+
+  // selection
+  var _res = valRes(selectedItems);
+  var _selectedIndex = _res.map(function (v) {
+    return Number(v);
+  });
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("tr", TableRow_extends({}, attributes, {
     ref: externalRef,
     className: "\n                    ".concat(className || '', " \n                    ").concat(active ? activeClassName || 'active' : '', " \n                    ").concat(itemData && originData ? filteredData.every(function (item) {
@@ -333,7 +334,9 @@ var TableRow = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         var _item$s, _itemData$s;
         return !((_item$s = item[s]) !== null && _item$s !== void 0 && _item$s.toLowerCase().includes((_itemData$s = itemData[s]) === null || _itemData$s === void 0 ? void 0 : _itemData$s.toLowerCase()));
       });
-    }) ? 'd-none' : '' : '', "\n                ")
+    }) ? 'd-none' : '' : '', "\n                    ").concat(itemData && originData ? _selectedIndex.some(function (rowNum) {
+      return JSON.stringify(itemData) === JSON.stringify(originData[rowNum]) ? 'selected' : '';
+    }) : '', "\n                ")
   }), children));
 });
 /* harmony default export */ const src_TableRow = (TableRow);
@@ -362,21 +365,212 @@ var TableColgroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs
 });
 /* harmony default export */ const src_TableColgroup = (TableColgroup);
 ;// CONCATENATED MODULE: ./src/TableCaption.tsx
-var TableCaption_excluded = ["children", "className"];
+var TableCaption_excluded = ["children", "captionSide", "className"];
 function TableCaption_extends() { TableCaption_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TableCaption_extends.apply(this, arguments); }
 function TableCaption_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = TableCaption_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function TableCaption_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var TableCaption = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
   var children = _ref.children,
+    captionSide = _ref.captionSide,
     className = _ref.className,
     attributes = TableCaption_objectWithoutProperties(_ref, TableCaption_excluded);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("caption", TableCaption_extends({}, attributes, {
     ref: externalRef,
-    className: className || ''
+    className: "syntable__caption ".concat(className || '', " syntable__caption--").concat(captionSide || 'top')
   }), children));
 });
 /* harmony default export */ const src_TableCaption = (TableCaption);
+;// CONCATENATED MODULE: ./src/table-utils/TableFilter.tsx
+
+
+var TableFilter = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, externalRef) {
+  var className = props.className,
+    placeholder = props.placeholder,
+    label = props.label,
+    _onChange = props.onChange;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
+    originData = _useContext.originData,
+    filterFields = _useContext.filterFields,
+    setInstance = _useContext.setInstance,
+    onChangeFilter = _useContext.onChangeFilter;
+  var filterFieldsData = filterFields || [];
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "syntable__filter-container"
+  }, label || null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+    type: "text",
+    ref: externalRef,
+    className: className || '',
+    onChange: function onChange(e) {
+      var filteredData = originData === null || originData === void 0 ? void 0 : originData.filter(function (item) {
+        return filterFieldsData.some(function (s) {
+          var _item$s;
+          return (_item$s = item[s]) === null || _item$s === void 0 ? void 0 : _item$s.toLowerCase().includes(e.target.value.toLowerCase());
+        });
+      });
+      if (e.target.value.trim() === '') {
+        setInstance(originData);
+        onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter(originData);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(e, originData);
+      } else {
+        setInstance(filteredData);
+        onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter(filteredData);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(e, filteredData);
+      }
+    },
+    placeholder: placeholder || ''
+  }));
+});
+/* harmony default export */ const table_utils_TableFilter = (TableFilter);
+;// CONCATENATED MODULE: ./src/table-utils/ToggleSelection.tsx
+var ToggleSelection_excluded = ["contentRef", "row", "className", "indeterminate", "disabled", "name", "value", "onChange", "checked"];
+function ToggleSelection_extends() { ToggleSelection_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToggleSelection_extends.apply(this, arguments); }
+function ToggleSelection_slicedToArray(arr, i) { return ToggleSelection_arrayWithHoles(arr) || ToggleSelection_iterableToArrayLimit(arr, i) || ToggleSelection_unsupportedIterableToArray(arr, i) || ToggleSelection_nonIterableRest(); }
+function ToggleSelection_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function ToggleSelection_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ToggleSelection_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ToggleSelection_arrayLikeToArray(o, minLen); }
+function ToggleSelection_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ToggleSelection_iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function ToggleSelection_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ToggleSelection_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = ToggleSelection_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function ToggleSelection_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+var ToggleSelection = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, ref) {
+  var contentRef = props.contentRef,
+    row = props.row,
+    className = props.className,
+    _props$indeterminate = props.indeterminate,
+    indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
+    disabled = props.disabled,
+    name = props.name,
+    value = props.value,
+    onChange = props.onChange,
+    checked = props.checked,
+    attributes = ToggleSelection_objectWithoutProperties(props, ToggleSelection_excluded);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
+    originData = _useContext.originData,
+    checkboxSelection = _useContext.checkboxSelection,
+    selectedItems = _useContext.selectedItems,
+    setSelectedItems = _useContext.setSelectedItems,
+    onChangeRowSelect = _useContext.onChangeRowSelect;
+  var totalSize = originData.length;
+  var defaultRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();
+  var resolvedRef = ref || defaultRef;
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState2 = ToggleSelection_slicedToArray(_useState, 2),
+    allChecked = _useState2[0],
+    setAllChecked = _useState2[1];
+
+  // exposes the following methods
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
+    return {
+      indeterminate: function indeterminate(value) {
+        resolvedRef.current.indeterminate = value;
+      },
+      setSelectAll: function setSelectAll(value) {
+        setAllChecked(value);
+      },
+      control: function control() {
+        return resolvedRef.current;
+      }
+    };
+  }, [contentRef, resolvedRef]);
+  function selectTarget(rowIndex) {
+    var _val = String(rowIndex);
+
+    // filter
+    // =================================================================
+    var _selectedIndex = [];
+    var filteredData = [];
+    if (!isNaN(row) && Array.isArray(originData)) {
+      // all
+      if (row === -1) {
+        var _target = Array.from({
+          length: totalSize
+        }, function (v, k) {
+          return String(k);
+        });
+        if (selectedItems.size === 0 || selectedItems.size < totalSize) {
+          _selectedIndex = valRes(checkedSpecItems(_target, true)).map(function (v) {
+            return Number(v);
+          });
+          setAllChecked(true);
+        } else {
+          _selectedIndex = valRes(checkedSpecItems(_target, false)).map(function (v) {
+            return Number(v);
+          });
+          setAllChecked(false);
+        }
+      } else {
+        var _newSelectedItems = checkedOneItem(_val);
+        var _res = valRes(_newSelectedItems);
+        _selectedIndex = _res.map(function (v) {
+          return Number(v);
+        });
+      }
+      filteredData = originData.filter(function (v, i) {
+        return _selectedIndex.includes(i);
+      });
+    }
+    return filteredData;
+  }
+  function checkedSpecItems(itemKey, check) {
+    // first, make a copy of the original set rather than mutating the original
+    var newSelectedItems = new Set(selectedItems);
+    itemKey.forEach(function (s) {
+      if (check) {
+        newSelectedItems.add(s);
+      } else {
+        newSelectedItems["delete"](s);
+      }
+    });
+    setSelectedItems(newSelectedItems);
+    return newSelectedItems;
+  }
+  function checkedOneItem(itemKey) {
+    // first, make a copy of the original set rather than mutating the original
+    var newSelectedItems = new Set(selectedItems);
+    if (!newSelectedItems.has(itemKey)) {
+      newSelectedItems.add(itemKey);
+    } else {
+      newSelectedItems["delete"](itemKey);
+    }
+    setSelectedItems(newSelectedItems);
+    return newSelectedItems;
+  }
+  function handleChange(event) {
+    var _val = event.target.value;
+    var filteredData = selectTarget(_val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, event.target.checked, filteredData);
+    onChangeRowSelect === null || onChangeRowSelect === void 0 ? void 0 : onChangeRowSelect(filteredData);
+  }
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (resolvedRef.current) {
+      resolvedRef.current.indeterminate = indeterminate;
+    }
+  }, [resolvedRef, indeterminate]);
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, checkboxSelection && row === -1 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", ToggleSelection_extends({
+    type: "checkbox",
+    ref: resolvedRef,
+    className: className || '',
+    name: name,
+    value: "".concat(row),
+    checked: allChecked,
+    onChange: handleChange
+  }, attributes)) : null, checkboxSelection && row != -1 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", ToggleSelection_extends({
+    type: "checkbox",
+    ref: resolvedRef,
+    className: className || '',
+    name: name,
+    value: "".concat(row),
+    "data-row": row,
+    "data-value": originData[row] ? JSON.stringify(originData[row]) : null,
+    checked: selectedItems.has("".concat(row)),
+    onChange: handleChange
+  }, attributes)) : null);
+});
+/* harmony default export */ const table_utils_ToggleSelection = (ToggleSelection);
 ;// CONCATENATED MODULE: ./src/index.tsx
 
 
@@ -386,6 +580,11 @@ var TableCaption = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_
 
 
 
+
+// utils
+
+
+
 })();
 
 /******/ 	return __webpack_exports__;

package/lib/css/SyntheticTable/index.css

@@ -47,3 +47,9 @@
   width: max-content;
   max-width: 100%;
 }
+.syntable__wrapper .syntable__caption.syntable__caption--top {
+  caption-side: top;
+}
+.syntable__wrapper .syntable__caption.syntable__caption--bottom {
+  caption-side: bottom;
+}

package/lib/esm/SyntheticTable/Table.tsx

@@ -14,11 +14,15 @@ interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
     // filter
     data?: any[];
     filterFields?: string[];
-    filterRow?: boolean;
     filterControlClassName?: string;
     filterControlPlaceholder?: string;
     filterLabel?: React.ReactNode;
     onChangeFilter?: (value: any) => void;
+
+    // selection
+    dataSelected?: number[];
+    checkboxSelection?: boolean;
+    onChangeRowSelect?: (fetchData: any[]) => void;
 }
 
 
@@ -35,11 +39,15 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         // filter
         data,
         filterFields,
-        filterRow,
         filterControlClassName,
         filterControlPlaceholder,
         filterLabel,
         onChangeFilter,
+        
+        // selection
+        dataSelected,
+        checkboxSelection,
+        onChangeRowSelect,
 
         ...attributes
     },
@@ -52,6 +60,8 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
     // context
     const [instance, setInstance] = useState<any>(null);
 
+    // selection
+    const [selectedItems, setSelectedItems] = useState<any>(new Set());
 
     //
     const responsiveClasses = typeof responsive === 'undefined' || responsive === true ? 'table-responsive' : '';
@@ -67,23 +77,38 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         setInstance(data);
     }, [data]);
 
+    // The items are selected by default
+    useEffect(() => {
+        if (Array.isArray(data) && Array.isArray(dataSelected) && dataSelected.length > 0) {
+            const newSelectedItems = new Set(selectedItems);
+            dataSelected.forEach((s: number) => {
+                newSelectedItems.add(String(s));
+            });
+
+            setSelectedItems(newSelectedItems);
+        }
+    }, [data, dataSelected]);
+
     return (
         <>
 
             <TableProvider value={{
                 originData: data,
+
+                // filter
                 filterFields,
                 instance,
-                setInstance
+                setInstance,
+                onChangeFilter,
+
+                // selection
+                dataSelected,
+                checkboxSelection,
+                selectedItems,
+                setSelectedItems,
+                onChangeRowSelect
             }}>
 
-                {/** Filter Control */}
-                {filterRow ? <TableFilter 
-                    className={filterControlClassName || ''} 
-                    placeholder={filterControlPlaceholder || ''} 
-                    onChange={onChangeFilter}
-                    label={filterLabel}
-                /> : null}
 
                 {/** Main */}
                 <div

package/lib/esm/SyntheticTable/TableCaption.tsx

@@ -3,10 +3,16 @@ import React, { forwardRef } from 'react';
 
 interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
     className?: string;
+    captionSide?: string;
 }
 
 const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>((
-    { children, className, ...attributes },
+    { 
+        children, 
+        captionSide,
+        className, 
+        ...attributes 
+    },
     externalRef
 ) => {
 
@@ -16,7 +22,7 @@ const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>((
             <caption
                 {...attributes}
                 ref={externalRef}
-                className={className || ''}
+                className={`syntable__caption ${className || ''} syntable__caption--${captionSide || 'top'}`}
             >
                 {children}
             </caption>

package/lib/esm/SyntheticTable/TableRow.tsx

@@ -2,6 +2,9 @@ import React, { useContext, forwardRef } from 'react';
 
 import { TableContext } from "./TableContext";
 
+import { valRes } from './table-utils/func';
+
+
 interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     active?: boolean;
     activeClassName?: string;
@@ -24,12 +27,17 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
     const { 
         originData,
         filterFields,
+        selectedItems,
         instance
      } = useContext(TableContext);
      
     const filteredData = instance || [];
     const filterFieldsData = filterFields || [];
 
+    // selection
+    const _res = valRes(selectedItems);
+    const _selectedIndex = _res.map((v: any) => Number(v));
+
     return (
         <>
 
@@ -40,6 +48,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
                     ${className || ''} 
                     ${active ? (activeClassName || 'active') : ''} 
                     ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''}
+                    ${itemData && originData ? _selectedIndex.some((rowNum: number) => JSON.stringify(itemData) === JSON.stringify(originData[rowNum]) ? 'selected' : '') : ''}
                 `}
             >
                 {children}

package/lib/esm/SyntheticTable/index.scss

@@ -68,6 +68,16 @@
         
     }
 
+    .syntable__caption {
+        &.syntable__caption--top {
+            caption-side: top;
+        }
+
+        &.syntable__caption--bottom {
+            caption-side: bottom;
+        }
+    }
+
 }
 
 

package/lib/esm/SyntheticTable/index.tsx

@@ -7,3 +7,9 @@ export { default as TableRow } from './TableRow';
 export { default as TableColgroup } from './TableColgroup';
 export { default as TableCaption } from './TableCaption';
 
+// utils
+
+export { default as TableFilter } from './table-utils/TableFilter';
+export { default as ToggleSelection } from './table-utils/ToggleSelection';
+
+

package/lib/esm/SyntheticTable/table-utils/TableFilter.tsx

@@ -1,15 +1,15 @@
-import React, { useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 import { TableContext } from '../TableContext';
 
 type TableFilterProps = {
     className?: string;
     placeholder?: string;
     label?: React.ReactNode;
-    onChange?: (value: any) => void;
+    onChange?: (e: any, fetchData: any[]) => void;
 };
 
 
-const TableFilter = (props: TableFilterProps) => {
+const TableFilter = forwardRef((props: TableFilterProps, externalRef: any) => {
     const { 
         className,
         placeholder,
@@ -20,33 +20,37 @@ const TableFilter = (props: TableFilterProps) => {
     const { 
         originData, 
         filterFields, 
-        setInstance 
+        setInstance,
+        onChangeFilter
     } = useContext(TableContext);
 
     const filterFieldsData = filterFields || [];
 
 
     return (
-        <div style={{ marginBottom: "16px" }}>
+        <div className="syntable__filter-container">
             {label || null}
             <input
                 type="text"
+                ref={externalRef}
                 className={className || ''}
-                onChange={e => {
+                onChange={(e: any) => {
                     const filteredData = originData?.filter((item: any) => filterFieldsData.some((s: string) => item[s]?.toLowerCase().includes(e.target.value.toLowerCase())));
                     
                     if (e.target.value.trim() === '') {
                         setInstance(originData);
-                        onChange?.(originData);
+                        onChangeFilter?.(originData);
+                        onChange?.(e, originData);
                     } else {
                         setInstance(filteredData);
-                        onChange?.(filteredData);
+                        onChangeFilter?.(filteredData);
+                        onChange?.(e, filteredData);
                     }
                 }}
                 placeholder={placeholder || ''}
             />
         </div>
     );
-};
+});
 
 export default TableFilter;

package/lib/esm/SyntheticTable/table-utils/ToggleSelection.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useRef, forwardRef, useContext, useImperativeHandle } from "react";
+import { TableContext } from '../TableContext';
+
+import { valRes } from './func';
+
+type ToggleSelectionProps = {
+    contentRef?: React.ForwardedRef<any>;
+    row: number;
+    className?: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    onChange?: (arg1: any, arg2: any, fetchData: any[]) => void;
+    checked?: boolean;
+};
+
+
+const ToggleSelection = forwardRef((props: ToggleSelectionProps, ref: any) => {
+    const {
+        contentRef,
+        row,
+        className,
+        indeterminate = false,
+        disabled,
+        name,
+        value,
+        onChange,
+        checked,
+        ...attributes
+    } = props;
+
+    const { 
+        originData, 
+        checkboxSelection,
+        selectedItems,
+        setSelectedItems,
+        onChangeRowSelect,
+    } = useContext(TableContext);
+
+
+    const totalSize = originData.length;
+    const defaultRef = useRef();
+    const resolvedRef = ref || defaultRef;
+    const [allChecked, setAllChecked] = useState<boolean>(false);
+
+    // exposes the following methods
+    useImperativeHandle(
+        contentRef,
+        () => ({
+            indeterminate: (value: boolean) => {
+                resolvedRef.current.indeterminate = value;
+            },
+            setSelectAll: (value: boolean) => {
+                setAllChecked(value);
+            },
+            control: () => {
+                return resolvedRef.current;
+            }
+        }),
+        [contentRef, resolvedRef],
+    );
+
+
+    function selectTarget(rowIndex: string | number) {
+        const _val = String(rowIndex);
+        
+        // filter
+        // =================================================================
+        let _selectedIndex: number[] = [];
+        let filteredData: any[] = [];
+        if (!isNaN(row) && Array.isArray(originData)) {
+
+            // all
+            if (row === -1) {
+                const _target = Array.from({
+                    length: totalSize
+                    },
+                    function(v, k) {
+                    return String(k);
+                    }
+                );
+
+                if (selectedItems.size === 0 || selectedItems.size < totalSize) {
+                    _selectedIndex = valRes(checkedSpecItems(_target, true)).map((v: any) => Number(v));
+                    setAllChecked(true);
+                } else {
+                    _selectedIndex = valRes(checkedSpecItems(_target, false)).map((v: any) => Number(v));
+                    setAllChecked(false);
+                }
+                
+                
+            } else {
+                const _newSelectedItems = checkedOneItem(_val);
+                const _res = valRes(_newSelectedItems);
+                _selectedIndex = _res.map((v: any) => Number(v));
+            }
+
+            filteredData = originData.filter((v: any, i: number) => _selectedIndex.includes(i));
+
+        }
+
+        return filteredData;
+    }
+
+
+    function checkedSpecItems(itemKey: string[], check: boolean) {
+        // first, make a copy of the original set rather than mutating the original
+        const newSelectedItems = new Set(selectedItems);
+        itemKey.forEach((s: string) => {
+            if (check) {
+                newSelectedItems.add(s);
+            } else {
+                newSelectedItems.delete(s);
+            }
+        });
+
+        setSelectedItems(newSelectedItems);
+        return newSelectedItems;
+    }
+
+    function checkedOneItem(itemKey: string) {
+        // first, make a copy of the original set rather than mutating the original
+        const newSelectedItems = new Set(selectedItems);
+        if (!newSelectedItems.has(itemKey)) {
+            newSelectedItems.add(itemKey);
+        } else {
+            newSelectedItems.delete(itemKey);
+        }
+        setSelectedItems(newSelectedItems);
+
+        return newSelectedItems;
+    }
+
+
+    function handleChange(event: any) {
+        const _val = event.target.value;
+        const filteredData = selectTarget(_val);
+        
+        onChange?.(event, event.target.checked, filteredData);
+        onChangeRowSelect?.(filteredData);
+    }
+
+
+    useEffect(() => {
+        if (resolvedRef.current) {
+            resolvedRef.current.indeterminate = indeterminate;
+        }
+    }, [resolvedRef, indeterminate]);
+
+
+    return (
+        <>
+
+            {/** All */}
+            {checkboxSelection && row === -1 ? <input
+                type="checkbox"
+                ref={resolvedRef}
+                className={className || ''}
+                name={name}
+                value={`${row}`}
+                checked={allChecked}
+                onChange={handleChange}
+                {...attributes}
+            /> : null}
+            
+
+            {/** Per Row */}
+            {checkboxSelection && row != -1 ? <input
+                type="checkbox"
+                ref={resolvedRef}
+                className={className || ''}
+                name={name}
+                value={`${row}`}
+                data-row={row}
+                data-value={originData[row] ? JSON.stringify(originData[row]) : null}
+                checked={selectedItems.has(`${row}`)}
+                onChange={handleChange}
+                {...attributes}
+            /> : null}
+
+            
+        </>
+    );
+}
+);
+
+export default ToggleSelection;

package/lib/esm/SyntheticTable/table-utils/func.ts

@@ -0,0 +1,8 @@
+export function valRes(setData: any) {
+    const res: any[] = [];
+    const s = setData;
+    for (let it = s.values(), val = null; val = it.next().value;) {
+        res.push(val);
+    }
+    return res;
+}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.1.379",
+  "version": "4.1.401",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",