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.

Show editable code example

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

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: MultiSelectDropdownFilter,
      filter: 'includesValue',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}

/>

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: MultiSelectDropdownFilter,
      filter: 'includesValue',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}

/>

DropdownFilter

Show editable code example

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

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: DropdownFilter,
      filter: 'equals',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}

/>

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  numBreakoutFilters={2}
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
      Filter: DropdownFilter,
      filter: 'equals',
      filterChoices: [
        {
          name: 'Four',
          value: 4,
        },
        {
          name: 'One',
          value: 1,
        },
        {
          name: 'Twelve',
          value: 12,
        },
        {
          name: 'Nine',
          value: 9,
        },
        {
          name: 'Seventeen',
          number: 17,
          value: 17,
        },
      ]
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
      Filter: CheckboxFilter,
      filter: 'includesValue',
      filterChoices: [{
        name: 'russian white',
        number: 1,
        value: 'russian white',
      },
      {
        name: 'orange tabby',
        number: 2,
        value: 'orange tabby',
      },
      {
        name: 'brown tabby',
        number: 3,
        value: 'brown tabby',
      },
      {
        name: 'siamese',
        number: 1,
        value: 'siamese',
      }]
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}

/>

Theme Variables (SCSS)#

$data-table-background-color:  $white !default;
$data-table-border:  1px solid $gray-200 !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: func | 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: func | 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: func | 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: func | 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.

Paragon Design System

Theme

PlaygroundBeta

Table Filters

Filtering and sorting

Available filter functions

Using Filter components with filter functions

TextFilter, MultiSelectDropdownFilter, CheckboxFilter

DropdownFilter

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Theme

PlaygroundBeta

Table Filters

Filtering and sorting#

Available filter functions#

Using Filter components with filter functions#

TextFilter, MultiSelectDropdownFilter, CheckboxFilter#

DropdownFilter#

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Filtering and sorting

Available filter functions

Using Filter components with filter functions

TextFilter, MultiSelectDropdownFilter, CheckboxFilter

DropdownFilter