@govuk-frederic/table - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

es/index.js

@@ -0,1 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 import React from 'react';
@@ -22,46 +26,54 @@ import PropTypes from 'prop-types';
 });
+var cellStyles = {
+  ':first-child': {
+    padding: '15px 4px 15px 0'
+  },
+  ':last-child': {
+    padding: '15px 0 15px 4px'
+  },
+  borderBottom: '1px solid #bfc1c3',
+  display: 'table-cell',
+  fontSize: '14px',
+  padding: '15px 4px',
+  verticalAlign: 'top'
+};
+var TableData =
+/*#__PURE__*/
+styled('td', {
+  // use `forwardProps` here as by default emotion doesn't allow setting `name` prop on a `td`
+  forwardProps: ['name'],
+  target: "e4u1u2g1",
+  label: "TableData"
+})(cellStyles);
 var TableHeading =
 /*#__PURE__*/
 styled('th', {
-  forwardProps: ['name'],
-  target: "e4u1u2g1",
+  target: "e4u1u2g2",
   label: "TableHeading"
-})(function (_ref2) {
+})(cellStyles, function (_ref2) {
   var rowHeading = _ref2.rowHeading,
       columnCount = _ref2.columnCount;
   return {
-    ':first-child': {
-      padding: '15px 8px 15px 0',
-      width: rowHeading && columnCount < 4 ? '25%' : undefined
-    },
-    ':last-child': {
-      padding: '15px 0 15px 8px'
-    },
-    borderBottom: '1px solid #bfc1c3',
-    display: 'table-cell',
-    fontSize: '14px',
     fontWeight: 'bold',
     textAlign: 'left',
-    verticalAlign: 'baseline'
+    width: rowHeading && columnCount < 4 ? '25%' : undefined
   };
 });
-var TableData =
-/*#__PURE__*/
-styled('td', {
-  // use `forwardProps` here as by default emotion doesn't allow setting `name` prop on a `td`
-  forwardProps: ['name'],
-  target: "e4u1u2g2",
-  label: "TableData"
-})({
-  ':first-child': {
-    padding: '15px 8px 15px 0'
-  },
-  ':last-child': {
-    padding: '15px 0 15px 8px'
-  },
-  borderBottom: '1px solid #bfc1c3',
-  display: 'table-cell',
-  fontSize: '14px',
-  verticalAlign: 'baseline'
-});
+
+var getName = function getName(names, row, column, nameByRow) {
+  if (nameByRow) {
+    return Array.isArray(names[row]) ? names[row][column] : names[row];
+  }
+
+  return Array.isArray(names[column]) ? names[column][row] : names[column];
+};
+
+var calculateIndex = function calculateIndex(titles, nameByRow, index) {
+  if (nameByRow) {
+    // Only if there are headings at the top, we need to increment the row
+    return titles && titles.length ? index + 1 : index;
+  }
+
+  return index + 1;
+};
 /**
@@ -73,3 +85,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
  * ```
@@ -79,3 +99,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
@@ -85,3 +113,11 @@ *
  * ```jsx
- * <Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
@@ -91,23 +127,42 @@ *
  * ```jsx
- * <Table rows={[['title', 'value']]} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
  * 
- * rowIncludesHeading, with flexible columns
+ * rowIncludesHeading, with titles, with flexible columns
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
  */
 
+
 var Table = function Table(_ref3) {
   var name = _ref3.name,
-      _ref3$names = _ref3.names,
-      names = _ref3$names === void 0 ? [] : _ref3$names,
+      names = _ref3.names,
       rowIncludesHeading = _ref3.rowIncludesHeading,
+      nameByRow = _ref3.nameByRow,
       titles = _ref3.titles,
       rows = _ref3.rows,
-      flexibleColumns = _ref3.flexibleColumns;
-  return React.createElement(TableContainer, {
+      flexibleColumns = _ref3.flexibleColumns,
+      props = _objectWithoutProperties(_ref3, ["name", "names", "rowIncludesHeading", "nameByRow", "titles", "rows", "flexibleColumns"]);
+
+  return React.createElement(TableContainer, _extends({
     name: name,
     flexibleColumns: flexibleColumns
-  }, titles && titles.length && React.createElement("thead", null, React.createElement("tr", null, titles.map(function (title, index) {
+  }, props), titles && titles.length && React.createElement("thead", null, React.createElement("tr", null, titles.map(function (title, index) {
     return (// disable false-positive rule - this is an access into an array of strings, not object access
@@ -117,3 +172,3 @@ // eslint-disable-next-line security/detect-object-injection
         key: title.key || index,
-        name: names[index]
+        name: getName(names, 0, index, nameByRow)
       }, title)
@@ -128,3 +183,4 @@ );
         columnCount: row.length,
-        key: item.key || itemIndex
+        key: item.key || itemIndex,
+        name: getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)
       }, item) : // disable false-positive rule - this is an access into an array of strings, not object access
@@ -134,3 +190,3 @@ // eslint-disable-next-line security/detect-object-injection
         key: item.key || itemIndex,
-        name: names[itemIndex]
+        name: getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)
       }, item);
@@ -144,3 +200,4 @@ }));
   name: PropTypes.string,
