Skip to main content

Pivotal UI

v19.0.0
Components / Text filter

Text filter

The TextFilter component provides a filter text input and allows you to filter and render a list of data based on the entered filter text.

Filter out data that does not contain the filter text

Given a list of data, render only the items that contain the filter text.

ReferenceError: React is not defined
Filter out rows of a table based on filter text

Given a list of objects, render table rows for the objects with a name property that contains the filter text.

ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
datatruearray[]array of the data to filter.
emptyStatefalsenodeNode to render when there is no results due to filtering. If not provided renderFilteredData will be called with empty data.
filtertruefunction(data, filterText) => datafilter function takes in the data and the current filter text, applies transformations, and returns the filtered data.
filterPlaceholderTextfalsestring'Filter...'Text to show where user input is accepted
renderFilteredDatatruefunction() => nullcallback to render the result of filtering on the data.

Imports

Import React components (including CSS):

import {TextFilter} from 'pivotal-ui/react/text-filter';

Import CSS only:

import 'pivotal-ui/css/text-filter';