Skip to content

Commit b7bfdc5

Browse files
zry656565zry656565
committed
Support changing itemsPerPage
1 parent 8e386ac commit b7bfdc5

File tree

4 files changed

+143
-15
lines changed

4 files changed

+143
-15
lines changed

‎build/reactable.js

Lines changed: 69 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,23 @@ window.ReactDOM["default"] = window.ReactDOM;
2121
columns: true,
2222
sortable: true,
2323
filterable: true,
24+
filtering: true,
25+
onFilter: true,
26+
filterPlaceholder: true,
2427
filterClassName: true,
28+
currentFilter: true,
29+
sort: true,
2530
sortBy: true,
31+
sortableColumns: true,
32+
onSort: true,
2633
defaultSort: true,
34+
defaultSortDescending: true,
2735
itemsPerPage: true,
36+
filterBy: true,
37+
hideFilterInput: true,
38+
noDataText: true,
39+
currentPage: true,
40+
pageButtonLimit: true,
2841
childNode: true,
2942
data: true,
3043
children: true
@@ -848,10 +861,17 @@ window.ReactDOM["default"] = window.ReactDOM;
848861
var Paginator = (function (_React$Component) {
849862
_inherits(Paginator, _React$Component);
850863

851-
function Paginator() {
864+
function Paginator(props) {
852865
_classCallCheck(this, Paginator);
853866

854-
_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments);
867+
_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).call(this, props);
868+
869+
if (this.props.rowOptions) {
870+
this.rowOptions = this.props.rowOptions.split(',').map(function (option) {
871+
if (option === 'all') return 'all';
872+
return parseInt(option, 10);
873+
});
874+
}
855875
}
856876

857877
_createClass(Paginator, [{
@@ -964,9 +984,22 @@ window.ReactDOM["default"] = window.ReactDOM;
964984
_react['default'].createElement(
965985
'td',
966986
{ colSpan: this.props.colSpan },
967-
this.renderPrevious(),
968-
pageButtons,
969-
this.renderNext()
987+
this.rowOptions ? _react['default'].createElement(
988+
'span',
989+
{ className: 'row-selector' },
990+
_react['default'].createElement(RowSelector, {
991+
options: this.rowOptions,
992+
selected: this.props.itemsPerPage,
993+
onItemsPerPageChange: this.props.onItemsPerPageChange }),
994+
'rows per page.'
995+
) : null,
996+
numPages > 1 ? _react['default'].createElement(
997+
'span',
998+
{ className: 'pagination-buttons' },
999+
this.renderPrevious(),
1000+
pageButtons,
1001+
this.renderNext()
1002+
) : null
9701003
)
9711004
)
9721005
);
@@ -978,6 +1011,30 @@ window.ReactDOM["default"] = window.ReactDOM;
9781011

9791012
exports.Paginator = Paginator;
9801013
;
1014+
1015+
function RowSelector(props) {
1016+
var options = props.options.map(function (opt, i) {
1017+
if (opt === 'all') return _react['default'].createElement(
1018+
'option',
1019+
{ key: i, value: Number.MAX_SAFE_INTEGER, selected: isSelected },
1020+
'all'
1021+
);
1022+
var isSelected = opt === props.selected;
1023+
return _react['default'].createElement(
1024+
'option',
1025+
{ key: i, value: opt, selected: isSelected },
1026+
opt
1027+
);
1028+
});
1029+
1030+
return _react['default'].createElement(
1031+
'select',
1032+
{ onChange: function (e) {
1033+
return props.onItemsPerPageChange(parseInt(e.target.value, 10));
1034+
} },
1035+
options
1036+
);
1037+
}
9811038
});
9821039

9831040
(function (global, factory) {
@@ -1019,6 +1076,7 @@ window.ReactDOM["default"] = window.ReactDOM;
10191076
column: null,
10201077
direction: this.props.defaultSortDescending ? -1 : 1
10211078
},
1079+
itemsPerPage: this.props.itemsPerPage || 0,
10221080
filter: ''
10231081
};
10241082

