@coreui/react-pro 4.8.0-alpha.3 → 4.9.0-next.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.8.0-alpha.3.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.9.0-next.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/calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { CCalendar } from './CCalendar';
+export { CCalendar };

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

@@ -0,0 +1,23 @@
+export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
+export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
+export declare const createGroupsInArray: <T>(arr: T[], numberOfGroups: number) => T[][];
+export declare const getCurrentYear: () => number;
+export declare const getCurrentMonth: () => number;
+export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean) => Date | undefined;
+export declare const getMonthName: (month: number, locale: string) => string;
+export declare const getMonthsNames: (locale: string) => string[];
+export declare const getYears: (year: number) => number[];
+export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
+    date: Date;
+    month: string;
+}[][];
+export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
+export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean | undefined;
+export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isLastDayOfMonth: (date: Date) => boolean;
+export declare const isSameDateAs: (date: Date | null, date2: Date | null) => boolean;
+export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isToday: (date: Date) => boolean;
+export declare const isValidDate: (date: string) => number | false;

package/dist/components/date-picker/CDatePicker.d.ts

@@ -9,7 +9,7 @@ export interface CDatePickerProps extends Omit<CDateRangePickerProps, 'calendars
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
      * The name attribute for the input element is generated based on the `id` property:
-     * - {id}-date
+     * - \{id\}-date
      */
     id?: string;
     /**

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -31,8 +31,8 @@ export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'f
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
      * The name attributes for input elements are generated based on the `id` property:
-     * - {id}-start-date
-     * - {id}-end-date
+     * - \{id\}-start-date
+     * - \{id\}-end-date
      */
     id?: string;
     /**

package/dist/components/element-cover/CElementCover.d.ts

@@ -1,24 +1,20 @@
 import React, { HTMLAttributes } from 'react';
 interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * A string of all className you want applied to the base component. [docs]
+     * A string of all className you want applied to the base component.
      */
     className?: string;
     /**
      * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
      * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
-     * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
-     *
-     * @type {sides: string[], query: string}[]
+     * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function.
      */
     boundaries?: {
         sides: string[];
         query: string;
     }[];
     /**
-     * Opacity of the cover. [docs]
-     *
-     * @type number
+     * Opacity of the cover.
      */
     opacity?: number;
 }

package/dist/components/element-cover/index.d.ts

@@ -0,0 +1,2 @@
+import { CElementCover } from './CElementCover';
+export { CElementCover };

package/dist/components/form/CFormInput.d.ts

@@ -18,7 +18,7 @@ export interface CFormInputProps extends CFormControlWrapperProps, Omit<InputHTM
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
      */
     plainText?: boolean;
     /**

package/dist/components/form/CFormSwitch.d.ts

@@ -17,7 +17,7 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
      */
     label?: string | ReactNode;
     /**
-     * Size the component large or extra large. Works only with `switch` [docs]
+     * Size the component large or extra large. Works only with `switch`.
      */
     size?: 'lg' | 'xl';
     /**

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './collapse';
 export * from './date-picker';
 export * from './date-range-picker';
 export * from './dropdown';
+export * from './element-cover';
 export * from './footer';
 export * from './form';
 export * from './grid';
@@ -40,4 +41,5 @@ export * from './tabs';
 export * from './time-picker';
 export * from './toast';
 export * from './tooltip';
+export * from './virtual-scroller';
 export * from './widgets';

package/dist/components/nav/CNavGroup.d.ts

@@ -2,19 +2,19 @@ import React, { ReactNode } from 'react';
 export interface CNavGroupProps {
     children?: ReactNode;
     /**
-     * A string of all className you want applied to the component. [docs]
+     * A string of all className you want applied to the component.
      */
     className?: string;
     /**
-     * Make nav group more compact by cutting all `padding` in half. [docs]
+     * Make nav group more compact by cutting all `padding` in half.
      */
     compact?: boolean;
     /**
-     * Set group toggler label. [docs]
+     * Set group toggler label.
      */
     toggler?: string | ReactNode;
     /**
-     * Show nav group items. [docs]
+     * Show nav group items.
      */
     visible?: boolean;
     /**

package/dist/components/offcanvas/COffcanvas.d.ts

@@ -3,13 +3,13 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Apply a backdrop on body while offcanvas is open.
      */
-    backdrop?: boolean;
+    backdrop?: boolean | 'static';
     /**
      * A string of all className you want applied to the base component.
      */
     className?: string;
     /**
-     * Closes the offcanvas when escape key is pressed [docs]
+     * Closes the offcanvas when escape key is pressed.
      */
     keyboard?: boolean;
     /**
@@ -28,6 +28,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
      * Generates modal using createPortal.
      */
     portal?: boolean;
