Merge pull request #421 from appfolio/addClassnameForTableColumn

mj - support className on sortable table column
appfolio · Jun 19, 2018 · ab2490a · ab2490a
2 parents 1c129d0 + 29166aa
commit ab2490a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/src/components/SortableTable.js b/src/components/SortableTable.js
@@ -1,8 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Header from './SortableTable/Header.js';
 import Table from './Table.js';
 
+function generateColumnClassName(column) {
+  return classnames(
+    column.align && `text-${column.align}`,
+    column.className
+  );
+}
+
 class SortableTable extends React.Component {
   static propTypes = {
     ...Table.propTypes,
@@ -38,7 +46,7 @@ class SortableTable extends React.Component {
     const expanded = rowExpanded(row);
     return [
       <tr key={row.key} className={rowClassName(row)} onClick={() => rowOnClick(row)}>
-        {columns.map(column => <td key={column.key} className={column.align && `text-${column.align}`}>{column.cell(row)}</td>)}
+        {columns.map(column => <td key={column.key} className={generateColumnClassName(column)}>{column.cell(row)}</td>)}
       </tr>,
       expanded && <tr hidden />,
       expanded && (
@@ -71,7 +79,7 @@ class SortableTable extends React.Component {
               <Header
                 active={column.active}
                 ascending={column.ascending}
-                className={column.align && `text-${column.align}`}
+                className={generateColumnClassName(column)}
                 key={index}
                 onSort={column.onSort ? () => column.onSort(!column.ascending) : null}
               >
@@ -87,9 +95,12 @@ class SortableTable extends React.Component {
           <tfoot>
             <tr>
               {columns.map(column => (
-                <th key={column.key} className={column.align && `text-${column.align}`}>
+                <td
+                  key={column.key}
+                  className={generateColumnClassName(column)}
+                >
                   {column.footer}
-                </th>
+                </td>
               ))}
             </tr>
           </tfoot>

diff --git a/test/components/SortableTable.spec.js b/test/components/SortableTable.spec.js
@@ -242,12 +242,26 @@ describe('<SortableTable />', () => {
     assert.equal(wrapper.find('thead th.text-center').length, 1, 'thead th.text-center incorrect');
     assert.equal(wrapper.find('thead th.text-right').length, 1, 'thead th.text-right incorrect');
 
-    assert.equal(wrapper.find('td.text-left').length, 3, 'td.text-left incorrect');
-    assert.equal(wrapper.find('td.text-center').length, 3, 'td.text-center incorrect');
-    assert.equal(wrapper.find('td.text-right').length, 3, 'td.text-right incorrect');
+    assert.equal(wrapper.find('tbody td.text-left').length, 3, 'tbody td.text-left incorrect');
+    assert.equal(wrapper.find('tbody td.text-center').length, 3, 'tbody td.text-center incorrect');
+    assert.equal(wrapper.find('tbody td.text-right').length, 3, 'tbody td.text-right incorrect');
 
-    assert.equal(wrapper.find('tfoot th.text-left').length, 1, 'tfoot th.text-left incorrect');
-    assert.equal(wrapper.find('tfoot th.text-center').length, 1, 'tfoot th.text-center incorrect');
-    assert.equal(wrapper.find('tfoot th.text-right').length, 1, 'tfoot th.text-right incorrect');
+    assert.equal(wrapper.find('tfoot td.text-left').length, 1, 'tfoot td.text-left incorrect');
+    assert.equal(wrapper.find('tfoot td.text-center').length, 1, 'tfoot td.text-center incorrect');
+    assert.equal(wrapper.find('tfoot td.text-right').length, 1, 'tfoot td.text-right incorrect');
+  });
+
+  it('should render correct column classnames when present', () => {
+    const columns = [
+      { header: 'Default', cell: () => '-', footer: '-' },
+      { header: 'Left', cell: () => '-', footer: '-', className: 'whatever' }
+    ];
+    const wrapper = mount(<SortableTable columns={columns} rows={[1, 2, 3]} />);
+
+    assert.equal(wrapper.find('thead th.whatever').length, 1, 'thead th.whatever incorrect');
+
+    assert.equal(wrapper.find('tbody td.whatever').length, 3, 'tbody td.whatever incorrect');
+
+    assert.equal(wrapper.find('tfoot td.whatever').length, 1, 'tfoot td.whatever incorrect');
   });
 });