useFilters

All of Kyber's Filters are compatible with the useFilters plugin.

Filters are configured through the column object. When the useFilters plugin is used a column can define a filter property with a type that will create a filter of that type. For example, the following column array would bind a NumberFilter to the salary column. The type property is unique to the filter object and any other properties will be passed as props to the filter component.

Note: This demo is statefully managed for the purpose of showing how the plugin can be used statefully. The options columnState and onFilterChange are not required.

const columns = [
  {
    key: 'salary',
    label: 'Salary',
    filter: { type: 'Number', operator: 'gte' },
  },
];

Result

Loading...

Live Editor

// This reduce will create sets of data that will be used with Single and MultiSelect filters this demo const allTheThings = dataTableFilterData.reduce( (acc, cur) => { acc.gender.add(cur.gender); acc.mime_type.add(cur.mime_type); if (!acc.car_make_model[cur.car_make]) { acc.car_make_model[cur.car_make] = new Set(); } acc.car_make_model[cur.car_make].add(cur.car_model); if (!acc.location[cur.location_country]) { acc.location[cur.location_country] = new Set(); } acc.location[cur.location_country].add(cur.location_city); return acc; }, { gender: new Set(), car_make_model: {}, location: {}, mime_type: new Set(), }, ); // This will take the provided option set and return a sorted array of { label, value } pairs to provide to the SingleSelect and MultiSelect filters function getOptions(optionSet) { return Array.from(optionSet) .sort((a, b) => a.localeCompare(b)) .map((item) => ({ label: item, value: item, })); } // This will take the provided option set and return a nested array of parent and child options to provide to the CollapsibleSingleSelect and CollapsibleMultiSelect filters function getCollapsibleOptions(optionSet) { return Object.entries(optionSet) .map(([parentKey, children]) => ({ label: parentKey, id: parentKey, children: Array.from(children) .sort((a, b) => a.localeCompare(b)) .map((child) => ({ label: child, id: `${parentKey}/${child}`, })), })) .sort((a, b) => a.label.localeCompare(b.label)); } const genderOptions = getOptions(allTheThings.gender); const mimeTypeOptions = getOptions(allTheThings.mime_type); const carMakeModelOptions = getCollapsibleOptions(allTheThings.car_make_model); const locationOptions = getCollapsibleOptions(allTheThings.location); dataTableFilterData.forEach((item) => { item.car_make_model = `${item.car_make}/${item.car_model}`; item.location = `${item.location_country}/${item.location_city}`; }); const columns = [ { key: 'name', label: 'Name', }, { key: 'salary', label: 'Salary', filter: { type: 'Number', operator: 'gte' }, }, { key: 'gender', label: 'Gender', filter: { type: 'SingleSelect', options: genderOptions }, }, { key: 'birthday', label: 'Birthday', dateFormat: 'MM/dd/yyyy', filter: { type: 'DateRange', minYear: 1950, maxYear: 2021 }, }, { key: 'car_make_model', label: 'Car Make/Model', filter: { type: 'CollapsibleSingleSelect', options: carMakeModelOptions }, }, { key: 'location', label: 'Country/City', filter: { type: 'CollapsibleMultiSelect', searchable: true, options: locationOptions }, }, { key: 'mime_type', label: 'Preferred File Type', filter: { type: 'MultiSelect', searchable: true, options: mimeTypeOptions }, }, ]; const Example = () => { const [data, setData] = React.useState(dataTableFilterData); const [columnState, setColumnState] = React.useState({ birthday: { value: { startDate: new Date(1950, 0, 1), endDate: new Date(1999, 11, 31) } }, }); return ( <DataTable id="demo-component" columns={columns} data={data} plugins={[ useFilters({ columnState, onFilterChange: (event, payload) => setColumnState(payload), }), usePagination(), ]} title="Clients" responsive stacked /> ); }; render(<Example />);

