React Smart Table Component (DataTable) API

The controlled active page. Pair it with onActivePageChange; for the uncontrolled mode use defaultActivePage instead. Only applicable when pagination prop is enabled.

A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button.

A string that provides an accessible label for the checkbox that selects every row. This label is read by screen readers to describe the action associated with the checkbox.

A string that provides an accessible label for the checkbox that selects a single row. This label is read by screen readers to describe the action associated with the checkbox.

When set, displays a button above the table that resets globalFilterValue, columnFilterValue and sorterValue, next to the global filter. The button is disabled when there is nothing to reset.

The icon of the cleaner button.

Style table items as clickable.

When set, displays additional filter row between table header and items, allowing filtering by specific column. Column filter can be customized, by passing prop as object with additional options as keys. Available options: - lazy (Boolean) - Set to true to trigger filter updates only on change event.

The controlled column filter values. Pair it with onColumnFilterChange; for the uncontrolled mode use defaultColumnFilterValue instead. To set pass object where keys are column names and values are filter strings e.g.: { user: 'John', age: 12 }

Table columns configuration. When omitted, the columns are generated from the keys of the first item, skipping the keys that begin with an underscore. Each array item is either a column name, a column object or a group of columns: - key (required)(String) - the name of the item property the column displays. - label (String) - the visible label of the column. When omitted, it is generated from key by splitting kebab-case and snake_case into words and capitalizing each of them. - sortable (Boolean) - set to false to exclude the column from sorting. - sorter (Function) - a custom comparator for the column, called with two items. - filterable (Boolean) - set to false to remove the filter from the column. - filter (Function) - a custom filter for the column, called with the column values, a change handler and the current filter state. - headerStyle (Object) - inline styles for the column header (useful for defining widths). - headerProps (Object) - properties for the column header cell. - cellStyle (Object) - inline styles for every data cell in the column. - cellProps (Object) - properties for every data cell in the column. - children (Array) - columns grouped under one header; a group carries label and children only.

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. Sorter can be customized, by passing prop as object with additional options as keys. Available options: - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order will be maintained across multiple columns based on the order of interaction. - resettable (Boolean) - If set to true, clicking on the sorter cycles through three states: ascending, descending, and null (no sorting). The third click on the sorter will reset the sorting and restore the table to its original order.

The initial active page for the uncontrolled mode. Ignored when activePage is set.

The initial column filter values for the uncontrolled mode. Ignored when columnFilterValue is set.

The initial global filter value for the uncontrolled mode. Ignored when globalFilterValue is set.

The initial number of items per page for the uncontrolled mode. Ignored when itemsPerPage is set.

The initial selected items for the uncontrolled mode. Ignored when selected is set.

The initial sorter state for the uncontrolled mode. Ignored when sorterValue is set.

The items are already filtered, sorted and sliced by the data source, so the table renders them as they are and only reports the requested state through the callbacks. Use totalItems to let it compute the number of pages.