+    /**
+     * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+     *
+     * @since 4.6.0
+     */
+    responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     /**
      * Allow body scrolling while offcanvas is open
      */

package/dist/components/sidebar/CSidebar.d.ts

@@ -5,13 +5,13 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Sets if the color of text should be colored for a light or dark dark background. [docs]
+     * Sets if the color of text should be colored for a light or dark dark background.
      *
      * @type 'dark' | 'light'
      */
     colorScheme?: 'dark' | 'light';
     /**
-     * Make sidebar narrow. [docs]
+     * Make sidebar narrow.
      */
     narrow?: boolean;
     /**
@@ -31,12 +31,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
      */
     overlaid?: boolean;
     /**
-     * Components placement, there’s no default placement. [docs]
+     * Components placement, there’s no default placement.
      * @type 'start' | 'end'
      */
     placement?: 'start' | 'end';
     /**
-     * Place sidebar in non-static positions. [docs]
+     * Place sidebar in non-static positions.
      */
     position?: 'fixed' | 'sticky';
     /**

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

@@ -1,15 +1,16 @@
 import React, { MouseEvent, ReactNode } from 'react';
 import { CTableBodyProps } from '../table/CTableBody';
-import { ItemInternal, ScopedColumns } from './CSmartTableInterface';
+import type { Item, ScopedColumns } from './types';
 export interface CSmartTableBodyProps extends CTableBodyProps {
     clickableRows?: boolean;
-    currentItems: ItemInternal[];
+    columnNames: string[];
+    currentItems: Item[];
     firstItemOnActivePageIndex: number;
     noItemsLabel?: string | ReactNode;
-    onRowChecked?: (id: number, value: boolean) => void;
-    onRowClick?: (item: ItemInternal, index: number, columnName: string, event: MouseEvent | boolean) => void;
-    rawColumnNames: string[];
+    onRowChecked?: (item: Item, value: boolean) => void;
+    onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void;
     scopedColumns?: ScopedColumns;
     selectable?: boolean;
+    selected?: Item[];
 }
 export declare const CSmartTableBody: React.ForwardRefExoticComponent<CSmartTableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;

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

@@ -1,5 +1,5 @@
 import React, { ElementType, ReactNode } from 'react';
-import { ColumnFilter, ColumnFilterValue, Column, ItemInternal, Sorter, SorterValue } from './CSmartTableInterface';
+import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types';
 import { CTableHeadProps } from '../table/CTableHead';
 export interface CSmartTableHeadProps extends CTableHeadProps {
     columnFilter?: boolean | ColumnFilter;
@@ -12,9 +12,12 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
     handleFilterOnInput?: (key: string, value: string) => void;
     handleSelectAllChecked?: () => void;
     handleSort?: (key: string, index: number) => void;
-    items: ItemInternal[];
+    items: Item[];
     selectable?: boolean;
-    selectAll?: boolean | string;
+    selectAll?: boolean | {
+        external?: boolean;
+    };
+    selectedAll?: boolean | string;
     sorterState?: SorterValue;
     sortingIcon?: ReactNode;
     sortingIconAscending?: ReactNode;

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

@@ -3,66 +3,11 @@ import { CSmartPaginationProps } from '../smart-pagination/CSmartPagination';
 import { CTableProps } from '../table/CTable';
 import { CTableBodyProps } from '../table/CTableBody';
 import { CTableFootProps } from '../table/CTableFoot';
-import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
-import { CTableRowProps } from '../table/CTableRow';
 import { CTableHeadProps } from '../table/CTableHead';
-export interface Column {
-    filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
-    label?: string;
-    key: string;
-    sorter?: boolean;
-    _style?: any;
-    _props?: CTableHeaderCellProps;
-}
-export interface ColumnFilter {
-    lazy?: boolean;
-    external?: boolean;
-}
-export interface ColumnFilterValue {
-    [key: string]: any;
-}
-export interface Item {
-    [key: string]: number | string | any;
-    _cellProps?: any;
-    _props?: CTableRowProps;
-    _selected?: boolean;
-}
-export interface ItemInternal extends Item {
-    _id: number;
-}
-export interface ItemsPerPageSelect {
-    external?: boolean;
-    label?: string;
-    values?: Array<number>;
-}
-export interface Pagination {
-    external?: boolean;
-}
-export interface Sorter {
-    resetable?: boolean;
-    external?: boolean;
-}
-export interface ScopedColumns {
-    [key: string]: any;
-    details?: (a: Item, b: number) => ReactNode;
-}
-export interface SorterValue {
-    column?: string;
-    state?: number | string;
-}
-export interface TableFilter {
-    lazy?: boolean;
-    external?: boolean;
-}
-export interface NoItemsView {
-    noResults?: string;
-    noItems?: string;
-}
+import type { Column, ColumnFilter, ColumnFilterValue, FooterItem, Item, ItemsPerPageSelect, Pagination, Sorter, ScopedColumns, SorterValue, TableFilter } from './types';
 export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
-     *
-     * @default 1
      */
     activePage?: number;
     /**
@@ -72,8 +17,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     cleaner?: boolean;
     /**
      * Style table items as clickable.
-     *
-     * @type boolean
      */
     clickableRows?: boolean;
     /**
@@ -81,13 +24,11 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
-     *
-     * @type boolean | ColumnFilter
      */
     columnFilter?: boolean | ColumnFilter;
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
-     * { user: 'John', age: 12 }
+     * `{ user: 'John', age: 12 }`
      */
     columnFilterValue?: ColumnFilterValue;
     /**
@@ -110,46 +51,49 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic sorting inside component.
      * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
-     *
-     * @type boolean | Sorter
      */
     columnSorter?: boolean | Sorter;
     /**
-     * Displays table footer, which mirrors table header. (without column filter).
+     * ReactNode for passing custom CElementCover content.
+     *
+     * @since 4.9.0
      */
-    footer?: boolean;
+    elementCover?: ReactNode;
     /**
-     * Set to false to remove table header.
+     * If `true` Displays table footer, which mirrors table header. (without column filter).
+     * Or Array of objects or strings, where each element represents one cell in the table footer.
      *
-     * @default true
+     * Example items:
+     * `['FooterCell', 'FooterCell', 'FooterCell']`
+     * or
+     * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
+     */
+    footer?: boolean | (FooterItem | string)[];
+    /**
+     * Set to false to remove table header.
      */
     header?: 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 '_classes' key and to single cell by '_cellClasses'.
+     * 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'}}}
-     * For column generation description watch columns prop.
-     *
-     * @type Array<string>
+     * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
      */
     items?: Item[];
+    /**
+     * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+     */
+    itemsNumber?: number;
     /**
      * Number of items per site, when pagination is enabled.
-     *
-     * @default 10
      */
     itemsPerPage?: number;
     /**
      * Label for items per page selector.
-     *
-     * @default 'Items per page:'
      */
     itemsPerPageLabel?: string;
     /**
      * Items per page selector options.
-     *
-     * @default [5, 10, 20, 50]
      */
     itemsPerPageOptions?: number[];
     /**
@@ -165,7 +109,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean;
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
-     * @default 'No items found'
      */
     noItemsLabel?: string | ReactNode;
     /**
@@ -188,6 +131,10 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * Row click callback.
      */
     onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void;
+    /**
+     * Select all callback.
+     */
+    onSelectAll?: () => void;
     /**
      * Selected items change callback.
      */
@@ -205,15 +152,11 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      */
     pagination?: boolean | Pagination;
     /**
-     * Properties to `CSmartPagination` component.
-     *
-     * @link https://coreui.io/react/docs/components/smart-pagination#csmartpagination
+     * Properties to `CSmartPagination` component - https://coreui.io/react/docs/components/smart-pagination#csmartpagination
      */
     paginationProps?: CSmartPaginationProps;
     /**
      * Scoped columns.
-     *
-     * @type scopedColumns
      */
     scopedColumns?: ScopedColumns;
     /**
@@ -221,39 +164,42 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      */
     selectable?: boolean;
     /**
-     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
+     * Enables select all checkbox displayed in the header of the table.
+     *
+     * Can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic selection inside the component.
+     */
+    selectAll?: boolean | {
+        external?: boolean;
+    };
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
      *
