@coreui/react-pro 4.11.0-next.1 → 4.11.0

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0-next.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/accordion/index.d.ts

@@ -1,7 +1,6 @@
 import { CAccordion } from './CAccordion';
 import { CAccordionBody } from './CAccordionBody';
 import { CAccordionButton } from './CAccordionButton';
-import { CAccordionCollapse } from './CAccordionCollapse';
 import { CAccordionHeader } from './CAccordionHeader';
 import { CAccordionItem } from './CAccordionItem';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, };

package/dist/components/calendar/CCalendar.d.ts

@@ -83,13 +83,13 @@ export interface CCalendarProps {
     /**
      * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     selectAdjacementDays?: boolean;
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     showAdjacementDays?: boolean;
     /**

package/dist/components/dropdown/CDropdown.d.ts

@@ -64,6 +64,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * If you want to disable dynamic positioning set this property to `true`.
      */
     popper?: boolean;
+    /**
+     * Generates dropdown menu using createPortal.
+     *
+     * @since 4.8.0
+     */
+    portal?: boolean;
     /**
      * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
      */
@@ -76,6 +82,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 interface ContextProps extends CDropdownProps {
     dropdownToggleRef: RefObject<any> | undefined;
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    portal: boolean;
 }
 export declare const CDropdownContext: React.Context<ContextProps>;
 export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/multi-select/CMultiSelect.d.ts

@@ -5,7 +5,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     allowCreateOptions?: boolean;
     /**
@@ -19,7 +19,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     clearSearchOnSelect?: boolean;
     /**
@@ -29,7 +29,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     loading?: boolean;
     /**

package/dist/components/smart-table/CSmartTableHead.d.ts

@@ -18,6 +18,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
         external?: boolean;
     };
     selectedAll?: boolean | string;
+    showGroups?: boolean;
     sorterState?: SorterValue;
     sortingIcon?: ReactNode;
     sortingIconAscending?: ReactNode;

package/dist/components/smart-table/types.d.ts

@@ -3,7 +3,9 @@ import { CTableDataCellProps } from '../table/CTableDataCell';
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
 import { CTableRowProps } from '../table/CTableRow';
 export type Column = {
+    children?: Column[];
     filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
+    group?: string;
     key: string;
     label?: string;
     sorter?: boolean;
@@ -21,6 +23,16 @@ export type FooterItem = {
     label?: string;
     _props?: CTableDataCellProps;
 };
+export type Group = {
+    children?: Group[] | Column[];
+    colspan?: number;
+    deep?: number;
+    group?: string;
+    key: string;
+    label?: string;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+};
 export type Item = {
     [key: string]: number | string | any;
     _cellProps?: any;

package/dist/components/smart-table/utils.d.ts

@@ -1,10 +1,21 @@
-import type { Column, ColumnFilter, ColumnFilterValue, Item, Sorter, SorterValue, TableFilter } from './types';
+import type { Column, ColumnFilter, ColumnFilterValue, Group, Item, Sorter, SorterValue, TableFilter } from './types';
 export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
 export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
 export declare const getClickedColumnName: (target: HTMLTextAreaElement, columnNames: string[]) => string;
 export declare const getColumnKey: (column: Column | string) => string;
 export declare const getColumnLabel: (column: Column | string) => string;
 export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
+export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
+export declare const countColumns: (columns: Column[], counter?: number) => number;
+export declare const getColumnGroups: (columns: (string | Column)[] | undefined) => {
+    children?: Column[] | Group[] | undefined;
+    colspan?: number | undefined;
+    group?: string | undefined;
+    key: string;
+    label?: string | undefined;
+    _style?: any;
+    _props?: import("../table/CTableHeaderCell").CTableHeaderCellProps | undefined;
+}[][];
 export declare const getColumnNamesFromItems: (items: Item[]) => string[];
 export declare const getColumnSorterState: (key: string, sorterState: SorterValue | undefined) => string | number;
 export declare const getColumnValues: (items: Item[], key: string) => any[];

package/dist/index.es.js

@@ -2616,15 +2616,6 @@ CAccordionButton.propTypes = {
 };
 CAccordionButton.displayName = 'CAccordionButton';
 
-var CAccordionCollapse = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest$1(_a, ["children"]);
-    return (React__default$1.createElement(CCollapse, __assign$1({ className: "accordion-collapse" }, props, { ref: ref }), children));
-});
-CAccordionCollapse.propTypes = {
-    children: propTypesExports.node,
-};
-CAccordionCollapse.displayName = 'CAccordionCollapse';
-
 var CAccordionHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
     return (React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion-header', className) }, rest, { ref: ref }),
@@ -9947,11 +9938,12 @@ var PopperManagerWrapper = function (_a) {
 };
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
+    var _b;
+    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.popper, popper = _e === void 0 ? true : _e, _f = _a.portal, portal = _f === void 0 ? false : _f, _g = _a.variant, variant = _g === void 0 ? 'btn-group' : _g, _h = _a.component, component = _h === void 0 ? 'div' : _h, _j = _a.visible, visible = _j === void 0 ? false : _j, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
     var dropdownRef = useRef(null);
     var dropdownToggleRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _k = useState(visible), _visible = _k[0], setVisible = _k[1];
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -9965,6 +9957,7 @@ var CDropdown = forwardRef(function (_a, ref) {
         dropdownToggleRef: dropdownToggleRef,
         placement: placement,
         popper: popper,
+        portal: portal,
         variant: variant,
         visible: _visible,
         setVisible: setVisible,
@@ -9977,12 +9970,13 @@ var CDropdown = forwardRef(function (_a, ref) {
         !_visible && onHide && onHide();
     }, [_visible]);
     return (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
-                'dropdown-center': direction === 'center',
-                'dropup dropup-center': direction === 'dropup-center',
-                direction: direction && direction !== 'center' && direction !== 'dropup-center',
-                show: _visible,
-            }, className) }, rest, { ref: forkedRef }), children)))));
+        React__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, (_b = {
+                    'dropdown-center': direction === 'center',
+                    'dropup dropup-center': direction === 'dropup-center'
+                },
+                _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
+                _b.show = _visible,
+                _b), className) }, rest, { ref: forkedRef }), children)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -10009,14 +10003,27 @@ CDropdown.propTypes = {
     onShow: propTypesExports.func,
     placement: placementPropType,
     popper: propTypesExports.bool,
+    portal: propTypesExports.bool,
     variant: propTypesExports.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
     visible: propTypesExports.bool,
 };
 CDropdown.displayName = 'CDropdown';
 
+var alignmentClassNames = function (alignment) {
+    var classNames = [];
+    if (typeof alignment === 'object') {
+        Object.keys(alignment).map(function (key) {
+            classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
+        });
+    }
+    if (typeof alignment === 'string') {
+        classNames.push("dropdown-menu-".concat(alignment));
+    }
+    return classNames;
+};
 var CDropdownMenu = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, visible = _c.visible, setVisible = _c.setVisible;
+    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, portal = _c.portal, visible = _c.visible, setVisible = _c.setVisible;
     var dropdownMenuRef = useRef(null);
     useEffect(function () {
         visible && window.addEventListener('mouseup', handleMouseUp);
@@ -10065,29 +10072,18 @@ var CDropdownMenu = function (_a) {
     if (alignment === 'end') {
         _placement = 'bottom-end';
     }
-    var alignmentClassNames = function (alignment) {
-        var classNames = [];
-        if (typeof alignment === 'object') {
-            Object.keys(alignment).map(function (key) {
-                classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
-            });
-        }
-        if (typeof alignment === 'string') {
-            classNames.push("dropdown-menu-".concat(alignment));
-        }
-        return classNames;
-    };
-    var dropdownMenuComponent = function (style, ref) { return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
-            'dropdown-menu-dark': dark,
-            show: visible,
-        }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
-        ? React__default$1.Children.map(children, function (child, index) {
-            if (React__default$1.isValidElement(child)) {
-                return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
-            }
-            return;
-        })
-        : children)); };
+    var dropdownMenuComponent = function (style, ref) { return (React__default$1.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+        React__default$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
+                'dropdown-menu-dark': dark,
+                show: visible,
+            }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            ? React__default$1.Children.map(children, function (child, index) {
+                if (React__default$1.isValidElement(child)) {
+                    return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
+                }
+                return;
+            })
+            : children))); };
     return popper && visible ? (React__default$1.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
@@ -11914,11 +11910,9 @@ var COffcanvas = forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        if (_visible) {
-            if (!scroll) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.paddingRight = '0px';
-            }
+        if (_visible && !scroll) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = '0px';
             return;
         }
         if (!scroll) {
@@ -13850,12 +13844,104 @@ var getColumnLabel = function (column) {
             : pretifyName(column.key)
         : pretifyName(column);
 };
+// export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
+//   columns
+//     ? columns.map((column: Column | string) => {
+//         return typeof column === 'object' ? column.key : column
+//       })
+//     : getColumnNamesFromItems(items)
 var getColumnNames = function (columns, items) {
-    return columns
-        ? columns.map(function (column) {
-            return typeof column === 'object' ? column.key : column;
-        })
-        : getColumnNamesFromItems(items);
+    if (columns) {
+        var _columns = [];
+        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+            var column = columns_1[_i];
+            if (typeof column === 'object' && column.children) {
+                _columns.push.apply(_columns, getColumnNames(column.children, []));
+                continue;
+            }
+            typeof column === 'object' ? _columns.push(column.key) : _columns.push(column);
+        }
+        return _columns;
+    }
+    return getColumnNamesFromItems(items);
+};
+var getColumns = function (_columns) {
+    var columns = [];
+    for (var _i = 0, _columns_1 = _columns; _i < _columns_1.length; _i++) {
+        var column = _columns_1[_i];
+        if (typeof column === 'object' && column.group && column.children) {
+            columns.push.apply(columns, getColumns(column.children));
+            continue;
+        }
+        if (typeof column === 'object' && column.children) {
+            columns.push.apply(columns, getColumns(column.children));
+        }
+        columns.push(column);
+    }
+    return columns;
+};
+var countColumns = function (columns, counter) {
+    if (counter === void 0) { counter = 0; }
+    var _counter = counter;
+    for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {
+        var column = columns_2[_i];
+        if (!column.children) {
+            _counter++;
+        }
+        if (column.children) {
+            _counter = countColumns(column.children, _counter);
+        }
+    }
+    return _counter;
+};
+var getColumnGroups = function (columns) {
+    var groups = [];
+    var traverseColumns = function (column, deep, colSpan) {
+        if (deep === void 0) { deep = 0; }
+        var groups = [];
+        if (column.children) {
+            for (var _i = 0, _a = column.children; _i < _a.length; _i++) {
+                var _column = _a[_i];
+                if (!_column.group) ;
+                groups.push.apply(groups, traverseColumns(_column, deep + 1));
+            }
+        }
+        if (typeof column === 'object' && column.group) {
+            var children = column.children, group = column.group, rest = __rest$1(column, ["children", "group"]);
+            groups.push(__assign$1(__assign$1({ deep: deep, label: group }, (children && { colspan: countColumns(children) })), rest));
+        }
+        return groups;
+    };
+    if (columns) {
+        for (var _i = 0, columns_3 = columns; _i < columns_3.length; _i++) {
+            var column = columns_3[_i];
+            if (typeof column === 'object' && column.group) {
+                var objects = traverseColumns(column);
+                if (objects) {
+                    for (var _a = 0, objects_1 = objects; _a < objects_1.length; _a++) {
+                        var object = objects_1[_a];
+                        var deep = object.deep, rest = __rest$1(object, ["deep"]);
+                        if (deep === undefined) {
+                            continue;
+                        }
+                        for (var i = 0; i < deep; i++) {
+                            if (groups[i]) {
+                                continue;
+                            }
+                            groups.push([]);
+                        }
+                        if (groups[deep]) {
+                            groups[deep].push(rest);
+                        }
+                        else {
+                            groups.push([rest]);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return groups;
 };
 var getColumnNamesFromItems = function (items) {
     return Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
@@ -13937,7 +14023,7 @@ var CSmartTableBody = forwardRef(function (_a, ref) {
     var colspan = selectable ? columnNames.length + 1 : columnNames.length;
     return (React__default$1.createElement(CTableBody, __assign$1({}, (clickableRows && {
         style: { cursor: 'pointer' },
-    }), rest, { ref: ref }), currentItems.length ? (currentItems.map(function (item, trIndex) {
+    }), rest, { ref: ref }), currentItems.length > 0 ? (currentItems.map(function (item, trIndex) {
         return (React__default$1.createElement(React__default$1.Fragment, { key: trIndex },
             React__default$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), (clickableRows && { tabIndex: 0 }), { onClick: function (event) {
                     return onRowClick &&
@@ -13957,7 +14043,8 @@ var CSmartTableBody = forwardRef(function (_a, ref) {
                         scopedColumns[colName] &&
                         React__default$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
                             key: index,
-                        })) || (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName]))));
+                        })) ||
+                        (item[colName] && (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName])))));
                 })),
             scopedColumns && scopedColumns.details && (React__default$1.createElement(React__default$1.Fragment, null,
                 React__default$1.createElement(CTableRow, null,
@@ -13998,9 +14085,11 @@ CSmartTableCleaner.propTypes = {
 CSmartTableCleaner.displayName = 'CSmartTableCleaner';
 
 var CSmartTableHead = forwardRef(function (_a, ref) {
-    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, _c = _a.showGroups, showGroups = _c === void 0 ? true : _c, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
     var selectAllcheckboxRef = useRef(null);
-    var _c = useState(false), refresh = _c[0], setRefresh = _c[1];
+    var _d = useState(false), refresh = _d[0], setRefresh = _d[1];
+    var _columns = useMemo(function () { return getColumns(columns); }, [columns]);
+    var groups = useMemo(function () { return getColumnGroups(columns); }, [columns]);
     useEffect(function () {
         if (selectedAll === 'indeterminate') {
             if (selectAllcheckboxRef.current)
@@ -14037,27 +14126,33 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
         return;
     };
     return (React__default$1.createElement(Component, __assign$1({}, rest, { ref: ref }),
+        showGroups &&
+            groups &&
+            groups.length > 0 &&
+            groups.map(function (row, index) { return (React__default$1.createElement(CTableRow, { key: index },
+                selectable && React__default$1.createElement(CTableHeaderCell, null),
+                row.map(function (cell, index) { return (React__default$1.createElement(CTableHeaderCell, __assign$1({ colSpan: cell.colspan }, getTableHeaderCellProps(cell), { key: index }), cell.label)); }))); }),
         React__default$1.createElement(CTableRow, null,
             selectable && (React__default$1.createElement(CTableHeaderCell, null, selectAll && (React__default$1.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
-            columns.map(function (column, index) {
+            _columns.map(function (column, index) {
                 return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
                     React__default$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
                     columnSorter &&
-                        (typeof column !== 'object'
-                            ? true
-                            : typeof column.sorter === 'undefined'
+                        (typeof column === 'object'
+                            ? typeof column.sorter === 'undefined'
                                 ? true
-                                : column.sorter) &&
+                                : column.sorter
+                            : true) &&
                         columnSorterIcon(column)));
             })),
         columnFilter && (React__default$1.createElement(CTableRow, null,
             selectable && React__default$1.createElement(CTableHeaderCell, null),
-            columns.map(function (column, index) {
-                return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column !== 'object'
-                    ? true
-                    : typeof column.filter === 'undefined'
+            _columns.map(function (column, index) {
+                return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
+                    ? column.filter === undefined
                         ? true
-                        : column.filter) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
+                        : column.filter
+                    : true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
                     column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
                         return handleOnCustomFilterChange &&
                             handleOnCustomFilterChange(getColumnKey(column), value);
@@ -14106,7 +14201,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
     var _u = useState({}), columnFilterState = _u[0], setColumnFilterState = _u[1];
     var _v = useState(), selectedAll = _v[0], setSelectedAll = _v[1];
     var _w = useState({}), sorterState = _w[0], setSorterState = _w[1];
-    var _x = useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
+    var _x = useState(tableFilterValue !== null && tableFilterValue !== void 0 ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
     useEffect(function () {
         setActivePage(activePage);
     }, [activePage]);
@@ -14169,7 +14264,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 setSelectedAll(false);
                 return;
             }
-            if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+            if (_selected.length > 0 && _selected.length !== _itemsNumber) {
                 setSelectedAll('indeterminate');
             }
         }
@@ -14295,7 +14390,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 React__default$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
                     }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, columnNames: columnNames, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
-                typeof footer === 'boolean' && footer && (React__default$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll }))),
+                typeof footer === 'boolean' && footer && (React__default$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, showGroups: false }))),
                 Array.isArray(footer) && (React__default$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
                     React__default$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
             loading && (React__default$1.createElement(CElementCover, { boundaries: [
@@ -14860,5 +14955,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map