Introduced a 'multiSort' flag

Defaults to 'true'
A 'false' value will turn multi-sort off.
This commit is contained in:
Gary Menzel 2017-11-16 03:05:44 +11:00
parent 6df336215d
commit fc47d4f258
5 changed files with 65 additions and 1 deletions

View File

@ -171,6 +171,7 @@ These are all of the available props (and their default values) for the main `<R
collapseOnDataChange: true,
freezeWhenExpanded: false,
sortable: true,
multiSort: true,
resizable: true,
filterable: false,
defaultSortDesc: false,
@ -833,6 +834,9 @@ Sorting comes built in with React-Table.
## Multi-Sort
When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
You can set the `multiSort` prop to `false` to disable this feature (which may be useful for server-side sorting when you are not
going to sort multiple columns).
## Custom Sorting Algorithm
To override the default sorting algorithm for the whole table use the `defaultSortMethod` prop.

View File

@ -10,6 +10,8 @@ import '../../react-table.css'
import Readme from './stories/Readme.js'
import HOCReadme from './stories/HOCReadme.js'
// import Tester from './examples/expander';
// import { TreeTable, SelectTable, SelectTreeTable } from './examples/index'
//
// const exampleStories = [
@ -22,6 +24,8 @@ import HOCReadme from './stories/HOCReadme.js'
const stories = [
{ name: 'Readme', component: Readme },
{ name: 'HOC Readme', component: HOCReadme },
// { name: 'Tester', component: Tester },
{ name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
{

View File

@ -0,0 +1,54 @@
/* eslint-disable */
import React from 'react';
import ReactTable from '../../../../lib/index'
import '../../../../react-table.css'
const data = [
{one:"1.1",two:"1.2"},
{one:"2.1",two:"2.2"},
{one:"3.1",two:"3.2"},
{one:"4.1",two:"4.2"},
]
const columns = [
{accessor:'one', Header: 'One'},
{accessor:'two', Header: 'Two'},
]
class ExpanderComponent extends React.Component {
render()
{
return (
<div className={`rt-expander ${this.props.isExpanded ? '-open' : ''}`}>
&bull;
</div>
)
}
}
class SubComponent extends React.Component {
render()
{
return <div>Nothing</div>
}
}
export default class ComponentTest extends React.Component {
render()
{
const rtProps = {
data,
columns,
ExpanderComponent: (props)=><ExpanderComponent {...props} />,
SubComponent: (props)=><SubComponent {...props} />,
multiSort: false,
}
return (
<ReactTable
{...rtProps}
/>
)
}
}

View File

@ -22,6 +22,7 @@ export default {
collapseOnDataChange: true,
freezeWhenExpanded: false,
sortable: true,
multiSort: true,
resizable: true,
filterable: false,
defaultSortDesc: false,

View File

@ -80,6 +80,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
loadingText,
noDataText,
sortable,
multiSort,
resizable,
filterable,
// Pivoting State
@ -382,7 +383,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
maxWidth: _.asPx(maxWidth),
}}
toggleSort={e => {
isSortable && this.sortColumn(column, e.shiftKey)
isSortable && this.sortColumn(column, multiSort ? e.shiftKey : false)
}}
{...rest}
>