Merge pull request #59 from edx/efischer/hide_delete_header

Hide table headers when marked hidden

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 npm-debug.log
 coverage
+jest*

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -1241,7 +1241,9 @@ exports[`Storyshots Table default heading 1`] = `
         className=""
         scope="col"
       >
-        Coat Color
+        <span
+          className="sr-only"
+        />
       </th>
     </tr>
   </thead>
@@ -1332,7 +1334,9 @@ exports[`Storyshots Table responsive 1`] = `
         className=""
         scope="col"
       >
-        Coat Color
+        <span
+          className="sr-only"
+        />
       </th>
     </tr>
   </thead>
@@ -1434,56 +1438,18 @@ exports[`Storyshots Table sortable 1`] = `
         </button>
       </th>
       <th
-        className="sortable"
+        className=""
         scope="col"
       >
-        <button
-          className="btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <span>
-            Famous For
-            <span
-              className="sr-only"
-            >
-               
-              click to sort
-            </span>
-             
-            <span
-              className="fa fa-sort"
-            />
-          </span>
-        </button>
+        Famous For
       </th>
       <th
-        className="sortable"
+        className=""
         scope="col"
       >
-        <button
-          className="btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <span>
-            Coat Color
-            <span
-              className="sr-only"
-            >
-               
-              click to sort
-            </span>
-             
-            <span
-              className="fa fa-sort"
-            />
-          </span>
-        </button>
+        <span
+          className="sr-only"
+        />
       </th>
     </tr>
   </thead>
@@ -1574,7 +1540,9 @@ exports[`Storyshots Table table-striped 1`] = `
         className=""
         scope="col"
       >
-        Coat Color
+        <span
+          className="sr-only"
+        />
       </th>
     </tr>
   </thead>
@@ -1665,7 +1633,9 @@ exports[`Storyshots Table unstyled 1`] = `
         className=""
         scope="col"
       >
-        Coat Color
+        <span
+          className="sr-only"
+        />
       </th>
     </tr>
   </thead>

src/Table/Table.stories.jsx

@@ -35,14 +35,21 @@ const catColumns = [
   {
     label: 'Name',
     key: 'name',
+    columnSortable: true,
+    onSort: () => {},
   },
   {
     label: 'Famous For',
     key: 'famous_for',
+    columnSortable: false,
+    onSort: () => {},
   },
   {
     label: 'Coat Color',
     key: 'color',
+    columnSortable: false,
+    hideHeader: true,
+    onSort: () => {},
   },
 ];
 
@@ -96,7 +103,6 @@ storiesOf('Table', module)
       data={catDataSortable.sort((firstElement, secondElement) => sort(firstElement, secondElement, catColumns[0].key, 'desc'))}
       columns={catColumns.map(column => ({
         ...column,
-        columnSortable: true,
         onSort(direction) {
           catDataSortable.sort((firstElement, secondElement) =>
             sort(firstElement, secondElement, column.key, direction));

src/Table/Table.test.jsx

@@ -9,11 +9,12 @@ const props = {
     { key: 'num', label: 'Number' },
     { key: 'x2', label: 'Number * 2' },
     { key: 'sq', label: 'Number Squared' },
+    { key: 'i', label: 'Imaginary Number' },
   ],
   data: [
-    { sq: 1, num: 1, x2: 2 },
-    { sq: 4, num: 2, x2: 4 },
-    { sq: 9, num: 3, x2: 6 },
+    { sq: 1, num: 1, x2: 2, i: 'i' },
+    { sq: 4, num: 2, x2: 4, i: '2i' },
+    { sq: 9, num: 3, x2: 6, i: '3i' },
   ],
 };
 
@@ -29,6 +30,10 @@ const sortableColumnProps = {
   sq: {
     columnSortable: false,
   },
+  i: {
+    columnSortable: false,
+    hideHeader: true,
+  },
 };
 
 const sortableColumns = props.columns.map(column => ({
@@ -60,7 +65,9 @@ describe('<Table />', () => {
 
     it('with data in the same order as the columns', () => {
       wrapper.find('tr').at(1).find('td').forEach((td, i) => {
-        expect(Number(td.text())).toEqual(props.data[0][props.columns[i].key]);
+        let parsed = Number(td.text());
+        if (isNaN(parsed)) { parsed = td.text(); }
+        expect(parsed).toEqual(props.data[0][props.columns[i].key]);
       });
     });
 
@@ -147,7 +154,7 @@ describe('<Table />', () => {
     it('with correct initial sort icons', () => {
       const buttons = wrapper.find('button');
 
-      expect(buttons.find('.fa')).toHaveLength(sortableProps.columns.length - 1);
+      expect(buttons.find('.fa')).toHaveLength(sortableProps.columns.length - 2);
       expect(buttons.at(0).find('.fa-sort-desc')).toHaveLength(1);
       expect(buttons.at(1).find('.fa-sort')).toHaveLength(1);
     });

src/Table/index.jsx

@@ -63,24 +63,28 @@ class Table extends React.Component {
   }
 
   getTableHeading(column) {
-    return (
-      this.props.tableSortable && column.columnSortable ?
-        <Button
-          label={
-            <span>
-              {column.label}
-              <span className={classNames(styles['sr-only'])}>
-                {' '}
-                {this.getSortButtonScreenReaderText(column.key)}
-              </span>
+    let heading;
+    if (this.props.tableSortable && column.columnSortable) {
+      heading = (<Button
+        label={
+          <span>
+            {column.label}
+            <span className={classNames(styles['sr-only'])}>
               {' '}
-              {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}
-            </span>}
-          onClick={() => this.onSortClick(column.key)}
-        />
-        :
-        column.label
-    );
+              {this.getSortButtonScreenReaderText(column.key)}
+            </span>
+            {' '}
+            {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}
+          </span>}
+        onClick={() => this.onSortClick(column.key)}
+      />);
+    } else if (column.hideHeader) {
+      heading = (<span className={classNames(styles['sr-only'])} />);
+    } else {
+      heading = column.label;
+    }
+
+    return heading;
   }
 
   getHeadings() {