Searchtabular is a npm package that is part of the reactabular family. It has search utilities that can be applied to rows of data before rendering it in a table. Searchtabular has only text filter as part of the package. It does not have filters for date, number or boolean. This is where the searchtabular-antd package comes in. The searchtabular-antd package takes help of antd component library for various UI elements for the filters.

The following antd components are used as filters:

  1. Input – text filter.
  2. DatePicker – date filter.
  3. Checkbox – boolean filter.
  4. InputNumber – range filter for numbers.

Using searchtabular-antd

Using the package is similar to using searchtabular.

The above import has all the utility functions available with the search object. The most common function used to search rows with the search query is:

The key parameters supplied to the above function are columns (column definitions) and query (search query).

A column definition describes the table columns. A typical column definition is shown below.

Search query is an object which has the filters selected by the user. For example, a search query for age is:

Within searchtabular, all the columns are text and represented by text filters (Input). To use advanced filters, the column definition should be enhanced. For the age column, the column definition can indicate that it is a number.

The search query for age can indicate min and max value for age.

With the above query, all rows with people whose age is within the 21-35 range are filtered and displayed.

The following screenshot shows how the table appears with the advanced search filters.

advanced filters
reactabular table with advanced filters
Advanced filters for searchtabular
Tagged on: