
Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
searchtabular
Advanced tools
Searchtabular comes with search helpers. It consists of search algorithms that can be applied to the rows. Just like with sorting, you have to apply it to the rows just before rendering. A column is considered searchable in case it has a unique property
defined.
If you want advanced filters including date, number, and boolean, see searchtabular-antd.
The search API consists of three parts. Out of these search.multipleColumns
and search.matches
are the most useful ones for normal usage. If the default search strategies aren't enough, it's possible to implement more as long as you follow the same interface.
import * as search from 'searchtabular';
// Or you can cherry-pick
import { multipleColumns } from 'searchtabular';
import { multipleColumns as searchMultipleColumns } from 'searchtabular';
search.multipleColumns({ castingStrategy: <castingStrategy>, columns: [<object>], query: {<column>: <query>}, strategy: <strategy>, transform: <transform> })([<rows to query>]) => [<filtered rows>]
This is the highest level search function available. It expects rows
and columns
in the same format the Table
uses. query
object describes column specific search queries.
It uses infix
strategy underneath although it is possible to change it. By default it matches in a case insensitive manner. If you want case sensitive behavior, pass a => a
(identity function) as transform
.
It will cast everything but arrays to a string by default. If you want a custom casting behavior, pass a custom function to castingStrategy(value, column)
. It should return the cast result.
search.singleColumn({ castingStrategy: <castingStrategy>, columns: [<object>], searchColumn: <string>, query: <string>, strategy: <strategy>, transform: <transform> })([<rows to query>]) => [<filtered rows>]
This is a more specialized version of search.multipleColumns
. You can use it to search a specific column through searchColumn
and query
.
search._columnMatches({ query: <string>, castingStrategy: <castingStrategy>, column: <object>, row: <object>, strategy: <strategy>, transform: <transform> }) => <boolean>
This is a function that can be used to figure out all column specific matches. It is meant only for internal usage of the library.
When dealing with strings:
search.matches({ value: <string>, query: <string>, strategy: <strategy>, transform: <transform> }) => [{ startIndex: <number>, length: <number> }]
Returns an array with the matches.
When dealing with arrays:
search.matches({ value: <string>, query: [<string|[...]>], strategy: <strategy>, transform: <transform> }) => [[{ startIndex: <number>, length: <number> }], ...]
Returns a sparse array with the same shape as the original query. If there was a match for an item, it will have the same shape as the string version above, otherwise the array will have a hole in that location.
This function returns matches against the given value and query. This is particularly useful with highlighting.
search.strategies.infix(queryTerm: <string>) => { evaluate(searchText: <string>) => <string>, matches(searchText) => [{ startIndex: <number>, length: <number> }]
Search uses infix
strategy by default. This means it will match even if the result is in the middle of a searchText
.
The strategies operate in two passes - evaluation and matching. The evaluation pass allows us to implement perform fast boolean check on whether or not a search will match. Matching gives exact results.
search.strategies.prefix(queryTerm: <string>) => { evaluate(searchText: <string>) => <string>, matches(searchText) => [{ startIndex: <number>, length: <number> }]
prefix
strategy matches from the start.
To make it possible to highlight search results per column, there's a specific highlightCell
formatter.
The general workflow goes as follows:
Search
control that outputs a query in {<column>: <query>}
format. If <column>
is all
, then the search will work against all columns. Otherwise it will respect the exact columns set. You'll most likely want to use either reactabular-search-field
or reactabular-search-columns
(or both) for this purpose or provide an implementation of your own if you are not using Reactabular.search.multipleColumns({ columns, query })(rows)
. This will filter the rows based on the passed rows
, columns
definition, and query
. A lazy way to do this is to filter at render()
although you can do it elsewhere too to optimize rendering.Table
.To use it, you'll first you have to annotate your rows using highlighter
. It attaches a structure like this there:
_highlights: {
demo: [{ startIndex: 0, length: 4 }]
}
Example:
/*
import React from 'react';
import { compose } from 'redux';
import * as Table from 'reactabular-table';
import * as resolve from 'table-resolver';
import * as search from 'searchtabular';
*/
class HighlightTable extends React.Component {
constructor(props) {
super(props);
this.state = {
searchColumn: 'all',
query: {},
columns: [
{
header: {
label: 'Name'
},
children: [
{
property: 'name.first',
header: {
label: 'First Name'
},
cell: {
formatters: [search.highlightCell]
}
},
{
property: 'name.last',
header: {
label: 'Last Name'
},
cell: {
formatters: [search.highlightCell]
}
}
]
},
{
property: 'age',
header: {
label: 'Age'
},
cell: {
formatters: [search.highlightCell]
}
}
],
rows: [
{
id: 100,
name: {
first: 'Adam',
last: 'West'
},
age: 10
},
{
id: 101,
name: {
first: 'Brian',
last: 'Eno'
},
age: 43
},
{
id: 103,
name: {
first: 'Jake',
last: 'Dalton'
},
age: 33
},
{
id: 104,
name: {
first: 'Jill',
last: 'Jackson'
},
age: 63
}
]
};
}
render() {
const { searchColumn, columns, rows, query } = this.state;
const resolvedColumns = resolve.columnChildren({ columns });
const resolvedRows = resolve.resolve({
columns: resolvedColumns,
method: resolve.nested
})(rows);
const searchedRows = compose(
search.highlighter({
columns: resolvedColumns,
matches: search.matches,
query
}),
search.multipleColumns({
columns: resolvedColumns,
query
}),
)(resolvedRows);
return (
<div>
<div className="search-container">
<span>Search</span>
<search.Field
column={searchColumn}
query={query}
columns={resolvedColumns}
rows={resolvedRows}
onColumnChange={searchColumn => this.setState({ searchColumn })}
onChange={query => this.setState({ query })}
/>
</div>
<Table.Provider columns={resolvedColumns}>
<Table.Header
headerRows={resolve.headerRows({ columns })}
/>
<Table.Body rows={searchedRows} rowKey="id" />
</Table.Provider>
</div>
);
}
}
<HighlightTable />
searchtabular
provides a couple of convenience components listed below.
searchtabular.Columns
is a single component you can inject within a table header to allow searching per column. It expects columns
and onChange
handler. The latter is used to update the search query based on the search protocol.
Consider the example below.
Example:
/*
import React from 'react';
import * as Table from 'reactabular-table';
import * as resolve from 'table-resolver';
import * as search from 'searchtabular';
*/
class SearchColumnsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
query: {}, // Search query
columns: [
{
header: {
label: 'Name'
},
children: [
{
property: 'name.first',
header: {
label: 'First Name'
}
},
{
property: 'name.last',
header: {
label: 'Last Name'
}
}
]
},
{
property: 'age',
header: {
label: 'Age'
}
}
],
rows: [
{
id: 100,
name: {
first: 'Adam',
last: 'West'
},
age: 10
},
{
id: 101,
name: {
first: 'Brian',
last: 'Eno'
},
age: 43
},
{
id: 103,
name: {
first: 'Jake',
last: 'Dalton'
},
age: 33
},
{
id: 104,
name: {
first: 'Jill',
last: 'Jackson'
},
age: 63
}
]
};
}
render() {
const { columns, query, rows } = this.state;
const resolvedColumns = resolve.columnChildren({ columns });
const resolvedRows = resolve.resolve({
columns: resolvedColumns,
method: resolve.nested
})(rows);
const searchedRows = search.multipleColumns({
columns: resolvedColumns,
query
})(resolvedRows);
return (
<Table.Provider columns={resolvedColumns}>
<Table.Header
headerRows={resolve.headerRows({ columns })}
>
<search.Columns
query={query}
columns={resolvedColumns}
onChange={query => this.setState({ query })}
/>
</Table.Header>
<Table.Body rows={searchedRows} rowKey="id" />
</Table.Provider>
);
}
}
<SearchColumnsTable />
To disable search on a particular column, set
filterable: false
on a column you want to disable.
searchtabular.Field
provides a search control with a column listing and an input.
searchtabular.Field
also supports custom component overrides for the column <select>
and <input>
field.
It is on you to couple the onChange
events to the target fields rendered within your custom components.
Consider the example below.
Example:
/*
import React from 'react';
import * as Table from 'reactabular-table';
import * as resolve from 'table-resolver';
import * as search from 'searchtabular';
import { CustomField, CustomSelect } from './path/to/your/component';
*/
class SearchTable extends React.Component {
constructor(props) {
super(props);
this.state = {
searchColumn: 'all',
query: {}, // Search query
columns: [
{
header: {
label: 'Name'
},
children: [
{
property: 'name.first',
header: {
label: 'First Name'
}
},
{
property: 'name.last',
header: {
label: 'Last Name'
}
}
]
},
{
property: 'age',
header: {
label: 'Age'
}
}
],
rows: [
{
id: 100,
name: {
first: 'Adam',
last: 'West'
},
age: 10
},
{
id: 101,
name: {
first: 'Brian',
last: 'Eno'
},
age: 43
},
{
id: 103,
name: {
first: 'Jake',
last: 'Dalton'
},
age: 33
},
{
id: 104,
name: {
first: 'Jill',
last: 'Jackson'
},
age: 63
}
]
};
}
render() {
const { searchColumn, columns, rows, query } = this.state;
const resolvedColumns = resolve.columnChildren({ columns });
const resolvedRows = resolve.resolve({
columns: resolvedColumns,
method: resolve.nested
})(rows);
const searchedRows = search.multipleColumns({
columns: resolvedColumns,
query
})(resolvedRows);
return (
<div>
<div className="search-container">
<span>Search</span>
<search.Field
column={searchColumn}
query={query}
columns={resolvedColumns}
rows={resolvedRows}
onColumnChange={searchColumn => this.setState({ searchColumn })}
onChange={query => this.setState({ query })}
components={{
filter: CustomField,
select: CustomSelect,
props: {
filter: {
className: 'custom-textfield',
placeholder: 'Refine Results'
},
select: {
className: 'custom-select'
}
}
}}
/>
</div>
<Table.Provider columns={resolvedColumns}>
<Table.Header
headerRows={resolve.headerRows({ columns })}
/>
<Table.Body rows={searchedRows} rowKey="id" />
</Table.Provider>
</div>
);
}
}
const CustomField = (props, classNames) => <input className={classNames.customField || "custom-field"} {...props} />;
const CustomSelect = ({ options, onChange, classNames }) => (
<div>
<input className={classNames.controlField || "controlled-field"} type="text" onChange={onChange} defaultValue="all" />
<ul>
{ options.map(({ key, name, value }) => (
<li key={key} data-value={value}>{name}</li>)
) }
</ul>
</div>
);
<SearchTable />
MIT. See LICENSE for details.
FAQs
Search utilities
We found that searchtabular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
Product
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.