@coreui/react-pro 4.8.0-alpha.3 → 4.9.0-next.0

package/src/components/smart-table/CSmartTable.tsx

@@ -1,28 +1,31 @@
 import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { cilArrowBottom, cilArrowTop, cilSwapVertical } from '@coreui/icons-pro'
+import { cilArrowBottom, cilArrowTop, cilSwapVertical } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
 
-import {
-  ColumnFilterValue,
-  CSmartTableProps,
-  Item,
-  ItemInternal,
-  SorterValue,
-} from './CSmartTableInterface'
-
-import { CElementCover } from '../element-cover/CElementCover'
-import { CSmartPagination } from '../smart-pagination/CSmartPagination'
-import { CTable } from '../table/CTable'
-import { CTableFoot } from '../table/CTableFoot'
+import { CElementCover } from '../element-cover'
+import { CFormInput, CFormLabel, CFormSelect } from '../form'
+import { CSmartPagination } from '../smart-pagination'
+import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table'
+
+import { CSmartTableProps } from './CSmartTableInterface'
+import type { ColumnFilterValue, FooterItem, Item, SorterValue } from './types'
 
 import { CSmartTableBody } from './CSmartTableBody'
 import { CSmartTableCleaner } from './CSmartTableCleaner'
-import { CSmartTableFilter } from './CSmartTableFilter'
 import { CSmartTableHead } from './CSmartTableHead'
-import { CSmartTableItemsPerPageSelector } from './CSmartTableItemsPerPageSelector'
 
-import CIcon from '@coreui/icons-react'
+import { isObjectInArray } from '../../utils'
+
+import {
+  filterColumns,
+  filterTable,
+  getColumnNames,
+  getColumnNamesFromItems,
+  isSortable,
+  sortItems,
+} from './utils'
 
 export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
   (
@@ -34,9 +37,11 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       columnFilterValue, // TODO: consider to use only columnFilter prop
       columns,
       columnSorter,
+      elementCover,
       footer,
       header = true,
       items,
+      itemsNumber,
       itemsPerPage = 10,
       itemsPerPageLabel = 'Items per page:',
       itemsPerPageOptions = [5, 10, 20, 50],
@@ -48,13 +53,16 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       onFilteredItemsChange,
       onItemsPerPageChange,
       onRowClick,
+      onSelectAll,
       onSelectedItemsChange,
       onSorterChange,
       onTableFilterChange,
       pagination,
       paginationProps,
       scopedColumns,
+      selected,
       selectable,
+      selectAll = true,
       sorterValue,
       sortingIcon = <CIcon width={18} icon={cilSwapVertical} key="csv" />,
       sortingIconAscending = <CIcon width={18} icon={cilArrowTop} key="cat" />,
@@ -71,12 +79,12 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     },
     ref,
   ) => {
-    // instance data
     const mountedRef = useRef(false)
-
-    const [_activePage, setActivePage] = useState<number>(activePage)
-    const [_items, setItems] = useState<ItemInternal[]>([])
+    const [_activePage, setActivePage] = useState(activePage)
+    const [_items, setItems] = useState<Item[]>([])
+    const [_itemsNumber, setItemsNumber] = useState(itemsNumber)
     const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
+    const [_selected, setSelected] = useState<Item[]>([])
     const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>({})
     const [selectedAll, setSelectedAll] = useState<boolean | string>()
     const [sorterState, setSorterState] = useState<SorterValue>({})
@@ -88,266 +96,225 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       setActivePage(activePage)
     }, [activePage])
 
