vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-16 21:50:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

20180604 release

Browse Source
This commit is contained in:
AllenFang
2018-06-03 23:05:44 +08:00
parent 5376ce25dd
commit d2d39fcc21
31 changed files with 348 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/basic-filter.html
+36
View File
@@ -23,6 +23,7 @@
<li>TextFilter</li>
<li>SelectFilter</li>
<li>NumberFilter</li>
<li>DateFilter</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>
@@ -129,6 +130,40 @@
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.</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>
<hr />
@@ -172,5 +207,6 @@
<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%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>
docs/basic-row-select.html
+5 -2
View File
@@ -23,8 +23,11 @@
<li><a href="./row-select-props.html#selectrowclasses-string-function"><code>selectRow.classes</code></a></li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="selection-column"></a><a href="#selection-column" 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>Selection Column</h3>
<p><code>react-bootstrap-table2</code> offer a <a href="./row-select-props.html#selectrowhideselectcolumn-bool"><code>selectRow.hideSelectColumn</code></a> to let you hide the selection column. But for the customization on selection column or checkbox/radio button, we will support it ine next couple release.
<strong>Coming Soon!</strong></p>
<ul>
<li>For header cell: <a href="row-select-props.html#selectrowselectionrenderer-function"><code>selectRow.selectionRenderer</code></a></li>
<li>For normal cell: <a href="./row-select-props.html#selectrowselectionheaderrenderer-function"><code>selectRow.selectionHeaderRenderer</code></a></li>
</ul>
<p>In addition, <code>react-bootstrap-table2</code> offer a <a href="./row-select-props.html#selectrowhideselectcolumn-bool"><code>selectRow.hideSelectColumn</code></a> to let you hide the selection column.</p>
<h2><a class="anchor" aria-hidden="true" name="event-listening"></a><a href="#event-listening" 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>Event Listening</h2>
<p><a href="./row-select-props.html#selectrowonselect-function"><code>selectRow.onSelect</code></a> allow you to listen a row is select or unselect. For the multiple selection, we also have <a href="./selectrowonselectall-function"><code>selectRow.onSelectAll</code></a> to listen the select/unselect all event.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="basic-sort.html">← Table Sort</a><a class="docs-next button" href="basic-filter.html">Column Filter →</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/column-props.html
+3
View File
@@ -511,6 +511,9 @@ const columns = [
<p>Configure <code>column.filter</code> will able to setup a column level filter on the header column. Currently, <code>react-bootstrap-table2</code> support following filters:</p>
<ul>
<li>Text Filter</li>
<li>Select Filter</li>
<li>Number Filter</li>
<li>Date Filter</li>
</ul>
<p>We have a quick example to show you how to use <code>column.filter</code>:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> { textFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap-table2-filter'</span>;
docs/filter-props.html
+80
View File
@@ -15,6 +15,7 @@
<li><a href="#textfilter">textFilter</a></li>
<li><a href="#selectFilter">selectFilter</a></li>
<li><a href="#numberFilter">numberFilter</a></li>
<li><a href="#dateFilter">dateFilter</a></li>
</ul></li>
<li><a href="#comparator">Comparator</a></li>
</ul>
@@ -268,6 +269,85 @@
})
}];
<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="datefilter"></a><a href="#datefilter" 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>dateFilter</h2>
<p><strong>Required</strong>: NONE</p>
<p><strong>Optional</strong>:</p>
<h3><a class="anchor" aria-hidden="true" name="datefilterdelay-number"></a><a href="#datefilterdelay-number" 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>dateFilter.delay - [Number]</h3>
<ul>
<li>Debounce time, which means how long will trigger filtering after user typing. Default is 0.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterplaceholder-string"></a><a href="#datefilterplaceholder-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>dateFilter.placeholder - [String]</h3>
<ul>
<li>customized placeholder for date input.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterwithoutemptycomparatoroption-boolean"></a><a href="#datefilterwithoutemptycomparatoroption-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>dateFilter.withoutEmptyComparatorOption - [Boolean]</h3>
<ul>
<li>When it was set to <code>true</code>, the drop down list of <code>comparator</code> would hide the default selection.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterdefaultvalue-object"></a><a href="#datefilterdefaultvalue-object" 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>dateFilter.defaultValue - [Object]</h3>
<ul>
<li>It is the default filtering value. Furthermore, it accepts <strong>2</strong> attributes:
<ul>
<li>date: a date object which need to be filtered</li>
<li>comparator: what kind of comparator to compare</li>
</ul></li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefiltercomparator-comparator"></a><a href="#datefiltercomparator-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>dateFilter.comparator - [[Comparator]]</h3>
<ul>
<li>Specify what kind of comparator to compare. Default is to list <code>all</code> of comparators.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterclassname-string"></a><a href="#datefilterclassname-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>dateFilter.className - [String]</h3>
<ul>
<li>custom class name on the <code>wrapper</code> of date input and comparator drop down.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefiltercomparatorclassname-string"></a><a href="#datefiltercomparatorclassname-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>dateFilter.comparatorClassName - [String]</h3>
<ul>
<li>custom class name on the <code>comparator</code> drop down.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterdateclassname-string"></a><a href="#datefilterdateclassname-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>dateFilter.dateClassName - [String]</h3>
<ul>
<li>custom class name on the date <code>input</code>.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterstyle-object"></a><a href="#datefilterstyle-object" 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>dateFilter.style - [Object]</h3>
<ul>
<li>custom inline styles on the <code>wrapper</code> of date input and comparator drop down.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefiltercomparatorstyle-object"></a><a href="#datefiltercomparatorstyle-object" 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>dateFilter.comparatorStyle - [Object]</h3>
<ul>
<li>custom inline styles on the <code>comparator</code> drop down.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefilterdatestyle-object"></a><a href="#datefilterdatestyle-object" 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>dateFilter.dateStyle - [Object]</h3>
<ul>
<li>custom inline styles on the date <code>input</code>.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" name="datefiltergetfilter-function"></a><a href="#datefiltergetfilter-function" 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>dateFilter.getFilter - [Function]</h3>
<ul>
<li>export <code>filter</code> function to allow users to access. For dateFilter,<br><code>filter({ date, comparator })</code> to filter columns dynamically.</li>
</ul>
<p><strong>Example</strong>:</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, { dateFilter, Comparator } <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>: 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="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="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>
docs/migration.html
+3 -3
View File
@@ -76,7 +76,7 @@
<h2><a class="anchor" aria-hidden="true" name="row-selection"></a><a href="#row-selection" 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>Row Selection</h2>
<p>Please see <a href="./basic-row-select.html">Work with selection</a>.<br>
Please see <a href="./row-select-props.html">available selectRow configurations</a>.</p>
<p>No huge change for row selection, but can not custom the selection column currently. Coming soon!!!</p>
<p>No huge changes in row selection.</p>
<h2><a class="anchor" aria-hidden="true" name="column-filter"></a><a href="#column-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>Column Filter</h2>
<p>Please see <a href="./basic-filter.html">Work with column filter</a>.<br>
Please see <a href="./filter-props.html">available filter configuration</a>.</p>
@@ -89,9 +89,9 @@ Please see <a href="./filter-props.html">available filter configuration</a>.</p>
<li>[x] Select Filter</li>
<li>[x] Custom Select Filter</li>
<li>[x] Number Filter</li>
<li>[ ] Date Filter</li>
<li>[X] Date Filter</li>
<li>[ ] Array Filter</li>
<li>[ ] Programmatically Filter</li>
<li>[X] Programmatically Filter</li>
</ul>
<p>Remember to install <a href="https://www.npmjs.com/package/react-bootstrap-table2-filter"><code>react-bootstrap-table2-filter</code></a> firstly.</p>
<p>Due to no <code>TableHeaderColumn</code> so that no <code>filter</code> here, please add <a href="./column-props.html#columnfilter-object"><code>filter</code></a> property on column definition and <a href="./table-props.html#filter-object"><code>filter</code></a> prop on <code>BootstrapTable</code>.</p>
docs/pagination-props.html
+9
View File
@@ -39,6 +39,7 @@
<li><a href="#paginationonpagechange-function">onPageChange</a></li>
<li><a href="#paginationonsizeperpagechange-function">onSizePerPageChange</a></li>
<li><a href="#paginationshowtotal-bool">showTotal</a></li>
<li><a href="#paginationpaginationtotalrenderer-function">paginationTotalRenderer</a></li>
</ul>
<hr>
<h2><a class="anchor" aria-hidden="true" name="paginationpage-number"></a><a href="#paginationpage-number" 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>pagination.page - [Number]</h2>
@@ -93,6 +94,14 @@
<p>You can hide the pagination when there's only one page in table. Default is <code>false</code>.</p>
<h2><a class="anchor" aria-hidden="true" name="paginationshowtotal-bool"></a><a href="#paginationshowtotal-bool" 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>pagination.showTotal - [Bool]</h2>
<p>Default is <code>false</code>, if enable will display a text to indicate the row range of current page.</p>
<h2><a class="anchor" aria-hidden="true" name="paginationpaginationtotalrenderer-function"></a><a href="#paginationpaginationtotalrenderer-function" 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>pagination.paginationTotalRenderer - [Function]</h2>
<p>Custom the total information, this callbacok function have three arguments: <code>from</code>, <code>to</code> and <code>size</code>. Following is an example:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> customTotal = <span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">from</span>, to, size</span>) =&gt;</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"react-bootstrap-table-pagination-total"</span>&gt;</span>
Showing { from } to { to } of { size } Results
<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
);
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="paginationonpagechange-function"></a><a href="#paginationonpagechange-function" 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>pagination.onPageChange - [Function]</h2>
<p>Accept a callback function and will be called when page changed. This callback function get below arguments:</p>
<p><strong>Arguments</strong></p>
docs/row-select-props.html
+20
View File
@@ -28,6 +28,8 @@
<li><a href="#selectrowonselect-function">onSelect</a></li>
<li><a href="#selectrowonselectall-function">onSelectAll</a></li>
<li><a href="#selectrowhideselectcolumn-bool">hideSelectColumn</a></li>
<li><a href="#selectrowselectionrenderer-function">selectionRenderer</a></li>
<li><a href="#selectrowselectionheaderrenderer-function">selectionHeaderRenderer</a></li>
</ul>
<hr>
<h2><a class="anchor" aria-hidden="true" name="selectrowmode-string"></a><a href="#selectrowmode-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>selectRow.mode - [String]</h2>
@@ -150,4 +152,22 @@
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">'red'</span>
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="selectrowselectionrenderer-function"></a><a href="#selectrowselectionrenderer-function" 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>selectRow.selectionRenderer - [Function]</h2>
<p>Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'checkbox'</span>,
<span class="hljs-attr">selectionRenderer</span>: <span class="hljs-function">(<span class="hljs-params">{ mode, checked, disabled }</span>) =&gt;</span> (
<span class="hljs-comment">// ....</span>
)
};
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="selectrowselectionheaderrenderer-function"></a><a href="#selectrowselectionheaderrenderer-function" 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>selectRow.selectionHeaderRenderer - [Function]</h2>
<p>Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> selectRow = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'checkbox'</span>,
<span class="hljs-attr">selectionHeaderRenderer</span>: <span class="hljs-function">(<span class="hljs-params">{ mode, checked, indeterminate }</span>) =&gt;</span> (
<span class="hljs-comment">// ....</span>
)
};
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="pagination-props.html">← Pagination Props</a><a class="docs-next button" href="filter-props.html">Column Filter 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/table-props.html
+2 -1
View File
@@ -49,7 +49,6 @@ For flexibility reason, you can control what functionality should be handled on
<pre><code class="hljs css js">remote={ {
<span class="hljs-attr">filter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">pagination</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">filter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">sort</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">cellEdit</span>: <span class="hljs-literal">true</span>
} }
@@ -162,6 +161,7 @@ When <code>loading</code> is <code>true</code>, <code>react-bootstrap-table2</co
totalSize, <span class="hljs-comment">// Total data size. It's necessary when remote is enabled</span>
pageStartIndex: <span class="hljs-number">0</span>, <span class="hljs-comment">// first page will be 0, default is 1</span>
paginationSize: <span class="hljs-number">3</span>, <span class="hljs-comment">// the pagination bar size, default is 5</span>
showTotal: <span class="hljs-literal">true</span>, <span class="hljs-comment">// display pagination information</span>
sizePerPageList: [ {
<span class="hljs-attr">text</span>: <span class="hljs-string">'5'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">5</span>
}, {
@@ -183,6 +183,7 @@ When <code>loading</code> is <code>true</code>, <code>react-bootstrap-table2</co
hidePageListOnlyOnePage: <span class="hljs-literal">true</span>, <span class="hljs-comment">// hide pagination bar when only one page, default is false</span>
onPageChange: <span class="hljs-function">(<span class="hljs-params">page, sizePerPage</span>) =&gt;</span> {}, <span class="hljs-comment">// callback function when page was changing</span>
onSizePerPageChange: <span class="hljs-function">(<span class="hljs-params">sizePerPage, page</span>) =&gt;</span> {}, <span class="hljs-comment">// callback function when page size was changing</span>
paginationTotalRenderer: <span class="hljs-function">(<span class="hljs-params"><span class="hljs-keyword">from</span>, to, size</span>) =&gt;</span> { ... } <span class="hljs-comment">// custom the pagination total</span>
})
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="filter-object"></a><a href="#filter-object" 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>filter - [Object]</h2>