Table Filters

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.

DropdownFilter#