-     * @type SorterValue
+     * Example item: `{ name: 'John' , age: 12 }`
+     */
+    selected?: Item[];
+    /**
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
      */
     sorterValue?: SorterValue;
     /**
      * Sorter icon when items are unsorted.
-     *
-     * @default '<CIcon width="18" content={cilArrowTop} />
      */
     sortingIcon?: ReactNode;
     /**
      * Sorter icon when items are sorted ascending.
-     *
-     * @default '<CIcon width="18" content={cilArrowTop} />
      */
     sortingIconAscending?: ReactNode;
     /**
      * Sorter icon when items are sorted descending.
-     *
-     * @default '<CIcon width="18" content={cilArrowBottom} />'
      */
     sortingIconDescending?: ReactNode;
     /**
-     * Properties to `CTableBody` component.
-     *
-     * @link https://coreui.io/react/docs/components/table/#ctablebody
+     * Properties to `CTableBody` component - https://coreui.io/react/docs/components/table/#ctablebody
      */
     tableBodyProps?: CTableBodyProps;
     /**
-     * Properties to `CTableFoot` component.
-     *
-     * @link https://coreui.io/react/docs/components/table/#ctablefoot
+     * Properties to `CTableFoot` component - https://coreui.io/react/docs/components/table/#ctablefoot
      */
     tableFootProps?: CTableFootProps;
     /**
@@ -266,31 +212,22 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     tableFilter?: boolean | TableFilter;
     /**
      * The element represents a caption for a component.
-     *
-     * @default 'Filter:'
      */
     tableFilterLabel?: string;
     /**
      * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'type string...'
      */
     tableFilterPlaceholder?: string;
     /**
      * Value of table filter.
-     *
      */
     tableFilterValue?: string;
     /**
-     * Properties to `CTableHead` component.
-     *
-     * @link https://coreui.io/react/docs/components/table/#ctablehead
+     * Properties to `CTableHead` component - https://coreui.io/react/docs/components/table/#ctablehead
      */
     tableHeadProps?: CTableHeadProps;
     /**
-     * Properties to `CTable` component.
-     *
-     * @link https://coreui.io/react/docs/components/table/#ctable
+     * Properties to `CTable` component - https://coreui.io/react/docs/components/table/#ctable
      */
     tableProps?: CTableProps;
 }

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

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { CTableDataCellProps } from '../table/CTableDataCell';
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
+import { CTableRowProps } from '../table/CTableRow';
+export type Column = {
+    filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
+    label?: string;
+    key: string;
+    sorter?: boolean;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+};
+export type ColumnFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};
+export type ColumnFilterValue = {
+    [key: string]: any;
+};
+export type FooterItem = {
+    label?: string;
+    _props?: CTableDataCellProps;
+};
+export type Item = {
+    [key: string]: number | string | any;
+    _cellProps?: any;
+    _props?: CTableRowProps;
+    _selected?: boolean;
+};
+export type ItemsPerPageSelect = {
+    external?: boolean;
+    label?: string;
+    values?: Array<number>;
+};
+export type Pagination = {
+    external?: boolean;
+};
+export type Sorter = {
+    resetable?: boolean;
+    external?: boolean;
+};
+export type ScopedColumns = {
+    [key: string]: any;
+    details?: (a: Item, b: number) => ReactNode;
+};
+export type SorterValue = {
+    column?: string;
+    state?: number | string;
+};
+export type TableFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};

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

@@ -0,0 +1,16 @@
+import type { Column, ColumnFilter, ColumnFilterValue, 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 getColumnNamesFromItems: (items: Item[]) => string[];
+export declare const getColumnSorterState: (key: string, sorterState: SorterValue | undefined) => string | number;
+export declare const getColumnValues: (items: Item[], key: string) => any[];
+export declare const getTableDataCellProps: (item: Item, colName: string) => any;
+export declare const getTableHeaderCellProps: (column: Column | string) => import("../table/CTableHeaderCell").CTableHeaderCellProps;
+export declare const getTableHeaderCellStyles: (column: Column | string, columnSorter: boolean | Sorter | undefined) => any;
+export declare const isSortable: (i: number, columns: (string | Column)[] | undefined, columnSorter: Sorter | boolean | undefined, itemsDataColumns: string[], columnNames: string[]) => boolean | undefined;
+export declare const pretifyName: (name: string) => string;
+export declare const sortItems: (columnSorter: boolean | Sorter | undefined, items: Item[], itemsDataColumns: string[], sorterState: SorterValue) => Item[];

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

@@ -46,7 +46,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
      * 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' },
+     * - _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
@@ -62,13 +62,13 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
      * Array of objects or strings, where each element represents one cell in the table footer.
      *
      * Example items:
-     * ['FooterCell', 'FooterCell', 'FooterCell']
+     * `['FooterCell', 'FooterCell', 'FooterCell']`
      * or
-     * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+     * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
      *
      * @since 4.3.0
      */
-    footer?: FooterItem[];
+    footer?: (FooterItem | string)[];
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
@@ -77,7 +77,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
      * 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'}}}
+     * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
      *
      * @since 4.3.0
      */