-  names: PropTypes.arrayOf(PropTypes.string),
+  names: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])),
+  nameByRow: PropTypes.bool,
   rowIncludesHeading: PropTypes.bool,
@@ -150,3 +207,9 @@ rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]))).isRequired,
 } : {};
+Table.defaultProps = {
+  flexibleColumns: false,
+  nameByRow: false,
+  names: [],
+  rowIncludesHeading: false
+};
 export default Table;
 //# sourceMappingURL=index.js.map

es/stories.js

@@ -8,4 +8,6 @@ import React from 'react';
 var arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
-var arrayExampleContent = [['Content 1-1', 'Content 1-2', 'Content 3', 'Content 4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
-var exampleNames = ['one', 'two', 'three', 'four'];
+var arrayExampleContent = [['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
+var columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+var rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+var rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
 var stories = storiesOf('Tables/Table', module);
@@ -19,10 +21,12 @@ var examples = storiesOf('Tables/Table/Examples', module);
     rows: arrayExampleContent,
-    names: exampleNames
+    names: columnTableNames
   });
 });
-examples.add('rowIncludesHeading', function () {
+examples.add('rowIncludesHeading, with titles', function () {
   return React.createElement(Table, {
     titles: arrayExampleHeadings,
     rows: arrayExampleContent,
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNamesWithTitles
   });
@@ -34,3 +38,4 @@ });
     rowIncludesHeading: true,
-    names: exampleNames
+    nameByRow: true,
+    names: rowTableNames
   });
@@ -41,3 +46,5 @@ });
     rows: [['title', 'value']],
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNames
   });
@@ -50,5 +57,7 @@ });
     flexibleColumns: true,
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNames
   });
 });
 //# sourceMappingURL=stories.js.map

es/test.js

