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
3f382eb764
react-bootstrap-table2/docs/basic-sort.html
AllenFang c4271176a3 apply new style
2018-10-07 23:30:57 +08:00

64 lines
16 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>Table Sort · react-bootstrap-table2</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Table Sort · 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` allow you to configure columns to be sortable. Currently, we don&#x27;t support the multi-column sort, but it will be implemented in the future."/><link rel="shortcut icon" href="/react-bootstrap-table2/img/favicon.ico"/><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/"><img class="logo" src="/react-bootstrap-table2/img/logo/hybrid-white-large.svg"/></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><li><a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" target="_self">GitHub</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 navListItemActive"><a class="navItem navItemActive" 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"><a class="navItem" 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 class="navGroup navGroupActive"><h3>Exposed API</h3><ul><li class="navListItem"><a class="navItem" href="/react-bootstrap-table2/docs/exposed-api.html">Introduction</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>Table Sort</h1></header><article><div><span><p><code>react-bootstrap-table2</code> allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.</p>
<p><strong><a href="../storybook/index.html?selectedKind=Sort%20Table">Live Demo For Table Sort</a></strong></p>
<hr>
<h2><a class="anchor" aria-hidden="true" name="enable-sort-on-column"></a><a href="#enable-sort-on-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>Enable Sort on Column</h2>
<p>Firstly, you need to know what column you allow user to sort and give the <a href="./column-props.html#columnsort-bool"><code>sort</code></a> as <code>true</code> in the column definition.</p>
<pre><code class="hljs css js"><span class="hljs-keyword">const</span> columns = [{
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'id'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product ID'</span>,
<span class="hljs-attr">sort</span>: <span class="hljs-literal">true</span>
}, {
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'name'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product Name'</span>,
<span class="hljs-attr">sort</span>: <span class="hljs-literal">true</span>
}, {
<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="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> } /&gt;</span>
</span></code></pre>
<p>After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
<img src="/react-bootstrap-table2/img/docs/basic-sort-caret.png" alt="sort caret"></p>
<h2><a class="anchor" aria-hidden="true" name="control-sorting"></a><a href="#control-sorting" 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>Control Sorting</h2>
<h3><a class="anchor" aria-hidden="true" name="default-sort"></a><a href="#default-sort" 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>Default Sort</h3>
<p><code>react-bootstrap-table2</code> will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via <a href="./table-props.html#defaultsorted-array"><code>defaultSorted</code></a>.</p>
<h3><a class="anchor" aria-hidden="true" name="sort-event-listener"></a><a href="#sort-event-listener" 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>Sort Event Listener</h3>
<p>Defined <a href="./column-props.html#columnonsort-function"><code>onSort</code></a> on target column:</p>
<pre><code class="hljs css js">{
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'id'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product ID'</span>,
<span class="hljs-attr">sort</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">onSort</span>: <span class="hljs-function">(<span class="hljs-params">field, order</span>) =&gt;</span> {
<span class="hljs-comment">// ...</span>
}
}
</code></pre>
<h3><a class="anchor" aria-hidden="true" name="manage-sorting-externally"></a><a href="#manage-sorting-externally" 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>Manage Sorting Externally</h3>
<p><strong>Coming Soon!</strong></p>
<h2><a class="anchor" aria-hidden="true" name="custom-the-sorting-algorithm"></a><a href="#custom-the-sorting-algorithm" 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 the Sorting Algorithm</h2>
<p>It's simple!! configure <a href="./column-props.html#columnsortfunc-function"><code>sortFunc</code></a> on column definition.</p>
<pre><code class="hljs css js">{
<span class="hljs-attr">dataField</span>: <span class="hljs-string">'id'</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">'Product ID'</span>,
<span class="hljs-attr">sort</span>: <span class="hljs-literal">true</span>
<span class="hljs-comment">// Perform a reverse sorting here</span>
sortFunc: <span class="hljs-function">(<span class="hljs-params">a, b, order, dataField, rowA, rowB</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (order === <span class="hljs-string">'asc'</span>) {
<span class="hljs-keyword">return</span> b - a;
}
<span class="hljs-keyword">return</span> a - b; <span class="hljs-comment">// desc</span>
}
}
</code></pre>
<h2><a class="anchor" aria-hidden="true" name="custom-the-sorting-style"></a><a href="#custom-the-sorting-style" 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 the Sorting Style</h2>
<p>There're two way you can change or prettify the header when sorting: <a href="./column-props.html#headersortingclasses-string-function"><code>headerSortingClasses</code></a> and <a href="./column-props.html#headersortingstyle-object-function"><code>headerSortingStyle</code></a></p>
<h2><a class="anchor" aria-hidden="true" name="custom-the-sort-caret"></a><a href="#custom-the-sort-caret" 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 the Sort Caret</h2>
<p>See <a href="./column-props.html#columnsortcaret-function"><code>column.sortCaret</code></a>.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="basic-column.html">← Work on Column</a><a class="docs-next button" href="basic-row-select.html">Row Selection →</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