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 />);

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.