From ba154e59ba3b46a10b3f058eb7858d5d8012ec03 Mon Sep 17 00:00:00 2001
From: Nigel Pepper <npepper@pivotal.io>
Date: Mon, 10 Nov 2014 18:10:40 -0500
Subject: [PATCH] feat(table-sortable): add optional additional classes to
 table

[#80914122]

Signed-off-by: Bebe Peng <bpeng@pivotal.io>
---
 src/pivotal-ui/components/tables.scss         |  3 ++-
 src/pivotal-ui/javascripts/table-sortable.jsx |  5 ++++-
 test/spec/javascripts/table_sortable_spec.js  | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pivotal-ui/components/tables.scss b/src/pivotal-ui/components/tables.scss
index fb871aaf7..92d481166 100644
--- a/src/pivotal-ui/components/tables.scss
+++ b/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')
   );
diff --git a/src/pivotal-ui/javascripts/table-sortable.jsx b/src/pivotal-ui/javascripts/table-sortable.jsx
index b44b9bebf..83a01875b 100644
--- a/src/pivotal-ui/javascripts/table-sortable.jsx
+++ b/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}
diff --git a/test/spec/javascripts/table_sortable_spec.js b/test/spec/javascripts/table_sortable_spec.js
index 8157e0971..c964872dc 100644
--- a/test/spec/javascripts/table_sortable_spec.js
+++ b/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');