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 (
-
+
{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');