@coreui/react-pro 5.0.0-alpha.0 → 5.0.0-alpha.2

package/src/components/modal/CModal.tsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
@@ -35,6 +35,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * @ignore
    */
   duration?: number
+  /**
+   * Puts the focus on the modal when shown.
+   *
+   * @since v4.10.0
+   */
+  focus?: boolean
   /**
    * Set modal to covers the entire user viewport.
    */
@@ -96,6 +102,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       backdrop = true,
       className,
       duration = 150,
+      focus = true,
       fullscreen,
       keyboard = true,
       onClose,
@@ -111,6 +118,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     },
     ref,
   ) => {
+    const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
     const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
@@ -128,11 +136,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }, [visible])
 
     useEffect(() => {
-      document.addEventListener('click', handleClickOutside)
-      document.addEventListener('keydown', handleKeyDown)
+      if (_visible) {
+        activeElementRef.current = document.activeElement as HTMLElement | null
+        document.addEventListener('mouseup', handleClickOutside)
+        document.addEventListener('keydown', handleKeyDown)
+      } else {
+        activeElementRef.current?.focus()
+      }
 
       return () => {
-        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('mouseup', handleClickOutside)
         document.removeEventListener('keydown', handleKeyDown)
       }
     }, [_visible])
@@ -143,6 +156,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
 
       setVisible(false)
+
       return onClose && onClose()
     }
 
@@ -163,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
         setTimeout(
           () => {
-            modalRef.current?.focus()
+            focus && modalRef.current?.focus()
           },
           transition ? duration : 0,
         )
@@ -225,10 +239,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     className,
                   )}
                   tabIndex={-1}
-                  role="dialog"
+                  {...(_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' })}
                   style={{
                     ...(state !== 'exited' && { display: 'block' }),
                   }}
+                  {...rest}
                   ref={forkedRef}
                 >
                   <CModalDialog
@@ -237,9 +254,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     scrollable={scrollable}
                     size={size}
                   >
-                    <CModalContent {...rest} ref={modalContentRef}>
-                      {children}
-                    </CModalContent>
+                    <CModalContent ref={modalContentRef}>{children}</CModalContent>
                   </CModalDialog>
                 </div>
               </CModalContext.Provider>
@@ -262,6 +277,7 @@ CModal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   duration: PropTypes.number,
+  focus: PropTypes.bool,
   fullscreen: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),

package/src/components/multi-select/CMultiSelect.tsx

@@ -243,7 +243,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       if (
         allowCreateOptions &&
         filteredOptions.some(
-          (option) => option.text && option.text.toLowerCase() === searchValue.toLowerCase(),
+          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase(),
         )
       ) {
         return false
@@ -354,7 +354,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           setSelected([
             ...selected,
             filteredOptions.find(
-              (option) => String(option.text).toLowerCase() === searchValue.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase(),
             ) as Option,
           ])
         }
@@ -491,7 +491,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                       placeholder: `${selected.length} ${selectionTypeCounterText}`,
                     })}
                   {...(selected.length > 0 &&
-                    !multiple && { placeholder: selected.map((option) => option.text)[0] })}
+                    !multiple && { placeholder: selected.map((option) => option.label)[0] })}
                   {...(multiple &&
                     selected.length > 0 &&
                     selectionType !== 'counter' && { size: searchValue.length + 2 })}

package/src/components/multi-select/CMultiSelectNativeSelect.tsx

@@ -18,7 +18,7 @@ const createNativeOptions = (options: Option[]) =>
       </optgroup>
     ) : (
       <option value={option.value} key={index} disabled={option.disabled}>
-        {option.text}
+        {option.label}
       </option>
     ),
   )

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -77,7 +77,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
               onKeyDown={(event) => handleKeyDown(event, option as Option)}
               tabIndex={0}
             >
