A react component for efficient data filtering.
npm install react-data-multi-filterA react component for efficient data filtering.
Multi-level function caching (using memoization)enables efficient filtering for large data sets, large filter sets, and expensive filters.
Render prop and Context API makes the component extremely flexible.
This is a standalone component with render props...
``tsx
import { DataFilter } from 'react-data-multi-filter';
const MyComponent = () => {
const data = [0, 1, 2, 3, 4, 5];
const greaterThanTwo = (datum: number) => datum > 2;
const lessThanFive = (datum: number) => datum < 5;
return (
{({ filteredInData, addFilter }) => (
<>
{filteredInData}
>
)}
);
}
``
...and a context provider...tsx
import { DataFilterContext } from 'react-data-multi-filter';
const MyComponent = () => {
const data = [{ a: 0 }, { a: 1 }, { a: 2 }];
const greaterThanOne = (datum: { a: number }) => datum.a > 1;
return (
{({ filteredInData }) => (
{filteredInData/ [{ a: 2 }] /}
)}
);
}
`
Create multiple independent data filter contexts
`tsx
import { createDataFilterContext } from 'react-data-multi-filter';
const MyComponent = () => {
const data = [0, 1, 2, 3, 4, 5];
const greaterThanTwo = (datum: number) => datum > 2;
const lessThanFive = (datum: number) => datum < 5;
const DataFilter1Context = createDataFilterContext();
const DataFilter2Context = createDataFilterContext();
return (
{({ filteredInData }) => (
{filteredInData}
)}
{({ filteredInData }) => (
{filteredInData}
)}
);
}
`
Selectively apply filters
`tsx
import { DataFilterContext } from 'react-data-multi-filter';
const MyComponent = () => {
const data = [0, 1, 2, 3, 4, 5];
const greaterThanTwo = (datum: number) => datum > 2;
const lessThanFive = (datum: number) => datum < 5;
const myFilters = { greaterThanTwo, lessThanFive };
return (
{({ filteredInData }) => (
{filteredInData}
)}
);
}
`
Named Exports:
- DataFilter
- DataFilterContext
- createDataFilterContext
`ts`
export interface DataFilterProps
data: T[]; // Data to filter
filters?: { // Associative array of initial filters
[key: string]: (datum: T, idx?: number, data?: T[]): boolean;
};
children: (props: { // Render props
filteredInData: T[]; // Data included by the filters
filteredOutData: T[]; // Data excluded by the filters
allData: T[]; // Full data set
filters: { // Associative array of all filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
activeFilters: { // Associative array of all active filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
addFilters: (filters: { // Add filters dynamically
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
}) => void;
removeFilters: (removeKeys: string[]) => void; // Remove filters by key dynamically
filterData: (opts?: { // Function to apply a custom filter set
exclude?: string[]; // Keys of filters to exclude
include?: string[]; // Keys of filters to include
}) => {
filteredInData: T[]; // Data included by the custom filter set
filteredOutData: T[];// Data excluded by the custom filter set
activeFilters: { // Associative array of all active filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
};
}) => JSX.Element;
}
`ts`
export interface DataFilterContext
data: T[]; // Data to filter
filters?: { // Associative array of initial filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
}
`ts`
export interface DataFilterContext
exclude?: string[]; // Keys of filters to exclude
include?: string[]; // Keys of filters to include
filters?: { [key: string]: (datum: T, idx?: number, data?: T[]) => boolean }; // Filters added by this component
children: (props: { // Render Props
filteredInData: T[]; // Data included by the filters
filteredOutData: T[]; // Data excluded by the filters
allData: T[]; // Full data set
filters: { // All data filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
activeFilters: { // Active data filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
addFilters: (filters: { // Add new filters dynamically
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
}) => void;
removeFilters: (removeKeys: string[]) => void; // Remove filters by keys dynamically
filterData: (opts?: { // Function to apply a custom filter set
exclude?: string[]; // Keys of filters to exclude
include?: string[]; // Keys of filters to include
}) => {
filteredInData: T[]; // Data included by the custom filter set
filteredOutData: T[]; // Data excluded by the custom filter set
activeFilters: { // Associative array of all active filters
[key: string]: (datum: T, idx?: number, data?: T[]) => boolean;
};
};
}) => JSX.Element;
}
`ts``
function createDataFilterContext