If true Displays table footer, which mirrors table header. (without column filter). Or Array of objects or strings, where each element represents one cell in the table footer. Example items: ['FooterCell', 'FooterCell', 'FooterCell'] or [{ label: 'FooterCell', props: { theme: 'success' }, ...]

When set, displays a filter input above the table that filters the items by the values of all columns. The global filter can be customized, by passing prop as object with additional options as keys. Available options: - lazy (Boolean) - Set to true to trigger filter updates only on change event.

The element represents a caption for the global filter input.

Specifies a short hint that is visible in the global filter input.

The controlled value of the global filter. Pair it with onGlobalFilterChange; for the uncontrolled mode use defaultGlobalFilterValue instead.

Set to false to remove table header.

The name of the item property that identifies a row. When set, selection and row keys compare that value instead of the whole item.

Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: { name: 'John' , age: 12, _props: { theme: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}

The controlled number of items per page. Pair it with onItemsPerPageChange; for the uncontrolled mode use defaultItemsPerPage instead. Only applicable when pagination is enabled.

Label for items per page selector.

Items per page selector options.

Adds select element over table, which is used for control items per page in pagination. Only applicable when pagination is enabled.

When set, table will have loading style: loading spinner and reduced opacity.

The content of the cover displayed over the table while loading is set.

ReactNode or string for passing custom noItemsLabel texts.

Page change callback.

Column filter change callback.

Filtered items change callback.

Global filter change callback.

Pagination change callback.

Row checked callback.

Row click callback.

Selected items change callback.

Sorter value change callback.

Enables default pagination. The number of pages is generated from the number of items and itemsPerPage; with external set it is generated from totalItems instead.

Properties to CSmartPagination component - https://coreui.io/react/docs/components/smart-pagination#csmartpagination

Scoped columns.

Add checkboxes to make table rows selectable.

Enables select all checkbox displayed in the header of the table.

The controlled selected items — array of objects, where each object represents one item - row in table. Pair it with onSelectedChange; for the uncontrolled mode use defaultSelected instead. Example item: { name: 'John' , age: 12 }

Sorter icon when items are sorted ascending.

Sorter icon when items are sorted descending.

The controlled state of the sorter. Pair it with onSorterChange; for the uncontrolled mode use defaultSorterValue instead. Each entry names a column and the direction, 'asc' or 'desc'.

Sorter icon when items are unsorted.

Properties to CTableBody component - https://coreui.io/react/docs/components/table/#ctablebody

Properties to CTableFoot component - https://coreui.io/react/docs/components/table/#ctablefoot

Properties to CTableHead component - https://coreui.io/react/docs/components/table/#ctablehead

Properties to CTable component - https://coreui.io/react/docs/components/table/#ctable

The total number of items. Use it when you pass a portion of the data from an external source to let the component know how many items there are in total.

Toggle the active state for the component. With toggle it is the controlled active state of the toggle button. For the uncontrolled toggle use defaultActive; manage the controlled state from onClick.

A string that provides an accessible label for the cleaner button. Defaults to ariaCleanerLabel of CSmartTable.

Component used for the root node. Either a string to use a HTML element or a component.

A string of all className you want applied to the base component.

Sets the color context of the component to one of CoreUI’s themed colors.

Use theme instead — color renders the same theme-{color} class and loses to theme when both are set.

The initial active state of an uncontrolled toggle button — read once on mount. Ignored when active is set.

Toggle the disabled state for the component.

The href attribute specifies the URL of the page the link goes to.

The icon of the cleaner button. Defaults to cleanerIcon of CSmartTable.

Square the button for a lone icon - remember to give it an aria-label.

Render the button as a link. It behaves like a button but takes its color from the link color rather than from a theme, so theme and variant do not apply to it.

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

Select the shape of the component.

Size the component extra small, small or large.

Sets the color context of the component to one of CoreUI’s themed colors. Pair it with variant for the shape — a button is a shape plus a colour. The class may also sit on any ancestor, so theming a toolbar themes the buttons inside it.

Make the button behave as a toggle button. It manages its own active/pressed state, toggling it on click and reflecting it via the aria-pressed attribute.

Specifies the type of button. Always specify the type attribute for the <button> element. Different browsers may use different default types for the <button> element.

Set the shape of the button — how much ink it uses. Defaults to solid when theme is set.

Properties passed to the CTableBody component. Defaults to tableBodyProps of CSmartTable.

Properties passed to the CTableFoot component. Defaults to tableFootProps of CSmartTable.

Properties passed to the CTableHead component. Defaults to tableHeadProps of CSmartTable.

Properties passed to the CTable component. Defaults to tableProps of CSmartTable.

The caption of the global filter input. Defaults to globalFilterLabel of CSmartTable.

A short hint visible in the global filter input. Defaults to globalFilterPlaceholder of CSmartTable.

The caption of the items per page select. Defaults to itemsPerPageLabel of CSmartTable.

The values offered by the select. Defaults to itemsPerPageOptions of CSmartTable.

Current page number.

Horizontall align.

Show/hide arrows.

A string of all className you want applied to the base component.

Show/hide dots.

Show double arrows buttons.

The content of firstButton button.

The content of lastButton button.

Maximum items number.

The content of nextButton button.

On active page change callback.

Number of pages. Defaults to the number of pages the table computed.

The content of previousButton button.

Size of pagination, valid values: 'sm', 'lg'.