Search on an array that are that holds data for tables
I wanted to have a simple way to search on multiple columns on a table component in react.
$ npm i array-table-search -Sor
$ yarn add array-table-searchTake a look into the usage section for a detailed example.
This function can filter (search) on multiple object keys (one row).
Only if all applied filters are true the object (row) is in the returned data set.
Returns a new array.
const searchedData = multiColumnSearchArrayTable(data, options);- data: an array of object
- each object represents one row
- each key of one object has to be the name of the column
- each value of a of a key of one object is the value of the cell in the table
- options: an object
- the keys in that object has to be the name of the column
- each key holds another object with two keys (type, value)
- type is the search type (includes, exact)
- value is the search value for this column
This function can filter (search) on the complete object (one row).
If one key value filter is true the object (row) is in the returned data set.
Returns a new array.
const searchedData = searchArrayTable(data, options);- data: an array of object
- each object represents one row
- each key of one object has to be the name of the column
- each value of a of a key of one object is the value of the cell in the table
- options: an object
- this object has two keys (type, value)
- type is the search type (includes, exact)
- value is the search value for this column
An example how to use it.
const { multiColumnSearchArrayTable } = require('array-table-search');
const { searchArrayTable } = require('array-table-search');
/*
the data that is contained in the table
each row represented by an object
each column represented by the keys used in the objects
*/
const data = [
{
number: 1,
first: 'Mark',
},
{
number: 2,
first: 'Jacob',
},
{
number: 3,
first: 'Larry',
},
];
/*
for multi column search
each column has a type (searchType)
and a value (searchValue)
the value would usually come from an event (change in input etc.)
*/
const searchOptionMultiColumn = {
number: {
type: 'includes', // or exact
value: '',
},
first: {
type: 'includes', // or exact
value: 'ar',
},
};
/*
for table search we only need
a type (search type)
a value (search value)
the value would usually come from an event (change in input etc.)
*/
const searchOptionTable = {
type: 'includes', // or exact
value: 'ar',
};
/*
returns a new array
const searchedMultiColumnData = [
{
number: 1,
first: 'Mark',
},
{
number: 3,
first: 'Larry',
},
];
*/
const searchedMultiColumnData = multiColumnSearchArrayTable(data, searchOptionMultiColumn);
/*
returns a new array
const searchedTableData = [
{
number: 1,
first: 'Mark',
},
{
number: 3,
first: 'Larry',
},
];
*/
const searchedTableData = searchArrayTable(data, searchOptionTable);MIT © Lukas Aichbauer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent