vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-10-06 18:16:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

patch docs for 20180624 release

Browse Source
This commit is contained in:
AllenFang
2018-06-24 16:01:56 +08:00
parent d2d39fcc21
commit e70018352c
26 changed files with 200 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/basic-filter.html
+35
View File
@@ -24,6 +24,7 @@
<li>SelectFilter</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>
@@ -166,6 +167,40 @@
<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>
docs/filter-props.html
+31 -2
View File
@@ -16,22 +16,27 @@
<li><a href="#selectFilter">selectFilter</a></li>
<li><a href="#numberFilter">numberFilter</a></li>
<li><a href="#dateFilter">dateFilter</a></li>
<li><a href="#customFilter">customFilter</a></li>
</ul></li>
<li><a href="#comparator">Comparator</a></li>
<li><a href="#filter-types">FILTER_TYPES</a></li>
</ul>
<h2><a class="anchor" aria-hidden="true" name="getting-started"></a><a href="#getting-started" 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><strong>Getting Started</strong></h2>
<p>Please check <a href="./basic-filter.html">Getting Started Guide</a></p>
<h2><a class="anchor" aria-hidden="true" name="how-to-use"></a><a href="#how-to-use" 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><strong>How to use</strong></h2>
<p>You should apply following two props to enable filter functionality:</p>
<ul>
<li><code>filterFactory</code></li>
<li><code>filters</code> (Available filters)
<li>Give <code>filter</code> prop on <code>BootstrapTable</code> which value is the return value from calling <code>filterFactory</code> function</li>
<li>Add <code>filter</code> property on <code>column</code> object:
<ul>
<li>textFilter</li>
<li>selectFilter</li>
<li>numberFilter</li>
<li>dateFilter</li>
<li>customFilter</li>
</ul></li>
</ul>
<p>For example:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> BootstrapTable <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table-next'</span>;
<span class="hljs-keyword">import</span> filterFactory, { textFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
@@ -350,6 +355,21 @@
<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>
<h2><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</h2>
<p><strong>Required</strong>: NONE</p>
<p><strong>Optional</strong>:</p>
<h3><a class="anchor" aria-hidden="true" name="customfiltertype-string"></a><a href="#customfiltertype-string" 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.type - [String]</h3>
<ul>
<li>Assign the filter mode when <code>react-bootstrap-table</code> filering your data, please check <a href="#filter-types">FILTER_TYPES</a> for available values.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="customfiltercomparator-comparator"></a><a href="#customfiltercomparator-comparator" 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.comparator - [Comparator]</h3>
<ul>
<li>Specify what kind of comparator to compare. Default is <code>Comparator.LIKE</code>. But if <code>customFilter.type</code> is <code>FILTER_TYPES.SELECT</code>, this default value will be <code>Comparator.EQ</code></li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="customfiltercasesensitive-boolean"></a><a href="#customfiltercasesensitive-boolean" 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.caseSensitive - [Boolean]</h3>
<ul>
<li>default is <code>false</code>, and <code>true</code> will only work when comparator is <code>LIKE</code>.</li>
</ul>
<h2><a class="anchor" aria-hidden="true" name="comparator"></a><a href="#comparator" 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><strong>Comparator</strong></h2>
<p>We support the following ways to do the comparison. Each <code>filter</code> has its default comparator. For more information, please take refer to the introduction of props above.</p>
<table>
@@ -366,4 +386,13 @@
<tr><td>7</td><td>Comparator.LE</td><td>&lt;=</td><td></td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" name="filter-types"></a><a href="#filter-types" 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><strong>FILTER_TYPES</strong></h2>
<p>Following properties is valid in <code>FILTER_TYPES</code>:</p>
<ul>
<li>TEXT</li>
<li>SELECT</li>
<li>NUMBER</li>
<li>DATE</li>
</ul>
<p>You will only need the <code>FILTER_TYPES</code> when you are customize the filter component and you want to assign a specify filter mode.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="row-select-props.html">← Row Selection Props</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>
docs/migration.html
+1 -1
View File
@@ -84,7 +84,7 @@ Please see <a href="./filter-props.html">available filter configuration</a>.</p>
<li>[x] Text Filter</li>
<li>[x] Custom Text Filter</li>
<li>[x] Remote Filter</li>
<li>[ ] Custom Filter Component</li>
<li>[x] Custom Filter Component</li>
<li>[ ] Regex Filter</li>
<li>[x] Select Filter</li>
<li>[x] Custom Select Filter</li>