src/ui/components/shared/RvTable/RvTable.jsx

import { CDataTable } from '@coreui/react'
import { getTranslation } from '@Translations'

function RvTable({
  itemsPerPageSelect = true,
  itemsPerPage = 10,
  items,
  fields,
  customizedCells,
  sorterValue,
  sorter = true,
  hover = true,
  clickableRows = false,
  striped = true,
  activePage = 1,
  pagination = true,
  header = true,
  columnHeaderSlot = {},
  onPageChange = e => {},
  onPaginationChange = e => {},
  onRowClick = (item, index, cellId, e) => {},
  className = ''
}) {
  return (
    <CDataTable
      className={className}
      itemsPerPageSelect={
        {
          label: getTranslation('ItemsPerPage.text'),
          values: [5, 10, 15, 20, 50]
        } | itemsPerPageSelect
      }
      itemsPerPage={itemsPerPage}
      noItemsViewSlot={
        <h5 className="my-5 text-center text-dark">
          {getTranslation('NoItems.text')}
        </h5>
      }
      items={items}
      fields={fields}
      hover={hover}
      striped={striped}
      bordered
      outlined
      size="lg"
      sorter={sorter}
      sorterValue={sorterValue}
      pagination={pagination}
      clickableRows={clickableRows || undefined}
      scopedSlots={customizedCells}
      activePage={activePage}
      columnHeaderSlot={columnHeaderSlot}
      header={header}
      onPageChange={e => onPageChange(e)}
      onRowClick={(item, index, cellId, e) => {
        onRowClick(item, index, cellId, e)
      }}
      onPaginationChange={onPaginationChange}
    />
  )
}

export default RvTable