Skip to content
This repository has been archived by the owner on Jan 15, 2022. It is now read-only.

Row options patch #319

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Row options patch #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7bfdc5
Support changing itemsPerPage
zry656565 Sep 4, 2016
a0485af
commit missing built files
zry656565 Sep 4, 2016
7c8896f
expose `onItemsPerPageChange` API
zry656565 Sep 4, 2016
1bf8480
update test.html
zry656565 Sep 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 73 additions & 7 deletions build/reactable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,23 @@ window.ReactDOM["default"] = window.ReactDOM;
columns: true,
sortable: true,
filterable: true,
filtering: true,
onFilter: true,
filterPlaceholder: true,
filterClassName: true,
currentFilter: true,
sort: true,
sortBy: true,
sortableColumns: true,
onSort: true,
defaultSort: true,
defaultSortDescending: true,
itemsPerPage: true,
filterBy: true,
hideFilterInput: true,
noDataText: true,
currentPage: true,
pageButtonLimit: true,
childNode: true,
data: true,
children: true
Expand Down Expand Up @@ -848,10 +861,17 @@ window.ReactDOM["default"] = window.ReactDOM;
var Paginator = (function (_React$Component) {
_inherits(Paginator, _React$Component);

function Paginator() {
function Paginator(props) {
_classCallCheck(this, Paginator);

_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments);
_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).call(this, props);

if (this.props.rowOptions) {
this.rowOptions = this.props.rowOptions.split(',').map(function (option) {
if (option === 'all') return 'all';
return parseInt(option, 10);
});
}
}

_createClass(Paginator, [{
Expand Down Expand Up @@ -964,9 +984,22 @@ window.ReactDOM["default"] = window.ReactDOM;
_react['default'].createElement(
'td',
{ colSpan: this.props.colSpan },
this.renderPrevious(),
pageButtons,
this.renderNext()
this.rowOptions ? _react['default'].createElement(
'span',
{ className: 'row-selector' },
_react['default'].createElement(RowSelector, {
options: this.rowOptions,
selected: this.props.itemsPerPage,
onItemsPerPageChange: this.props.onItemsPerPageChange }),
'rows per page.'
) : null,
numPages > 1 ? _react['default'].createElement(
'span',
{ className: 'pagination-buttons' },
this.renderPrevious(),
pageButtons,
this.renderNext()
) : null
)
)
);
Expand All @@ -978,6 +1011,31 @@ window.ReactDOM["default"] = window.ReactDOM;

exports.Paginator = Paginator;
;

function RowSelector(props) {
var options = props.options.map(function (opt, i) {
if (opt === 'all') return _react['default'].createElement(
'option',
{ key: i, value: Number.MAX_SAFE_INTEGER },
'all'
);
return _react['default'].createElement(
'option',
{ key: i, value: opt },
opt
);
});

return _react['default'].createElement(
'select',
{
defaultValue: props.selected,
onChange: function (e) {
return props.onItemsPerPageChange(parseInt(e.target.value, 10));
} },
options
);
}
});

(function (global, factory) {
Expand Down Expand Up @@ -1019,6 +1077,7 @@ window.ReactDOM["default"] = window.ReactDOM;
column: null,
direction: this.props.defaultSortDescending ? -1 : 1
},
itemsPerPage: this.props.itemsPerPage || 0,
filter: ''
};

Expand Down Expand Up @@ -1454,15 +1513,14 @@ window.ReactDOM["default"] = window.ReactDOM;
}

// Determine pagination properties and which columns to display
var itemsPerPage = 0;
var itemsPerPage = this.state.itemsPerPage;
var pagination = false;
var numPages = undefined;
var currentPage = this.state.currentPage;
var pageButtonLimit = this.props.pageButtonLimit || 10;

