Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-inclusive-sortable-table
Advanced tools
react-inclusive-sortable-table - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| var Arrow = function Arrow(_ref) { | ||
| var sortDir = _ref.sortDir, | ||
| isCurrent = _ref.isCurrent; | ||
| var ascending = sortDir === 'ascending'; | ||
| return React.createElement( | ||
| 'svg', | ||
| { viewBox: '0 0 100 200', width: '100', height: '200' }, | ||
| !(!ascending && isCurrent) && React.createElement('polyline', { points: '20 50, 50 20, 80 50' }), | ||
| React.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }), | ||
| !(ascending && isCurrent) && React.createElement('polyline', { points: '20 150, 50 180, 80 150' }) | ||
| ); | ||
| }; | ||
| function styleInject(css, ref) { | ||
@@ -45,6 +31,10 @@ if ( ref === void 0 ) ref = {}; | ||
| var css = "div:not([tabindex]):focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n overflow-x: hidden;\n}\n\n.styles_tableContainer__fjLYp {\n overflow-x: auto;\n}\n\n@media (max-width: 400px) {\n .styles_tableContainer__fjLYp {\n display: none;\n }\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth,\ntd {\n text-align: left;\n padding: 0.75rem;\n}\n\nth {\n white-space: nowrap;\n}\n\ncaption {\n margin-bottom: 0.5rem;\n text-align: left;\n}\n\n.styles_listsContainer__3xrp- {\n display: block;\n}\n\n@media (min-width: 400px) {\n .styles_listsContainer__3xrp- {\n display: none;\n }\n}\n\ndl {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\ndl > * {\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n margin: 0;\n margin-bottom: 0.5rem;\n}\n\ndt {\n padding-right: 0.5rem;\n}\n\ndt {\n font-weight: bold;\n}\n\nth button {\n background: #fff;\n color: #000;\n border: 0;\n padding: 0.125rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: bold;\n vertical-align: middle;\n margin-left: 0.333rem;\n}\n\n\nth svg {\n stroke: currentColor;\n stroke-width: 20;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n width: 0.5rem;\n height: 1.5em;\n}\n\n.styles_visuallyHidden__12unE {\n position: absolute !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n padding: 0 !important;\n border: 0 !important;\n height: 1px !important;\n width: 1px !important;\n overflow: hidden !important;\n}\n"; | ||
| var styles = { "tableContainer": "styles_tableContainer__fjLYp", "listsContainer": "styles_listsContainer__3xrp-", "visuallyHidden": "styles_visuallyHidden__12unE" }; | ||
| var css = "div:not([tabindex]):focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n overflow-x: hidden;\n}\n\n.styles_tableContainer__fjLYp {\n overflow-x: auto;\n}\n\n@media (max-width: 400px) {\n .styles_tableContainer__fjLYp {\n display: none;\n }\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth,\ntd {\n text-align: left;\n padding: 0.75rem;\n}\n\nth {\n white-space: nowrap;\n}\n\ncaption {\n margin-bottom: 0.5rem;\n text-align: left;\n}\n\n.styles_listsContainer__3xrp- {\n display: block;\n}\n\n@media (min-width: 400px) {\n .styles_listsContainer__3xrp- {\n display: none;\n }\n}\n\n\n\nth button {\n background: #fff;\n color: #000;\n border: 0;\n padding: 0.125rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: bold;\n vertical-align: middle;\n margin-left: 0.333rem;\n}\n\n\nth svg {\n stroke: currentColor;\n stroke-width: 20;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n width: 0.5rem;\n height: 1.5em;\n}\n\n\n"; | ||
| var styles = { "tableContainer": "styles_tableContainer__fjLYp", "listsContainer": "styles_listsContainer__3xrp-" }; | ||
| styleInject(css); | ||
| var css$1 = "dl {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\ndl > * {\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n margin: 0;\n margin-bottom: 0.5rem;\n}\n\ndt {\n padding-right: 0.5rem;\n}\n\ndt {\n font-weight: bold;\n}\n"; | ||
| var styles$1 = {}; | ||
| styleInject(css$1); | ||
| var DefinitionList = function DefinitionList(_ref) { | ||
@@ -56,3 +46,3 @@ var caption = _ref.caption, | ||
| 'div', | ||
| { className: styles.listsContainer }, | ||
| { className: styles$1.listsContainer }, | ||
| React.createElement( | ||
@@ -103,2 +93,71 @@ 'h2', | ||
| var Arrow = function Arrow(_ref) { | ||
| var sortDir = _ref.sortDir, | ||
| isCurrent = _ref.isCurrent; | ||
| var ascending = sortDir === 'ascending'; | ||
| return React.createElement( | ||
| 'svg', | ||
| { viewBox: '0 0 100 200', width: '100', height: '200' }, | ||
| !(!ascending && isCurrent) && React.createElement('polyline', { points: '20 50, 50 20, 80 50' }), | ||
| React.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }), | ||
| !(ascending && isCurrent) && React.createElement('polyline', { points: '20 150, 50 180, 80 150' }) | ||
| ); | ||
| }; | ||
| Arrow.propTypes = { | ||
| sortDir: PropTypes.string, | ||
| isCurrent: PropTypes.bool | ||
| }; | ||
| var css$2 = ".styles_visuallyHidden__24w3L {\n position: absolute !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n padding: 0 !important;\n border: 0 !important;\n height: 1px !important;\n width: 1px !important;\n overflow: hidden !important;\n}\n"; | ||
| var styles$2 = { "visuallyHidden": "styles_visuallyHidden__24w3L" }; | ||
| styleInject(css$2); | ||
| var th = function th(_ref) { | ||
| var sortedBy = _ref.sortedBy, | ||
| i = _ref.i, | ||
| header = _ref.header, | ||
| sortBy = _ref.sortBy, | ||
| sortDir = _ref.sortDir, | ||
| sortable = _ref.sortable; | ||
| var sortableColumn = Array.isArray(sortable) && sortable.includes(i) || sortable === true; | ||
| return React.createElement( | ||
| 'th', | ||
| { | ||
| role: 'columnheader', | ||
| scope: 'col', | ||
| 'aria-sort': sortedBy === i ? sortDir : 'none' | ||
| }, | ||
| header, | ||
| sortableColumn && React.createElement( | ||
| 'button', | ||
| { onClick: function onClick() { | ||
| return sortBy(i); | ||
| } }, | ||
| React.createElement(Arrow, { sortDir: sortDir, isCurrent: sortedBy === i }), | ||
| React.createElement( | ||
| 'span', | ||
| { className: styles$2.visuallyHidden }, | ||
| 'sort by ', | ||
| header, | ||
| ' in', | ||
| sortDir !== 'ascending' ? 'ascending' : 'descending', | ||
| 'order' | ||
| ) | ||
| ) | ||
| ); | ||
| }; | ||
| th.propTypes = { | ||
| header: PropTypes.string.isRequired, | ||
| i: PropTypes.number.isRequired, | ||
| sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]), | ||
| sortBy: PropTypes.func.isRequired, | ||
| sortDir: PropTypes.string, | ||
| sortedBy: PropTypes.number | ||
| }; | ||
| var classCallCheck = function (instance, Constructor) { | ||
@@ -258,31 +317,11 @@ if (!(instance instanceof Constructor)) { | ||
| headers.map(function (header, i) { | ||
| return React.createElement( | ||
| 'th', | ||
| { | ||
| role: 'columnheader', | ||
| scope: 'col', | ||
| key: i, | ||
| 'aria-sort': _this2.state.sortedBy === i ? _this2.state.sortDir : 'none' | ||
| }, | ||
| header, | ||
| sortable && React.createElement( | ||
| 'button', | ||
| { onClick: function onClick() { | ||
| return _this2.sortBy(i); | ||
| } }, | ||
| React.createElement(Arrow, { | ||
| sortDir: _this2.state.sortDir, | ||
| isCurrent: _this2.state.sortedBy === i | ||
| }), | ||
| React.createElement( | ||
| 'span', | ||
| { className: styles.visuallyHidden }, | ||
| 'sort by ', | ||
| header, | ||
| ' in', | ||
| _this2.state.sortDir !== 'ascending' ? 'ascending' : 'descending', | ||
| 'order' | ||
| ) | ||
| ) | ||
| ); | ||
| return React.createElement(th, { | ||
| header: header, | ||
| i: i, | ||
| key: i, | ||
| sortable: sortable, | ||
| sortBy: _this2.sortBy, | ||
| sortDir: _this2.state.sortDir, | ||
| sortedBy: _this2.state.sortedBy | ||
| }); | ||
| }) | ||
@@ -323,3 +362,3 @@ ), | ||
| rows: PropTypes.array.isRequired, | ||
| sortable: PropTypes.bool | ||
| sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]) | ||
| }; | ||
@@ -326,0 +365,0 @@ |
@@ -9,16 +9,2 @@ 'use strict'; | ||
| var Arrow = function Arrow(_ref) { | ||
| var sortDir = _ref.sortDir, | ||
| isCurrent = _ref.isCurrent; | ||
| var ascending = sortDir === 'ascending'; | ||
| return React__default.createElement( | ||
| 'svg', | ||
| { viewBox: '0 0 100 200', width: '100', height: '200' }, | ||
| !(!ascending && isCurrent) && React__default.createElement('polyline', { points: '20 50, 50 20, 80 50' }), | ||
| React__default.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }), | ||
| !(ascending && isCurrent) && React__default.createElement('polyline', { points: '20 150, 50 180, 80 150' }) | ||
| ); | ||
| }; | ||
| function styleInject(css, ref) { | ||
@@ -51,6 +37,10 @@ if ( ref === void 0 ) ref = {}; | ||
| var css = "div:not([tabindex]):focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n overflow-x: hidden;\n}\n\n.styles_tableContainer__fjLYp {\n overflow-x: auto;\n}\n\n@media (max-width: 400px) {\n .styles_tableContainer__fjLYp {\n display: none;\n }\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth,\ntd {\n text-align: left;\n padding: 0.75rem;\n}\n\nth {\n white-space: nowrap;\n}\n\ncaption {\n margin-bottom: 0.5rem;\n text-align: left;\n}\n\n.styles_listsContainer__3xrp- {\n display: block;\n}\n\n@media (min-width: 400px) {\n .styles_listsContainer__3xrp- {\n display: none;\n }\n}\n\ndl {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\ndl > * {\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n margin: 0;\n margin-bottom: 0.5rem;\n}\n\ndt {\n padding-right: 0.5rem;\n}\n\ndt {\n font-weight: bold;\n}\n\nth button {\n background: #fff;\n color: #000;\n border: 0;\n padding: 0.125rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: bold;\n vertical-align: middle;\n margin-left: 0.333rem;\n}\n\n\nth svg {\n stroke: currentColor;\n stroke-width: 20;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n width: 0.5rem;\n height: 1.5em;\n}\n\n.styles_visuallyHidden__12unE {\n position: absolute !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n padding: 0 !important;\n border: 0 !important;\n height: 1px !important;\n width: 1px !important;\n overflow: hidden !important;\n}\n"; | ||
| var styles = { "tableContainer": "styles_tableContainer__fjLYp", "listsContainer": "styles_listsContainer__3xrp-", "visuallyHidden": "styles_visuallyHidden__12unE" }; | ||
| var css = "div:not([tabindex]):focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n overflow-x: hidden;\n}\n\n.styles_tableContainer__fjLYp {\n overflow-x: auto;\n}\n\n@media (max-width: 400px) {\n .styles_tableContainer__fjLYp {\n display: none;\n }\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth,\ntd {\n text-align: left;\n padding: 0.75rem;\n}\n\nth {\n white-space: nowrap;\n}\n\ncaption {\n margin-bottom: 0.5rem;\n text-align: left;\n}\n\n.styles_listsContainer__3xrp- {\n display: block;\n}\n\n@media (min-width: 400px) {\n .styles_listsContainer__3xrp- {\n display: none;\n }\n}\n\n\n\nth button {\n background: #fff;\n color: #000;\n border: 0;\n padding: 0.125rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: bold;\n vertical-align: middle;\n margin-left: 0.333rem;\n}\n\n\nth svg {\n stroke: currentColor;\n stroke-width: 20;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n width: 0.5rem;\n height: 1.5em;\n}\n\n\n"; | ||
| var styles = { "tableContainer": "styles_tableContainer__fjLYp", "listsContainer": "styles_listsContainer__3xrp-" }; | ||
| styleInject(css); | ||
| var css$1 = "dl {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\ndl > * {\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n margin: 0;\n margin-bottom: 0.5rem;\n}\n\ndt {\n padding-right: 0.5rem;\n}\n\ndt {\n font-weight: bold;\n}\n"; | ||
| var styles$1 = {}; | ||
| styleInject(css$1); | ||
| var DefinitionList = function DefinitionList(_ref) { | ||
@@ -62,3 +52,3 @@ var caption = _ref.caption, | ||
| 'div', | ||
| { className: styles.listsContainer }, | ||
| { className: styles$1.listsContainer }, | ||
| React__default.createElement( | ||
@@ -109,2 +99,71 @@ 'h2', | ||
| var Arrow = function Arrow(_ref) { | ||
| var sortDir = _ref.sortDir, | ||
| isCurrent = _ref.isCurrent; | ||
| var ascending = sortDir === 'ascending'; | ||
| return React__default.createElement( | ||
| 'svg', | ||
| { viewBox: '0 0 100 200', width: '100', height: '200' }, | ||
| !(!ascending && isCurrent) && React__default.createElement('polyline', { points: '20 50, 50 20, 80 50' }), | ||
| React__default.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }), | ||
| !(ascending && isCurrent) && React__default.createElement('polyline', { points: '20 150, 50 180, 80 150' }) | ||
| ); | ||
| }; | ||
| Arrow.propTypes = { | ||
| sortDir: PropTypes.string, | ||
| isCurrent: PropTypes.bool | ||
| }; | ||
| var css$2 = ".styles_visuallyHidden__24w3L {\n position: absolute !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n padding: 0 !important;\n border: 0 !important;\n height: 1px !important;\n width: 1px !important;\n overflow: hidden !important;\n}\n"; | ||
| var styles$2 = { "visuallyHidden": "styles_visuallyHidden__24w3L" }; | ||
| styleInject(css$2); | ||
| var th = function th(_ref) { | ||
| var sortedBy = _ref.sortedBy, | ||
| i = _ref.i, | ||
| header = _ref.header, | ||
| sortBy = _ref.sortBy, | ||
| sortDir = _ref.sortDir, | ||
| sortable = _ref.sortable; | ||
| var sortableColumn = Array.isArray(sortable) && sortable.includes(i) || sortable === true; | ||
| return React__default.createElement( | ||
| 'th', | ||
| { | ||
| role: 'columnheader', | ||
| scope: 'col', | ||
| 'aria-sort': sortedBy === i ? sortDir : 'none' | ||
| }, | ||
| header, | ||
| sortableColumn && React__default.createElement( | ||
| 'button', | ||
| { onClick: function onClick() { | ||
| return sortBy(i); | ||
| } }, | ||
| React__default.createElement(Arrow, { sortDir: sortDir, isCurrent: sortedBy === i }), | ||
| React__default.createElement( | ||
| 'span', | ||
| { className: styles$2.visuallyHidden }, | ||
| 'sort by ', | ||
| header, | ||
| ' in', | ||
| sortDir !== 'ascending' ? 'ascending' : 'descending', | ||
| 'order' | ||
| ) | ||
| ) | ||
| ); | ||
| }; | ||
| th.propTypes = { | ||
| header: PropTypes.string.isRequired, | ||
| i: PropTypes.number.isRequired, | ||
| sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]), | ||
| sortBy: PropTypes.func.isRequired, | ||
| sortDir: PropTypes.string, | ||
| sortedBy: PropTypes.number | ||
| }; | ||
| var classCallCheck = function (instance, Constructor) { | ||
@@ -264,31 +323,11 @@ if (!(instance instanceof Constructor)) { | ||
| headers.map(function (header, i) { | ||
| return React__default.createElement( | ||
| 'th', | ||
| { | ||
| role: 'columnheader', | ||
| scope: 'col', | ||
| key: i, | ||
| 'aria-sort': _this2.state.sortedBy === i ? _this2.state.sortDir : 'none' | ||
| }, | ||
| header, | ||
| sortable && React__default.createElement( | ||
| 'button', | ||
| { onClick: function onClick() { | ||
| return _this2.sortBy(i); | ||
| } }, | ||
| React__default.createElement(Arrow, { | ||
| sortDir: _this2.state.sortDir, | ||
| isCurrent: _this2.state.sortedBy === i | ||
| }), | ||
| React__default.createElement( | ||
| 'span', | ||
| { className: styles.visuallyHidden }, | ||
| 'sort by ', | ||
| header, | ||
| ' in', | ||
| _this2.state.sortDir !== 'ascending' ? 'ascending' : 'descending', | ||
| 'order' | ||
| ) | ||
| ) | ||
| ); | ||
| return React__default.createElement(th, { | ||
| header: header, | ||
| i: i, | ||
| key: i, | ||
| sortable: sortable, | ||
| sortBy: _this2.sortBy, | ||
| sortDir: _this2.state.sortDir, | ||
| sortedBy: _this2.state.sortedBy | ||
| }); | ||
| }) | ||
@@ -329,3 +368,3 @@ ), | ||
| rows: PropTypes.array.isRequired, | ||
| sortable: PropTypes.bool | ||
| sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]) | ||
| }; | ||
@@ -332,0 +371,0 @@ |
| { | ||
| "name": "react-inclusive-sortable-table", | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "description": "An accessible, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.", | ||
@@ -5,0 +5,0 @@ "author": "benjamingrobertson", |
@@ -68,4 +68,91 @@ # react-inclusive-sortable-table | ||
| ## Props | ||
| ### caption | ||
| The title of your table. Will be wrapped in a `<caption>` for the table display and an `<h2>` for the definition list display. | ||
| ### className | ||
| An optional class name to use for custom styling. Will be added to the component wrapper. | ||
| ### headers | ||
| An array of table headers. Will be wrapped in `<th>` for the table display and `<dt>` for the definition list display. | ||
| ### rowHeaders | ||
| A boolean, determines whether or not to wrap the first column in each row in a `<th>` for the table display. | ||
| It makes the font-weight bold. | ||
| ### rows | ||
| An array of arrays for each row, containing the data for the table. | ||
| For example: | ||
| ```js | ||
| [ | ||
| [ | ||
| 'CSS Tricks', | ||
| 'Chris Coyier', | ||
| '2007', | ||
| <a href="http://css-tricks.com">http://css-tricks.com</a> | ||
| ], | ||
| [ | ||
| 'Smashing Magazine', | ||
| 'Vitaly Friedman and Sven Lennartz', | ||
| '2006', | ||
| <a href="https://www.smashingmagazine.com/"> | ||
| https://www.smashingmagazine.com/ | ||
| </a> | ||
| ], | ||
| [ | ||
| 'A List Apart', | ||
| 'Jeffrey Zeldman', | ||
| '1998', | ||
| <a href="https://alistapart.com/">https://alistapart.com/</a> | ||
| ], | ||
| [ | ||
| 'codrops', | ||
| 'Manoela Ilic and Pedro Botelho', | ||
| '2009', | ||
| <a href="https://tympanus.net/codrops/"> | ||
| https://tympanus.net/codrops/ | ||
| </a> | ||
| ] | ||
| ]; | ||
| ``` | ||
| ### sortable | ||
| Can be either a boolean or an array. By default, no columns will be sortable. | ||
| #### boolean | ||
| If it is passed without arguments (ie, `<Table sortable />`), all columns will be sortable. | ||
| #### array | ||
| To control what columns to sort, pass in an array containing the index of the columns you want to sort. | ||
| For example, to sort the 2nd and 4th columns: | ||
| ```jsx | ||
| <Table | ||
| caption="Front end websites" | ||
| headers={headers} | ||
| rows={rows} | ||
| sortable={[1, 3]} | ||
| /> | ||
| ``` | ||
| ## Todos | ||
| - Customizable sorting button | ||
| - Customizable sorting methods | ||
| ## License | ||
| MIT © [benjamingrobertson](https://github.com/benjamingrobertson) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.97%
53740
- Lines of code
- increased by9.95%
663
- Number of lines in readme file
- increased by122.54%
158
- Number of low supply chain risk alerts
- decreased by-66.67%
1
No dependency changes