Skip to content

Commit d9248ce

Browse files
tannerlinsleytannerlinsley
committed
Added defaultSortDesc prop and formatted with prettier + project's eslint
1 parent f4704b1 commit d9248ce

File tree

11 files changed

+1140
-911
lines changed

11 files changed

+1140
-911
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 6.3.0
2+
##### New Features
3+
- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
4+
- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
5+
16
## 6.0.0
27

38
##### New Features

‎README.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ These are all of the available props (and their default values) for the main `<R
169169
sortable: true,
170170
resizable: true,
171171
filterable: false,
172+
defaultSortDesc: false,
172173
defaultSorted: [],
173174
defaultFiltered: [],
174175
defaultResized: [],
@@ -286,7 +287,8 @@ These are all of the available props (and their default values) for the main `<R
286287
footerStyle: {},
287288
getFooterProps: () => ({}),
288289
filterMethod: undefined,
289-
sortMethod: undefined
290+
sortMethod: undefined,
291+
defaultSortDesc: undefined,
290292
},
291293

292294
// Global Expander Column Defaults
@@ -804,7 +806,11 @@ Accessing internal state and wrapping with more UI:
804806
The possibilities are endless!
805807

806808
## Sorting
807-
Sorting comes built in with React-Table. Click column header to sort by its column. Click it again to reverse the sort.
809+
Sorting comes built in with React-Table.
810+
- Click a column header to sort by its accessor.
811+
- Click it again to reverse the sort.
812+
- Set `defaultSortDesc` property to `true` to make the first sort direction default to descending.
813+
- Override a specific column's default sort direction by using the same `defaultSortDesc` property on a column, set to `true`
808814

809815
## Multi-Sort
810816
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!

‎docs/src/stories/Simple.js

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import namor from 'namor'
66
import ReactTable from '../../../lib/index'
77