-              {optionsTemplate ? optionsTemplate(option as Option) : option.text}
+              {optionsTemplate ? optionsTemplate(option as Option) : option.label}
             </div>
           ) : (
             <div className="form-multi-select-optgroup-label" key={index}>

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -48,7 +48,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
             if (selectionType === 'tags') {
               return (
                 <span className="form-multi-select-tag" key={index}>
-                  {option.text}
+                  {option.label}
                   {!option.disabled && (
                     <button
                       className="form-multi-select-tag-delete"
@@ -65,11 +65,11 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
           selectionType === 'text' &&
           selected.map((option, index) => (
             <span key={index}>
-              {option.text}
+              {option.label}
               {index === selected.length - 1 ? '' : ','}&nbsp;
             </span>
           ))}
-        {!multiple && !search && selected.map((option) => option.text)[0]}
+        {!multiple && !search && selected.map((option) => option.label)[0]}
         {children}
       </span>
     )

package/src/components/multi-select/types.ts

@@ -2,7 +2,7 @@ export type Option = {
   custom?: boolean
   disabled?: boolean
   selected?: boolean
-  text: string // TODO: change to label in v5
+  label: string
   value: number | string
   [key: string]: number | string | any
 }
@@ -15,7 +15,7 @@ export type OptionsGroup = {
 
 export type SelectedOption = {
   disabled?: boolean
-  text: string
+  label: string
   value: number | string
   [key: string]: number | string | any
 }

package/src/components/multi-select/utils.ts

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types'
 
-export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
-  const value = text.toLowerCase().replace(/\s/g, '-')
+export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
+  const value = label.toLowerCase().replace(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 
@@ -13,7 +13,7 @@ export const createOption = (text: string, options: (Option | OptionsGroup)[]) =
   return [
     {
       value: uniqueValue,
-      text,
+      label,
       custom: true,
     },
   ]
@@ -28,10 +28,10 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
         option.options &&
         option.options.filter(
           (option: Option) =>
-            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+            option.lable && option.label.toLowerCase().includes(search.toLowerCase()),
         )
       if (
-        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (option.lable && option.label.toLowerCase().includes(search.toLowerCase())) ||
         (options && options.length > 0)
       ) {
         optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))

package/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'tabs' | 'pills' | 'underline'
+  variant?: 'pills' | 'tabs' | 'underline'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['tabs', 'pills', 'underline']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 }
 
 CNav.displayName = 'CNav'

package/src/components/nav/CNavGroup.tsx

@@ -36,6 +36,13 @@ export interface CNavGroupProps {
   idx?: string
 }
 
+const isInVisibleGroup = (el1: string, el2: string) => {
+  const array1 = el1.toString().split('.')
+  const array2 = el2.toString().split('.')
+
+  return array2.every((item, index) => item === array1[index])
+}
+
 export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
   ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {
     const [height, setHeight] = useState<number | string>()
@@ -45,12 +52,12 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
 
     const [_visible, setVisible] = useState(
       Boolean(
-        visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())),
+        visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)),
       ),
     )
 
     useEffect(() => {
-      setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))
+      setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
     }, [visibleGroup])
 
     const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -41,13 +41,14 @@ exports[`CNav example 1`] = `
     <li
       class="nav-item dropdown"
     >
-      <a
+      <button
         aria-expanded="false"
-        class="dropdown-toggle nav-link"
-        href="#"
+        class="btn btn-primary dropdown-toggle"
+        tabindex="0"
+        type="button"
       >
         A
-      </a>
+      </button>
       <ul
         aria-hidden="true"
         class="dropdown-menu"

package/src/components/navbar/CNavbar.tsx

@@ -17,7 +17,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   color?: Colors
   /**
-   * Sets if the color of text should be colored for a light or dark dark background.
+   * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
   /**
@@ -59,12 +59,12 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
           'navbar',
           {
             [`bg-${color}`]: color,
-            [`navbar-${colorScheme}`]: colorScheme,
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
           className,
         )}
+        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
         ref={ref}
       >

package/src/components/navbar/__tests__/CNavbar.spec.tsx

@@ -26,9 +26,9 @@ test('CNavbar customize', async () => {
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('navbar')
   expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('navbar-dark')
   expect(container.firstChild).toHaveClass('navbar-expand-lg')
   expect(container.firstChild).toHaveClass('fixed-bottom')
+  expect(container.firstChild).toHaveAttribute('data-coreui-theme', 'dark')
   const arrLength = container.getElementsByClassName('container-xl').length
   expect(arrLength).toBe(1)
 })

package/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.tsx.snap

@@ -17,7 +17,8 @@ exports[`CNavbar customize - container and expand are boolean 1`] = `
 exports[`CNavbar customize 1`] = `
 <div>
   <h3
-    class="navbar bg-warning navbar-dark navbar-expand-lg fixed-bottom bazinga"
+    class="navbar bg-warning navbar-expand-lg fixed-bottom bazinga"
+    data-coreui-theme="dark"
   >
     <div
       class="container-xl"

package/src/components/offcanvas/COffcanvas.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
@@ -17,6 +17,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Sets a darker color scheme.
+   */
+  dark?: boolean
   /**
    * Closes the offcanvas when escape key is pressed.
    */
@@ -59,6 +63,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       children,
       backdrop = true,
       className,
+      dark,
       keyboard = true,
       onHide,
       onShow,
@@ -135,6 +140,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
                 role="dialog"
                 tabIndex={-1}
                 onKeyDown={handleKeyDown}
+                {...(dark && { 'data-coreui-theme': 'dark' })}
                 {...rest}
                 ref={forkedRef}
               >
@@ -161,6 +167,7 @@ COffcanvas.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  dark: PropTypes.bool,
   keyboard: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/components/popover/CPopover.tsx

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group'
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -164,7 +164,7 @@ export const CPopover: FC<CPopoverProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: 200,
+              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
             }}
             unmountOnExit
           >

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap

@@ -3,15 +3,15 @@
 exports[`CProgress customize 1`] = `
 <div>
   <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
     class="progress bazinga"
