feat(table-sortable): add optional additional classes to table

[#80914122]

Signed-off-by: Bebe Peng <bpeng@pivotal.io>

src/pivotal-ui/components/tables.scss

@@ -396,7 +396,8 @@ $(function() {
   React.renderComponent(
     TableSortable({
       data: data,
-      columns: columns
+      columns: columns,
+      classes: ['table-data', 'table-light']
     }),
     document.getElementById('sortable-table-react-example')
   );

src/pivotal-ui/javascripts/table-sortable.jsx

@@ -102,8 +102,11 @@ var TableSortable = module.exports = React.createClass({
       );
     }, this);
 
+    var defaultClasses = ['table', 'table-sortable'];
+    var allClasses = defaultClasses.concat(this.props.classes).join(' ');
+
     return (
-      <table className='table table-data table-sortable'>
+      <table className={allClasses}>
         <thead>
           <tr>
             {headings}

test/spec/javascripts/table_sortable_spec.js

@@ -66,6 +66,21 @@ describe('TableSortable', function() {
     expect(this.$table.find('th:contains("Unsortable")')).not.toHaveClass('sortable');
   });
 
+  it('adds the additional classes specified in the "classes" property', function() {
+    this.tableSortable = TableSortable({
+      data: this.data,
+      columns: this.columns,
+      classes: ['table-light']
+    });
+    React.renderComponent(this.tableSortable, this.node);
+    this.$table = $('#container table.table-sortable');
+
+    expect(this.$table).toHaveClass('table');
+    expect(this.$table).toHaveClass('table-sortable');
+
+    expect(this.$table).toHaveClass('table-light');
+  });
+
   it('sorts table rows by the first column in ascending order by default', function() {
     expect(this.$table.find('th:contains("Title")')).toHaveClass('sorted-asc');