@@ -10,3 +10,5 @@ import React from 'react';
   var rows = [['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
-  var names = ['one', 'two', 'three', 'four'];
+  var columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+  var rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+  var rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
   var wrapper;
@@ -26,18 +28,65 @@ it('renders as a table', function () {
   });
+  it('names each cell according to its column', function () {
+    wrapper.setProps({
+      name: 'name',
+      names: columnTableNames
+    });
+    var th = wrapper.find('TableHeading').at(2);
+    expect(th.prop('name')).toBe('three');
+    var td = wrapper.find('TableData').at(2);
+    expect(td.prop('name')).toBe('three');
+  });
   it('renders rows with header column', function () {
     wrapper.setProps({
-      rowIncludesHeading: true
+      rowIncludesHeading: true,
+      nameByRow: true
     });
     expect(wrapper.find('TableHeading')).toHaveLength(7);
   });
-  it('names each cell according to its column', function () {
+  it('names each cell according to its row, no titles', function () {
     wrapper.setProps({
-      name: 'name',
-      names: names
+      titles: undefined,
+      names: rowTableNames
     });
-    var th = wrapper.find('TableHeading').at(2);
+    var th = wrapper.find('TableHeading').at(0);
+    expect(th.prop('name')).toBe('one');
+    var td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+    th = wrapper.find('TableHeading').at(1);
+    expect(th.prop('name')).toBe('i');
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+    th = wrapper.find('TableHeading').at(2);
     expect(th.prop('name')).toBe('three');
-    var td = wrapper.find('TableData').at(2);
-    expect(td.prop('name')).toBe('four');
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
   });
+  it('names each cell according to its row, with titles', function () {
+    wrapper.setProps({
+      titles: titles,
+      names: rowTableNamesWithTitles
+    });
+    var th = wrapper.find('TableHeading').at(3);
+    expect(th.prop('name')).toBe('heading');
+    th = wrapper.find('TableHeading').at(4);
+    expect(th.prop('name')).toBe('one');
+    var td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+    th = wrapper.find('TableHeading').at(5);
+    expect(th.prop('name')).toBe('i');
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+    th = wrapper.find('TableHeading').at(6);
+    expect(th.prop('name')).toBe('three');
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
+  });
   it('sets th width according to rowHeading prop', function () {
@@ -44,0 +93,0 @@ expect(wrapper.find('TableHeading').at(3)).not.toHaveStyleRule('width');

lib/index.js

@@ -16,2 +16,6 @@ "use strict";
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 var TableContainer =
@@ -34,46 +38,54 @@ /*#__PURE__*/
 });
+var cellStyles = {
+  ':first-child': {
+    padding: '15px 4px 15px 0'
+  },
+  ':last-child': {
+    padding: '15px 0 15px 4px'
+  },
+  borderBottom: '1px solid #bfc1c3',
+  display: 'table-cell',
+  fontSize: '14px',
+  padding: '15px 4px',
+  verticalAlign: 'top'
+};
+var TableData =
+/*#__PURE__*/
+(0, _reactEmotion.default)('td', {
+  // use `forwardProps` here as by default emotion doesn't allow setting `name` prop on a `td`
+  forwardProps: ['name'],
+  target: "e4u1u2g1",
+  label: "TableData"
+})(cellStyles);
 var TableHeading =
 /*#__PURE__*/
 (0, _reactEmotion.default)('th', {
-  forwardProps: ['name'],
-  target: "e4u1u2g1",
+  target: "e4u1u2g2",
   label: "TableHeading"
-})(function (_ref2) {
+})(cellStyles, function (_ref2) {
   var rowHeading = _ref2.rowHeading,
       columnCount = _ref2.columnCount;
   return {
-    ':first-child': {
-      padding: '15px 8px 15px 0',
-      width: rowHeading && columnCount < 4 ? '25%' : undefined
-    },
-    ':last-child': {
-      padding: '15px 0 15px 8px'
-    },
-    borderBottom: '1px solid #bfc1c3',
-    display: 'table-cell',
-    fontSize: '14px',
     fontWeight: 'bold',
     textAlign: 'left',
-    verticalAlign: 'baseline'
+    width: rowHeading && columnCount < 4 ? '25%' : undefined
   };
 });
-var TableData =
-/*#__PURE__*/
-(0, _reactEmotion.default)('td', {
-  // use `forwardProps` here as by default emotion doesn't allow setting `name` prop on a `td`
-  forwardProps: ['name'],
-  target: "e4u1u2g2",
-  label: "TableData"
-})({
-  ':first-child': {
-    padding: '15px 8px 15px 0'
-  },
-  ':last-child': {
-    padding: '15px 0 15px 8px'
-  },
-  borderBottom: '1px solid #bfc1c3',
-  display: 'table-cell',
-  fontSize: '14px',
-  verticalAlign: 'baseline'
-});
+
+var getName = function getName(names, row, column, nameByRow) {
+  if (nameByRow) {
+    return Array.isArray(names[row]) ? names[row][column] : names[row];
+  }
+
+  return Array.isArray(names[column]) ? names[column][row] : names[column];
+};
+
+var calculateIndex = function calculateIndex(titles, nameByRow, index) {
+  if (nameByRow) {
+    // Only if there are headings at the top, we need to increment the row
+    return titles && titles.length ? index + 1 : index;
+  }
+
+  return index + 1;
+};
 /**
@@ -85,3 +97,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
  * ```
@@ -91,3 +111,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
@@ -97,3 +125,11 @@ *
  * ```jsx
- * <Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
@@ -103,23 +139,42 @@ *
  * ```jsx
- * <Table rows={[['title', 'value']]} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
  * 
- * rowIncludesHeading, with flexible columns
+ * rowIncludesHeading, with titles, with flexible columns
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
  */
 
+
 var Table = function Table(_ref3) {
   var name = _ref3.name,
-      _ref3$names = _ref3.names,
-      names = _ref3$names === void 0 ? [] : _ref3$names,
+      names = _ref3.names,
       rowIncludesHeading = _ref3.rowIncludesHeading,
+      nameByRow = _ref3.nameByRow,
       titles = _ref3.titles,
       rows = _ref3.rows,
-      flexibleColumns = _ref3.flexibleColumns;
-  return _react.default.createElement(TableContainer, {
+      flexibleColumns = _ref3.flexibleColumns,
+      props = _objectWithoutProperties(_ref3, ["name", "names", "rowIncludesHeading", "nameByRow", "titles", "rows", "flexibleColumns"]);
+
+  return _react.default.createElement(TableContainer, _extends({
     name: name,
     flexibleColumns: flexibleColumns
-  }, titles && titles.length && _react.default.createElement("thead", null, _react.default.createElement("tr", null, titles.map(function (title, index) {
+  }, props), titles && titles.length && _react.default.createElement("thead", null, _react.default.createElement("tr", null, titles.map(function (title, index) {
     return (// disable false-positive rule - this is an access into an array of strings, not object access
@@ -129,3 +184,3 @@ // eslint-disable-next-line security/detect-object-injection
         key: title.key || index,
-        name: names[index]
+        name: getName(names, 0, index, nameByRow)
       }, title)
@@ -140,3 +195,4 @@ );
         columnCount: row.length,
-        key: item.key || itemIndex
+        key: item.key || itemIndex,
+        name: getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)
       }, item) : // disable false-positive rule - this is an access into an array of strings, not object access
@@ -146,3 +202,3 @@ // eslint-disable-next-line security/detect-object-injection
         key: item.key || itemIndex,
-        name: names[itemIndex]
+        name: getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)
       }, item);
@@ -156,3 +212,4 @@ }));
   name: _propTypes.default.string,
-  names: _propTypes.default.arrayOf(_propTypes.default.string),
+  names: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)])),
+  nameByRow: _propTypes.default.bool,
   rowIncludesHeading: _propTypes.default.bool,
