react-inclusive-sortable-table - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  }
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
+
+var debounce_1 = debounce;
+
 function styleInject(css, ref) {
@@ -31,8 +153,7 @@ 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";
-var styles = { "tableContainer": "styles_tableContainer__fjLYp" };
+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_tableScroll__11GBA {\n  overflow-x: auto;\n}\n\n/**\n * Hide the table display on viewports less than 400px wide.\n */\n@media (max-width: 399px) {\n  .styles_tableContainer__fjLYp {\n    display: none;\n  }\n}\n\n/**\n * Display the definition list on viewports less than 400px wide.\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\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";
+var styles = { "tableScroll": "styles_tableScroll__11GBA", "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\n.styles_listsContainer__1e9_Q {\n  display: block;\n}\n\n@media (min-width: 400px) {\n  .styles_listsContainer__1e9_Q {\n    display: none;\n  }\n}\n";
-var styles$1 = { "listsContainer": "styles_listsContainer__1e9_Q" };
+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";
 styleInject(css$1);
@@ -42,2 +163,3 @@
   var caption = _ref.caption,
+      className = _ref.className,
       rows = _ref.rows,
@@ -47,3 +169,3 @@ headers = _ref.headers;
     'div',
-    { className: styles$1.listsContainer },
+    { className: className },
     React.createElement(
@@ -90,2 +212,3 @@ 'h2',
   caption: PropTypes.string.isRequired,
+  className: PropTypes.string,
   rows: PropTypes.array.isRequired,
@@ -119,2 +242,17 @@ headers: PropTypes.array.isRequired
 
+var defineProperty = function (obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+};
+
 var inherits = function (subClass, superClass) {
@@ -248,10 +386,105 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-var Table = function (_Component) {
-  inherits(Table, _Component);
+var Table = function Table(_ref) {
+  var caption = _ref.caption,
+      customArrow = _ref.customArrow,
+      className = _ref.className,
+      headers = _ref.headers,
+      rowHeaders = _ref.rowHeaders,
+      rows = _ref.rows,
+      sortable = _ref.sortable,
+      sortBy = _ref.sortBy,
+      sortDir = _ref.sortDir,
+      sortedBy = _ref.sortedBy,
+      tabindex = _ref.tabindex,
+      captionID = _ref.captionID;
 
-  function Table(props) {
-    classCallCheck(this, Table);
+  return React.createElement(
+    'div',
+    {
+      className: className,
+      tabIndex: tabindex,
+      'aria-labelledby': captionID,
+      role: 'group'
+    },
+    React.createElement(
+      'table',
+      null,
+      React.createElement(
+        'caption',
+        { id: captionID },
+        caption,
+        tabindex === '0' && React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'small',
+            null,
+            '(scroll to see more)'
+          )
+        )
+      ),
+      React.createElement(
+        'tbody',
+        null,
+        React.createElement(
+          'tr',
+          null,
+          headers.map(function (header, i) {
+            return React.createElement(th, {
+              header: header,
+              i: i,
+              key: i,
+              sortable: sortable,
+              sortBy: sortBy,
+              sortDir: sortDir,
+              sortedBy: sortedBy,
+              customArrow: customArrow
+            });
+          })
+        ),
+        rows.map(function (row, i) {
+          return React.createElement(
+            'tr',
+            { key: i },
+            row.map(function (cell, i) {
+              return rowHeaders && i < 1 ? React.createElement(
+                'th',
+                { scope: 'row', key: i },
+                cell
+              ) : React.createElement(
+                'td',
+                { key: i },
+                cell
+              );
+            })
+          );
+        })
+      )
+    )
+  );
+};
 
-    var _this = possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).call(this, props));
+Table.propTypes = {
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  customArrow: PropTypes.func,
+  headers: PropTypes.array.isRequired,
+  rowHeaders: PropTypes.bool,
+  rows: PropTypes.array.isRequired,
+  sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
+  sortBy: PropTypes.func.isRequired,
+  sortDir: PropTypes.string.isRequired,
+  sortedBy: PropTypes.number,
+  tabindex: PropTypes.number,
+  captionID: PropTypes.string.isRequired
+};
 
+var InclusiveTable = function (_Component) {
+  inherits(InclusiveTable, _Component);
+
+  function InclusiveTable(props) {
+    classCallCheck(this, InclusiveTable);
+
+    var _this = possibleConstructorReturn(this, (InclusiveTable.__proto__ || Object.getPrototypeOf(InclusiveTable)).call(this, props));
+
     _this.state = {
@@ -261,3 +494,4 @@ tabindex: null,
       sortedBy: null,
-      sortDir: 'none'
+      sortDir: 'none',
+      windowWidth: 0
     };
@@ -267,2 +501,3 @@ _this.container = React.createRef();
     _this.sort = _this.sort.bind(_this);
+    _this.handleResize = debounce_1(_this.handleResize.bind(_this), 50, false);
     _this.captionID = 'caption-' + Math.random().toString(36).substr(2, 9);
@@ -272,3 +507,3 @@ return _this;
 
-  createClass(Table, [{
+  createClass(InclusiveTable, [{
     key: 'sort',
@@ -326,9 +561,25 @@ value: function sort(a, b, sortDir, i) {
       });
+
+      if (this.props.breakpoint) {
+        window.addEventListener('resize', this.handleResize);
+        this.setState({ windowWidth: window.innerWidth });
+      }
     }
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.props.breakpoint) {
+        window.removeEventListener('resize', this.handleResize);
+      }
+    }
+  }, {
+    key: 'handleResize',
+    value: function handleResize() {
+      this.setState({ windowWidth: window.innerWidth });
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
-
       var _props = this.props,
+          breakpoint = _props.breakpoint,
           caption = _props.caption,
@@ -341,2 +592,7 @@ className = _props.className,
           sortable = _props.sortable;
+      var _state2 = this.state,
+          tabindex = _state2.tabindex,
+          sortedBy = _state2.sortedBy,
+          sortDir = _state2.sortDir,
+          windowWidth = _state2.windowWidth;
 
@@ -347,75 +603,58 @@
         { className: className },
-        React.createElement(
+        breakpoint && React.createElement(
           'div',
-          {
-            className: styles.tableContainer,
-            ref: this.container,
-            tabIndex: this.state.tabindex,
-            'aria-labelledby': this.captionID,
-            role: 'group'
-          },
-          React.createElement(
-            'table',
-            null,
-            React.createElement(
-              'caption',
-              { id: this.captionID },
-              caption,
-              this.state.tabindex === '0' && React.createElement(
-                'div',
-                null,
-                React.createElement(
-                  'small',
-                  null,
-                  '(scroll to see more)'
-                )
-              )
-            ),
-            React.createElement(
-              'tbody',
-              null,
-              React.createElement(
-                'tr',
-                null,
-                headers.map(function (header, i) {
-                  return React.createElement(th, {
-                    header: header,
-                    i: i,
-                    key: i,
-                    sortable: sortable,
-                    sortBy: _this3.sortBy,
-                    sortDir: _this3.state.sortDir,
-                    sortedBy: _this3.state.sortedBy,
-                    customArrow: customArrow
-                  });
-                })
-              ),
-              this.state.rows.map(function (row, i) {
-                return React.createElement(
-                  'tr',
-                  { key: i },
-                  row.map(function (cell, i) {
-                    return rowHeaders && i < 1 ? React.createElement(
-                      'th',
-                      { scope: 'row', key: i },
-                      cell
-                    ) : React.createElement(
-                      'td',
-                      { key: i },
-                      cell
-                    );
-                  })
-                );
-              })
-            )
-          )
+          { ref: this.container },
+          windowWidth >= breakpoint ? React.createElement(Table, {
+            caption: caption,
+            captionID: this.captionID,
+            className: classnames(styles.tableScroll, defineProperty({}, styles.tableContainer, !breakpoint)),
+            customArrow: customArrow,
+            headers: headers,
+            rowHeaders: rowHeaders,
+            rows: this.state.rows,
+            sortable: sortable,
+            sortBy: this.sortBy,
+            sortDir: sortDir,
+            sortedBy: sortedBy,
+            tabindex: tabindex
+          }) : React.createElement(DefinitionList, {
+            className: classnames(defineProperty({}, styles.listsContainer, !breakpoint)),
+            caption: caption,
+            rows: rows,
+            headers: headers
+          })
         ),
-        React.createElement(DefinitionList, { caption: caption, rows: rows, headers: headers })
+        !breakpoint && React.createElement(
+          'div',
+          { ref: this.container },
+          React.createElement(Table, {
+            caption: caption,
+            captionID: this.captionID,
+            className: classnames(styles.tableScroll, defineProperty({}, styles.tableContainer, !breakpoint)),
+            customArrow: customArrow,
+            headers: headers,
+            rowHeaders: rowHeaders,
+            rows: this.state.rows,
+            sortable: sortable,
+            sortBy: this.sortBy,
+            sortDir: sortDir,
+            sortedBy: sortedBy,
+            tabindex: tabindex
+          }),
+          React.createElement(DefinitionList, {
+            className: classnames(defineProperty({}, styles.listsContainer, !breakpoint)),
+            caption: caption,
+            rows: rows,
+            headers: headers
+          })
+        )
       );
     }
   }]);
-  return Table;
+  return InclusiveTable;
 }(Component);
 
-Table.propTypes = {
+InclusiveTable.propTypes = {
+  /** An optional breakpoint, determines when the `<dl>` switches to a `<table>` */
+  breakpoint: PropTypes.number,
   caption: PropTypes.string,
@@ -431,3 +670,3 @@ className: PropTypes.string,
 
-export default Table;
+export default InclusiveTable;
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -9,2 +9,124 @@ 'use strict';
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  }
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
+
+var debounce_1 = debounce;
+
 function styleInject(css, ref) {
@@ -37,8 +159,7 @@ 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";
-var styles = { "tableContainer": "styles_tableContainer__fjLYp" };
+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_tableScroll__11GBA {\n  overflow-x: auto;\n}\n\n/**\n * Hide the table display on viewports less than 400px wide.\n */\n@media (max-width: 399px) {\n  .styles_tableContainer__fjLYp {\n    display: none;\n  }\n}\n\n/**\n * Display the definition list on viewports less than 400px wide.\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\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";
+var styles = { "tableScroll": "styles_tableScroll__11GBA", "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\n.styles_listsContainer__1e9_Q {\n  display: block;\n}\n\n@media (min-width: 400px) {\n  .styles_listsContainer__1e9_Q {\n    display: none;\n  }\n}\n";
-var styles$1 = { "listsContainer": "styles_listsContainer__1e9_Q" };
+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";
 styleInject(css$1);
@@ -48,2 +169,3 @@
   var caption = _ref.caption,
+      className = _ref.className,
       rows = _ref.rows,
@@ -53,3 +175,3 @@ headers = _ref.headers;
     'div',
-    { className: styles$1.listsContainer },
+    { className: className },
     React__default.createElement(
@@ -96,2 +218,3 @@ 'h2',
   caption: PropTypes.string.isRequired,
+  className: PropTypes.string,
   rows: PropTypes.array.isRequired,
@@ -125,2 +248,17 @@ headers: PropTypes.array.isRequired
 
+var defineProperty = function (obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+};
+
 var inherits = function (subClass, superClass) {
@@ -254,10 +392,105 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-var Table = function (_Component) {
-  inherits(Table, _Component);
+var Table = function Table(_ref) {
+  var caption = _ref.caption,
+      customArrow = _ref.customArrow,
+      className = _ref.className,
+      headers = _ref.headers,
+      rowHeaders = _ref.rowHeaders,
+      rows = _ref.rows,
+      sortable = _ref.sortable,
+      sortBy = _ref.sortBy,
+      sortDir = _ref.sortDir,
+      sortedBy = _ref.sortedBy,
+      tabindex = _ref.tabindex,
+      captionID = _ref.captionID;
 
-  function Table(props) {
-    classCallCheck(this, Table);
+  return React__default.createElement(
+    'div',
+    {
+      className: className,
+      tabIndex: tabindex,
+      'aria-labelledby': captionID,
+      role: 'group'
+    },
+    React__default.createElement(
+      'table',
+      null,
+      React__default.createElement(
+        'caption',
+        { id: captionID },
+        caption,
+        tabindex === '0' && React__default.createElement(
+          'div',
+          null,
+          React__default.createElement(
+            'small',
+            null,
+            '(scroll to see more)'
+          )
+        )
+      ),
+      React__default.createElement(
+        'tbody',
+        null,
+        React__default.createElement(
+          'tr',
+          null,
+          headers.map(function (header, i) {
+            return React__default.createElement(th, {
+              header: header,
+              i: i,
+              key: i,
+              sortable: sortable,
+              sortBy: sortBy,
+              sortDir: sortDir,
+              sortedBy: sortedBy,
+              customArrow: customArrow
+            });
+          })
+        ),
+        rows.map(function (row, i) {
+          return React__default.createElement(
+            'tr',
+            { key: i },
+            row.map(function (cell, i) {
+              return rowHeaders && i < 1 ? React__default.createElement(
+                'th',
+                { scope: 'row', key: i },
+                cell
+              ) : React__default.createElement(
+                'td',
+                { key: i },
+                cell
+              );
+            })
+          );
+        })
+      )
+    )
+  );
+};
 
-    var _this = possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).call(this, props));
+Table.propTypes = {
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  customArrow: PropTypes.func,
+  headers: PropTypes.array.isRequired,
+  rowHeaders: PropTypes.bool,
+  rows: PropTypes.array.isRequired,
+  sortable: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
+  sortBy: PropTypes.func.isRequired,
+  sortDir: PropTypes.string.isRequired,
+  sortedBy: PropTypes.number,
+  tabindex: PropTypes.number,
+  captionID: PropTypes.string.isRequired
+};
 
+var InclusiveTable = function (_Component) {
+  inherits(InclusiveTable, _Component);
+
+  function InclusiveTable(props) {
+    classCallCheck(this, InclusiveTable);
+
+    var _this = possibleConstructorReturn(this, (InclusiveTable.__proto__ || Object.getPrototypeOf(InclusiveTable)).call(this, props));
+
     _this.state = {
@@ -267,3 +500,4 @@ tabindex: null,
       sortedBy: null,
-      sortDir: 'none'
+      sortDir: 'none',
+      windowWidth: 0
     };
@@ -273,2 +507,3 @@ _this.container = React__default.createRef();
     _this.sort = _this.sort.bind(_this);
+    _this.handleResize = debounce_1(_this.handleResize.bind(_this), 50, false);
     _this.captionID = 'caption-' + Math.random().toString(36).substr(2, 9);
@@ -278,3 +513,3 @@ return _this;
 
-  createClass(Table, [{
+  createClass(InclusiveTable, [{
     key: 'sort',
@@ -332,9 +567,25 @@ value: function sort(a, b, sortDir, i) {
       });
+
+      if (this.props.breakpoint) {
+        window.addEventListener('resize', this.handleResize);
+        this.setState({ windowWidth: window.innerWidth });
+      }
     }
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.props.breakpoint) {
+        window.removeEventListener('resize', this.handleResize);
+      }
+    }
+  }, {
+    key: 'handleResize',
+    value: function handleResize() {
+      this.setState({ windowWidth: window.innerWidth });
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
-
       var _props = this.props,
+          breakpoint = _props.breakpoint,
           caption = _props.caption,
@@ -347,2 +598,7 @@ className = _props.className,
           sortable = _props.sortable;
+      var _state2 = this.state,
+          tabindex = _state2.tabindex,
+          sortedBy = _state2.sortedBy,
+          sortDir = _state2.sortDir,
+          windowWidth = _state2.windowWidth;
 
@@ -353,75 +609,58 @@
         { className: className },
-        React__default.createElement(
+        breakpoint && React__default.createElement(
           'div',
-          {
-            className: styles.tableContainer,
-            ref: this.container,
-            tabIndex: this.state.tabindex,
-            'aria-labelledby': this.captionID,
-            role: 'group'
-          },
-          React__default.createElement(
-            'table',
-            null,
-            React__default.createElement(
-              'caption',
-              { id: this.captionID },
-              caption,
-              this.state.tabindex === '0' && React__default.createElement(
-                'div',
-                null,
-                React__default.createElement(
-                  'small',
-                  null,
-                  '(scroll to see more)'
-                )
-              )
-            ),
-            React__default.createElement(
-              'tbody',
-              null,
-              React__default.createElement(
-                'tr',
-                null,
-                headers.map(function (header, i) {
-                  return React__default.createElement(th, {
-                    header: header,
-                    i: i,
-                    key: i,
-                    sortable: sortable,
-                    sortBy: _this3.sortBy,
-                    sortDir: _this3.state.sortDir,
-                    sortedBy: _this3.state.sortedBy,
-                    customArrow: customArrow
-                  });
-                })
-              ),
-              this.state.rows.map(function (row, i) {
-                return React__default.createElement(
-                  'tr',
-                  { key: i },
-                  row.map(function (cell, i) {
-                    return rowHeaders && i < 1 ? React__default.createElement(
-                      'th',
-                      { scope: 'row', key: i },
-                      cell
-                    ) : React__default.createElement(
-                      'td',
-                      { key: i },
-                      cell
-                    );
-                  })
-                );
-              })
-            )
-          )
+          { ref: this.container },
+          windowWidth >= breakpoint ? React__default.createElement(Table, {
+            caption: caption,
+            captionID: this.captionID,
+            className: classnames(styles.tableScroll, defineProperty({}, styles.tableContainer, !breakpoint)),
+            customArrow: customArrow,
+            headers: headers,
+            rowHeaders: rowHeaders,
+            rows: this.state.rows,
+            sortable: sortable,
+            sortBy: this.sortBy,
+            sortDir: sortDir,
+            sortedBy: sortedBy,
+            tabindex: tabindex
+          }) : React__default.createElement(DefinitionList, {
+            className: classnames(defineProperty({}, styles.listsContainer, !breakpoint)),
+            caption: caption,
+            rows: rows,
+            headers: headers
+          })
         ),
-        React__default.createElement(DefinitionList, { caption: caption, rows: rows, headers: headers })
+        !breakpoint && React__default.createElement(
+          'div',
+          { ref: this.container },
+          React__default.createElement(Table, {
+            caption: caption,
+            captionID: this.captionID,
+            className: classnames(styles.tableScroll, defineProperty({}, styles.tableContainer, !breakpoint)),
+            customArrow: customArrow,
+            headers: headers,
+            rowHeaders: rowHeaders,
+            rows: this.state.rows,
+            sortable: sortable,
+            sortBy: this.sortBy,
+            sortDir: sortDir,
+            sortedBy: sortedBy,
+            tabindex: tabindex
+          }),
+          React__default.createElement(DefinitionList, {
+            className: classnames(defineProperty({}, styles.listsContainer, !breakpoint)),
+            caption: caption,
+            rows: rows,
+            headers: headers
+          })
+        )
       );
     }
   }]);
-  return Table;
+  return InclusiveTable;
 }(React.Component);
 
-Table.propTypes = {
+InclusiveTable.propTypes = {
+  /** An optional breakpoint, determines when the `<dl>` switches to a `<table>` */
+  breakpoint: PropTypes.number,
   caption: PropTypes.string,
@@ -437,3 +676,3 @@ className: PropTypes.string,
 
-module.exports = Table;
+module.exports = InclusiveTable;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-inclusive-sortable-table",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An accessible, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.",
-  "keywords": ["accessibility", "a11y", "react", "inclusive components", "responsive", "table"],
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "react",
+    "inclusive components",
+    "responsive",
+    "table"
+  ],
   "author": "benjamingrobertson",
@@ -62,3 +69,7 @@ "license": "MIT",
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "debounce": "^1.2.0"
+  }
 }

README.md

@@ -76,2 +76,19 @@ # react-inclusive-sortable-table
 
+### breakpoint
+
+An optional value, in pixels, of where you want the definition list to change to a table. The default is 400px. If you use the default setting, the breakpoints are managed in CSS.
+
+If you pass in a value, the component will add a debounced window resize listener for triggering the render.
+
+```jsx
+<Table
+  breakpoint={500}
+  rows={rows}
+  headers={headers}
+  rowHeaders
+  caption="Front end websites"
+  sortable
+  />
+```
+
 ### caption
@@ -78,0 +95,0 @@

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97541

increased by56.78%

Lines of code

1195

increased by56.21%

Number of lines in readme file

235

increased by7.8%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Addedclassnames@^2.2.6

• + Addeddebounce@^1.2.0

• + Addedclassnames@2.5.1(transitive)

• + Addeddebounce@1.2.1(transitive)