@@ -1454,15 +1512,14 @@ window.ReactDOM["default"] = window.ReactDOM;
14541512
}
14551513

14561514
// Determine pagination properties and which columns to display
1457-
var itemsPerPage = 0;
1515+
var itemsPerPage = this.state.itemsPerPage;
14581516
var pagination = false;
14591517
var numPages = undefined;
14601518
var currentPage = this.state.currentPage;
14611519
var pageButtonLimit = this.props.pageButtonLimit || 10;
14621520

14631521
var currentChildren = filteredChildren;
14641522
if (this.props.itemsPerPage > 0) {
1465-
itemsPerPage = this.props.itemsPerPage;
14661523
numPages = Math.ceil(filteredChildren.length / itemsPerPage);
14671524

14681525
if (currentPage > numPages - 1) {
@@ -1517,12 +1574,17 @@ window.ReactDOM["default"] = window.ReactDOM;
15171574
pageButtonLimit: pageButtonLimit,
15181575
numPages: numPages,
15191576
currentPage: currentPage,
1577+
rowOptions: this.props.rowOptions,
1578+
itemsPerPage: itemsPerPage,
15201579
onPageChange: function (page) {
15211580
_this.setState({ currentPage: page });
15221581
if (_this.props.onPageChange) {
15231582
_this.props.onPageChange(page);
15241583
}
15251584
},
1585+
onItemsPerPageChange: function (itemsPerPage) {
1586+
return _this.setState({ itemsPerPage: itemsPerPage });
1587+
},
15261588
previousPageLabel: this.props.previousPageLabel,
15271589
nextPageLabel: this.props.nextPageLabel,
15281590
key: 'paginator' }) : null,

‎src/reactable/paginator.jsx

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@ function pageHref(num) {
55
}
66

77
export class Paginator extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
11+
if (this.props.rowOptions) {
12+
this.rowOptions = this.props.rowOptions.split(',').map(option => {
13+
if (option === 'all') return 'all';
14+
return parseInt(option, 10);
15+
});
16+
}
17+
}
18+
819
handlePrevious(e) {
920
e.preventDefault()
1021
this.props.onPageChange(this.props.currentPage - 1)
@@ -96,13 +107,39 @@ export class Paginator extends React.Component {
96107
<tbody className="reactable-pagination">
97108
<tr>
98109
<td colSpan={this.props.colSpan}>
99-
{this.renderPrevious()}
100-
{pageButtons}
101-
{this.renderNext()}
110+
{this.rowOptions ?
111+
<span className="row-selector">
112+
<RowSelector
113+
options={this.rowOptions}
114+
selected={this.props.itemsPerPage}
115+
onItemsPerPageChange={this.props.onItemsPerPageChange} />
116+
rows per page.
117+
</span>
118+
: null}
119+
{numPages > 1 ?
120+
<span className="pagination-buttons">
121+
{this.renderPrevious()}
122+
{pageButtons}
123+
{this.renderNext()}
124+
</span>
125+
: null}
102126
</td>
103127
</tr>
104128
</tbody>
105129
);
106130
}
107131
};
108132

133+
function RowSelector(props) {
134+
let options = props.options.map((opt, i) => {
135+
if (opt === 'all') return <option key={i} value={Number.MAX_SAFE_INTEGER} selected={isSelected}>all</option>;
136+
let isSelected = opt === props.selected;
137+
return <option key={i} value={opt} selected={isSelected}>{opt}</option>;
138+
});
139+
140+
return (
141+
<select onChange={e => props.onItemsPerPageChange(parseInt(e.target.value, 10))} >
142+
{options}
143+
</select>
144+
);
145+
}