@@ -162,2 +219,8 @@ rows: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]))).isRequired,
 } : {};
+Table.defaultProps = {
+  flexibleColumns: false,
+  nameByRow: false,
+  names: [],
+  rowIncludesHeading: false
+};
 var _default = Table;
@@ -164,0 +227,0 @@ exports.default = _default;

lib/stories.js

@@ -18,4 +18,6 @@ "use strict";
 var arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
-var arrayExampleContent = [['Content 1-1', 'Content 1-2', 'Content 3', 'Content 4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
-var exampleNames = ['one', 'two', 'three', 'four'];
+var arrayExampleContent = [['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
+var columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+var rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+var rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
 var stories = (0, _react2.storiesOf)('Tables/Table', module);
@@ -29,10 +31,12 @@ var examples = (0, _react2.storiesOf)('Tables/Table/Examples', module);
     rows: arrayExampleContent,
-    names: exampleNames
+    names: columnTableNames
   });
 });
-examples.add('rowIncludesHeading', function () {
+examples.add('rowIncludesHeading, with titles', function () {
   return _react.default.createElement(_.default, {
     titles: arrayExampleHeadings,
     rows: arrayExampleContent,
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNamesWithTitles
   });
@@ -44,3 +48,4 @@ });
     rowIncludesHeading: true,
-    names: exampleNames
+    nameByRow: true,
+    names: rowTableNames
   });
@@ -51,3 +56,5 @@ });
     rows: [['title', 'value']],
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNames
   });
@@ -60,5 +67,7 @@ });
     flexibleColumns: true,
-    rowIncludesHeading: true
+    rowIncludesHeading: true,
+    nameByRow: true,
+    names: rowTableNames
   });
 });
 //# sourceMappingURL=stories.js.map

lib/test.js

@@ -21,3 +21,5 @@ "use strict";
   var rows = [['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'], ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'], ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4']];
-  var names = ['one', 'two', 'three', 'four'];
+  var columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+  var rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+  var rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
   var wrapper;
@@ -37,18 +39,65 @@ it('renders as a table', function () {
   });
