diff --git a/README.md b/README.md index b1fe6efe..b54747a5 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ this the faster we can get to 1.0! - [Filtering](#filtering) - [Empty Data Sets](#empty-data-sets) - [Events](#events) + - [Custom CSS](#custom-css) ## Installation @@ -525,3 +526,49 @@ filtering. Called every time the page changes. This handler will be passed a number representing the current page, zero based. + +## Custom CSS + +### Add sort icon (required Font Awesome 4) + +```css +.reactable-header-sortable{ + position:relative; + padding-right: 40px; +} +.reactable-header-sortable::before{ + font: normal normal normal 14px/1 FontAwesome; + content: "\f0dc"; + position: absolute; + top: 17px; + right: 15px; + color: #2196F3; +} +.reactable-header-sort-asc::before{ + content: "\f0de"; + color: #2196F3; +} +.reactable-header-sort-desc::before{ + content: "\f0dd"; + color: #2196F3; +} +``` + +### Add search icon in filterer input (required Font Awesome 4) + +```css +.reactable-filterer td{ + position:relative; +} +.reactable-filterer td::before{ + font: normal normal normal 14px/1 FontAwesome; + content: "\f002"; + position: absolute; + top: 23px; + left: 24px; + color: #2196F3; +} +.reactable-filterer td input{ + padding-left: 35px; +} +``` diff --git a/lib/reactable/paginator.js b/lib/reactable/paginator.js index 0c27cc77..c522eaeb 100644 --- a/lib/reactable/paginator.js +++ b/lib/reactable/paginator.js @@ -1,34 +1,35 @@ 'use strict'; -Object.defineProperty(exports, '__esModule', { +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Paginator = undefined; -var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; +var _react = require('react'); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } +var _react2 = _interopRequireDefault(_react); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -var _react = require('react'); +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } -var _react2 = _interopRequireDefault(_react); +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } function pageHref(num) { return '#page-' + (num + 1); } -var Paginator = (function (_React$Component) { +var Paginator = exports.Paginator = function (_React$Component) { _inherits(Paginator, _React$Component); function Paginator() { _classCallCheck(this, Paginator); - _get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments); + return _possibleConstructorReturn(this, (Paginator.__proto__ || Object.getPrototypeOf(Paginator)).apply(this, arguments)); } _createClass(Paginator, [{ @@ -53,12 +54,16 @@ var Paginator = (function (_React$Component) { key: 'renderPrevious', value: function renderPrevious() { if (this.props.currentPage > 0) { - return _react2['default'].createElement( - 'a', - { className: 'reactable-previous-page', - href: pageHref(this.props.currentPage - 1), - onClick: this.handlePrevious.bind(this) }, - this.props.previousPageLabel || 'Previous' + return _react2.default.createElement( + 'li', + { className: 'page-item' }, + _react2.default.createElement( + 'a', + { className: 'reactable-previous-page page-link', + href: pageHref(this.props.currentPage - 1), + onClick: this.handlePrevious.bind(this) }, + this.props.previousPageLabel || 'Previous' + ) ); } } @@ -66,26 +71,33 @@ var Paginator = (function (_React$Component) { key: 'renderNext', value: function renderNext() { if (this.props.currentPage < this.props.numPages - 1) { - return _react2['default'].createElement( - 'a', - { className: 'reactable-next-page', - href: pageHref(this.props.currentPage + 1), - onClick: this.handleNext.bind(this) }, - this.props.nextPageLabel || 'Next' + return _react2.default.createElement( + 'li', + { className: 'page-item' }, + _react2.default.createElement( + 'a', + { className: 'reactable-next-page page-link', + href: pageHref(this.props.currentPage + 1), + onClick: this.handleNext.bind(this) }, + this.props.nextPageLabel || 'Next' + ) ); } } }, { key: 'renderPageButton', value: function renderPageButton(className, pageNum) { - - return _react2['default'].createElement( - 'a', - { className: className, - key: pageNum, - href: pageHref(pageNum), - onClick: this.handlePageButton.bind(this, pageNum) }, - pageNum + 1 + var _className = className + " page-link"; + return _react2.default.createElement( + 'li', + { key: pageNum, className: 'page-item' }, + _react2.default.createElement( + 'a', + { className: _className, + href: pageHref(pageNum), + onClick: this.handlePageButton.bind(this, pageNum) }, + pageNum + 1 + ) ); } }, { @@ -132,18 +144,22 @@ var Paginator = (function (_React$Component) { pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit); } - return _react2['default'].createElement( + return _react2.default.createElement( 'tbody', { className: 'reactable-pagination' }, - _react2['default'].createElement( + _react2.default.createElement( 'tr', null, - _react2['default'].createElement( + _react2.default.createElement( 'td', { colSpan: this.props.colSpan }, - this.renderPrevious(), - pageButtons, - this.renderNext() + _react2.default.createElement( + 'ul', + { className: 'pagination' }, + this.renderPrevious(), + pageButtons, + this.renderNext() + ) ) ) ); @@ -151,7 +167,6 @@ var Paginator = (function (_React$Component) { }]); return Paginator; -})(_react2['default'].Component); +}(_react2.default.Component); -exports.Paginator = Paginator; ; diff --git a/src/reactable/paginator.jsx b/src/reactable/paginator.jsx index 62f1e6dd..f18fe213 100644 --- a/src/reactable/paginator.jsx +++ b/src/reactable/paginator.jsx @@ -22,32 +22,31 @@ export class Paginator extends React.Component { renderPrevious() { if(this.props.currentPage > 0) { - return - {this.props.previousPageLabel || 'Previous'} - + {this.props.previousPageLabel || 'Anterior'} + } } renderNext() { if(this.props.currentPage < this.props.numPages - 1) { - return - {this.props.nextPageLabel || 'Next'} - + {this.props.nextPageLabel || 'Siguiente'} + } } renderPageButton(className, pageNum) { - - return {pageNum + 1} - + } render() { @@ -96,13 +95,14 @@ export class Paginator extends React.Component { + ); } }; -