‎src/reactable/table.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class Table extends React.Component {
1818
column: null,
1919
direction: this.props.defaultSortDescending ? -1 : 1
2020
},
21+
itemsPerPage: this.props.itemsPerPage || 0,
2122
filter: ''
2223
};
2324

@@ -453,15 +454,14 @@ export class Table extends React.Component {
453454
}
454455

455456
// Determine pagination properties and which columns to display
456-
let itemsPerPage = 0;
457+
let itemsPerPage = this.state.itemsPerPage;
457458
let pagination = false;
458459
let numPages;
459460
let currentPage = this.state.currentPage;
460461
let pageButtonLimit = this.props.pageButtonLimit || 10;
461462

462463
let currentChildren = filteredChildren;
463464
if (this.props.itemsPerPage > 0) {
464-
itemsPerPage = this.props.itemsPerPage;
465465
numPages = Math.ceil(filteredChildren.length / itemsPerPage);
466466

467467
if (currentPage > numPages - 1) {
@@ -510,12 +510,15 @@ export class Table extends React.Component {
510510
pageButtonLimit={pageButtonLimit}
511511
numPages={numPages}
512512
currentPage={currentPage}
513+
rowOptions={this.props.rowOptions}
514+
itemsPerPage={itemsPerPage}
513515
onPageChange={page => {
514516
this.setState({ currentPage: page });
515517
if (this.props.onPageChange) {
516518
this.props.onPageChange(page)
517519
}
518520
}}
521+
onItemsPerPageChange={itemsPerPage => this.setState({ itemsPerPage })}
519522
previousPageLabel={this.props.previousPageLabel}
520523
nextPageLabel={this.props.nextPageLabel}
521524
key="paginator"/>

‎test.html

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="https://fb.me/react-0.13.3.js"></script>
5-
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
4+
<script src="http://cdn.bootcss.com/react/0.14.0/react.min.js"></script>
5+
<script src="http://cdn.bootcss.com/react/0.14.0/react-dom.min.js"></script>
6+
<script src="http://cdn.bootcss.com/react/0.13.3/JSXTransformer.js"></script>
67
<script src="build/reactable.js" type="text/javascript"></script>
78
<script type="text/jsx">
89
/** @jsx React.DOM */
@@ -18,7 +19,32 @@
1819
{ Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'},
1920
{ Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')},
2021
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')},
21-
]} sortable={['Name']} />,
22+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name1">Lee Salminen</span>')},
23+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name2">Lee Salminen</span>')},
24+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name3">Lee Salminen</span>')},
25+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-nam4e">Lee Salminen</span>')},
26+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-nam5e">Lee Salminen</span>')},
27+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-nam6e">Lee Salminen</span>')},
28+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-nam7e">Lee Salminen</span>')},
29+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na8me">Lee Salminen</span>')},
30+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na9me">Lee Salminen</span>')},
31+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na0me">Lee Salminen</span>')},
32+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na-me">Lee Salminen</span>')},
33+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na11me">Lee Salminen</span>')},
34+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-nam2e">Lee Salminen</span>')},
35+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-na1m1e">Lee Salminen</span>')},
36+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-1name">Lee Salminen</span>')},
37+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-2name">Lee Salminen</span>')},
38+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-3name">Lee Salminen</span>')},
39+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-4name">Lee Salminen</span>')},
40+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-5name">Lee Salminen</span>')},
41+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-6name">Lee Salminen</span>')},
42+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-7name">Lee Salminen</span>')},
43+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-8name">Lee Salminen</span>')},
44+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-9name">Lee Salminen</span>')},
45+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-0name">Lee Salminen</span>')},
46+
{ Age: '23', Name: Reactable.unsafe('<span id="lees-11name">Lee Salminen</span>')}
47+
]} sortable={['Name']} itemsPerPage={5} pageButtonLimit={5} rowOptions="1,2,5,10,all" />,
2248
document.getElementById('test-div')
2349
);
2450
</script>

0 commit comments

Comments
 (0)