@coreui/react 4.2.3 → 4.3.0

package/dist/components/table/CTable.d.ts

@@ -1,5 +1,10 @@
 import React, { TableHTMLAttributes } from 'react';
 import { Colors } from '../Types';
+import { CTableHeadProps } from './CTableHead';
+import { CTableHeaderCellProps } from './CTableHeaderCell';
+import { CTableDataCellProps } from './CTableDataCell';
+import { CTableRowProps } from './CTableRow';
+import { CTableFootProps } from './CTableFoot';
 export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
     /**
      * Set the vertical aligment.
@@ -20,23 +25,63 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
      */
     borderless?: boolean;
     /**
-     * Put the `<caption>` on the top of the table.
+     * Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption.
      */
-    caption?: 'top';
+    caption?: 'top' | string;
+    /**
+     * Set the text of the table caption and the caption on the top of the table.
+     *
+     * @since 4.3.0
+     */
+    captionTop?: string;
     /**
      * A string of all className you want applied to the component.
      */
     className?: string;
+    /**
+     * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+     *
+     * In columns prop each array item represents one column. Item might be specified in two ways:
+     * String: each item define column name equal to item value.
+     * Object: item is object with following keys available as column configuration:
+     * - key (required)(String) - define column name equal to item key.
+     * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+     * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+     * - _style (Object) - adds styles to the column header (useful for defining widths)
+     *
+     * @since 4.3.0
+     */
+    columns?: (string | Column)[];
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
      * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
      */
     color?: Colors;
+    /**
+     * Array of objects or strings, where each element represents one cell in the table footer.
+     *
+     * Example items:
+     * ['FooterCell', 'FooterCell', 'FooterCell']
+     * or
+     * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+     *
+     * @since 4.3.0
+     */
+    footer?: FooterItem[];
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
     hover?: boolean;
+    /**
+     * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
+     *
+     * Example item:
+     * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+     *
+     * @since 4.3.0
+     */
+    items?: Item[];
     /**
      * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
      */
@@ -49,5 +94,39 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
      * Add zebra-striping to any table row within the `<CTableBody>`.
      */
     striped?: boolean;
+    /**
+     * Add zebra-striping to any table column.
+     *
+     * @since 4.3.0
+     */
+    stripedColumns?: boolean;
+    /**
+     * Properties that will be passed to the table footer component.
+     *
+     * @link https://coreui.io/react/docs/components/table/#ctablefoot
+     * @since 4.3.0
+     */
+    tableFootProps?: CTableFootProps;
+    /**
+     * Properties that will be passed to the table head component.
+     *
+     * @link https://coreui.io/react/docs/components/table/#ctablehead
+     * @since 4.3.0
+     */
+    tableHeadProps?: CTableHeadProps;
+}
+export interface Column {
+    label?: string;
+    key: string;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+}
+export interface Item {
+    [key: string]: number | string | any;
+    _props?: CTableRowProps;
+}
+export interface FooterItem {
+    label?: string;
+    _props?: CTableDataCellProps;
 }
 export declare const CTable: React.ForwardRefExoticComponent<CTableProps & React.RefAttributes<HTMLTableElement>>;

package/dist/components/table/CTableDataCell.d.ts

@@ -1,6 +1,6 @@
-import React, { TdHTMLAttributes } from 'react';
+import React, { TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { Colors } from '../Types';
-export interface CTableDataCellProps extends Omit<TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+export interface CTableDataCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>, Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
     /**
      * Highlight a table row or cell.
      */
@@ -20,4 +20,4 @@ export interface CTableDataCellProps extends Omit<TdHTMLAttributes<HTMLTableData
      */
     color?: Colors;
 }
-export declare const CTableDataCell: React.ForwardRefExoticComponent<CTableDataCellProps & React.RefAttributes<HTMLTableDataCellElement>>;
+export declare const CTableDataCell: React.ForwardRefExoticComponent<CTableDataCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/CTableHeaderCell.d.ts