// This reduce will create sets of data that will be used with Single and MultiSelect filters this demo
const allTheThings = dataTableFilterData.reduce(
  (acc, cur) => {
    acc.gender.add(cur.gender);
    acc.mime_type.add(cur.mime_type);

    if (!acc.car_make_model[cur.car_make]) {
      acc.car_make_model[cur.car_make] = new Set();
    }

    acc.car_make_model[cur.car_make].add(cur.car_model);

    if (!acc.location[cur.location_country]) {
      acc.location[cur.location_country] = new Set();
    }

    acc.location[cur.location_country].add(cur.location_city);

    return acc;
  },
  {
    gender: new Set(),
    car_make_model: {},
    location: {},
    mime_type: new Set(),
  },
);

// This will take the provided option set and return a sorted array of { label, value } pairs to provide to the SingleSelect and MultiSelect filters
function getOptions(optionSet) {
  return Array.from(optionSet)
    .sort((a, b) => a.localeCompare(b))
    .map((item) => ({
      label: item,
      value: item,
    }));
}

// This will take the provided option set and return a nested array of parent and child options to provide to the CollapsibleSingleSelect and CollapsibleMultiSelect filters
function getCollapsibleOptions(optionSet) {
  return Object.entries(optionSet)
    .map(([parentKey, children]) => ({
      label: parentKey,
      id: parentKey,
      children: Array.from(children)
        .sort((a, b) => a.localeCompare(b))
        .map((child) => ({
          label: child,
          id: `${parentKey}/${child}`,
        })),
    }))
    .sort((a, b) => a.label.localeCompare(b.label));
}

const genderOptions = getOptions(allTheThings.gender);
const mimeTypeOptions = getOptions(allTheThings.mime_type);
const carMakeModelOptions = getCollapsibleOptions(allTheThings.car_make_model);
const locationOptions = getCollapsibleOptions(allTheThings.location);

dataTableFilterData.forEach((item) => {
  item.car_make_model = `${item.car_make}/${item.car_model}`;
  item.location = `${item.location_country}/${item.location_city}`;
});

const columns = [
  {
    key: 'name',
    label: 'Name',
  },
  {
    key: 'salary',
    label: 'Salary',
    filter: { type: 'Number', operator: 'gte' },
  },
  {
    key: 'gender',
    label: 'Gender',
    filter: { type: 'SingleSelect', options: genderOptions },
  },
  {
    key: 'birthday',
    label: 'Birthday',
    dateFormat: 'MM/dd/yyyy',
    filter: { type: 'DateRange', minYear: 1950, maxYear: 2021 },
  },
  {
    key: 'car_make_model',
    label: 'Car Make/Model',
    filter: { type: 'CollapsibleSingleSelect', options: carMakeModelOptions },
  },
  {
    key: 'location',
    label: 'Country/City',
    filter: { type: 'CollapsibleMultiSelect', searchable: true, options: locationOptions },
  },
  {
    key: 'mime_type',
    label: 'Preferred File Type',
    filter: { type: 'MultiSelect', searchable: true, options: mimeTypeOptions },
  },
];

const Example = () => {
  const [data, setData] = React.useState(dataTableFilterData);
  const [columnState, setColumnState] = React.useState({
    birthday: { value: { startDate: new Date(1950, 0, 1), endDate: new Date(1999, 11, 31) } },
  });

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={data}
      plugins={[
        useFilters({
          columnState,
          onFilterChange: (event, payload) => setColumnState(payload),
        }),
        usePagination(),
      ]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Plugin

PluginProperties

Type: Object

Properties

• filterMethod A function that can be used to overwrite the default filtering of the plugin.
• columnState Object? The initial or statefully managed state of all filters. See the filter type of the column for properties that can be provided.
• onFilterChange A callback that will be called whenever a filter is applied.

useFilters

Create a plugin hook that enables DataTable filtering and adds the filter component to the table bar.

Parameters

• props (optional, default {})

Returns Plugin

filterMethod

The filter method callback can be used to manually filter data based on applied filter values.

Type: Function

Parameters

• filterValues Object An object representing all the applied filters. This contains key value pairs keyed by column key.

onFilterChange

A callback that will be called whenever a filter is applied.

Type: Function

Parameters

• Event Object
• filterValues Object An object representing all the applied filters. This contains key value pairs keyed by column key.