Theme

npm_versionnpm Paragon package page

The DataTable component is a wrapper that uses the react-table library to create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.

Filtering and sorting

Paragon currently provides a variety of filter types, and you can also define your own filter types.

In the example below, a default TextFilter component is used as the default filter for all columns. A default filter can be passed in, or a filter component can be defined on the column using the Filter attribute. See react-table filters documentation for more information.

Available filter functions

A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see react-table filters documentation for more information. Filter functions are defined on the column as the filter attribute.

text
This is the default filter function. It lower-cases the search string and checks if the row value includes the search string
exactText
Checks that the row value matches the search string exactly (case-insensitive)
exactTextCase
Checks that the row value matches the search string exactly (case-sensitive)
includes
Check that the row value includes the search string
includesAll
Check that the row value includes every item in the array
includesSome
Check that row value includes some item in the array
includesValue
Check that the filter value includes the value of the row
exact
Checks for exact equality between the row value and the search term.
===
equals
Checks for equality between the row value and the search term.
==
between
Expects an array with a min and max value as the search term. Checks that the row value is between the min and max

Using Filter components with filter functions

The MultiSelectDropdownFilter and CheckboxFilter components expect an array of values. It is best to use them with the includesValue filter function. The TextFilter and DropdownFilter components can be used with a variety of the above filter functions.

TextFilter, MultiSelectDropdownFilter, CheckboxFilter

The checkbox filter is used in the dropdown. A CheckboxFilter is used on the coat color column. Filters can be defined on the columns themselves. The CheckboxFilter, DropdownFilter, and MultiSelectDropdownFilter additionally require that the filterChoices property be defined on the column.

The number of filters displayed in the TableControlBar can be modified by passing the numBreakoutFilters prop. When the screen size is small, all filters will be rendered in the dropdown.

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

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

Theme Variables (SCSS)#

$data-table-background-color: $white !default;
$data-table-border: 2px solid $light-300 !default;
$data-table-box-shadow: $box-shadow-sm !default;
$data-table-padding-x: .75rem !default;
$data-table-padding-y: .75rem !default;
$data-table-padding-small: .5rem !default;
$data-table-cell-padding: .5rem .75rem !default;
$data-table-footer-position: center !default;
$data-table-pagination-dropdown-max-height: 60vh !default;
$data-table-pagination-dropdown-min-width: 6rem !default;
$data-table-layout-sidebar-width: 12rem !default;

Props API#

TextFilter Props API
  • column shape {
    setFilter: func Required,
    Header: elementType | node Required,
    getHeaderProps: func Required,
    filterValue: string,
    }
    Required

    Specifies a column object.

    setFilter: Function to set the filter value.

    Header: Column header used for labels and placeholders.

    getHeaderProps: Generates a key unique to the column being filtered.

    filterValue: Value for the filter input.

CheckboxFilter Props API
  • column shape {
    setFilter: func Required,
    Header: elementType | node Required,
    filterChoices: shape {
    name: string Required,
    value: string | number,
    number: number,
    }
    [] Required
    ,
    getHeaderProps: func Required,
    filterValue: string[],
    }
    Required

    Specifies a column object.

    setFilter: Function to set the filter value.

    Header: Column header used for labels and placeholders.

    filterChoices: Specifies array of choices.

    getHeaderProps: Generates a key unique to the column being filtered.

    filterValue: Value for the filter input.

DropdownFilter Props API
  • column shape {
    setFilter: func Required,
    Header: elementType | node Required,
    filterChoices: shape {
    name: string Required,
    number: number,
    value: string | number Required,
    }
    [] Required
    ,
    getHeaderProps: func Required,
    }
    Required

    Specifies a column object.

    setFilter: Function to set the filter value.

    Header: Column header used for labels and placeholders.

    filterChoices: Specifies array of choices.

    getHeaderProps: Generates a key unique to the column being filtered.

MultiSelectDropdownFilter Props API
  • column shape {
    setFilter: func Required,
    Header: elementType | node Required,
    filterChoices: shape {
    name: string Required,
    number: number,
    value: string | number Required,
    }
    [] Required
    ,
    getHeaderProps: func Required,
    filterValue: string[],
    }
    Required

    Specifies a column object.

    setFilter: Function to set the filter value.

    Header: Column header used for labels and placeholders.

    filterChoices: Specifies array of choices.

    getHeaderProps: Generates a key unique to the column being filtered.

    filterValue: Value for the filter input.