+  it('names each cell according to its column', function () {
+    wrapper.setProps({
+      name: 'name',
+      names: columnTableNames
+    });
+    var th = wrapper.find('TableHeading').at(2);
+    expect(th.prop('name')).toBe('three');
+    var td = wrapper.find('TableData').at(2);
+    expect(td.prop('name')).toBe('three');
+  });
   it('renders rows with header column', function () {
     wrapper.setProps({
-      rowIncludesHeading: true
+      rowIncludesHeading: true,
+      nameByRow: true
     });
     expect(wrapper.find('TableHeading')).toHaveLength(7);
   });
-  it('names each cell according to its column', function () {
+  it('names each cell according to its row, no titles', function () {
     wrapper.setProps({
-      name: 'name',
-      names: names
+      titles: undefined,
+      names: rowTableNames
     });
-    var th = wrapper.find('TableHeading').at(2);
+    var th = wrapper.find('TableHeading').at(0);
+    expect(th.prop('name')).toBe('one');
+    var td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+    th = wrapper.find('TableHeading').at(1);
+    expect(th.prop('name')).toBe('i');
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+    th = wrapper.find('TableHeading').at(2);
     expect(th.prop('name')).toBe('three');
-    var td = wrapper.find('TableData').at(2);
-    expect(td.prop('name')).toBe('four');
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
   });
+  it('names each cell according to its row, with titles', function () {
+    wrapper.setProps({
+      titles: titles,
+      names: rowTableNamesWithTitles
+    });
+    var th = wrapper.find('TableHeading').at(3);
+    expect(th.prop('name')).toBe('heading');
+    th = wrapper.find('TableHeading').at(4);
+    expect(th.prop('name')).toBe('one');
+    var td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+    th = wrapper.find('TableHeading').at(5);
+    expect(th.prop('name')).toBe('i');
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+    th = wrapper.find('TableHeading').at(6);
+    expect(th.prop('name')).toBe('three');
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
+  });
   it('sets th width according to rowHeading prop', function () {
@@ -55,0 +104,0 @@ expect(wrapper.find('TableHeading').at(3)).not.toHaveStyleRule('width');

package.json

 {
   "name": "@govuk-frederic/table",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "dependencies": {
@@ -5,0 +5,0 @@ "@govuk-react/constants": "^0.2.7"

README.md

@@ -14,3 +14,11 @@ Table
 ```jsx
-<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
+const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+const arrayExampleContent = [
+ ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+];
+const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+
+<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
 ```
@@ -20,3 +28,11 @@
 ```jsx
-<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
+const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+const arrayExampleContent = [
+ ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+];
+const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+
+<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
 ```
@@ -26,3 +42,11 @@
 ```jsx
-<Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
+const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+const arrayExampleContent = [
+ ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+];
+const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+
+<Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
 ```
@@ -32,8 +56,24 @@
 ```jsx
-<Table rows={[['title', 'value']]} rowIncludesHeading />
+const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+const arrayExampleContent = [
+ ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+];
+const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+
+<Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
 ```
 
-rowIncludesHeading, with flexible columns
+rowIncludesHeading, with titles, with flexible columns
 ```jsx
-<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
+const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+const arrayExampleContent = [
+ ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+];
+const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+
+<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
 ```
@@ -44,6 +84,7 @@
 :--- | :------- | :------ | :--- | :----------
- `flexibleColumns` |  | `````` | bool | 
+ `flexibleColumns` |  | ```false``` | bool | 
  `name` |  | `````` | string | 
+ `nameByRow` |  | ```false``` | bool | 
  `names` |  | ```[]``` | arrayOf[object Object] | 
- `rowIncludesHeading` |  | `````` | bool | 
+ `rowIncludesHeading` |  | ```false``` | bool | 
  `rows` | true | `````` | arrayOf[object Object] | 
@@ -50,0 +91,0 @@ `titles` |  | `````` | arrayOf[object Object] |

src/index.js

@@ -18,11 +18,8 @@ import React from 'react';
 
-const TableHeading = styled('th', {
-  forwardProps: ['name'],
-})(({ rowHeading, columnCount }) => ({
+const cellStyles = {
   ':first-child': {
-    padding: '15px 8px 15px 0',
-    width: rowHeading && columnCount < 4 ? '25%' : undefined,
+    padding: '15px 4px 15px 0',
   },
   ':last-child': {
-    padding: '15px 0 15px 8px',
+    padding: '15px 0 15px 4px',
   },
@@ -32,6 +29,5 @@ borderBottom: '1px solid #bfc1c3',
   fontSize: '14px',
-  fontWeight: 'bold',
-  textAlign: 'left',
-  verticalAlign: 'baseline',
-}));
+  padding: '15px 4px',
+  verticalAlign: 'top',
+};
 
@@ -41,15 +37,30 @@ const TableData = styled('td', {
   forwardProps: ['name'],
-})({
-  ':first-child': {
-    padding: '15px 8px 15px 0',
-  },
-  ':last-child': {
-    padding: '15px 0 15px 8px',
-  },
-  borderBottom: '1px solid #bfc1c3',
-  display: 'table-cell',
-  fontSize: '14px',
-  verticalAlign: 'baseline',
-});
+})(cellStyles);
 
+const TableHeading = styled('th')(
+  cellStyles,
+  ({rowHeading, columnCount}) => (
+    {
+      fontWeight: 'bold',
+      textAlign: 'left',
+      width: rowHeading && columnCount < 4 ? '25%' : undefined,
+    }
+  ),
+);
+
+const getName = (names, row, column, nameByRow) => {
+  if (nameByRow) {
+    return Array.isArray(names[row]) ? names[row][column] : names[row];
+  } 
+  return Array.isArray(names[column]) ? names[column][row] : names[column];
+};
+
+const calculateIndex = (titles, nameByRow, index) => {
+  if (nameByRow) {
+    // Only if there are headings at the top, we need to increment the row
+    return (titles && titles.length) ? (index + 1) : index;
+  }
+  return (index + 1);
+};
+
 /**
@@ -61,3 +72,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
  * ```
@@ -67,3 +86,11 @@ *
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
@@ -73,3 +100,11 @@ *
  * ```jsx
- * <Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
@@ -79,12 +114,28 @@ *
  * ```jsx
- * <Table rows={[['title', 'value']]} rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
  * ```
  * 
- * rowIncludesHeading, with flexible columns
+ * rowIncludesHeading, with titles, with flexible columns
  * ```jsx
- * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
+ * const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
+ * const arrayExampleContent = [
+ *  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
+ *  ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
+ *  ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
+ * ];
+ * const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+ * 
+ * <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
  * ```
  */
-const Table = ({ name, names = [], rowIncludesHeading, titles, rows, flexibleColumns }) => (
-  <TableContainer name={name} flexibleColumns={flexibleColumns}>
+const Table = ({ name, names, rowIncludesHeading, nameByRow, titles, rows, flexibleColumns, ...props }) => (
+  <TableContainer name={name} flexibleColumns={flexibleColumns} {...props}>
     {titles &&
@@ -97,3 +148,5 @@ titles.length && (
             // eslint-disable-next-line security/detect-object-injection
-            <TableHeading key={title.key || index} name={names[index]}>
+            <TableHeading 
+              key={title.key || index} 
+              name={getName(names, 0, index, nameByRow)}>
               {title}
@@ -111,3 +164,7 @@ </TableHeading>
               rowIncludesHeading && itemIndex === 0 ? (
-                <TableHeading rowHeading columnCount={row.length} key={item.key || itemIndex}>
+                <TableHeading 
+                  rowHeading 
+                  columnCount={row.length} 
+                  key={item.key || itemIndex} 
+                  name={getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)}>
                   {item}
@@ -118,3 +175,5 @@ </TableHeading>
                 // eslint-disable-next-line security/detect-object-injection
-                <TableData key={item.key || itemIndex} name={names[itemIndex]}>
+                <TableData 
+                  key={item.key || itemIndex} 
+                  name={getName(names, calculateIndex(titles, nameByRow, index), itemIndex, nameByRow)}>
                   {item}
@@ -133,3 +192,9 @@ </TableData>
   name: PropTypes.string,
-  names: PropTypes.arrayOf(PropTypes.string),
+  names: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+  ),
+  nameByRow: PropTypes.bool,
   rowIncludesHeading: PropTypes.bool,
@@ -140,2 +205,9 @@ rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]))).isRequired,
 
+Table.defaultProps = {
+  flexibleColumns: false,
+  nameByRow: false,
+  names: [],
+  rowIncludesHeading: false,
+};
+
 export default Table;

src/stories.js

@@ -11,8 +11,11 @@ import React from 'react';
 const arrayExampleContent = [
-  ['Content 1-1', 'Content 1-2', 'Content 3', 'Content 4'],
+  ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
   ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
   ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
 ];
-const exampleNames = ['one', 'two', 'three', 'four'];
 
+const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+
 const stories = storiesOf('Tables/Table', module);
@@ -25,19 +28,19 @@ const examples = storiesOf('Tables/Table/Examples', module);
 stories.add('Component default', () =>
-  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />,
+  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />,
 );
 
-examples.add('rowIncludesHeading', () =>
-  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />,
+examples.add('rowIncludesHeading, with titles', () =>
+  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />,
 );
 
 examples.add('rowIncludesHeading, no titles', () =>
-  <Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />,
+  <Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />,
 );
 
 examples.add('rowIncludesHeading, no titles, small single row', () =>
-  <Table rows={[['title', 'value']]} rowIncludesHeading />,
+  <Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />,
 );
 
 examples.add('rowIncludesHeading, with flexible columns', () =>
-  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />,
+  <Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNames} />,
 );

src/test.js

@@ -17,3 +17,7 @@ import React from 'react';
   ];
-  const names = ['one', 'two', 'three', 'four'];
+  
+  const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
+  const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
+  const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
+
   let wrapper;
@@ -34,15 +38,74 @@
 
+  it('names each cell according to its column', () => {
+    wrapper.setProps({name: 'name', names: columnTableNames});
+    const th = wrapper.find('TableHeading').at(2);
+    expect(th.prop('name')).toBe('three');
+    const td = wrapper.find('TableData').at(2);
+    expect(td.prop('name')).toBe('three');
+  });
+
   it('renders rows with header column', () => {
-    wrapper.setProps({rowIncludesHeading: true});
+    wrapper.setProps({rowIncludesHeading: true, nameByRow: true});
     expect(wrapper.find('TableHeading')).toHaveLength(7);
   });
 
-  it('names each cell according to its column', () => {
-    wrapper.setProps({name: 'name', names});
-    const th = wrapper.find('TableHeading').at(2);
+  it('names each cell according to its row, no titles', () => {
+    wrapper.setProps({ titles: undefined, names: rowTableNames });
+    
+    let th = wrapper.find('TableHeading').at(0);
+    expect(th.prop('name')).toBe('one');
+
+    let td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+
+    th = wrapper.find('TableHeading').at(1);
+    expect(th.prop('name')).toBe('i');
+
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+
+    th = wrapper.find('TableHeading').at(2);
     expect(th.prop('name')).toBe('three');
-    const td = wrapper.find('TableData').at(2);
-    expect(td.prop('name')).toBe('four');
+
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
   });
 
+  it('names each cell according to its row, with titles', () => {
+    wrapper.setProps({ titles, names: rowTableNamesWithTitles });
+
+    let th = wrapper.find('TableHeading').at(3);
+    expect(th.prop('name')).toBe('heading');
+
+    th = wrapper.find('TableHeading').at(4);
+    expect(th.prop('name')).toBe('one');
+
+    let td = wrapper.find('TableData').at(0);
+    expect(td.prop('name')).toBe('one');
+
+    th = wrapper.find('TableHeading').at(5);
+    expect(th.prop('name')).toBe('i');
+
+    td = wrapper.find('TableData').at(3);
+    expect(td.prop('name')).toBe('am');
+
+    td = wrapper.find('TableData').at(4);
+    expect(td.prop('name')).toBe('named');
+
+    td = wrapper.find('TableData').at(5);
+    expect(td.prop('name')).toBe('individually');
+
+    th = wrapper.find('TableHeading').at(6);
+    expect(th.prop('name')).toBe('three');
+
+    td = wrapper.find('TableData').at(8);
+    expect(td.prop('name')).toBe('three');
+  });
+
   it('sets th width according to rowHeading prop', () => {
@@ -49,0 +112,0 @@ expect(wrapper.find('TableHeading').at(3)).not.toHaveStyleRule('width');

No alert changes

Improved metrics

Total package byte prevSize

98093

increased by69.64%

Lines of code

1063

increased by47.84%

Number of lines in readme file

89

increased by85.42%

No dependency changes