Theme

npm_versionnpm Paragon package page

The TableControlBar component is meant to be rendered within a DataTableContext (provided by DataTable here). The context provides necessary information to the control bar, such as the filters and filter state, the selection state of the table, as well as any bulk actions.

It always shows the SmartStatus component. If applicable, it displays the DropdownFilters component, the BulkActions component.

Basic usage

Any Paragon component or export may be added to the code example.

TableControlBar Subcomponents

These components are used by the TableControlBar but can also be used individually as children of DataTable.

Theme Variables#

CSS VariableComputed Value










Props API#

TableControlBar Props API
  • className string

    Specifies class name to append to the base element

    Defaultnull
BulkActions Props API
  • className string

    class names for the div wrapping the button components

    Defaultnull
DropdownFilters Props API
This component does not receive any props.
FilterStatus Props API
  • className string
    Defaultnull
  • buttonClassName string
    Default'pgn__smart-status-button'
  • variant string
    Default'link'
  • size string
    Default'inline'
  • clearFiltersText element | string
  • showFilteredFields bool
    Defaulttrue
SmartStatus Props API
This component does not receive any props.
SelectionStatus Props API
  • className string

    A class name to append to the base element

  • clearSelectionText string | element

    A text that appears on the Clear selection button, defaults to 'Clear Selection'

RowStatus Props API
  • className string

    Specifies class name to append to the base element.

  • statusText string | element

    A text describing how many rows is shown in the table.