88
class Story extends React.PureComponent {
9-
render () {
9+
render() {
1010
const data = _.map(_.range(5553), d => {
1111
return {
1212
firstName: namor.generate({ words: 1, numbers: 0 }),
@@ -22,35 +22,43 @@ class Story extends React.PureComponent {
2222
}
2323
})
2424

25-
const columns = [{
26-
Header: 'Name',
27-
columns: [{
28-
Header: 'First Name',
29-
accessor: 'firstName'
30-
}, {
31-
Header: 'Last Name',
32-
id: 'lastName',
33-
accessor: d => d.lastName
34-
}]
35-
}, {
36-
Header: 'Info',
37-
columns: [{
38-
Header: 'Age',
39-
accessor: 'age'
40-
}]
41-
}]
25+
const columns = [
26+
{
27+
Header: 'Name',
28+
columns: [
29+
{
30+
Header: 'First Name',
31+
accessor: 'firstName'
32+
},
33+
{
34+
Header: 'Last Name',
35+
id: 'lastName',
36+
accessor: d => d.lastName
37+
}
38+
]
39+
},
40+
{
41+
Header: 'Info',
42+
columns: [
43+
{
44+
Header: 'Age',
45+
accessor: 'age'
46+
}
47+
]
48+
}
49+
]
4250

4351
return (
4452
<div>
45-
<div className='table-wrap'>
53+
<div className="table-wrap">
4654
<ReactTable
47-
className='-striped -highlight'
55+
className="-striped -highlight"
4856
data={data}
4957
columns={columns}
5058
defaultPageSize={10}
5159
/>
5260
</div>
53-
<div style={{textAlign: 'center'}}>
61+
<div style={{ textAlign: 'center' }}>
5462
<br />
5563
<em>Tip: Hold shift when sorting to multi-sort!</em>
5664
</div>
@@ -62,9 +70,8 @@ class Story extends React.PureComponent {
6270
const CodeHighlight = require('./components/codeHighlight').default
6371
const source = require('!raw!./Simple')
6472

65-
export default () => (
73+
export default () =>
6674
<div>
6775
<Story />
6876
<CodeHighlight>{() => source}</CodeHighlight>
6977
</div>
70-
)

‎docs/yarn.lock

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4557,14 +4557,16 @@ react-json-tree@^0.10.9:
45574557
prop-types "^15.5.8"
45584558
react-base16-styling "^0.5.1"
45594559

4560-
react-router-dom@next:
4561-
version "4.0.0-beta.8"
4562-
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.8.tgz#907a5a0a36e9190652c80f2feead0eadbbba262e"
4560+
react-router-dom@^4.1.1:
4561+
version "4.1.1"
4562+
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
45634563
dependencies:
45644564
history "^4.5.1"
4565-
react-router "^4.0.0-beta.8"
4565+
loose-envify "^1.3.1"
4566+
prop-types "^15.5.4"
4567+
react-router "^4.1.1"
45664568

4567-
react-router@^4.0.0-beta.8:
4569+
react-router@^4.1.1:
45684570
version "4.1.1"
45694571
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
45704572
dependencies:
@@ -4621,17 +4623,17 @@ react-scripts@0.9.5:
46214623
optionalDependencies:
46224624
fsevents "1.0.17"
46234625

4624-
react-story@^0.0.6:
4625-
version "0.0.6"
4626-
resolved "https://registry.yarnpkg.com/react-story/-/react-story-0.0.6.tgz#ec3e6b42e5edab8a74dd581c12bd321ec304eaba"
4626+
react-story@^0.0.10:
4627+
version "0.0.10"
4628+
resolved "https://registry.yarnpkg.com/react-story/-/react-story-0.0.10.tgz#4c07d122962900162f0871666780da34402a2573"
46274629
dependencies:
46284630
classnames "^2.2.5"
46294631
glamor "^2.20.25"
46304632
glamorous "^3.14.0"
46314633
javascript-detect-element-resize "^0.5.3"
46324634
raf "^3.3.2"
46334635
react-fastclick "^3.0.1"
4634-
react-router-dom next
4636+
react-router-dom "^4.1.1"
46354637

46364638
react@^15.5.4:
46374639
version "15.5.4"

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"build": "npm-run-all build:*",
3535
"prepublish": "npm run build && npm run umd",
3636
"postpublish": "git push --tags",
37-
"docs": "cd docs && yarn && yarn start",
38-
"docs:build": "cd docs && yarn && yarn run build"
37+
"docs": "yarn watch & cd docs && yarn && yarn start",
38+
"docs:build": "yarn build && cd docs && yarn && yarn run build"
3939
},
4040
"dependencies": {
4141
"classnames": "^2.2.5",

‎src/defaultProps.js

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,21 @@ export default {
2424
sortable: true,
2525
resizable: true,
2626
filterable: false,
27+
defaultSortDesc: false,
2728
defaultSorted: [],
2829
defaultFiltered: [],
2930
defaultResized: [],
3031
defaultExpanded: {},
3132
defaultFilterMethod: (filter, row, column) => {
3233
const id = filter.pivotId || filter.id
33-
return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
34+
return row[id] !== undefined
35+
? String(row[id]).startsWith(filter.value)
36+
: true
3437
},
3538
defaultSortMethod: (a, b) => {
3639
// force null and undefined to the bottom
37-
a = (a === null || a === undefined) ? '' : a
38-
b = (b === null || b === undefined) ? '' : b
40+
a = a === null || a === undefined ? '' : a
41+
b = b === null || b === undefined ? '' : b
3942
// force any string values to lowercase
4043
a = typeof a === 'string' ? a.toLowerCase() : a
4144
b = typeof b === 'string' ? b.toLowerCase() : b
@@ -142,15 +145,15 @@ export default {
142145
footerStyle: {},
143146
getFooterProps: emptyObj,
144147
filterMethod: undefined,
145-
sortMethod: undefined
148+
sortMethod: undefined,
146149
},
147150

148151
// Global Expander Column Defaults
149152
expanderDefaults: {
150153
sortable: false,
151154
resizable: false,
152155
filterable: false,
153-
width: 35
156+
width: 35,
154157
},
155158

156159
pivotDefaults: {
@@ -172,7 +175,7 @@ export default {
172175
TbodyComponent: _.makeTemplateComponent('rt-tbody'),
173176
TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
174177
TrComponent: _.makeTemplateComponent('rt-tr'),
175-
ThComponent: ({toggleSort, className, children, ...rest}) => {
178+
ThComponent: ({ toggleSort, className, children, ...rest }) => {
176179
return (
177180
<div
178181
className={classnames(className, 'rt-th')}
@@ -187,51 +190,45 @@ export default {
187190
},
188191
TdComponent: _.makeTemplateComponent('rt-td'),
189192
TfootComponent: _.makeTemplateComponent('rt-tfoot'),
190-
FilterComponent: ({filter, onChange}) => (
191-
<input type='text'
193+
FilterComponent: ({ filter, onChange }) =>
194+
<input
195+
type='text'
192196
style={{
193-
width: '100%'
197+
width: '100%',
194198
}}
195199
value={filter ? filter.value : ''}
196-
onChange={(event) => onChange(event.target.value)}
197-
/>
198-
),
199-
ExpanderComponent: ({isExpanded}) => (
200+
onChange={event => onChange(event.target.value)}
201+
/>,
202+
ExpanderComponent: ({ isExpanded }) =>
200203
<div className={classnames('rt-expander', isExpanded && '-open')}>
201204
&bull;
202-
</div>
203-
),
204-
PivotValueComponent: ({subRows, value}) => (
205-
<span>{value} {subRows && `(${subRows.length})`}</span>
206-
),
207-
AggregatedComponent: ({subRows, column}) => {
205+
</div>,
206+
PivotValueComponent: ({ subRows, value }) =>
207+
<span>{value} {subRows && `(${subRows.length})`}</span>,
208+
AggregatedComponent: ({ subRows, column }) => {
208209
const previewValues = subRows
209210
.filter(d => typeof d[column.id] !== 'undefined')
210-
.map((row, i) => (
211-
<span key={i}>{row[column.id]}{i < subRows.length - 1 ? ', ' : ''}</span>
212-
))
213-
return (
214-
<span>{previewValues}</span>
215-
)
211+
.map((row, i) =>
212+
<span key={i}>
213+
{row[column.id]}{i < subRows.length - 1 ? ', ' : ''}
214+
</span>
215+
)
216+
return <span>{previewValues}</span>
216217
},
217218
PivotComponent: undefined, // this is a computed default generated using
218219
// the ExpanderComponent and PivotValueComponent at run-time in methods.js
219220
PaginationComponent: Pagination,
220221
PreviousComponent: undefined,
221222
NextComponent: undefined,
222-
LoadingComponent: ({className, loading, loadingText, ...rest}) => (
223-
<div className={classnames(
224-
'-loading',
225-
{'-active': loading},
226-
className
227-
)}
223+
LoadingComponent: ({ className, loading, loadingText, ...rest }) =>
224+
<div
225+
className={classnames('-loading', { '-active': loading }, className)}
228226
{...rest}
229227
>
230228
<div className='-loading-inner'>
231229
{loadingText}
232230
</div>
233-
</div>
234-
),
231+
</div>,
235232
NoDataComponent: _.makeTemplateComponent('rt-noData'),
236-
ResizerComponent: _.makeTemplateComponent('rt-resizer')
233+
ResizerComponent: _.makeTemplateComponent('rt-resizer'),
237234
}

0 commit comments

Comments
 (0)