-    // watch
-    useMemo(() => {
+    useEffect(() => {
       if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
         setActivePage(1)
       }
 
-      // Create the internal array of items
-      Array.isArray(items) &&
-        setItems(
-          items?.map((item: Item, index: number) => {
-            return { ...item, _id: index }
-          }),
-        )
+      items &&
+        items.forEach((item: Item) => {
+          if (item._selected) {
+            const _item = { ...item }
+            delete _item['_cellProps']
+            delete _item['_props']
+            delete _item['_selected']
+            setSelected([..._selected, _item])
+          }
+        })
+
+      if (Array.isArray(items)) {
+        setItems(items)
+        setItemsNumber(itemsNumber || items.length)
+      }
     }, [JSON.stringify(items)])
 
-    useMemo(() => {
+    useEffect(() => {
+      Array.isArray(selected) && setSelected(selected)
+    }, [JSON.stringify(selected)])
+
+    useEffect(() => {
+      itemsNumber && setItemsNumber(itemsNumber)
+    }, [itemsNumber])
+
+    useEffect(() => {
       columnFilterValue && setColumnFilterState(columnFilterValue)
     }, [JSON.stringify(columnFilterValue)])
 
-    useMemo(() => {
+    useEffect(() => {
       setSorterState({ ...sorterValue })
     }, [JSON.stringify(sorterValue)])
 
-    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
-
-    // functions
-
-    const isSortable = (i: number): boolean | undefined => {
-      const isDataColumn = itemsDataColumns.includes(rawColumnNames[i])
-      let column
-      if (columns) column = columns[i]
-      return (
-        columnSorter &&
-        (!columns ||
-          typeof column !== 'object' ||
-          (typeof column === 'object' &&
-            (typeof column.sorter === 'undefined' || column.sorter))) &&
-        isDataColumn
-      )
-    }
-
-    const sorterChange = (column: string, index: number): void => {
-      if (!isSortable(index)) {
-        return
-      }
-      //if column changed or sort was descending change asc to true
-      const state = sorterState ? sorterState : { column: '', state: '' }
-
-      if (state.column === column) {
-        if (state.state === 0) {
-          state.state = 'asc'
-        } else if (state.state === 'asc') {
-          state.state = 'desc'
-        } else {
-          if (typeof columnSorter === 'object' && !columnSorter.resetable) {
-            state.state = 'asc'
-          } else {
-            state.state = 0
-          }
-        }
-      } else {
-        state.column = column
-        state.state = 'asc'
-      }
-      setSorterState({ ...state })
-    }
+    useEffect(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
 
-    const itemsPerPageChange = (event: ChangeEvent<HTMLSelectElement>): void => {
-      if (
-        typeof itemsPerPageSelect !== 'object' ||
-        (typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external)
-      )
-        setItemsPerPage(Number((event.target as HTMLSelectElement).value))
-    }
+    useEffect(() => {
+      mountedRef.current && onActivePageChange && onActivePageChange(_activePage)
+    }, [_activePage])
 
-    const columnFilterChange = (colName: string, value: any, type?: string): void => {
-      const isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
-      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
-        return
-      }
-      const newState = { ...columnFilterState, [`${colName}`]: value }
-      setActivePage(1)
-      setColumnFilterState(newState)
-    }
+    useEffect(() => {
+      mountedRef.current && onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage)
+      itemsPerPage !== _itemsPerPage && setActivePage(1) // TODO: set proper page after _itemsPerPage update
+    }, [_itemsPerPage])
 
-    const tableFilterChange = (value: string, type: string): void => {
-      const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
-      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
-        return
-      }
-      setActivePage(1)
-      setTableFilterState(value)
-    }
+    useEffect(() => {
+      mountedRef.current && sorterState && onSorterChange && onSorterChange(sorterState)
+    }, [JSON.stringify(sorterState)])
 
-    const clean = (): void => {
-      setTableFilterState('')
-      setColumnFilterState({})
-      setSorterState({})
-    }
+    useEffect(() => {
+      mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState)
+    }, [columnFilterState])
 
-    // computed
+    useEffect(() => {
+      mountedRef.current && onTableFilterChange && onTableFilterChange(tableFilterState)
+    }, [tableFilterState])
 
-    const genCols = Object.keys(_items[0] || {}).filter((el) => el.charAt(0) !== '_')
-    const rawColumnNames = columns
-      ? columns.map((column: any) => {
-          if (typeof column === 'object') return column.key
-          else return column
-        })
-      : genCols //! || el
-    const itemsDataColumns = rawColumnNames.filter((name) => genCols.includes(name))
-
-    // variables
-    const filteredColumns: ItemInternal[] = useMemo(() => {
-      let items = _items
-      if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
-        return items
-      }
-      Object.entries(columnFilterState).forEach(([key, value]) => {
-        if (value instanceof Function) {
-          items = items.filter((item) => value(item[key]))
+    useEffect(() => {
+      if (selectable) {
+        onSelectedItemsChange && onSelectedItemsChange(_selected)
+        if (_selected.length === _itemsNumber) {
+          setSelectedAll(true)
           return
         }
 
-        const columnFilter = String(value).toLowerCase()
-        if (columnFilter && itemsDataColumns.includes(key)) {
-          items = items.filter((item) => {
-            return String(item[key]).toLowerCase().includes(columnFilter)
-          })
+        if (_selected.length === 0) {
+          setSelectedAll(false)
+          return
         }
-      })
-      return items
-    }, [columnFilterState, JSON.stringify(_items)])
 
-    const filteredTable: ItemInternal[] = useMemo(() => {
-      let items = filteredColumns
-      if (
-        !tableFilterState ||
-        (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
-      ) {
-        return items
-      }
-      const filter = tableFilterState.toLowerCase()
-      const valueContainFilter = (val: any) => String(val).toLowerCase().includes(filter)
-      items = items.filter((item) => {
-        return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
-      })
-      return items
-    }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)])
-
-    const sortedItems: ItemInternal[] = useMemo(() => {
-      const col = sorterState?.column
-      if (
-        !col ||
-        !itemsDataColumns.includes(col) ||
-        (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
-      ) {
-        return filteredTable
+        if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+          setSelectedAll('indeterminate')
+        }
       }
+    }, [JSON.stringify(_selected), _itemsNumber])
 
-      const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-      const sorted = filteredTable.slice().sort((item, item2) => {
-        const value = item[col]
-        const value2 = item2[col]
-        const a = typeof value === 'number' ? value : String(value).toLowerCase()
-        const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase()
-        return a > b ? 1 * flip : b > a ? -1 * flip : 0
-      })
-      return sorted
-    }, [
-      JSON.stringify(filteredTable),
-      JSON.stringify(sorterState),
-      JSON.stringify(columnSorter),
-      JSON.stringify(filteredColumns),
-      JSON.stringify(_items),
-    ])
+    const columnNames = useMemo(() => getColumnNames(columns, _items), [columns, _items])
 
-    const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
+    const itemsDataColumns = useMemo(
+      () => columnNames.filter((name) => getColumnNamesFromItems(_items).includes(name)),
+      [columnNames, _items],
+    )
 
-    const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0
+    const filteredColumns: Item[] = useMemo(
+      () => filterColumns(_items, columnFilter, columnFilterState, itemsDataColumns),
+      [columnFilterState, JSON.stringify(_items)],
+    )
 
-    const itemsOnActivePage: ItemInternal[] = sortedItems.slice(
-      firstItemOnActivePageIndex,
-      firstItemOnActivePageIndex + _itemsPerPage,
+    const filteredTable: Item[] = useMemo(
+      () => filterTable(filteredColumns, tableFilter, tableFilterState, itemsDataColumns),
+      [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)],
     )
 
-    const currentItems: ItemInternal[] = _activePage ? itemsOnActivePage : sortedItems
+    const sortedItems: Item[] = useMemo(
+      () => sortItems(columnSorter, filteredTable, itemsDataColumns, sorterState),
+      [
+        JSON.stringify(filteredTable),
+        JSON.stringify(sorterState),
+        JSON.stringify(columnSorter),
+        JSON.stringify(filteredColumns),
+        JSON.stringify(_items),
+      ],
+    )
 
-    const isFiltered: string =
-      tableFilterState || sorterState?.column || Object.values(columnFilterState).join('')
+    const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
 
-    // effects
+    const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0
 
-    useEffect(() => {
-      mountedRef.current && onActivePageChange && onActivePageChange(_activePage)
-    }, [_activePage])
+    const currentItems: Item[] = _activePage
+      ? sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage)
+      : sortedItems
 
     useEffect(() => {
-      mountedRef.current && onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage)
-      itemsPerPage !== _itemsPerPage && setActivePage(1) // TODO: set proper page after _itemsPerPage update
-    }, [_itemsPerPage])
+      mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
+    }, [JSON.stringify(sortedItems)])
 