+    role="progressbar"
     style="height: 100px;"
   >
     <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
       class="progress-bar bg-warning"
-      role="progressbar"
       style="width: 50%;"
     >
       Test
@@ -25,7 +25,12 @@ exports[`loads and displays CProgress component 1`] = `
   <div
     class="progress"
   >
-    Test
+    <div
+      class="progress-bar bg-warning"
+      style="width: 0%;"
+    >
+      Test
+    </div>
   </div>
 </div>
 `;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap

@@ -3,11 +3,7 @@
 exports[`CProgressBar customize 1`] = `
 <div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="50"
     class="progress-bar bg-warning progress-bar-striped progress-bar-animated bazinga"
-    role="progressbar"
     style="width: 50%;"
   >
     Test
@@ -18,11 +14,7 @@ exports[`CProgressBar customize 1`] = `
 exports[`loads and displays CProgressBar component 1`] = `
 <div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="0"
     class="progress-bar bg-warning"
-    role="progressbar"
     style="width: 0%;"
   >
     Test

package/src/components/sidebar/CSidebar.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'

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

@@ -285,7 +285,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       )
     }
 
-    const handleSorterChange = (column: string, index: number): void => {
+    const handleSorterChange = (column: string, index: number, order?: 'asc' | 'desc'): void => {
       if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
         return
       }
@@ -293,8 +293,14 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       //if column changed or sort was descending change asc to true
       const state = sorterState ?? { column: '', state: '' }
 
+      if (order) {
+        state.state = order
+      }
+
       if (state.column === column) {
-        if (state.state === 0) {
+        if (order) {
+          state.state = order
+        } else if (state.state === 0) {
           state.state = 'asc'
         } else if (state.state === 'asc') {
           state.state = 'desc'
@@ -303,13 +309,13 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         }
       } else {
         state.column = column
-        state.state = 'asc'
+        state.state = order || 'asc'
       }
 
       setSorterState({ ...state })
     }
 
-    const handleTableFilterChange = (value: string, type: string): void => {
+    const handleTableFilterChange = (value: string, type: string): void => {to
       const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return
@@ -404,11 +410,13 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 handleFilterOnInput={(key, event) => handleColumnFilterChange(key, event, 'input')}
                 handleOnCustomFilterChange={(key, event) => handleColumnFilterChange(key, event)}
                 handleSelectAllChecked={() => handleSelectAllChecked()}
-                handleSort={(key, index) => handleSorterChange(key, index)}
+                handleSort={(key, index, order) => handleSorterChange(key, index, order)}
               />
             )}
             <CSmartTableBody
               clickableRows={clickableRows}
+              columnNames={columnNames}
+              columns={columns ?? columnNames}
               currentItems={currentItems}
               firstItemOnActivePageIndex={firstItemOnActivePageIndex}
               noItemsLabel={noItemsLabel}
@@ -416,7 +424,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 clickableRows && onRowClick && onRowClick(item, index, columnName, event)
               }
               onRowChecked={(item, value) => handleRowChecked(item, value)}
-              columnNames={columnNames}
               scopedColumns={scopedColumns}
               selectable={selectable}
               selected={_selected}

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

@@ -7,12 +7,13 @@ import { CTableDataCell, CTableRow } from '../table'
 
 import { isObjectInArray } from '../../utils'
 
-import type { Item, ScopedColumns } from './types'
-import { getClickedColumnName, getTableDataCellProps } from './utils'
+import type { Column, Item, ScopedColumns } from './types'
+import { getClickedColumnName, getColumnName, getTableDataCellProps, getTableDataCellStyles } from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
   columnNames: string[]
+  columns: (Column | string)[]
   currentItems: Item[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
@@ -28,6 +29,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     {
       clickableRows,
       columnNames,
+      columns,
       currentItems,
       firstItemOnActivePageIndex,
       noItemsLabel,
@@ -40,7 +42,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     },
     ref,
   ) => {
-    const colspan: number = selectable ? columnNames.length + 1 : columnNames.length
+    const colspan: number = selectable ? columns.length + 1 : columns.length
 
     return (
       <CTableBody
@@ -84,7 +86,8 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       />
                     </CTableDataCell>
                   )}
-                  {columnNames.map((colName, index) => {
+                  {columns.map((column, index) => {
+                    const colName = getColumnName(column)
                     return (
                       (scopedColumns &&
                         scopedColumns[colName] &&
@@ -95,7 +98,10 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           },
                         )) ||
                       (item[colName] !== undefined && (
-                        <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
+                        <CTableDataCell 
+                          {...getTableDataCellProps(column, item, colName)}
+                          style={getTableDataCellStyles(column, item, colName)}
+                          key={index}>
                           {item[colName]}
                         </CTableDataCell>
                       ))

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

@@ -35,7 +35,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   handleFilterOnChange?: (key: string, value: string) => void
   handleFilterOnInput?: (key: string, value: string) => void
   handleSelectAllChecked?: () => void
-  handleSort?: (key: string, index: number) => void
+  handleSort?: (key: string, index: number, order?: 'asc' | 'desc') => void
   items: Item[]
   selectable?: boolean
   selectAll?: boolean | { external?: boolean }
@@ -144,21 +144,41 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
             </CTableHeaderCell>
           )}
           {_columns.map((column: Column | string, index: number) => {
+            const isSortable =
+              columnSorter &&
+              (typeof column === 'object'
+                ? column.sorter === undefined
+                  ? true
+                  : column.sorter
+                : true)
             return (
               <CTableHeaderCell
                 {...getTableHeaderCellProps(column)}
-                onClick={() => handleSort && handleSort(getColumnKey(column), index)}
+                // onClick={() => handleSort && handleSort(getColumnKey(column), index)}
                 style={getTableHeaderCellStyles(column, columnSorter)}
                 key={index}
+                {...(isSortable && {
+                  onClick: () => handleSort && handleSort(getColumnKey(column), index),
+                  onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                      handleSort && handleSort(getColumnKey(column), index)
+                    }
+
+                    if (event.key === 'ArrowUp') {
+                      event.preventDefault()
+                      handleSort && handleSort(getColumnKey(column), index, 'asc')
+                    }
+
+                    if (event.key === 'ArrowDown') {
+                      event.preventDefault()
+                      handleSort && handleSort(getColumnKey(column), index, 'desc')
+                    }
+                  },
+                  tabIndex: 0,
+                })}
               >
                 <div className="d-inline">{getColumnLabel(column)}</div>
-                {columnSorter &&
-                  (typeof column === 'object'
-                    ? (column.sorter === undefined
-                      ? true
-                      : column.sorter)
-                    : true) &&
-                  columnSorterIcon(column)}
+                {isSortable && columnSorterIcon(column)}
               </CTableHeaderCell>
             )
           })}
@@ -171,9 +191,9 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                 <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
                   {(
                     typeof column === 'object'
-                      ? (column.filter === undefined
+                      ? column.filter === undefined
                         ? true
-                        : column.filter)
+                        : column.filter
                       : true
                   ) ? (
                     typeof column !== 'string' && typeof column.filter === 'function' ? (