From b158d18ed2313a54732531b436e0fef6f2815e20 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 15:50:11 -0300 Subject: [PATCH 1/7] feat: add support bootstrap 4 paginator css Inspirate in this format --- src/reactable/paginator.jsx | 238 +++++++++++++++++++++++------------- 1 file changed, 151 insertions(+), 87 deletions(-) diff --git a/src/reactable/paginator.jsx b/src/reactable/paginator.jsx index 62f1e6dd..c522eaeb 100644 --- a/src/reactable/paginator.jsx +++ b/src/reactable/paginator.jsx @@ -1,108 +1,172 @@ -import React from 'react'; +'use strict'; -function pageHref(num) { - return `#page-${num + 1}` -} +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Paginator = undefined; -export class Paginator extends React.Component { - handlePrevious(e) { - e.preventDefault() - this.props.onPageChange(this.props.currentPage - 1) - } +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; }; }(); - handleNext(e) { - e.preventDefault() - this.props.onPageChange(this.props.currentPage + 1); - } +var _react = require('react'); - handlePageButton(page, e) { - e.preventDefault(); - this.props.onPageChange(page); - } +var _react2 = _interopRequireDefault(_react); - renderPrevious() { - if(this.props.currentPage > 0) { - return - {this.props.previousPageLabel || 'Previous'} - - } - } +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - renderNext() { - if(this.props.currentPage < this.props.numPages - 1) { - return - {this.props.nextPageLabel || 'Next'} - - } - } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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; } + +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); +} - renderPageButton(className, pageNum) { +var Paginator = exports.Paginator = function (_React$Component) { + _inherits(Paginator, _React$Component); - return - {pageNum + 1} - + function Paginator() { + _classCallCheck(this, Paginator); + + return _possibleConstructorReturn(this, (Paginator.__proto__ || Object.getPrototypeOf(Paginator)).apply(this, arguments)); } - render() { - if (typeof this.props.colSpan === 'undefined') { - throw new TypeError('Must pass a colSpan argument to Paginator'); + _createClass(Paginator, [{ + key: 'handlePrevious', + value: function handlePrevious(e) { + e.preventDefault(); + this.props.onPageChange(this.props.currentPage - 1); } - - if (typeof this.props.numPages === 'undefined') { - throw new TypeError('Must pass a non-zero numPages argument to Paginator'); + }, { + key: 'handleNext', + value: function handleNext(e) { + e.preventDefault(); + this.props.onPageChange(this.props.currentPage + 1); } - - if (typeof this.props.currentPage === 'undefined') { - throw new TypeError('Must pass a currentPage argument to Paginator'); + }, { + key: 'handlePageButton', + value: function handlePageButton(page, e) { + e.preventDefault(); + this.props.onPageChange(page); } - - let pageButtons = []; - let pageButtonLimit = this.props.pageButtonLimit; - let currentPage = this.props.currentPage; - let numPages = this.props.numPages; - let lowerHalf = Math.round( pageButtonLimit / 2 ); - let upperHalf = (pageButtonLimit - lowerHalf); - - for (let i = 0; i < this.props.numPages; i++) { - let showPageButton = false; - let pageNum = i; - let className = "reactable-page-button"; - if (currentPage === i) { - className += " reactable-current-page"; + }, { + key: 'renderPrevious', + value: function renderPrevious() { + if (this.props.currentPage > 0) { + 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' + ) + ); } - pageButtons.push( this.renderPageButton(className, pageNum)); } - - if(currentPage - pageButtonLimit + lowerHalf > 0) { - if(currentPage > numPages - lowerHalf) { - pageButtons.splice(0, numPages - pageButtonLimit) - } else { - pageButtons.splice(0, currentPage - pageButtonLimit + lowerHalf); + }, { + key: 'renderNext', + value: function renderNext() { + if (this.props.currentPage < this.props.numPages - 1) { + 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) { + 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 + ) + ); + } + }, { + key: 'render', + value: function render() { + if (typeof this.props.colSpan === 'undefined') { + throw new TypeError('Must pass a colSpan argument to Paginator'); + } + + if (typeof this.props.numPages === 'undefined') { + throw new TypeError('Must pass a non-zero numPages argument to Paginator'); + } + + if (typeof this.props.currentPage === 'undefined') { + throw new TypeError('Must pass a currentPage argument to Paginator'); + } + + var pageButtons = []; + var pageButtonLimit = this.props.pageButtonLimit; + var currentPage = this.props.currentPage; + var numPages = this.props.numPages; + var lowerHalf = Math.round(pageButtonLimit / 2); + var upperHalf = pageButtonLimit - lowerHalf; + + for (var i = 0; i < this.props.numPages; i++) { + var showPageButton = false; + var pageNum = i; + var className = "reactable-page-button"; + if (currentPage === i) { + className += " reactable-current-page"; + } + pageButtons.push(this.renderPageButton(className, pageNum)); + } + + if (currentPage - pageButtonLimit + lowerHalf > 0) { + if (currentPage > numPages - lowerHalf) { + pageButtons.splice(0, numPages - pageButtonLimit); + } else { + pageButtons.splice(0, currentPage - pageButtonLimit + lowerHalf); + } + } + + if (numPages - currentPage > upperHalf) { + pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit); + } - if((numPages - currentPage) > upperHalf) { - pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit); + return _react2.default.createElement( + 'tbody', + { className: 'reactable-pagination' }, + _react2.default.createElement( + 'tr', + null, + _react2.default.createElement( + 'td', + { colSpan: this.props.colSpan }, + _react2.default.createElement( + 'ul', + { className: 'pagination' }, + this.renderPrevious(), + pageButtons, + this.renderNext() + ) + ) + ) + ); } + }]); - return ( - - - - {this.renderPrevious()} - {pageButtons} - {this.renderNext()} - - - - ); - } -}; + return Paginator; +}(_react2.default.Component); +; From 4de056514a99835cf0594685d19ad356cad72521 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 15:53:06 -0300 Subject: [PATCH 2/7] feat: paginator support bootstrap 4 inspirate en this format --- src/reactable/paginator.jsx | 238 +++++++++++++----------------------- 1 file changed, 87 insertions(+), 151 deletions(-) diff --git a/src/reactable/paginator.jsx b/src/reactable/paginator.jsx index c522eaeb..f18fe213 100644 --- a/src/reactable/paginator.jsx +++ b/src/reactable/paginator.jsx @@ -1,172 +1,108 @@ -'use strict'; - -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 _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -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; } - -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; } +import React from 'react'; function pageHref(num) { - return '#page-' + (num + 1); + return `#page-${num + 1}` } -var Paginator = exports.Paginator = function (_React$Component) { - _inherits(Paginator, _React$Component); +export class Paginator extends React.Component { + handlePrevious(e) { + e.preventDefault() + this.props.onPageChange(this.props.currentPage - 1) + } - function Paginator() { - _classCallCheck(this, Paginator); + handleNext(e) { + e.preventDefault() + this.props.onPageChange(this.props.currentPage + 1); + } - return _possibleConstructorReturn(this, (Paginator.__proto__ || Object.getPrototypeOf(Paginator)).apply(this, arguments)); + handlePageButton(page, e) { + e.preventDefault(); + this.props.onPageChange(page); } - _createClass(Paginator, [{ - key: 'handlePrevious', - value: function handlePrevious(e) { - e.preventDefault(); - this.props.onPageChange(this.props.currentPage - 1); - } - }, { - key: 'handleNext', - value: function handleNext(e) { - e.preventDefault(); - this.props.onPageChange(this.props.currentPage + 1); - } - }, { - key: 'handlePageButton', - value: function handlePageButton(page, e) { - e.preventDefault(); - this.props.onPageChange(page); - } - }, { - key: 'renderPrevious', - value: function renderPrevious() { - if (this.props.currentPage > 0) { - 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' - ) - ); - } - } - }, { - key: 'renderNext', - value: function renderNext() { - if (this.props.currentPage < this.props.numPages - 1) { - 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' - ) - ); - } + renderPrevious() { + if(this.props.currentPage > 0) { + return
  • + {this.props.previousPageLabel || 'Anterior'} +
    • } - }, { - key: 'renderPageButton', - value: function renderPageButton(className, pageNum) { - 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 - ) - ); + } + + renderNext() { + if(this.props.currentPage < this.props.numPages - 1) { + return
  • + {this.props.nextPageLabel || 'Siguiente'} +
    • } - }, { - key: 'render', - value: function render() { - if (typeof this.props.colSpan === 'undefined') { - throw new TypeError('Must pass a colSpan argument to Paginator'); - } + } - if (typeof this.props.numPages === 'undefined') { - throw new TypeError('Must pass a non-zero numPages argument to Paginator'); - } + renderPageButton(className, pageNum) { + let _className = className + " page-link"; + return
  • + {pageNum + 1} +
    • + } - if (typeof this.props.currentPage === 'undefined') { - throw new TypeError('Must pass a currentPage argument to Paginator'); - } + render() { + if (typeof this.props.colSpan === 'undefined') { + throw new TypeError('Must pass a colSpan argument to Paginator'); + } - var pageButtons = []; - var pageButtonLimit = this.props.pageButtonLimit; - var currentPage = this.props.currentPage; - var numPages = this.props.numPages; - var lowerHalf = Math.round(pageButtonLimit / 2); - var upperHalf = pageButtonLimit - lowerHalf; + if (typeof this.props.numPages === 'undefined') { + throw new TypeError('Must pass a non-zero numPages argument to Paginator'); + } - for (var i = 0; i < this.props.numPages; i++) { - var showPageButton = false; - var pageNum = i; - var className = "reactable-page-button"; - if (currentPage === i) { - className += " reactable-current-page"; - } - pageButtons.push(this.renderPageButton(className, pageNum)); - } + if (typeof this.props.currentPage === 'undefined') { + throw new TypeError('Must pass a currentPage argument to Paginator'); + } - if (currentPage - pageButtonLimit + lowerHalf > 0) { - if (currentPage > numPages - lowerHalf) { - pageButtons.splice(0, numPages - pageButtonLimit); - } else { - pageButtons.splice(0, currentPage - pageButtonLimit + lowerHalf); - } + let pageButtons = []; + let pageButtonLimit = this.props.pageButtonLimit; + let currentPage = this.props.currentPage; + let numPages = this.props.numPages; + let lowerHalf = Math.round( pageButtonLimit / 2 ); + let upperHalf = (pageButtonLimit - lowerHalf); + + for (let i = 0; i < this.props.numPages; i++) { + let showPageButton = false; + let pageNum = i; + let className = "reactable-page-button"; + if (currentPage === i) { + className += " reactable-current-page"; } + pageButtons.push( this.renderPageButton(className, pageNum)); + } - if (numPages - currentPage > upperHalf) { - pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit); + if(currentPage - pageButtonLimit + lowerHalf > 0) { + if(currentPage > numPages - lowerHalf) { + pageButtons.splice(0, numPages - pageButtonLimit) + } else { + pageButtons.splice(0, currentPage - pageButtonLimit + lowerHalf); } - - return _react2.default.createElement( - 'tbody', - { className: 'reactable-pagination' }, - _react2.default.createElement( - 'tr', - null, - _react2.default.createElement( - 'td', - { colSpan: this.props.colSpan }, - _react2.default.createElement( - 'ul', - { className: 'pagination' }, - this.renderPrevious(), - pageButtons, - this.renderNext() - ) - ) - ) - ); } - }]); - return Paginator; -}(_react2.default.Component); + if((numPages - currentPage) > upperHalf) { + pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit); + } -; + return ( + + + + + + + + ); + } +}; From a80954d5e829e4244247c75fd7ad027bf45ee2e8 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 15:54:13 -0300 Subject: [PATCH 3/7] feat: result compile paginator suppor bootstrap 4 --- lib/reactable/paginator.js | 91 ++++++++++++++++++++++---------------- 1 file changed, 53 insertions(+), 38 deletions(-) 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; ; From 70e336967885278b8a999e85e282fa8ee4a0cef1 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 17:46:59 -0300 Subject: [PATCH 4/7] feat: add support Font Awesome | sort & filter --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/README.md b/README.md index b1fe6efe..680767c3 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,47 @@ 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; +} +``` From afc831eafd2e0701e30379e93dee9a85d2124f65 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 17:51:06 -0300 Subject: [PATCH 5/7] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 680767c3..0afb260c 100644 --- a/README.md +++ b/README.md @@ -527,7 +527,6 @@ 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) @@ -542,7 +541,7 @@ This handler will be passed a number representing the current page, zero based. content: "\f0dc"; position: absolute; top: 17px; -  right: 15px; + right: 15px; color: #2196F3; } .reactable-header-sort-asc::before{ From 805dd110a1a2b7142fe842ba9b09c05ec44f54ad Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 17:56:58 -0300 Subject: [PATCH 6/7] Update README.md --- README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0afb260c..b54747a5 100644 --- a/README.md +++ b/README.md @@ -529,13 +529,13 @@ This handler will be passed a number representing the current page, zero based. ## Custom CSS -#### Add sort icon (required Font Awesome 4) +### 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"; @@ -554,9 +554,12 @@ This handler will be passed a number representing the current page, zero based. } ``` -#### Add search icon in filterer input (required Font Awesome 4) +### Add search icon in filterer input (required Font Awesome 4) + ```css -.reactable-filterer td{position:relative;} +.reactable-filterer td{ + position:relative; +} .reactable-filterer td::before{ font: normal normal normal 14px/1 FontAwesome; content: "\f002"; From ebf8dcf7d841b6164be5f696656085be378b8d99 Mon Sep 17 00:00:00 2001 From: Claudio Rojas Date: Mon, 13 Mar 2017 17:57:06 -0300 Subject: [PATCH 7/7] Update README.md