var currentChildren = filteredChildren;
if (this.props.itemsPerPage > 0) {
itemsPerPage = this.props.itemsPerPage;
numPages = Math.ceil(filteredChildren.length / itemsPerPage);

if (currentPage > numPages - 1) {
Expand Down Expand Up @@ -1517,12 +1575,20 @@ window.ReactDOM["default"] = window.ReactDOM;
pageButtonLimit: pageButtonLimit,
numPages: numPages,
currentPage: currentPage,
rowOptions: this.props.rowOptions,
itemsPerPage: itemsPerPage,
onPageChange: function (page) {
_this.setState({ currentPage: page });
if (_this.props.onPageChange) {
_this.props.onPageChange(page);
}
},
onItemsPerPageChange: function (itemsPerPage) {
_this.setState({ itemsPerPage: itemsPerPage });
if (_this.props.onItemsPerPageChange) {
_this.props.onItemsPerPageChange(itemsPerPage);
}
},
previousPageLabel: this.props.previousPageLabel,
nextPageLabel: this.props.nextPageLabel,
key: 'paginator' }) : null,
Expand Down
13 changes: 13 additions & 0 deletions lib/reactable/lib/filter_props_from.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,23 @@ var internalProps = {
columns: true,
sortable: true,
filterable: true,
filtering: true,
onFilter: true,
filterPlaceholder: true,
filterClassName: true,
currentFilter: true,
sort: true,
sortBy: true,
sortableColumns: true,
onSort: true,
defaultSort: true,
defaultSortDescending: true,
itemsPerPage: true,
filterBy: true,
hideFilterInput: true,
noDataText: true,
currentPage: true,
pageButtonLimit: true,
childNode: true,
data: true,
children: true
Expand Down
55 changes: 50 additions & 5 deletions lib/reactable/paginator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,17 @@ function pageHref(num) {
var Paginator = (function (_React$Component) {
_inherits(Paginator, _React$Component);

function Paginator() {
function Paginator(props) {
_classCallCheck(this, Paginator);

_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments);
_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).call(this, props);

if (this.props.rowOptions) {
this.rowOptions = this.props.rowOptions.split(',').map(function (option) {
if (option === 'all') return 'all';
return parseInt(option, 10);
});
}
}

_createClass(Paginator, [{
Expand Down Expand Up @@ -141,9 +148,22 @@ var Paginator = (function (_React$Component) {
_react2['default'].createElement(
'td',
{ colSpan: this.props.colSpan },
this.renderPrevious(),
pageButtons,
this.renderNext()
this.rowOptions ? _react2['default'].createElement(
'span',
{ className: 'row-selector' },
_react2['default'].createElement(RowSelector, {
options: this.rowOptions,
selected: this.props.itemsPerPage,
onItemsPerPageChange: this.props.onItemsPerPageChange }),
'rows per page.'
) : null,
numPages > 1 ? _react2['default'].createElement(
'span',
{ className: 'pagination-buttons' },
this.renderPrevious(),
pageButtons,
this.renderNext()
) : null
)
)
);
Expand All @@ -155,3 +175,28 @@ var Paginator = (function (_React$Component) {

exports.Paginator = Paginator;
;

function RowSelector(props) {
var options = props.options.map(function (opt, i) {
if (opt === 'all') return _react2['default'].createElement(
'option',
{ key: i, value: Number.MAX_SAFE_INTEGER },
'all'
);
return _react2['default'].createElement(
'option',
{ key: i, value: opt },
opt
);
});

return _react2['default'].createElement(
'select',
{
defaultValue: props.selected,
onChange: function (e) {
return props.onItemsPerPageChange(parseInt(e.target.value, 10));
} },
options
);
}
12 changes: 10 additions & 2 deletions lib/reactable/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ var Table = (function (_React$Component) {
column: null,
direction: this.props.defaultSortDescending ? -1 : 1
},
itemsPerPage: this.props.itemsPerPage || 0,
filter: ''
};

Expand Down Expand Up @@ -485,15 +486,14 @@ var Table = (function (_React$Component) {
}

// Determine pagination properties and which columns to display
var itemsPerPage = 0;
var itemsPerPage = this.state.itemsPerPage;
var pagination = false;
var numPages = undefined;
var currentPage = this.state.currentPage;
var pageButtonLimit = this.props.pageButtonLimit || 10;

var currentChildren = filteredChildren;
if (this.props.itemsPerPage > 0) {
itemsPerPage = this.props.itemsPerPage;
numPages = Math.ceil(filteredChildren.length / itemsPerPage);

if (currentPage > numPages - 1) {
Expand Down Expand Up @@ -548,12 +548,20 @@ var Table = (function (_React$Component) {
pageButtonLimit: pageButtonLimit,
numPages: numPages,
currentPage: currentPage,
rowOptions: this.props.rowOptions,
itemsPerPage: itemsPerPage,
onPageChange: function (page) {
_this.setState({ currentPage: page });
if (_this.props.onPageChange) {
_this.props.onPageChange(page);
}
},
onItemsPerPageChange: function (itemsPerPage) {
_this.setState({ itemsPerPage: itemsPerPage });
if (_this.props.onItemsPerPageChange) {
_this.props.onItemsPerPageChange(itemsPerPage);
}
},
previousPageLabel: this.props.previousPageLabel,
nextPageLabel: this.props.nextPageLabel,
key: 'paginator' }) : null,
Expand Down
44 changes: 41 additions & 3 deletions src/reactable/paginator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ function pageHref(num) {
}

export class Paginator extends React.Component {
constructor(props) {
super(props);

if (this.props.rowOptions) {
this.rowOptions = this.props.rowOptions.split(',').map(option => {
if (option === 'all') return 'all';
return parseInt(option, 10);
});
}
}

handlePrevious(e) {
e.preventDefault()
this.props.onPageChange(this.props.currentPage - 1)
Expand Down Expand Up @@ -96,13 +107,40 @@ export class Paginator extends React.Component {
<tbody className="reactable-pagination">
<tr>
<td colSpan={this.props.colSpan}>
{this.renderPrevious()}
{pageButtons}
{this.renderNext()}
{this.rowOptions ?
<span className="row-selector">
<RowSelector
options={this.rowOptions}
selected={this.props.itemsPerPage}
onItemsPerPageChange={this.props.onItemsPerPageChange} />
rows per page.
</span>
: null}
{numPages > 1 ?
<span className="pagination-buttons">
{this.renderPrevious()}
{pageButtons}
{this.renderNext()}
</span>
: null}
</td>
</tr>
</tbody>
);
}
};

function RowSelector(props) {
let options = props.options.map((opt, i) => {
if (opt === 'all') return <option key={i} value={Number.MAX_SAFE_INTEGER}>all</option>;
return <option key={i} value={opt}>{opt}</option>;
});

return (
<select
defaultValue={props.selected}
onChange={e => props.onItemsPerPageChange(parseInt(e.target.value, 10))} >
{options}
</select>
);
}
Loading