-    useEffect(() => {
-      mountedRef.current && sorterState && onSorterChange && onSorterChange(sorterState)
-    }, [JSON.stringify(sorterState)])
+    const handleClean = (): void => {
+      setTableFilterState('')
+      setColumnFilterState({})
+      setSorterState({})
+    }
 
-    useEffect(() => {
-      mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState)
-    }, [columnFilterState])
+    const handleColumnFilterChange = (colName: string, value: any, type?: string): void => {
+      const isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
+      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+        return
+      }
 
-    useEffect(() => {
-      mountedRef.current && onTableFilterChange && onTableFilterChange(tableFilterState)
-    }, [tableFilterState])
+      const newState = { ...columnFilterState, [`${colName}`]: value }
+      setActivePage(1)
+      setColumnFilterState(newState)
+    }
 
-    useEffect(() => {
-      mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
-    }, [JSON.stringify(sortedItems)])
+    const handleItemsPerPageChange = (event: ChangeEvent<HTMLSelectElement>): void => {
+      if (
+        typeof itemsPerPageSelect !== 'object' ||
+        (typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external)
+      ) {
+        setItemsPerPage(Number((event.target as HTMLSelectElement).value))
+      }
+    }
+
+    const handleRowChecked = (item: Item, value: boolean) => {
+      if (value && !isObjectInArray(_selected, item, ['_cellProps', '_props', '_selected'])) {
+        setSelected([..._selected, item])
+        return
+      }
 
-    const handleRowChecked = (id: number, value: boolean) => {
-      const newArr = [..._items]
-      newArr[id]._selected = value
-      setItems(newArr)
+      setSelected(
+        _selected.filter(
+          (_item: Item) => !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']),
+        ),
+      )
     }
 
     const handleSelectAllChecked = () => {
       if (selectedAll === true) {
-        setItems(
-          _items.map((item: ItemInternal) => {
-            return { ...item, _selected: false }
-          }),
-        )
+        setSelected([])
         return
       }
 
-      setItems(
-        _items.map((item: ItemInternal) => {
-          return { ...item, _selected: true }
+      onSelectAll && onSelectAll()
+
+      if (selectAll && typeof selectAll === 'object' && selectAll.external) {
+        return
+      }
+
+      setSelected(
+        _items.map((item) => {
+          delete item['_cellProps']
+          delete item['_props']
+          delete item['_selected']
+
+          return item
         }),
       )
     }
 
-    useEffect(() => {
-      if (selectable) {
-        const selected = _items.filter((item) => item._selected === true)
-        onSelectedItemsChange && onSelectedItemsChange(selected)
+    const handleSorterChange = (column: string, index: number): void => {
+      if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
+        return
+      }
 
-        if (selected.length === _items.length) {
-          setSelectedAll(true)
-          return
-        }
+      //if column changed or sort was descending change asc to true
+      const state = sorterState ? sorterState : { column: '', state: '' }
 
-        if (selected.length === 0) {
-          setSelectedAll(false)
-          return
+      if (state.column === column) {
+        if (state.state === 0) {
+          state.state = 'asc'
+        } else if (state.state === 'asc') {
+          state.state = 'desc'
+        } else {
+          if (typeof columnSorter === 'object' && !columnSorter.resetable) {
+            state.state = 'asc'
+          } else {
+            state.state = 0
+          }
         }
+      } else {
+        state.column = column
+        state.state = 'asc'
+      }
 
-        if (selected.length !== 0 && selected.length !== _items.length) {
-          setSelectedAll('indeterminate')
-        }
+      setSorterState({ ...state })
+    }
+
+    const handleTableFilterChange = (value: string, type: string): void => {
+      const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
+      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+        return
       }
-    }, [_items])
+
+      setActivePage(1)
+      setTableFilterState(value)
+    }
 
     useEffect(() => {
       mountedRef.current = true
@@ -362,26 +329,39 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 <>
                   <div className="col-auto p-0">
                     {tableFilter && (
-                      <CSmartTableFilter
-                        filterLabel={tableFilterLabel}
-                        filterPlaceholder={tableFilterPlaceholder}
-                        onInput={(e) => {
-                          tableFilterChange((e.target as HTMLInputElement).value, 'input')
-                        }}
-                        onChange={(e) => {
-                          tableFilterChange((e.target as HTMLInputElement).value, 'change')
-                        }}
-                        value={tableFilterState || ''}
-                      />
+                      <div className="row mb-2">
+                        <CFormLabel className="col-sm-auto col-form-label">
+                          {tableFilterLabel}
+                        </CFormLabel>
+                        <div className="col-sm-auto">
+                          <CFormInput
+                            onInput={(e) => {
+                              handleTableFilterChange((e.target as HTMLInputElement).value, 'input')
+                            }}
+                            onChange={(e) => {
+                              handleTableFilterChange(
+                                (e.target as HTMLInputElement).value,
+                                'change',
+                              )
+                            }}
+                            placeholder={tableFilterPlaceholder}
+                            value={tableFilterState || ''}
+                          />
+                        </div>
+                      </div>
                     )}
                   </div>
                   <div className="col-auto p-0">
                     {cleaner && (
                       <CSmartTableCleaner
-                        isFiltered={isFiltered}
-                        onClick={() => clean()}
+                        isFiltered={
+                          tableFilterState ||
+                          sorterState?.column ||
+                          Object.values(columnFilterState).join('')
+                        }
+                        onClick={() => handleClean()}
                         onKeyUp={(event) => {
-                          if (event.key === 'Enter') clean()
+                          if (event.key === 'Enter') handleClean()
                         }}
                       />
                     )}
@@ -398,20 +378,23 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 {...tableHeadProps}
                 columnFilter={columnFilter}
                 columnFilterState={columnFilterState}
-                columns={columns ? columns : rawColumnNames}
+                columns={columns ? columns : columnNames}
                 columnSorter={columnSorter}
                 items={_items}
                 selectable={selectable}
-                selectAll={selectedAll}
+                selectAll={selectAll}
+                selectedAll={selectedAll}
                 sorterState={sorterState}
                 sortingIcon={sortingIcon}
                 sortingIconAscending={sortingIconAscending}
                 sortingIconDescending={sortingIconDescending}
-                handleFilterOnChange={(key, event) => columnFilterChange(key, event, 'change')}
-                handleFilterOnInput={(key, event) => columnFilterChange(key, event, 'input')}
-                handleOnCustomFilterChange={(key, event) => columnFilterChange(key, event)}
+                handleFilterOnChange={(key, event) =>
+                  handleColumnFilterChange(key, event, 'change')
+                }
+                handleFilterOnInput={(key, event) => handleColumnFilterChange(key, event, 'input')}
+                handleOnCustomFilterChange={(key, event) => handleColumnFilterChange(key, event)}
                 handleSelectAllChecked={() => handleSelectAllChecked()}
-                handleSort={(key, index) => sorterChange(key, index)}
+                handleSort={(key, index) => handleSorterChange(key, index)}
               />
             )}
             <CSmartTableBody
@@ -422,33 +405,51 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
               onRowClick={(item, index, columnName, event) =>
                 clickableRows && onRowClick && onRowClick(item, index, columnName, event)
               }
-              onRowChecked={(id, value) => handleRowChecked(id, value)}
-              rawColumnNames={rawColumnNames}
+              onRowChecked={(item, value) => handleRowChecked(item, value)}
+              columnNames={columnNames}
               scopedColumns={scopedColumns}
               selectable={selectable}
+              selected={_selected}
               {...tableBodyProps}
             />
-            {footer && (
+            {typeof footer === 'boolean' && footer && (
               <CSmartTableHead
                 component={CTableFoot}
                 {...tableFootProps}
                 columnFilter={false}
                 columnSorter={false}
-                columns={columns ? columns : rawColumnNames}
+                columns={columns ? columns : columnNames}
                 items={_items}
                 handleSelectAllChecked={() => handleSelectAllChecked()}
                 selectable={selectable}
-                selectAll={selectedAll}
+                selectAll={selectAll}
+                selectedAll={selectedAll}
               />
             )}
+            {Array.isArray(footer) && (
+              <CTableFoot {...tableFootProps}>
+                <CTableRow>
+                  {footer.map((item: FooterItem | string, index: number) => (
+                    <CTableDataCell
+                      {...(typeof item === 'object' && item._props && { ...item._props })}
+                      key={index}
+                    >
+                      {typeof item === 'object' ? item.label : item}
+                    </CTableDataCell>
+                  ))}
+                </CTableRow>
+              </CTableFoot>
+            )}
           </CTable>
           {loading && (
             <CElementCover
               boundaries={[
-                { sides: ['top'], query: 'td' },
+                { sides: ['top'], query: 'tbody' },
                 { sides: ['bottom'], query: 'tbody' },
               ]}
-            />
+            >
+              {elementCover}
+            </CElementCover>
           )}
         </div>
 
@@ -470,12 +471,26 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
             </div>
             <div className="col-auto ms-auto">
               {itemsPerPageSelect && (
-                <CSmartTableItemsPerPageSelector
-                  itemsPerPage={_itemsPerPage}
-                  itemsPerPageLabel={itemsPerPageLabel}
-                  itemsPerPageOptions={itemsPerPageOptions}
-                  onChange={(event: ChangeEvent<HTMLSelectElement>) => itemsPerPageChange(event)}
-                />
+                <div className="row">
+                  <CFormLabel className="col-auto col-form-label">{itemsPerPageLabel}</CFormLabel>
+                  <div className="col-auto">
+                    <CFormSelect
+                      defaultValue={_itemsPerPage}
+                      onChange={(event: ChangeEvent<HTMLSelectElement>) =>
+                        handleItemsPerPageChange(event)
+                      }
+                    >
+                      {itemsPerPageOptions &&
+                        itemsPerPageOptions.map((number, index) => {
+                          return (
+                            <option value={number} key={index}>
+                              {number}
+                            </option>
+                          )
+                        })}
+                    </CFormSelect>
+                  </div>
+                </div>
               )}
             </div>
           </div>
@@ -493,9 +508,11 @@ CSmartTable.propTypes = {
   columnFilterValue: PropTypes.object,
   columns: PropTypes.array,
   columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  footer: PropTypes.bool,
+  elementCover: PropTypes.node,
+  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
   header: PropTypes.bool,
   items: PropTypes.array,
+  itemsNumber: PropTypes.number,
   itemsPerPage: PropTypes.number,
   itemsPerPageLabel: PropTypes.string,
   itemsPerPageOptions: PropTypes.array,
@@ -507,13 +524,16 @@ CSmartTable.propTypes = {
   onFilteredItemsChange: PropTypes.func,
   onItemsPerPageChange: PropTypes.func,
   onRowClick: PropTypes.func,
+  onSelectAll: PropTypes.func,
   onSelectedItemsChange: PropTypes.func,
-  onSorterChange: PropTypes.func, // TODO: change to `onColumnSorter` in v5
+  onSorterChange: PropTypes.func, // TODO: change to `onColumnSorterChange` in v5
   onTableFilterChange: PropTypes.func,
   pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   paginationProps: PropTypes.any, // TODO: update
   scopedColumns: PropTypes.object,
   selectable: PropTypes.bool,
+  selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  selected: PropTypes.array,
   sorterValue: PropTypes.object,
   sortingIcon: PropTypes.node,
   sortingIconAscending: PropTypes.node,