@@ -1,6 +1,6 @@
 import React, { ThHTMLAttributes } from 'react';
 import { Colors } from '../Types';
-export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * A string of all className you want applied to the component.
      */
@@ -12,4 +12,4 @@ export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderC
      */
     color?: Colors;
 }
-export declare const CTableHeaderCell: React.ForwardRefExoticComponent<CTableHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
+export declare const CTableHeaderCell: React.ForwardRefExoticComponent<CTableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/index.es.js

@@ -7917,6 +7917,9 @@ var CPopover = function (_a) {
         ],
         placement: placement,
     }), styles = _j.styles, attributes = _j.attributes;
+    useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
     var getTransitionClass = function (state) {
         return state === 'entering'
             ? 'fade'
@@ -8133,65 +8136,50 @@ CSpinner.propTypes = {
 };
 CSpinner.displayName = 'CSpinner';
 
-var CTable = forwardRef(function (_a, ref) {
+var CTableHead = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, className = _a.className, color = _a.color, hover = _a.hover, responsive = _a.responsive, small = _a.small, striped = _a.striped, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "className", "color", "hover", "responsive", "small", "striped"]);
-    var _className = classNames('table', (_b = {},
-        _b["align-".concat(align)] = align,
-        _b["caption-".concat(caption)] = caption,
-        _b["border-".concat(borderColor)] = borderColor,
-        _b['table-bordered'] = bordered,
-        _b['table-borderless'] = borderless,
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
-        _b['table-hover'] = hover,
-        _b['table-sm'] = small,
-        _b['table-striped'] = striped,
         _b), className);
-    return responsive ? (React__default.createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
-        React__default.createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children))) : (React__default.createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default.createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTable.propTypes = {
-    align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
-    borderColor: propTypes.exports.string,
-    bordered: propTypes.exports.bool,
-    borderless: propTypes.exports.bool,
-    caption: propTypes.exports.oneOf(['top']),
+CTableHead.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
-    hover: propTypes.exports.bool,
-    responsive: propTypes.exports.oneOfType([
-        propTypes.exports.bool,
-        propTypes.exports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
-    ]),
-    small: propTypes.exports.bool,
-    striped: propTypes.exports.bool,
 };
-CTable.displayName = 'CTable';
+CTableHead.displayName = 'CTableHead';
 
-var CTableBody = forwardRef(function (_a, ref) {
+var CTableHeaderCell = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default.createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default.createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableBody.propTypes = {
+CTableHeaderCell.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableBody.displayName = 'CTableBody';
+CTableHeaderCell.displayName = 'CTableHeaderCell';
 
-var CTableCaption = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement("caption", __assign({}, props, { ref: ref }), children));
+var CTableBody = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var _className = classNames((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React__default.createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableCaption.propTypes = {
+CTableBody.propTypes = {
     children: propTypes.exports.node,
+    className: propTypes.exports.string,
+    color: colorPropType,
 };
-CTableCaption.displayName = 'CTableCaption';
+CTableBody.displayName = 'CTableBody';
 
 var CTableDataCell = forwardRef(function (_a, ref) {
     var _b;
@@ -8201,7 +8189,8 @@ var CTableDataCell = forwardRef(function (_a, ref) {
         _b['table-active'] = active,
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default.createElement("td", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    var Component = rest.scope ? 'th' : 'td';
+    return (React__default.createElement(Component, __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
 CTableDataCell.propTypes = {
     active: propTypes.exports.bool,
@@ -8212,69 +8201,126 @@ CTableDataCell.propTypes = {
 };
 CTableDataCell.displayName = 'CTableDataCell';
 
-var CTableFoot = forwardRef(function (_a, ref) {
+var CTableRow = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames((_b = {},
+        _b["align-".concat(align)] = align,
+        _b['table-active'] = active,
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default.createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default.createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableFoot.propTypes = {
+CTableRow.propTypes = {
+    active: propTypes.exports.bool,
+    align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableFoot.displayName = 'CTableFoot';
+CTableRow.displayName = 'CTableRow';
 
-var CTableHead = forwardRef(function (_a, ref) {
+var CTableFoot = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default.createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default.createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableHead.propTypes = {
+CTableFoot.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableHead.displayName = 'CTableHead';
+CTableFoot.displayName = 'CTableFoot';
 
-var CTableHeaderCell = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default.createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+var CTableCaption = forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement("caption", __assign({}, props, { ref: ref }), children));
 });
-CTableHeaderCell.propTypes = {
+CTableCaption.propTypes = {
     children: propTypes.exports.node,
-    className: propTypes.exports.string,
-    color: colorPropType,
 };
-CTableHeaderCell.displayName = 'CTableHeaderCell';
+CTableCaption.displayName = 'CTableCaption';
 
-var CTableRow = forwardRef(function (_a, ref) {
+var CTable = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames((_b = {},
+    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, _c = _a.items, items = _c === void 0 ? [] : _c, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
+    var _className = classNames('table', (_b = {},
         _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
+        _b["border-".concat(borderColor)] = borderColor,
+        _b["caption-top"] = captionTop || caption === 'top',
+        _b['table-bordered'] = bordered,
+        _b['table-borderless'] = borderless,
         _b["table-".concat(color)] = color,
+        _b['table-hover'] = hover,
+        _b['table-sm'] = small,
+        _b['table-striped'] = striped,
+        _b['table-striped-columns'] = stripedColumns,
         _b), className);
-    return (React__default.createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    var rawColumnNames = columns
+        ? columns.map(function (column) {
+            if (typeof column === 'object')
+                return column.key;
+            else
+                return column;
+        })
+        : Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
+    var pretifyName = function (name) {
+        return name
+            .replace(/[-_.]/g, ' ')
+            .replace(/ +/g, ' ')
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')
+            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+            .join(' ');
+    };
+    var label = function (column) {
+        return typeof column === 'object'
+            ? column.label !== undefined
+                ? column.label
+                : pretifyName(column.key)
+            : pretifyName(column);
+    };
+    var Table = function () { return (React__default.createElement("table", __assign({ className: _className }, rest, { ref: ref }),
+        ((caption && caption !== 'top') || captionTop) && (React__default.createElement(CTableCaption, null, caption || captionTop)),
+        columns && (React__default.createElement(CTableHead, __assign({}, tableHeadProps),
+            React__default.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), label(column))); })))),
+        items && (React__default.createElement(CTableBody, null, items.map(function (item, index) { return (React__default.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
+            return item[colName] ? (React__default.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+        }))); }))),
+        children,
+        footer && (React__default.createElement(CTableFoot, __assign({}, tableFootProps),
+            React__default.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default.createElement(CTableDataCell, __assign({}, (item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))); };
+    return responsive ? (React__default.createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
+        React__default.createElement(Table, null))) : (React__default.createElement(Table, null));
 });
-CTableRow.propTypes = {
-    active: propTypes.exports.bool,
+CTable.propTypes = {
     align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
+    borderColor: propTypes.exports.string,
+    bordered: propTypes.exports.bool,
+    borderless: propTypes.exports.bool,
+    caption: propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.oneOf(['top'])]),
+    captionTop: propTypes.exports.string,
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
+    columns: propTypes.exports.array,
+    footer: propTypes.exports.array,
+    hover: propTypes.exports.bool,
+    items: propTypes.exports.array,
+    responsive: propTypes.exports.oneOfType([
+        propTypes.exports.bool,
+        propTypes.exports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+    small: propTypes.exports.bool,
+    striped: propTypes.exports.bool,
+    stripedColumns: propTypes.exports.bool,
+    tableFootProps: propTypes.exports.shape(__assign({}, CTableFoot.propTypes)),
+    tableHeadProps: propTypes.exports.shape(__assign({}, CTableHead.propTypes)),
 };
-CTableRow.displayName = 'CTableRow';
+CTable.displayName = 'CTable';
 
 var CTabContent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);