@coreui/vue-pro 4.7.0 → 4.8.0-next.0

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

@@ -1,21 +1,27 @@
-import { computed, defineComponent, h, reactive, ref, PropType, watch, onMounted } from 'vue'
+import { computed, defineComponent, h, ref, PropType, watch, onMounted } from 'vue'
 
-import { CElementCover } from '../element-cover/CElementCover'
-import { CSmartPagination } from '../smart-pagination/CSmartPagination'
+import { cilArrowTop, cilArrowBottom, cilFilterX, cilSwapVertical } from '@coreui/icons'
+import { CIcon } from '@coreui/icons-vue'
 
-import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table/'
+import { CElementCover } from '../element-cover'
+import { CFormInput, CFormLabel, CFormSelect } from '../form'
+import { CSmartPagination } from '../smart-pagination'
+import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table'
 
 import { CSmartTableBody } from './CSmartTableBody'
 import { CSmartTableHead } from './CSmartTableHead'
-import { CSmartTableFilter } from './CSmartTableFilter'
-import { CSmartTableCleaner } from './CSmartTableCleaner'
-import { CSmartTableItemsPerPageSelector } from './CSmartTableItemsPerPageSelector'
-
-import { CIcon } from '@coreui/icons-vue'
-
-import { cilArrowTop, cilArrowBottom, cilFilterX, cilSwapVertical } from '@coreui/icons'
 
 import {
+  filterColumns,
+  filterTable,
+  getColumnNames,
+  getColumnNamesFromItems,
+  isObjectInArray,
+  isSortable,
+  sortItems,
+} from './utils'
+
+import type {
   Column,
   ColumnFilter,
   ColumnFilterValue,
@@ -26,7 +32,7 @@ import {
   Sorter,
   SorterValue,
   TableFilter,
-} from './CSmartTableInterface'
+} from './types'
 
 const CSmartTable = defineComponent({
   name: 'CSmartTable',
@@ -37,7 +43,6 @@ const CSmartTable = defineComponent({
     activePage: {
       type: Number,
       default: 1,
-      required: false,
     },
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
@@ -46,14 +51,12 @@ const CSmartTable = defineComponent({
      */
     cleaner: {
       type: Boolean,
-      required: false,
     },
     /**
      * Style table items as clickable.
      */
     clickableRows: {
       type: Boolean,
-      required: false,
     },
     /**
      * When set, displays additional filter row between table header and items, allowing filtering by specific column.
@@ -63,7 +66,6 @@ const CSmartTable = defineComponent({
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      required: false,
     },
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
@@ -71,8 +73,6 @@ const CSmartTable = defineComponent({
      */
     columnFilterValue: {
       type: Object as PropType<ColumnFilterValue>,
-      default: undefined,
-      required: false,
     },
     /**
      * 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')
@@ -89,7 +89,6 @@ const CSmartTable = defineComponent({
      */
     columns: {
       type: Array as PropType<(Column | string)[]>,
-      required: false,
     },
     /**
      * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
@@ -100,8 +99,6 @@ const CSmartTable = defineComponent({
      */
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
-      default: undefined,
-      required: false,
     },
     /**
      * If `true` Displays table footer, which mirrors table header. (without column filter).
@@ -114,14 +111,12 @@ const CSmartTable = defineComponent({
      */
     footer: {
       type: [Boolean, Array] as PropType<boolean | (FooterItem | string)[]>,
-      required: false,
     },
     /**
      * Set to false to remove table header.
      */
     header: {
       type: Boolean,
-      required: false,
       default: true,
     },
     /**
@@ -134,22 +129,25 @@ const CSmartTable = defineComponent({
     items: {
       type: Array as PropType<Item[]>,
       default: () => [],
-      required: false,
     },
+    /**
+     * 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.
+     *
+     * @since 4.8.0
+     */
+    itemsNumber: Number,
     /**
      * Number of items per site, when pagination is enabled.
      */
     itemsPerPage: {
       type: Number,
       default: 10,
-      required: false,
     },
     /**
      * Label for items per page selector.
      */
     itemsPerPageLabel: {
       type: String,
-      required: false,
       default: 'Items per page:',
     },
     /**
@@ -158,7 +156,6 @@ const CSmartTable = defineComponent({
     itemsPerPageOptions: {
       type: Array as PropType<number[]>,
       default: () => [5, 10, 20, 50],
-      required: false,
     },
     /**
      * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
@@ -168,15 +165,12 @@ const CSmartTable = defineComponent({
      */
     itemsPerPageSelect: {
       type: [Boolean, Object] as PropType<boolean | ItemsPerPageSelect>,
-      default: undefined,
-      required: false,
     },
     /**
      * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
      */
     loading: {
       type: Boolean,
-      required: false,
     },
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
@@ -184,51 +178,63 @@ const CSmartTable = defineComponent({
     noItemsLabel: {
       type: String,
       default: 'No items found',
-      required: false,
     },
     /**
      * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
      */
     pagination: {
       type: [Boolean, Object] as PropType<boolean | Pagination>,
-      required: false,
     },
     /**
      * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
     paginationProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
     /**
      * Add checkboxes to make table rows selectable.
      */
     selectable: Boolean,
+    /**
+     * 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.
+     *
+     * @since 4.8.0
+     */
+    selectAll: {
+      type: [Boolean, Object] as PropType<boolean | { external?: boolean }>,
+    },
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
+     *
+     * Example item: `{ name: 'John' , age: 12 }`
+     *
+     * @since 4.8.0
+     */
+    selected: {
+      type: Array as PropType<Item[]>,
+      default: () => [],
+    },
     /**
      * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
      * { column: 'status', state: 'asc' }
      */
     sorterValue: {
       type: Object as PropType<SorterValue>,
-      default: undefined,
-      required: false,
     },
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
     tableBodyProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
     /**
      * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
     tableFootProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
     /**
      * When set, displays table filter above table, allowing filtering by specific column.
@@ -239,7 +245,6 @@ const CSmartTable = defineComponent({
      */
     tableFilter: {
       type: [Boolean, Object] as PropType<boolean | TableFilter>,
-      required: false,
     },
     /**
      * The element represents a caption for a component.
@@ -247,7 +252,6 @@ const CSmartTable = defineComponent({
     tableFilterLabel: {
       type: String,
       default: 'Filter:',
-      required: false,
     },
     /**
      * Specifies a short hint that is visible in the search input.
@@ -255,31 +259,24 @@ const CSmartTable = defineComponent({
     tableFilterPlaceholder: {
       type: String,
       default: 'type string...',
-      required: false,
     },
     /**
      * Value of table filter.
      */
     tableFilterValue: {
       type: String,
-      default: undefined,
-      required: false,
     },
     /**
      * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
     tableHeadProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
     /**
      * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
     tableProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
   },
   emits: [
@@ -316,6 +313,12 @@ const CSmartTable = defineComponent({
      * @property {event} event
      */
     'rowClick',
+    /**
+     * Select all callback.
+     *
+     * @since 4.8.0
+     */
+    'selectAll',
     /**
      * Selected items change callback.
      *
@@ -336,56 +339,122 @@ const CSmartTable = defineComponent({
     'tableFilterChange',
   ],
   setup(props, { emit, slots }) {
-    // reactive data
+    const activePage = ref(props.activePage)
+    const columnFilterState = ref<ColumnFilterValue>(
+      props.columnFilterValue ? props.columnFilterValue : {},
+    )
     const items = ref<Item[]>(
       props.items.map((item: Item, index: number) => {
         return { ...item, _id: index }
       }),
     )
+    const itemsNumber = ref(props.itemsNumber)
+    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
+    const selected = ref<Item[]>([])
+    const selectedAll = ref<boolean | string>()
+    const sorterState = ref<SorterValue>(props.sorterValue || {})
+    const tableFilterState = ref(props.tableFilterValue ? props.tableFilterValue : '')
+
+    watch(
+      () => props.activePage,
+      () => {
+        activePage.value = props.activePage
+      },
+    )
+
+    watch(
+      () => props.columnFilterValue,
+      () => {
+        if (props.columnFilterValue) {
+          columnFilterState.value = props.columnFilterValue
+        }
+      },
+    )
 
     watch(
       () => props.items,
       () => {
-        items.value = props.items.map((item: Item, index: number) => {
-          return { ...item, _id: index }
-        })
         if (
-          items.value &&
-          items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value
+          props.items &&
+          props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value
         ) {
           activePage.value = 1
         }
+
+        props.items.forEach((item: Item) => {
+          if (item._selected) {
+            const _item = { ...item }
+            delete _item['_cellProps']
+            delete _item['_props']
+            delete _item['_selected']
+
+            selected.value = [...selected.value, _item]
+          }
+        })
+
+        if (Array.isArray(props.items)) {
+          items.value = props.items
+          itemsNumber.value = props.itemsNumber || props.items.length
+        }
+      },
+    )
+
+    watch(
+      () => props.itemsNumber,
+      () => {
+        itemsNumber.value = props.itemsNumber
+      },
+    )
+
+    watch(
+      () => props.itemsPerPage,
+      () => {
+        itemsPerPage.value = props.itemsPerPage
+      },
+    )
+
+    watch(
+      () => props.selected,
+      () => {
+        selected.value = props.selected
+      },
+    )
+
+    watch(
+      () => props.sorterValue,
+      () => {
+        if (props.sorterValue) {
+          sorterState.value = props.sorterValue
+        }
       },
     )
 
-    const selectedAll = ref()
+    watch(itemsPerPage, () => {
+      if (props.itemsPerPage !== itemsPerPage.value) {
+        activePage.value = 1 // TODO: set proper page after _itemsPerPage update
+      }
 
-    watch(items, () => {
-      const selected = items.value.filter((item) => item._selected === true)
+      emit('itemsPerPageChange', itemsPerPage.value)
+    })
+
+    watch([selected, itemsNumber], () => {
       emit('selectedItemsChange', selected)
 
-      if (selected.length === items.value.length) {
+      if (selected.value.length === itemsNumber.value) {
         selectedAll.value = true
         return
       }
 
-      if (selected.length === 0) {
+      if (selected.value.length === 0) {
         selectedAll.value = false
         return
       }
 
-      if (selected.length !== 0 && selected.length !== items.value.length) {
+      if (selected.value.length !== 0 && selected.value.length !== itemsNumber.value) {
         selectedAll.value = 'indeterminate'
       }
     })
 
-    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
-    const activePage = ref(props.activePage)
-
-    const sorterState: SorterValue = reactive(props.sorterValue || {})
-    const columnFilterState = ref(props.columnFilterValue ? props.columnFilterValue : {})
-    const tableFilterState = ref(props.tableFilterValue ? props.tableFilterValue : '')
-
     onMounted(() => {
       if (
         items.value &&
@@ -395,31 +464,21 @@ const CSmartTable = defineComponent({
       }
     })
 
-    // functions
-
-    const isLazy = (columnFilter?: boolean | { lazy?: boolean; external?: boolean }) =>
-      columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
-
-    const isSortable = (i: number): boolean | undefined => {
-      const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i])
-      let column
-      if (props.columns) column = props.columns[i]
-      return (
-        props.columnSorter &&
-        (!props.columns ||
-          typeof column !== 'object' ||
-          (typeof column === 'object' &&
-            (typeof column.sorter === 'undefined' || column.sorter))) &&
-        isDataColumn
-      )
-    }
-
-    const sorterChange = (column: string, index: number): void => {
-      if (!isSortable(index)) {
+    const handleSorterChange = (column: string, index: number) => {
+      if (
+        !isSortable(
+          index,
+          props.columns,
+          props.columnSorter,
+          itemsDataColumns.value,
+          columnNames.value,
+        )
+      ) {
         return
       }
+
       //if column changed or sort was descending change asc to true
-      const state = sorterState
+      const state = sorterState.value
 
       if (state.column === column) {
         if (state.state === 0) {
@@ -437,10 +496,11 @@ const CSmartTable = defineComponent({
         state.column = column
         state.state = 'asc'
       }
-      sorterState.column = state.column
-      sorterState.state = state.state
 
-      emit('sorterChange', sorterState)
+      sorterState.value.column = state.column
+      sorterState.value.state = state.state
+
+      emit('sorterChange', sorterState.value)
     }
 
     const handleActivePageChange = (page: number) => {
@@ -448,153 +508,110 @@ const CSmartTable = defineComponent({
       emit('activePageChange', page)
     }
 
-    const handleItemsPerPageChange = (itemsPerPageNumber: number) => {
-      itemsPerPage.value = itemsPerPageNumber
-      itemsPerPageNumber !== props.itemsPerPage && handleActivePageChange(1) // TODO: set proper page after _itemsPerPage update
-      emit('itemsPerPageChange', itemsPerPageNumber)
+    const handleItemsPerPageChange = (event: Event) => {
+      if (
+        typeof props.itemsPerPageSelect !== 'object' ||
+        (typeof props.itemsPerPageSelect === 'object' && !props.itemsPerPageSelect.external)
+      ) {
+        itemsPerPage.value = Number((event.target as HTMLSelectElement).value)
+      }
     }
 
-    const handleRowChecked = (id: number, value: boolean) => {
-      const newArr = [...items.value]
-      newArr[id]._selected = value
-      items.value = newArr
-    }
+    const handleRowChecked = (item: Item, value: boolean) => {
+      if (value && !isObjectInArray(selected.value, item, ['_cellProps', '_props', '_selected'])) {
+        selected.value = [...selected.value, item]
+        return
+      }
 
-    const handleRowClick = (
-      item: Item,
-      index: number,
-      columnName: string,
-      event: MouseEvent | boolean,
-    ) => {
-      emit('rowClick', item, index, columnName, event)
+      selected.value = selected.value.filter(
+        (_item: Item) => !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']),
+      )
     }
 
     const handleSelectAllChecked = () => {
       if (selectedAll.value === true) {
-        items.value = items.value.map((item: Item) => {
-          return { ...item, _selected: false }
-        })
+        selected.value = []
         return
       }
 
-      items.value = items.value.map((item: Item) => {
-        return { ...item, _selected: true }
+      emit('selectAll')
+
+      if (props.selectAll && typeof props.selectAll === 'object' && props.selectAll.external) {
+        return
+      }
+
+      selected.value = items.value.map((item) => {
+        delete item['_cellProps']
+        delete item['_props']
+        delete item['_selected']
+
+        return item
       })
     }
 
-    const columnFilterChange = (colName: string, value: any, type?: string): void => {
-      const _isLazy = isLazy(props.columnFilter)
+    const handleColumnFilterChange = (colName: string, value: any, type?: string) => {
+      const _isLazy =
+        props.columnFilter &&
+        typeof props.columnFilter === 'object' &&
+        props.columnFilter.lazy === true
       if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
         return
       }
+
       activePage.value = 1
       columnFilterState.value = { ...columnFilterState.value, [`${colName}`]: value }
+
       emit('columnFilterChange', columnFilterState.value)
     }
 
-    const tableFilterChange = (value: string, type: string): void => {
-      const _isLazy = isLazy(props.columnFilter)
+    const handleTableFilterChange = (value: string, type: string) => {
+      const _isLazy =
+        props.columnFilter &&
+        typeof props.columnFilter === 'object' &&
+        props.columnFilter.lazy === true
       if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
         return
       }
+
       activePage.value = 1
       tableFilterState.value = value
-      emit('tableFilterChange', tableFilterState)
+
+      emit('tableFilterChange', tableFilterState.value)
     }
 
-    const clean = (): void => {
+    const handleClean = () => {
       tableFilterState.value = ''
       columnFilterState.value = {}
-      sorterState.column = ''
-      sorterState.state = ''
+      sorterState.value = {}
     }
 
-    // computed
-
-    const genCols = computed(() =>
-      Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'),
-    )
-
-    const rawColumnNames = computed(() =>
-      props.columns
-        ? props.columns.map((column: Column | string) => {
-            if (typeof column === 'object') return column.key
-            else return column
-          })
-        : genCols.value,
-    ) //! || el
+    const columnNames = computed(() => getColumnNames(props.columns, items.value))
 
     const itemsDataColumns = computed(() =>
-      rawColumnNames.value.filter((name) => genCols.value.includes(name)),
+      columnNames.value.filter((name) => getColumnNamesFromItems(items.value).includes(name)),
     )
 
-    // variables
-
-    const filteredColumns = computed(() => {
-      let _items = items.value
-      if (
-        props.columnFilter &&
-        typeof props.columnFilter === 'object' &&
-        props.columnFilter.external
-      ) {
-        return _items
-      }
-      Object.entries(columnFilterState.value).forEach(([key, value]) => {
-        if (value instanceof Function) {
-          _items = _items.filter((item) => value(item[key]))
-          return
-        }
-
-        const columnFilter = String(value).toLowerCase()
-        if (columnFilter && itemsDataColumns.value.includes(key)) {
-          _items = _items.filter((item) => {
-            return String(item[key]).toLowerCase().includes(columnFilter)
-          })
-        }
-      })
-      return _items
-    })
+    const filteredColumns = computed(() =>
+      filterColumns(
+        items.value,
+        props.columnFilter,
+        columnFilterState.value,
+        itemsDataColumns.value,
+      ),
+    )
 
-    const filteredTable = computed(() => {
-      let items = filteredColumns.value
-      if (
-        !tableFilterState.value ||
-        (props.tableFilter && typeof props.tableFilter === 'object' && props.tableFilter.external)
-      ) {
-        return items
-      }
-      const filter = tableFilterState.value.toLowerCase()
-      const valueContainFilter = (val: any) => String(val).toLowerCase().includes(filter)
-      items = items.filter((item) => {
-        return !!itemsDataColumns.value.find((key) => valueContainFilter(item[key]))
-      })
-      emit('filteredItemsChange', items)
-      return items
-    })
+    const filteredTable = computed(() =>
+      filterTable(
+        filteredColumns.value,
+        props.tableFilter,
+        tableFilterState.value,
+        itemsDataColumns.value,
+      ),
+    )
 
-    const sortedItems = computed(() => {
-      const col = sorterState.column
-      if (
-        !col ||
-        !itemsDataColumns.value.includes(col) ||
-        (props.columnSorter &&
-          typeof props.columnSorter === 'object' &&
-          props.columnSorter.external)
-      ) {
-        return filteredTable.value
-      }
-      //if values in column are to be sorted by numeric value they all have to be type number
-      // const flip = sorterState.asc ? 1 : -1
-      const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-      const sorted = filteredTable.value.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
-    })
+    const sortedItems = computed(() =>
+      sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value),
+    )
 
     const numberOfPages = computed(() =>
       itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1,
@@ -604,25 +621,15 @@ const CSmartTable = defineComponent({
       activePage.value ? (activePage.value - 1) * itemsPerPage.value : 0,
     )
 
-    const itemsOnActivePage = computed(() =>
-      sortedItems.value.slice(
-        firstItemOnActivePageIndex.value,
-        firstItemOnActivePageIndex.value + itemsPerPage.value,
-      ),
-    )
-
     const currentItems = computed(() =>
-      activePage.value ? itemsOnActivePage.value : sortedItems.value,
+      activePage.value
+        ? sortedItems.value.slice(
+            firstItemOnActivePageIndex.value,
+            firstItemOnActivePageIndex.value + itemsPerPage.value,
+          )
+        : sortedItems.value,
     )
 
-    const isFiltered = computed(() => {
-      return (
-        tableFilterState.value ||
-        sorterState.column ||
-        Object.values(columnFilterState.value).join('')
-      )
-    })
-
     return () =>
       h('div', {}, [
         (props.tableFilter || props.cleaner) &&
@@ -639,13 +646,47 @@ const CSmartTable = defineComponent({
                     class: 'col-auto p-0',
                   },
                   props.tableFilter &&
-                    h(CSmartTableFilter, {
-                      filterLabel: props.tableFilterLabel,
-                      filterPlaceholder: props.tableFilterPlaceholder,
-                      onFilterInput: (value: string) => tableFilterChange(value, 'input'),
-                      onFilterChange: (value: string) => tableFilterChange(value, 'change'),
-                      value: tableFilterState.value,
-                    }),
+                    h(
+                      'div',
+                      {
+                        class: 'row mb-2',
+                      },
+                      {
+                        default: () => [
+                          h(
+                            CFormLabel,
+                            {
+                              class: 'col-sm-auto col-form-label',
+                            },
+                            {
+                              default: () => props.tableFilterLabel,
+                            },
+                          ),
+                          h(
+                            'div',
+                            {
+                              class: 'col-sm-auto',
+                            },
+                            h(CFormInput, {
+                              onInput: (e) => {
+                                handleTableFilterChange(
+                                  (e.target as HTMLInputElement).value,
+                                  'input',
+                                )
+                              },
+                              onChange: (e) => {
+                                handleTableFilterChange(
+                                  (e.target as HTMLInputElement).value,
+                                  'change',
+                                )
+                              },
+                              placeholder: props.tableFilterPlaceholder,
+                              value: tableFilterState.value,
+                            }),
+                          ),
+                        ],
+                      },
+                    ),
                 ),
               props.cleaner &&
                 h(
@@ -654,22 +695,27 @@ const CSmartTable = defineComponent({
                     class: 'col-auto p-0',
                   },
                   h(
-                    CSmartTableCleaner,
-                    {
-                      onClick: () => clean(),
-                      isFiltered: isFiltered.value,
-                    },
+                    'button',
                     {
-                      // @slot Cleaner icon.
-                      cleanerIcon: () =>
-                        slots.cleanerIcon
-                          ? slots.cleanerIcon()
-                          : h(CIcon, { width: '18', content: cilFilterX }),
+                      type: 'button',
+                      class: 'btn btn-transparent',
+                      ...(!(
+                        tableFilterState.value ||
+                        sorterState.value.column ||
+                        Object.values(columnFilterState.value).join('')
+                      ) && { disabled: true, tabIndex: -1 }),
+                      onClick: () => handleClean(),
+                      onKeydown: (event: KeyboardEvent) => {
+                        if (event.key === 'Enter') handleClean()
+                      },
                     },
+                    slots.cleanerIcon
+                      ? slots.cleanerIcon()
+                      : h(CIcon, { width: '18', content: cilFilterX }),
                   ),
                 ),
             ],
-          ), //h
+          ),
         h(
           'div',
           {
@@ -692,20 +738,22 @@ const CSmartTable = defineComponent({
                           ...props.tableHeadProps,
                           columnFilter: props.columnFilter,
                           columnFilterValue: columnFilterState.value,
-                          columns: props.columns ? props.columns : rawColumnNames.value,
+                          columns: props.columns ? props.columns : columnNames.value,
                           columnSorter: props.columnSorter,
                           items: items.value,
                           selectable: props.selectable,
-                          selectAll: selectedAll.value,
-                          sorterState: sorterState,
+                          selectAll: props.selectAll,
+                          selectedAll: selectedAll.value,
+                          sorterState: sorterState.value,
                           onCustomFilterChange: (key: string, value: any) =>
-                            columnFilterChange(key, value),
+                            handleColumnFilterChange(key, value),
                           onFilterInput: (key: string, value: string) =>
-                            columnFilterChange(key, value, 'input'),
+                            handleColumnFilterChange(key, value, 'input'),
                           onFilterChange: (key: string, value: string) =>
-                            columnFilterChange(key, value, 'change'),
+                            handleColumnFilterChange(key, value, 'change'),
                           onSelectAllChecked: () => handleSelectAllChecked(),
-                          onSortClick: (key: string, index: number) => sorterChange(key, index),
+                          onSortClick: (key: string, index: number) =>
+                            handleSorterChange(key, index),
                         },
                         {
                           // @slot Sorter icon when items are unsorted.
@@ -723,8 +771,7 @@ const CSmartTable = defineComponent({
                           sortingIconAscending: () =>
                             slots.sortingIconAscending
                               ? slots.sortingIconAscending()
-                              : // : h(CIcon, { content: cilArrowBottom }, 'b'),
-                                h('svg', {
+                              : h('svg', {
                                   xmlns: 'http://www.w3.org/2000/svg',
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
@@ -735,8 +782,7 @@ const CSmartTable = defineComponent({
                           sortingIconDescending: () =>
                             slots.sortingIconDescending
                               ? slots.sortingIconDescending()
-                              : // : h(CIcon, { content: cilArrowTop }, 'c'),
-                                h('svg', {
+                              : h('svg', {
                                   xmlns: 'http://www.w3.org/2000/svg',
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
@@ -746,20 +792,21 @@ const CSmartTable = defineComponent({
                         },
                       ),
                     h(CSmartTableBody, {
+                      clickableRows: props.clickableRows,
+                      columnNames: columnNames.value,
                       currentItems: currentItems.value,
                       firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                       noItemsLabel: props.noItemsLabel,
-                      scopedSlots: slots,
-                      selectable: props.selectable,
-                      onRowChecked: (id: number, value: boolean) => handleRowChecked(id, value),
+                      onRowChecked: (item: Item, value: boolean) => handleRowChecked(item, value),
                       onRowClick: (
                         item: Item,
                         index: number,
                         columnName: string,
                         event: MouseEvent | boolean,
-                      ) => handleRowClick(item, index, columnName, event),
-                      rawColumnNames: rawColumnNames.value,
-                      clickableRows: props.clickableRows,
+                      ) => props.clickableRows && emit('rowClick', item, index, columnName, event),
+                      scopedSlots: slots,
+                      selectable: props.selectable,
+                      selected: selected.value,
                       ...props.tableBodyProps,
                     }),
                     typeof props.footer === 'boolean' &&
@@ -769,9 +816,10 @@ const CSmartTable = defineComponent({
                         ...props.tableFootProps,
                         columnFilter: false,
                         columnSorter: false,
-                        columns: props.columns ? props.columns : rawColumnNames.value,
+                        columns: props.columns ? props.columns : columnNames.value,
                         selectable: props.selectable,
-                        selectAll: selectedAll.value,
+                        selectAll: props.selectAll,
+                        selectedAll: selectedAll.value,
                         onSelectAllChecked: () => handleSelectAllChecked(),
                       }),
                     Array.isArray(props.footer) &&
@@ -810,12 +858,21 @@ const CSmartTable = defineComponent({
                 },
               ),
               props.loading &&
-                h(CElementCover, {
-                  boundaries: [
-                    { sides: ['top'], query: 'tbody' },
-                    { sides: ['bottom'], query: 'tbody' },
-                  ],
-                }),
+                h(
+                  CElementCover,
+                  {
+                    boundaries: [
+                      { sides: ['top'], query: 'tbody' },
+                      { sides: ['bottom'], query: 'tbody' },
+                    ],
+                  },
+                  {
+                    // @slot elementCover.
+                    ...(slots.elementCover && {
+                      default: () => slots.elementCover && slots.elementCover(),
+                    }),
+                  },
+                ),
             ],
           },
         ),
@@ -849,16 +906,56 @@ const CSmartTable = defineComponent({
                   class: 'col-auto ms-auto',
                 },
                 props.itemsPerPageSelect &&
-                  h(CSmartTableItemsPerPageSelector, {
-                    itemsPerPage: itemsPerPage.value,
-                    itemsPerPageLabel: props.itemsPerPageLabel,
-                    itemsPerPageOptions: props.itemsPerPageOptions,
-                    onChangeItemsPerPage: handleItemsPerPageChange,
-                  }),
+                  h(
+                    'div',
+                    {
+                      class: 'row',
+                    },
+                    {
+                      default: () => [
+                        h(
+                          CFormLabel,
+                          {
+                            class: 'col-auto col-form-label',
+                          },
+                          {
+                            default: () => props.itemsPerPageLabel,
+                          },
+                        ),
+                        h(
+                          'div',
+                          {
+                            class: 'col-auto',
+                          },
+                          h(
+                            CFormSelect,
+                            {
+                              value: itemsPerPage.value,
+                              onChange: handleItemsPerPageChange,
+                            },
+                            {
+                              default: () =>
+                                props.itemsPerPageOptions &&
+                                props.itemsPerPageOptions.map((number, index) => {
+                                  return h(
+                                    'option',
+                                    {
+                                      value: number,
+                                      key: index,
+                                    },
+                                    number,
+                                  )
+                                }),
+                            },
+                          ),
+                        ),
+                      ],
+                    },
+                  ),
               ),
             ],
           ),
-      ]) //h
+      ])
   },
 })
 export { CSmartTable }