vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
bf61e11ef6
react-bootstrap-table2/docs/basic-filter.html
AllenFang bf61e11ef6 1.0.0
2018-08-04 14:55:19 +08:00

288 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Column Filter · react-bootstrap-table2</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Column Filter · react-bootstrap-table2"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react-bootstrap-table.github.io/react-bootstrap-table2/index.html"/><meta property="og:description" content="`react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there&#x27;s a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:"/><link rel="shortcut icon" href="/react-bootstrap-table2/undefined"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://react-bootstrap-table.github.io/blog/atom.xml" title="react-bootstrap-table2 Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://react-bootstrap-table.github.io/blog/feed.xml" title="react-bootstrap-table2 Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/react-bootstrap-table2/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-bootstrap-table2/"><h2 class="headerTitle">react-bootstrap-table2</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-bootstrap-table2/docs/about.html" target="_self">Docs</a></li><li><a href="/react-bootstrap-table2/docs/table-props.html" target="_self">API</a></li><li><a href="/react-bootstrap-table2/en/help.html" target="_self">Help</a></li><li><a href="/react-bootstrap-table2/blog" target="_self">Blog</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Basic Usage</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/about.html">About</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/bootstrap4.html">Bootstrap 4</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/migration.html">Migration</a></li></ul></div><div class="navGroup navGroupActive"><h3>Basic Usage</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row.html">Work on Row</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-column.html">Work on Column</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-sort.html">Table Sort</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row-select.html">Row Selection</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-bootstrap-table2/docs/basic-filter.html">Column Filter</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-celledit.html">Cell Edit</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-pagination.html">Pagination</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-row-expand.html">Expandable Row</a></li></ul></div><div class="navGroup navGroupActive"><h3>Remote Table</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-remote.html">Work on Remote</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/overlay.html">Overlay</a></li></ul></div><div class="navGroup navGroupActive"><h3>Table Toolkits</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/toolkits-getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-search.html">Table Search</a></li><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/basic-export-csv.html">Export to CSV</a></li></ul></div></div></section></div><script>
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1>Column Filter</h1></header><article><div><span><p><code>react-bootstrap-table2</code> separate the filter core code base to <a href="https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter"><code>react-bootstrap-table2-filter</code></a>, so there's a little bit different when you use column filter than <code>react-bootstrap-table</code>. In the following, we are going to show you how to enable the column filter:</p>
<p><strong><a href="../storybook/index.html?selectedKind=Column%20Filter">Live Demo For Column Filter</a></strong> <br>
<strong><a href="./filter-props.html">API &amp; Props Definition</a></strong></p>
<hr>
<h2><a class="anchor" aria-hidden="true" name="install"></a><a href="#install" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Install</h2>
<pre><code class="hljs css sh">$ npm install react-bootstrap-table2-filter --save
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="add-css"></a><a href="#add-css" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Add CSS</h2>
<pre><code class="hljs css js"><span class="hljs-comment">// es5 </span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'</span>);
<span class="hljs-comment">// es6</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'</span>;
</code></pre>
<p>You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:</p>
<ul>
<li>TextFilter</li>
<li>SelectFilter</li>
<li>MultiSelectFilter</li>
<li>NumberFilter</li>
<li>DateFilter</li>
<li>CustomFilter</li>
<li><strong>Coming soon!</strong></li>
</ul>
<h2><a class="anchor" aria-hidden="true" name="text-filter"></a><a href="#text-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Text Filter</h2>
<p>Following is a quick demo for enable the column filter on <strong>Product Price</strong> column!!</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { textFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> columns = [
..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'price'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Price'</span>,
<span class="hljs-attr">filter</span>: textFilter()
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<p>In addition, we preserve all of the filter features and functionality in legacy <code>react-bootstrap-table</code>, but in different way to do it:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { textFilter, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> priceFilter = textFilter({
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">'My Custom PlaceHolder'</span>, <span class="hljs-comment">// custom the input placeholder</span>
className: <span class="hljs-string">'my-custom-text-filter'</span>, <span class="hljs-comment">// custom classname on input</span>
defaultValue: <span class="hljs-string">'test'</span>, <span class="hljs-comment">// default filtering value</span>
comparator: Comparator.EQ, <span class="hljs-comment">// default is Comparator.LIKE</span>
caseSensitive: <span class="hljs-literal">true</span>, <span class="hljs-comment">// default is false, and true will only work when comparator is LIKE</span>
style: { ... }, <span class="hljs-comment">// your custom styles on input</span>
delay: <span class="hljs-number">1000</span>, <span class="hljs-comment">// how long will trigger filtering after user typing, default is 500 ms</span>
getFilter: <span class="hljs-function">(<span class="hljs-params">f</span>) =&gt;</span> { ... } <span class="hljs-comment">// accept callback function and you can call it for filter programmtically</span>
});
<span class="hljs-comment">// omit...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="select-filter"></a><a href="#select-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Select Filter</h2>
<p>A quick example:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { selectFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> selectOptions = {
<span class="hljs-number">0</span>: <span class="hljs-string">'good'</span>,
<span class="hljs-number">1</span>: <span class="hljs-string">'Bad'</span>,
<span class="hljs-number">2</span>: <span class="hljs-string">'unknown'</span>
};
<span class="hljs-keyword">const</span> columns = [
..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'quality'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Quailty'</span>,
<span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">cell</span> =&gt;</span> selectOptions[cell],
<span class="hljs-attr">filter</span>: selectFilter({
<span class="hljs-attr">options</span>: selectOptions
})
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<p>Following is an example for custom select filter:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { selectFilter, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> qualityFilter = selectFilter({
<span class="hljs-attr">options</span>: selectOptions,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">'My Custom PlaceHolder'</span>, <span class="hljs-comment">// custom the input placeholder</span>
className: <span class="hljs-string">'my-custom-text-filter'</span>, <span class="hljs-comment">// custom classname on input</span>
defaultValue: <span class="hljs-string">'2'</span>, <span class="hljs-comment">// default filtering value</span>
comparator: Comparator.LIKE, <span class="hljs-comment">// default is Comparator.EQ</span>
caseSensitive: <span class="hljs-literal">false</span>, <span class="hljs-comment">// default is true</span>
style: { ... }, <span class="hljs-comment">// your custom styles on input</span>
withoutEmptyOption: <span class="hljs-literal">true</span>, <span class="hljs-comment">// hide the default select option</span>
getFilter: <span class="hljs-function">(<span class="hljs-params">f</span>) =&gt;</span> { ... } <span class="hljs-comment">// accept callback function and you can call it for filter programmtically</span>
});
<span class="hljs-comment">// omit...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="multiselect-filter"></a><a href="#multiselect-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MultiSelect Filter</h2>
<p>Multi-select filter is almost same as regular select filterfilter :</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { multiSelectFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> selectOptions = {
<span class="hljs-number">0</span>: <span class="hljs-string">'good'</span>,
<span class="hljs-number">1</span>: <span class="hljs-string">'Bad'</span>,
<span class="hljs-number">2</span>: <span class="hljs-string">'unknown'</span>
};
<span class="hljs-keyword">const</span> columns = [
..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'quality'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Quailty'</span>,
<span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">cell</span> =&gt;</span> selectOptions[cell],
<span class="hljs-attr">filter</span>: multiSelectFilter({
<span class="hljs-attr">options</span>: selectOptions
})
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<p>Following is an example for custom multi-select filter:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { multiSelectFilter, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> qualityFilter = multiSelectFilter({
<span class="hljs-attr">options</span>: selectOptions,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">'My Custom PlaceHolder'</span>, <span class="hljs-comment">// custom the input placeholder</span>
className: <span class="hljs-string">'my-custom-text-filter'</span>, <span class="hljs-comment">// custom classname on input</span>
defaultValue: <span class="hljs-string">'2'</span>, <span class="hljs-comment">// default filtering value</span>
comparator: Comparator.LIKE, <span class="hljs-comment">// default is Comparator.EQ</span>
style: { ... }, <span class="hljs-comment">// your custom styles on input</span>
withoutEmptyOption: <span class="hljs-literal">true</span> <span class="hljs-comment">// hide the default select option</span>
});
<span class="hljs-comment">// omit...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="number-filter"></a><a href="#number-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Number Filter</h2>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { numberFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-keyword">const</span> columns = [..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'price'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Price'</span>,
<span class="hljs-attr">filter</span>: numberFilter()
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<p>Numner filter is same as other filter, you can custom the number filter via <code>numberFilter</code> factory function:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { selectFilter, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> numberFilter = numberFilter({
<span class="hljs-attr">options</span>: [<span class="hljs-number">2100</span>, <span class="hljs-number">2103</span>, <span class="hljs-number">2105</span>], <span class="hljs-comment">// if options defined, will render number select instead of number input</span>
delay: <span class="hljs-number">600</span>, <span class="hljs-comment">// how long will trigger filtering after user typing, default is 500 ms</span>
placeholder: <span class="hljs-string">'custom placeholder'</span>, <span class="hljs-comment">// placeholder for number input</span>
withoutEmptyComparatorOption: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dont render empty option for comparator</span>
withoutEmptyNumberOption: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dont render empty option for numner select if it is defined</span>
comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], <span class="hljs-comment">// Custom the comparators</span>
style: { <span class="hljs-attr">display</span>: <span class="hljs-string">'inline-grid'</span> }, <span class="hljs-comment">// custom the style on number filter</span>
className: <span class="hljs-string">'custom-numberfilter-class'</span>, <span class="hljs-comment">// custom the class on number filter</span>
comparatorStyle: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'antiquewhite'</span> }, <span class="hljs-comment">// custom the style on comparator select</span>
comparatorClassName: <span class="hljs-string">'custom-comparator-class'</span>, <span class="hljs-comment">// custom the class on comparator select</span>
numberStyle: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'cadetblue'</span>, <span class="hljs-attr">margin</span>: <span class="hljs-string">'0px'</span> }, <span class="hljs-comment">// custom the style on number input/select</span>
numberClassName: <span class="hljs-string">'custom-number-class'</span>, <span class="hljs-comment">// custom the class on ber input/select</span>
defaultValue: { <span class="hljs-attr">number</span>: <span class="hljs-number">2103</span>, <span class="hljs-attr">comparator</span>: Comparator.GT }, <span class="hljs-comment">// default value</span>
getFilter: <span class="hljs-function">(<span class="hljs-params">f</span>) =&gt;</span> { ... } <span class="hljs-comment">// accept callback function and you can call it for filter programmtically</span>
})
<span class="hljs-comment">// omit...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="date-filter"></a><a href="#date-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Date Filter</h2>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { dateFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-keyword">const</span> columns = [..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'date'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product date'</span>,
<span class="hljs-attr">filter</span>: dateFilter()
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<blockquote>
<p><strong>Notes:</strong> date filter accept a Javascript Date object in your raw data and you have to use <code>column.formatter</code> to make it as your prefer string result.</p>
</blockquote>
<p>Date filter is same as other filter, you can custom the date filter via <code>dateFilter</code> factory function:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { selectFilter, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-comment">// omit...</span>
<span class="hljs-keyword">const</span> dateFilter = dateFilter({
<span class="hljs-attr">delay</span>: <span class="hljs-number">600</span>, <span class="hljs-comment">// how long will trigger filtering after user typing, default is 500 ms</span>
placeholder: <span class="hljs-string">'custom placeholder'</span>, <span class="hljs-comment">// placeholder for date input</span>
withoutEmptyComparatorOption: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dont render empty option for comparator</span>
comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], <span class="hljs-comment">// Custom the comparators</span>
style: { <span class="hljs-attr">display</span>: <span class="hljs-string">'inline-grid'</span> }, <span class="hljs-comment">// custom the style on date filter</span>
className: <span class="hljs-string">'custom-dateFilter-class'</span>, <span class="hljs-comment">// custom the class on date filter</span>
comparatorStyle: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'antiquewhite'</span> }, <span class="hljs-comment">// custom the style on comparator select</span>
comparatorClassName: <span class="hljs-string">'custom-comparator-class'</span>, <span class="hljs-comment">// custom the class on comparator select</span>
dateStyle: { <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'cadetblue'</span>, <span class="hljs-attr">margin</span>: <span class="hljs-string">'0px'</span> }, <span class="hljs-comment">// custom the style on date input</span>
dateClassName: <span class="hljs-string">'custom-date-class'</span>, <span class="hljs-comment">// custom the class on date input</span>
defaultValue: { <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2018</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>), <span class="hljs-attr">comparator</span>: Comparator.GT } <span class="hljs-comment">// default value</span>
});
<span class="hljs-comment">// omit...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="custom-filter"></a><a href="#custom-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Custom Filter</h2>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { customFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-keyword">const</span> columns = [..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'date'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Name'</span>,
<span class="hljs-attr">filter</span>: customFilter(),
<span class="hljs-attr">filterRenderer</span>: <span class="hljs-function">(<span class="hljs-params">onFilter, column</span>) =&gt;</span> .....
}];
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
</span></code></pre>
<p>In custom filter case, you are suppose to finish following two steps:</p>
<ol>
<li>Call <code>customFilter</code> and pass to <code>column.filter</code></li>
<li>Give <code>column.filterRenderer</code> as a callback function and return your custom filter element.</li>
</ol>
<h3><a class="anchor" aria-hidden="true" name="columnfilterrenderer"></a><a href="#columnfilterrenderer" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>column.filterRenderer</h3>
<p>This function will pass two argument to you:</p>
<ol>
<li><code>onFilter</code>: call it to trigger filter when you need.</li>
<li><code>column</code>: Just the column object!</li>
</ol>
<p>In the end, please remember to return your custom filter element!</p>
<h3><a class="anchor" aria-hidden="true" name="customfilter"></a><a href="#customfilter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>customFilter</h3>
<p><code>customFilter</code> function just same as <code>textFilter</code>, <code>selectFilter</code> etc, it is for customization reason. However, in the custom filter case, there're only few props are valid:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> filterFactory, { FILTER_TYPES, Comparator } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
<span class="hljs-keyword">const</span> customFilter = customFilter({
<span class="hljs-attr">type</span>: FILTER_TYPES.NUMBER, <span class="hljs-comment">// default is FILTER_TYPES.TEXT</span>
comparator: Comparator.EQ, <span class="hljs-comment">// only work if type is FILTER_TYPES.SELECT</span>
caseSensitive: <span class="hljs-literal">false</span>, <span class="hljs-comment">// default is true</span>
})
</code></pre>
<hr />
<h2><a class="anchor" aria-hidden="true" name="programmatically-filter"></a><a href="#programmatically-filter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Programmatically Filter</h2>
<p><code>react-bootstrap-table2</code> allow you to control filter externally, which means user no need to type something on filter!!</p>
<h3><a class="anchor" aria-hidden="true" name="how"></a><a href="#how" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How</h3>
<p>All the filters have a <code>getFilter</code> prop which accept a callback function and pass a filter object to you.</p>
<pre><code class="hljs css js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Table</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Components</span> </span>{
<span class="hljs-keyword">constructor</span>(props) {
<span class="hljs-keyword">super</span>(props);
<span class="hljs-keyword">this</span>.filterPrice = <span class="hljs-keyword">this</span>.filterPrice.bind(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">const</span> columns = [
..., {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'price'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Price'</span>,
<span class="hljs-attr">filter</span>: textFilter({
<span class="hljs-comment">// preserve filter instance</span>
getFilter: <span class="hljs-function">(<span class="hljs-params">filter</span>) =&gt;</span> <span class="hljs-keyword">this</span>.priceFilter = filter;
})
}];
}
filterPrice() {
<span class="hljs-comment">// call it anywhere when you want!!</span>
<span class="hljs-keyword">this</span>.priceFilter(<span class="hljs-number">100</span>);
}
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{</span> <span class="hljs-attr">this.filterPrice</span> }&gt;</span>Click to filter<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">BootstrapTable</span> <span class="hljs-attr">keyField</span>=<span class="hljs-string">'id'</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{</span> <span class="hljs-attr">products</span> } <span class="hljs-attr">columns</span>=<span class="hljs-string">{</span> <span class="hljs-attr">columns</span> } <span class="hljs-attr">filter</span>=<span class="hljs-string">{</span> <span class="hljs-attr">filterFactory</span>() } /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
);
}
}
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" name="examples"></a><a href="#examples" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Examples</h3>
<ul>
<li><a href="../storybook/index.html?selectedKind=Column%20Filter&amp;selectedStory=Programmatically%20Text%20Filter%20">Example For Programmtically Text Filter</a></li>
<li><a href="../storybook/index.html?selectedKind=Column%20Filter&amp;selectedStory=Programmatically%20Select%20Filter%20">Example For Programmtically Select Filter</a></li>
<li><a href="../storybook/index.html?selectedKind=Column%20Filter&amp;selectedStory=Programmatically%20Multi%20Select%20Filter">Example For Programmtically MultiSelect Filter</a></li>
<li><a href="../storybook/index.html?selectedKind=Column%20Filter&amp;selectedStory=Programmatically%20Number%20Filter%20">Example For Programmtically Number Filter</a></li>
<li><a href="../storybook/index.html?selectedKind=Column%20Filter&amp;selectedStory=Programmatically%Date%20Filter%20">Example For Programmtically Date Filter</a></li>
</ul>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="basic-row-select.html">← Row Selection</a><a class="docs-next button" href="basic-celledit.html">Cell Edit →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-bootstrap-table2/" class="nav-home"></a><div><h5>Docs</h5><a href="/react-bootstrap-table2/docs/en/getting-started.html">Getting Started</a><a href="/react-bootstrap-table2/docs/en/table-props.html">API References</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/react-bootstrap-table" target="_blank">Stack Overflow</a><a href="https://discordapp.com/">Project Chat</a><a href="https://twitter.com/" target="_blank">Twitter</a></div><div><h5>More</h5><a href="/react-bootstrap-table2/blog/index.html">Blog</a><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2">GitHub</a><a class="github-button" href="https://github.com/react-bootstrap-table/react-bootstrap-table2" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2018 react-bootstrap-table2.</section></footer></div></body></html>
Reference in New Issue View Git Blame Copy Permalink