react-table-searchable/dist/SearchTable.js

React Table that is searchable and sortable

var SearchTable =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	exports.DefaultHeader = exports.DefaultRow = exports.DefaultCell = exports.default = undefined;

	var _SearchList = __webpack_require__(5);

	var _SearchList2 = _interopRequireDefault(_SearchList);

	var _DefaultCell2 = __webpack_require__(2);

	var _DefaultCell3 = _interopRequireDefault(_DefaultCell2);

	var _DefaultRow2 = __webpack_require__(4);

	var _DefaultRow3 = _interopRequireDefault(_DefaultRow2);

	var _DefaultHeader2 = __webpack_require__(3);

	var _DefaultHeader3 = _interopRequireDefault(_DefaultHeader2);

	function _interopRequireDefault(obj) {
	  return obj && obj.__esModule ? obj : { default: obj };
	}

	exports.default = _SearchList2.default;
	exports.DefaultCell = _DefaultCell3.default;
	exports.DefaultRow = _DefaultRow3.default;
	exports.DefaultHeader = _DefaultHeader3.default;

/***/ },
/* 1 */
/***/ function(module, exports) {

	module.exports = React;

/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	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 = __webpack_require__(1);

	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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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;
	}

	var DefaultCell = function (_React$Component) {
	    _inherits(DefaultCell, _React$Component);

	    function DefaultCell() {
	        _classCallCheck(this, DefaultCell);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(DefaultCell).apply(this, arguments));
	    }

	    _createClass(DefaultCell, [{
	        key: 'render',
	        value: function render() {
	            return _react2.default.createElement('td', null, this.props.val);
	        }
	    }]);

	    return DefaultCell;
	}(_react2.default.Component);

	DefaultCell.propTypes = {
	    val: _react2.default.PropTypes.any.isRequired
	};

	exports.default = DefaultCell;

/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";

	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	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 = __webpack_require__(1);

	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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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;
	}

	var DefaultHeader = function (_React$Component) {
	    _inherits(DefaultHeader, _React$Component);

	    function DefaultHeader() {
	        _classCallCheck(this, DefaultHeader);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(DefaultHeader).apply(this, arguments));
	    }

	    _createClass(DefaultHeader, [{
	        key: "render",
	        value: function render() {
	            return _react2.default.createElement("th", { onClick: this.props.onClick, className: this.props.active ? "active" : "" }, this.props.children);
	        }
	    }]);

	    return DefaultHeader;
	}(_react2.default.Component);

	DefaultHeader.defaultProps = {
	    active: false,
	    onClick: function onClick() {}
	};

	exports.default = DefaultHeader;

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	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 = __webpack_require__(1);

	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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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;
	}

	var DefaultRow = function (_React$Component) {
	    _inherits(DefaultRow, _React$Component);

	    function DefaultRow() {
	        _classCallCheck(this, DefaultRow);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(DefaultRow).apply(this, arguments));
	    }

	    _createClass(DefaultRow, [{
	        key: 'render',
	        value: function render() {
	            return _react2.default.createElement('tr', null, this.props.children);
	        }
	    }]);

	    return DefaultRow;
	}(_react2.default.Component);

	DefaultRow.propsTypes = {
	    children: _react2.default.PropTypes.node.isRequired
	};

	exports.default = DefaultRow;

/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	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 = __webpack_require__(1);

	var _react2 = _interopRequireDefault(_react);

	var _DefaultHeader = __webpack_require__(3);

	var _DefaultHeader2 = _interopRequireDefault(_DefaultHeader);

	var _DefaultRow = __webpack_require__(4);

	var _DefaultRow2 = _interopRequireDefault(_DefaultRow);

	var _DefaultCell = __webpack_require__(2);

	var _DefaultCell2 = _interopRequireDefault(_DefaultCell);

	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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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;
	}

	Array.prototype.doReverse = function (boo) {
	    return boo === 1 ? this.reverse() : this;
	};
	Array.prototype.clone = function () {
	    return this.slice(0);
	};

	var SearchList = function (_React$Component) {
	    _inherits(SearchList, _React$Component);

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

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SearchList).call(this, props));

	        _this.getColumns = function () {
	            if (_this.props.data.length > 0) {
	                var columns = Object.keys(_this.props.data[0]);
	            } else {
	                var columns = [];
	            }
	            _this.setState({
	                columns: columns
	            });
	        };

	        _this.sort = function (column) {
	            var sort = column;
	            var dir = -1;

	            if (_this.state.sortDir === -1 && _this.state.sort === column) {
	                //Already sorting by the column (1st click)
	                dir = 1;
	            } else if (_this.state.sort === column) {
	                sort = null;
	                dir = 0;
	            }

	            _this.setState({
	                sort: sort,
	                sortDir: dir
	            });
	        };

	        _this.mapHeaderColumns = function (column) {
	            return _react2.default.createElement(_this.props.headerCell, { onClick: _this.sort.bind(_this, column), key: column, active: _this.state.sort === column, dir: _this.state.sortDir }, column);
	        };

	        _this.genKey = function (i) {
	            return String(_this.state.sort) + '-' + String(i) + '-' + String(_this.state.sortDir);
	        };

	        _this.mapRows = function (row, i) {
	            var cells = [];

	            for (var key in row) {
	                cells.push(_react2.default.createElement(_this.props.cell, { key: key, val: row[key] }));
	            }

	            return _react2.default.createElement(_this.props.row, { key: _this.genKey(i) }, cells);
	        };

	        _this.doSort = function (a, b) {
	            if (_this.state.sort === null) {
	                return 0;
	            }
	            if (_this.props.sort) {
	                return _this.props.sort(a, b);
	            }
	            a = a[_this.state.sort];
	            b = b[_this.state.sort];

	            var ax = [],
	                bx = [];

	            a.replace(/(\d+)|(\D+)/g, function (_, $1, $2) {
	                ax.push([$1 || Infinity, $2 || ""]);
	            });
	            b.replace(/(\d+)|(\D+)/g, function (_, $1, $2) {
	                bx.push([$1 || Infinity, $2 || ""]);
	            });

	            while (ax.length && bx.length) {
	                var an = ax.shift();
	                var bn = bx.shift();
	                var nn = an[0] - bn[0] || an[1].localeCompare(bn[1]);
	                if (nn) return nn;
	            }

	            return ax.length - bx.length;
	        };

	        _this.state = {
	            columns: [],
	            sort: null,
	            sortDir: 0
	        };

	        return _this;
	    }

	    _createClass(SearchList, [{
	        key: 'componentWillMount',
	        value: function componentWillMount() {
	            this.getColumns();
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            console.log(this.state);
	            return _react2.default.createElement('table', null, _react2.default.createElement('thead', null, _react2.default.createElement('tr', null, this.state.columns.map(this.mapHeaderColumns))), _react2.default.createElement('tbody', null, this.props.data.clone().sort(this.doSort).doReverse(this.state.sortDir).map(this.mapRows)));
	        }
	    }]);

	    return SearchList;
	}(_react2.default.Component);

	SearchList.propTypes = {
	    sort: _react2.default.PropTypes.func
	};

	SearchList.defaultProps = {
	    headerCell: _DefaultHeader2.default,
	    cell: _DefaultCell2.default,
	    row: _DefaultRow2.default
	};

	exports.default = SearchList;

/***/ }
/******/ ]);