@coreui/react-pro 4.0.0-rc.1

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

@@ -0,0 +1,471 @@
+import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { ColumnFilterValue, CSmartTableProps, Item, SorterValue } from './CSmartTableInterface'
+
+import { CSmartPagination } from '../pagination/CSmartPagination'
+import { CElementCover } from '../element-cover/CElementCover'
+
+import { CTable } from '../table/CTable'
+import { CTableFoot } from '../table/CTableFoot'
+
+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'
+
+export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
+  (
+    {
+      activePage = 1,
+      cleaner,
+      clickableRows,
+      columnFilter,
+      columnFilterValue, // TODO: consider to use only columnFilter prop
+      columns,
+      columnSorter,
+      footer,
+      header = true,
+      items,
+      itemsPerPage = 10,
+      itemsPerPageLabel = 'Items per page:',
+      itemsPerPageOptions = [5, 10, 20, 50],
+      itemsPerPageSelect,
+      loading,
+      noItemsLabel = 'No items found',
+      onActivePageChange,
+      onColumnFilterChange,
+      onFilteredItemsChange,
+      onItemsPerPageChange,
+      onRowClick,
+      onSorterChange,
+      onTableFilterChange,
+      pagination,
+      paginationProps,
+      scopedColumns,
+      sorterValue,
+      sortingIcon = (
+        <CIcon
+          width={18}
+          icon={[
+            '512 512',
+            '<polygon fill="var(--ci-primary-color, currentColor)" points="384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372" class="ci-primary"></polygon>',
+          ]}
+          key="csv"
+        />
+      ),
+      sortingIconAscending = (
+        <CIcon
+          width={18}
+          icon={[
+            '512 512',
+            '<polygon fill="var(--ci-primary-color, currentColor)" points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625" class="ci-primary"></polygon>',
+          ]}
+          key="cat"
+        />
+      ),
+      sortingIconDescending = (
+        <CIcon
+          width={18}
+          icon={[
+            '512 512',
+            '<polygon fill="var(--ci-primary-color, currentColor)" points="367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75" class="ci-primary"></polygon>',
+          ]}
+          key="cab"
+        />
+      ),
+      tableBodyProps,
+      tableFootProps,
+      tableFilter,
+      tableFilterLabel = 'Filter:',
+      tableFilterPlaceholder = 'type string...',
+      tableFilterValue, // TODO: consider to use only tableFilter prop
+      tableHeadProps,
+      tableProps,
+      ...rest
+    },
+    ref,
+  ) => {
+    // instance data
+    const compData = useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current
+
+    // reactive data
+    const [_items, setItems] = useState<Item[]>(items || [])
+    const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
+    const [_activePage, setActivePage] = useState<number>(activePage)
+
+    const [sorterState, setSorterState] = useState<SorterValue>(sorterValue || {})
+    const [tableFilterState, setTableFilterState] = useState<string>(
+      tableFilterValue ? tableFilterValue : '',
+    )
+    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
+      columnFilterValue ? columnFilterValue : {},
+    )
+
+    // 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
+
+      if (state.column === column) {
+        if (state.state === 0) {
+          state.state = 'asc'
+        } else if (state.state === 'asc') {
+          state.state = 'desc'
+        } else {
+          state.state = 0
+        }
+      } else {
+        state.column = column
+        state.state = 'asc'
+      }
+      setSorterState({ ...state })
+    }
+
+    const itemsPerPageChange = (event: ChangeEvent<HTMLSelectElement>): void => {
+      if (
+        typeof itemsPerPageSelect !== 'object' ||
+        (typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external)
+      )
+        setItemsPerPage(Number((event.target as HTMLSelectElement).value))
+    }
+
+    const columnFilterChange = (colName: string, value: string, 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 }
+      setColumnFilterState(newState)
+    }
+
+    const tableFilterChange = (value: string, type: string): void => {
+      const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
+      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+        return
+      }
+      setTableFilterState(value)
+    }
+
+    const clean = (): void => {
+      setTableFilterState('')
+      setColumnFilterState({})
+      setSorterState({})
+    }
+
+    // computed
+
+    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
+
+    useMemo(() => {
+      compData.columnFiltered++
+    }, [
+      JSON.stringify(columnFilter),
+      JSON.stringify(columnFilterState),
+      itemsDataColumns.join(''),
+      compData.changeItems,
+    ])
+
+    const columnFiltered: Item[] = useMemo(() => {
+      let items = _items
+      if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
+        return items
+      }
+      Object.entries(columnFilterState).forEach(([key, value]) => {
+        const columnFilter = String(value).toLowerCase()
+        if (columnFilter && itemsDataColumns.includes(key)) {
+          items = items.filter((item) => {
+            return String(item[key]).toLowerCase().includes(columnFilter)
+          })
+        }
+      })
+      return items
+    }, [compData.columnFiltered])
+
+    const tableFiltered: Item[] = useMemo(() => {
+      let items = columnFiltered
+      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
+    }, [compData.columnFiltered, tableFilterState, JSON.stringify(tableFilter)])
+
+    const sortedItems: Item[] = useMemo(() => {
+      const col = sorterState.column
+      if (
+        !col ||
+        !itemsDataColumns.includes(col) ||
+        (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
+      ) {
+        return tableFiltered
+      }
+      //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 = tableFiltered.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(tableFiltered), JSON.stringify(sorterState), JSON.stringify(columnSorter)])
+
+    const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1 //!ok ||
+
+    const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0 //!ok
+
+    const itemsOnActivePage: Item[] = sortedItems.slice(
+      firstItemOnActivePageIndex,
+      firstItemOnActivePageIndex + _itemsPerPage,
+    )
+
+    const currentItems: Item[] = _activePage ? itemsOnActivePage : sortedItems
+
+    const isFiltered: string =
+      tableFilterState || sorterState.column || Object.values(columnFilterState).join('')
+
+    // effects
+
+    useEffect(() => {
+      onActivePageChange && onActivePageChange(_activePage)
+    }, [_activePage])
+
+    useEffect(() => {
+      onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage)
+      setActivePage(1) // TODO: set proper page after _itemsPerPage update
+    }, [_itemsPerPage])
+
+    useEffect(() => {
+      onSorterChange && onSorterChange(sorterState)
+    }, [JSON.stringify(sorterState)])
+
+    useEffect(() => {
+      onColumnFilterChange && onColumnFilterChange(columnFilterState)
+    }, [JSON.stringify(columnFilterState)])
+
+    useEffect(() => {
+      onTableFilterChange && onTableFilterChange(tableFilterState)
+    }, [tableFilterState])
+
+    useEffect(() => {
+      !compData.firstRun && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
+    }, [JSON.stringify(sortedItems)])
+
+    // watch
+    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
+    useMemo(() => setSorterState({ ...sorterValue }), [sorterValue])
+    useMemo(() => setColumnFilterState({ ...columnFilterValue }), [columnFilterValue])
+
+    //items
+    useMemo(() => {
+      if (
+        items &&
+        !compData.firstRun &&
+        (items.length !== _items.length || JSON.stringify(items) !== JSON.stringify(_items))
+      ) {
+        setItems(items)
+        compData.changeItems++
+      }
+    }, undefined)
+
+    compData.firstRun = false
+
+    return (
+      <React.Fragment>
+        <div {...rest} ref={ref}>
+          {(itemsPerPageSelect || tableFilter || cleaner) && (
+            <div className="row my-2 mx-0">
+              {(tableFilter || cleaner) && (
+                <>
+                  <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>
+                  <div className="col-auto p-0">
+                    {cleaner && (
+                      <CSmartTableCleaner
+                        isFiltered={isFiltered}
+                        onClick={() => clean()}
+                        onKeyUp={(event) => {
+                          if (event.key === 'Enter') clean()
+                        }}
+                      />
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="position-relative">
+          <CTable {...tableProps}>
+            {header && (
+              <CSmartTableHead
+                {...tableHeadProps}
+                columnFilter={columnFilter}
+                columns={columns ? columns : rawColumnNames}
+                columnSorter={columnSorter}
+                sorterState={sorterState}
+                sortingIcon={sortingIcon}
+                sortingIconAscending={sortingIconAscending}
+                sortingIconDescending={sortingIconDescending}
+                handleSort={(key, index) => sorterChange(key, index)}
+                handleFilterOnChange={(key, event) => columnFilterChange(key, event, 'change')}
+                handleFilterOnInput={(key, event) => columnFilterChange(key, event, 'input')}
+              />
+            )}
+            <CSmartTableBody
+              currentItems={currentItems}
+              firstItemOnActivePageIndex={firstItemOnActivePageIndex}
+              noItemsLabel={noItemsLabel}
+              onRowClick={(item, index, columnName, event) =>
+                clickableRows && onRowClick && onRowClick(item, index, columnName, event)
+              }
+              rawColumnNames={rawColumnNames}
+              scopedColumns={scopedColumns}
+              {...tableBodyProps}
+            />
+            {footer && (
+              <CSmartTableHead
+                component={CTableFoot}
+                {...tableFootProps}
+                columnFilter={false}
+                columnSorter={false}
+                columns={columns ? columns : rawColumnNames}
+              />
+            )}
+          </CTable>
+          {loading && (
+            <CElementCover
+              boundaries={[
+                { sides: ['top'], query: 'td' },
+                { sides: ['bottom'], query: 'tbody' },
+              ]}
+            />
+          )}
+        </div>
+
+        {(pagination || itemsPerPageSelect) && (
+          <div className="row">
+            <div className="col-auto">
+              {pagination && numberOfPages > 1 && (
+                <CSmartPagination
+                  {...paginationProps}
+                  onActivePageChange={(page) => {
+                    setActivePage(page)
+                  }}
+                  pages={numberOfPages}
+                  activePage={_activePage}
+                />
+              )}
+            </div>
+            <div className="col-auto ms-auto">
+              {itemsPerPageSelect && (
+                <CSmartTableItemsPerPageSelector
+                  itemsPerPage={_itemsPerPage}
+                  itemsPerPageLabel={itemsPerPageLabel}
+                  itemsPerPageOptions={itemsPerPageOptions}
+                  onChange={(event: ChangeEvent<HTMLSelectElement>) => itemsPerPageChange(event)}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </React.Fragment>
+    )
+  },
+)
+
+CSmartTable.propTypes = {
+  activePage: PropTypes.number,
+  cleaner: PropTypes.bool,
+  clickableRows: PropTypes.bool,
+  columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  columnFilterValue: PropTypes.object,
+  columns: PropTypes.array,
+  columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  footer: PropTypes.bool,
+  header: PropTypes.bool,
+  items: PropTypes.array,
+  itemsPerPage: PropTypes.number,
+  itemsPerPageLabel: PropTypes.string,
+  itemsPerPageOptions: PropTypes.array,
+  itemsPerPageSelect: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  loading: PropTypes.bool,
+  noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  onActivePageChange: PropTypes.func,
+  onColumnFilterChange: PropTypes.func,
+  onFilteredItemsChange: PropTypes.func,
+  onItemsPerPageChange: PropTypes.func,
+  onRowClick: PropTypes.func,
+  onSorterChange: PropTypes.func,
+  onTableFilterChange: PropTypes.func,
+  pagination: PropTypes.bool,
+  paginationProps: PropTypes.any, // TODO: update
+  scopedColumns: PropTypes.object,
+  sorterValue: PropTypes.object,
+  sortingIcon: PropTypes.node,
+  sortingIconAscending: PropTypes.node,
+  sortingIconDescending: PropTypes.node,
+  tableBodyProps: PropTypes.object,
+  tableFootProps: PropTypes.object,
+  tableFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  tableFilterLabel: PropTypes.string,
+  tableFilterPlaceholder: PropTypes.string,
+  tableFilterValue: PropTypes.string,
+  tableHeadProps: PropTypes.object,
+  tableProps: PropTypes.object,
+}
+
+CSmartTable.displayName = 'CSmartTable'

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

@@ -0,0 +1,146 @@
+import React, { forwardRef, MouseEvent, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+
+import { CTableBody, CTableBodyProps } from '../table/CTableBody'
+import { CTableRow } from '../table/CTableRow'
+import { CTableDataCell } from '../table/CTableDataCell'
+
+import { Item, ScopedColumns } from './CSmartTableInterface'
+
+export interface CSmartTableBodyProps extends CTableBodyProps {
+  clickableRows?: boolean
+  currentItems: Item[]
+  firstItemOnActivePageIndex: number
+  noItemsLabel?: string | ReactNode
+  onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void
+  rawColumnNames: string[]
+  scopedColumns?: ScopedColumns
+}
+
+export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBodyProps>(
+  (
+    {
+      clickableRows,
+      currentItems,
+      firstItemOnActivePageIndex,
+      noItemsLabel,
+      onRowClick,
+      rawColumnNames,
+      scopedColumns,
+      ...rest
+    },
+    ref,
+  ) => {
+    const tableDataCellProps = (item: Item, colName: string) => {
+      const props = item._cellProps && {
+        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+      }
+
+      return props
+    }
+
+    const getColumnName = (event: MouseEvent): string => {
+      const target = event.target as HTMLTextAreaElement
+      const closest = target.closest('tr')
+      const children = closest ? Array.from(closest.children) : []
+      const clickedCell = children.filter((child) => child.contains(target))[0]
+      return rawColumnNames[children.indexOf(clickedCell)]
+    }
+
+    const colspan: number = rawColumnNames.length
+
+    return (
+      <CTableBody
+        {...(clickableRows && {
+          style: { cursor: 'pointer' },
+        })}
+        {...rest}
+        ref={ref}
+      >
+        {currentItems.map((item: Item, trIndex) => {
+          return (
+            <React.Fragment key={trIndex}>
+              <CTableRow
+                {...(item._props && { ...item._props })}
+                {...(clickableRows && { tabIndex: 0 })}
+                onClick={(event) =>
+                  onRowClick &&
+                  onRowClick(
+                    item,
+                    trIndex + firstItemOnActivePageIndex,
+                    getColumnName(event),
+                    event,
+                  )
+                }
+              >
+                {rawColumnNames.map((colName, index) => {
+                  return (
+                    (scopedColumns &&
+                      scopedColumns[colName] &&
+                      React.cloneElement(
+                        scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
+                        {
+                          key: index,
+                        },
+                      )) || (
+                      <CTableDataCell {...tableDataCellProps(item, colName)} key={index}>
+                        {String(item[colName])}
+                      </CTableDataCell>
+                    )
+                  )
+                })}
+              </CTableRow>
+              {scopedColumns && scopedColumns.details && (
+                <>
+                  <CTableRow>
+                    <CTableDataCell
+                      colSpan={colspan}
+                      className="p-0"
+                      style={{ borderBottomWidth: 0 }}
+                      tabIndex={-1}
+                    ></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow
+                    onClick={(event) =>
+                      onRowClick &&
+                      onRowClick(
+                        item,
+                        trIndex + firstItemOnActivePageIndex,
+                        getColumnName(event),
+                        true,
+                      )
+                    }
+                    className="p-0"
+                    key={`details${trIndex}`}
+                  >
+                    <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
+                      {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
+                    </CTableDataCell>
+                  </CTableRow>
+                </>
+              )}
+            </React.Fragment>
+          )
+        })}
+        {!currentItems.length && (
+          <CTableRow>
+            <CTableDataCell colSpan={colspan}>{noItemsLabel}</CTableDataCell>
+          </CTableRow>
+        )}
+      </CTableBody>
+    )
+  },
+)
+
+CSmartTableBody.propTypes = {
+  clickableRows: PropTypes.bool,
+  currentItems: PropTypes.array.isRequired,
+  firstItemOnActivePageIndex: PropTypes.number.isRequired,
+  noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  onRowClick: PropTypes.func,
+  rawColumnNames: PropTypes.array.isRequired,
+  scopedColumns: PropTypes.object,
+}
+
+CSmartTableBody.displayName = 'CSmartTableBody'

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

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+
+import CIcon from '@coreui/icons-react'
+
+interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
+  content?: string | ReactNode
+  isFiltered?: string
+}
+
+export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
+  (
+    {
+      content = (
+        <CIcon
+          width={18}
+          icon={[
+            '512 512',
+            '<polygon fill="var(--ci-primary-color, currentColor)" points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225" class="ci-primary"></polygon>',
+          ]}
+        />
+      ),
+      isFiltered,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        type="button"
+        className="btn btn-transparent"
+        {...(!isFiltered && {
+          disabled: true,
+          tabIndex: -1,
+        })}
+        {...rest}
+        ref={ref}
+      >
+        {content}
+      </button>
+    )
+  },
+)
+
+CSmartTableCleaner.propTypes = {
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  isFiltered: PropTypes.string,
+}
+
+CSmartTableCleaner.displayName = 'CSmartTableCleaner'

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

@@ -0,0 +1,33 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+import { CFormLabel } from '../form/CFormLabel'
+import { CFormInput } from '../form/CFormInput'
+
+interface CSmartTableFilterProps extends HTMLAttributes<HTMLInputElement> {
+  // TODO: consider to simplify ex. filterLabel --> label
+  filterLabel?: string
+  filterPlaceholder?: string
+  value?: string | number
+}
+
+export const CSmartTableFilter = forwardRef<HTMLInputElement, CSmartTableFilterProps>(
+  ({ filterLabel, filterPlaceholder, value, ...rest }, ref) => {
+    return (
+      <div className="row mb-2">
+        <CFormLabel className="col-sm-auto col-form-label">{filterLabel}</CFormLabel>
+        <div className="col-sm-auto">
+          <CFormInput placeholder={filterPlaceholder} value={value} {...rest} ref={ref} />
+        </div>
+      </div>
+    )
+  },
+)
+
+CSmartTableFilter.propTypes = {
+  filterLabel: PropTypes.string,
+  filterPlaceholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+CSmartTableFilter.displayName = 'CSmartTableFilter'