feat(Table): Rename SortableTable React component to Table

* We only have one Table component * Fix styling when table has no sortable columns [#115065983] BREAKING CHANGE: SortableTable React component now called Table Signed-off-by: Elena Sharma <esharma@pivotal.io>
pivotal-cf · Mar 14, 2016 · b2ccf2a · b2ccf2a
1 parent 241f882
commit b2ccf2a
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 40 deletions.
diff --git a/...act/sortable-table/sortable-table_spec.js → ...spec/pivotal-ui-react/table/table_spec.js b/...act/sortable-table/sortable-table_spec.js → ...spec/pivotal-ui-react/table/table_spec.js
@@ -1,7 +1,7 @@
 require('../spec_helper');
-import {SortableTable, TableCell, TableHeader, TableRow} from '../../../src/pivotal-ui-react/sortable-table/sortable-table';
+import {Table, TableCell, TableHeader, TableRow} from '../../../src/pivotal-ui-react/table/table';
 
-describe('SortableTable', function() {
+describe('Table', function() {
   let clickSpy;
   describe('with multiple columns', function() {
     clickSpy = jasmine.createSpy('click');
@@ -55,7 +55,7 @@ describe('SortableTable', function() {
 
     function renderSortableTable(data, props = {}) {
       ReactDOM.render((
-          <SortableTable columns={columns} data={data} {...props}/>
+          <Table columns={columns} data={data} {...props}/>
         ),
         root
       );
@@ -240,7 +240,7 @@ describe('SortableTable', function() {
       const data = [{title: 'foo'}, { title: 'sup'}, { title: 'yee'}];
 
       ReactDOM.render((
-          <SortableTable columns={columns} data={data} />
+          <Table columns={columns} data={data} />
         ),
         root
       );
@@ -282,7 +282,7 @@ describe('SortableTable', function() {
       ];
 
       ReactDOM.render(
-        <SortableTable columns={columns} data={data}/>,
+        <Table columns={columns} data={data}/>,
         root
       );
     });
@@ -326,7 +326,7 @@ describe('SortableTable', function() {
       ];
 
       ReactDOM.render(
-        <SortableTable columns={columns} data={data}/>,
+        <Table columns={columns} data={data}/>,
         root
       );
     });
@@ -368,7 +368,7 @@ describe('SortableTable', function() {
       ];
 
       ReactDOM.render((
-          <SortableTable columns={columns} data={data} CustomRow={CustomRow}/>
+          <Table columns={columns} data={data} CustomRow={CustomRow}/>
         ),
         root
       );
@@ -390,6 +390,29 @@ describe('SortableTable', function() {
     });
   });
 
+  describe('with no sortable columns', function() {
+    it('does not assign sorted-asc or sorted-des to a column', function() {
+      const columns = [
+        {
+          attribute: 'title',
+          displayName: 'Title',
+          sortable: false
+        }
+      ];
+
+      const data = [{title: 'foo'}, { title: 'sup'}, { title: 'yee'}];
+
+      ReactDOM.render((
+          <Table columns={columns} data={data} />
+        ),
+        root
+      );
+
+      expect('th').not.toHaveClass('sorted-asc');
+      expect('th').not.toHaveClass('sorted-desc')
+    });
+  });
+
   it('respects default sort', function() {
     const columns = [
       {
@@ -416,7 +439,7 @@ describe('SortableTable', function() {
     ];
 
     ReactDOM.render((
-        <SortableTable columns={columns} data={data} defaultSort='theDefault'/>
+        <Table columns={columns} data={data} defaultSort='theDefault'/>
       ),
       root
     );

diff --git a/...otal-ui-react/sortable-table/package.json → ...y/src/pivotal-ui-react/table/package.json b/...otal-ui-react/sortable-table/package.json → ...y/src/pivotal-ui-react/table/package.json
diff --git a/...ui-react/sortable-table/sortable-table.js → library/src/pivotal-ui-react/table/table.js b/...ui-react/sortable-table/sortable-table.js → library/src/pivotal-ui-react/table/table.js
@@ -38,7 +38,7 @@ export const TableCell = (props) => <td {...props}/>;
 
 export const TableRow = (props) => <tr {...props}/>;
 
-export class SortableTable extends React.Component {
+export class Table extends React.Component {
   constructor(props, context) {
     super(props, context);
     const {columns, defaultSort} = this.props;
@@ -47,8 +47,7 @@ export class SortableTable extends React.Component {
       return defaultSort ? attribute === defaultSort : sortable;
     });
 
-    // If none of the columns are sortable we default to the 0th column
-    this.state = {sortColumn: sortCol === -1 ? 0 : sortCol, sortAscending: true};
+    this.state = {sortColumn: sortCol, sortAscending: true};
   }
 
   static propTypes = {
@@ -64,7 +63,7 @@ export class SortableTable extends React.Component {
 
   sortedRows() {
     const {sortColumn, sortAscending} = this.state;
-    const {columns, data, CustomRow} = this.props;
+    const {columns, data} = this.props;
 
     const sortedData = sortBy(data, (datum) => {
       const column = columns[sortColumn];
@@ -73,7 +72,14 @@ export class SortableTable extends React.Component {
     });
 
     if(!sortAscending) sortedData.reverse();
-    return sortedData.map((datum, rowKey) => {
+
+    return this.rows(sortedData);
+  }
+
+  rows(data) {
+    const {columns, CustomRow} = this.props;
+
+    return data.map((datum, rowKey) => {
       const cells = columns.map(({attribute, CustomCell}, key) => {
         const Cell = CustomCell || TableCell;
         return <Cell key={key} index={rowKey} value={datum[attribute]} rowDatum={datum}>{datum[attribute]}</Cell>;
@@ -109,15 +115,19 @@ export class SortableTable extends React.Component {
   }
 
   render() {
+    const {sortColumn} = this.state;
+    const {data} = this.props;
     const props = mergeProps(this.props, {className: ['table', 'table-sortable', 'table-data']});
 
+    const rows = (sortColumn === -1) ? this.rows(data) : this.sortedRows();
+
     return (
       <table {...props} >
         <thead>
           <tr>{this.renderHeaders()}</tr>
         </thead>
         <tbody>
-          {this.sortedRows()}
+          {rows}
         </tbody>
       </table>
     );

diff --git a/library/src/pivotal-ui/javascripts/components.js b/library/src/pivotal-ui/javascripts/components.js
@@ -101,10 +101,10 @@ module.exports = {
   PortalDestination: require('pui-react-portals').PortalDestination,
   StreamList: require('pui-react-stream-list').StreamList,
   StreamListItem: require('pui-react-stream-list').StreamListItem,
-  SortableTable: require('pui-react-sortable-table').SortableTable,
-  TableHeader: require('pui-react-sortable-table').TableHeader,
-  TableCell: require('pui-react-sortable-table').TableCell,
-  TableRow: require('pui-react-sortable-table').TableRow,
+  Table: require('pui-react-table').Table,
+  TableHeader: require('pui-react-table').TableHeader,
+  TableCell: require('pui-react-table').TableCell,
+  TableRow: require('pui-react-table').TableRow,
   ...autocomplete,
   ...selectFancy,
   TileLayout: TileLayout};
diff --git a/styleguide/docs/react/sortable-table.js → styleguide/docs/react/table.js b/styleguide/docs/react/sortable-table.js → styleguide/docs/react/table.js
@@ -6,35 +6,26 @@ categories:
  - react_base_tables
  - react_all
 ---
-*/
-
-/*doc
 
 <code class="pam">
 <i class="fa fa-download" alt="Install the Component">
-npm install pui-react-sortable-table --save
+npm install pui-react-table --save
 </i>
 </code>
 
 Require the subcomponents:
 
 ```
-var SortableTable = require('pui-react-sortable-table').SortableTable;
-var TableHeader = require('pui-react-sortable-table').TableHeader;
-var TableRow = require('pui-react-sortable-table').TableRow;
-var TableCell = require('pui-react-sortable-table').TableCell;
+var Table = require('pui-react-table').Table;
+var TableHeader = require('pui-react-table').TableHeader;
+var TableRow = require('pui-react-table').TableRow;
+var TableCell = require('pui-react-table').TableCell;
 ```
 
----
-title: Sortable
-name: table_sortable_react
-parent: table_react
----
-
-The `SortableTable` component is a robust component that offers a styled table with fully
+The `Table` component is a robust component that offers a styled table with fully
 functioning sort. If the rows change, the content on the page will update.
 
-The `SortableTable` expects the following properties:
+The `Table` expects the following properties:
 
 Property     | Required? | Type             | Description
 -------------| ----------| -----------------| --------------------------------------------------------------------------
@@ -105,11 +96,11 @@ var data = [
 ```
 
 ```react_example
-<SortableTable columns={columns} data={data} defaultSort='instances'/>
+<Table columns={columns} data={data} defaultSort='instances'/>
 ```
 
 The `TableRow` component is provided for users who wish to customize their rows
-with the `CustomRow` prop to `SortableTable`. If a custom row is provided, the table will use that
+with the `CustomRow` prop to `Table`. If a custom row is provided, the table will use that
 component to render each row, giving it a `children` prop representing the cells for that row and `index`
 representing the (zero-indexed) row number.
 
@@ -129,7 +120,7 @@ var CustomRow = React.createClass({
 ```
 
 ```react_example
-<SortableTable columns={columns} data={data} CustomRow={CustomRow}/>
+<Table columns={columns} data={data} CustomRow={CustomRow}/>
 ```
 
  The `TableCell` component is provided for users who wish to customize their cells
@@ -171,7 +162,7 @@ var CustomRow = React.createClass({
  ```
 
  ```react_example
- <SortableTable columns={customCellColumns} data={data}/>
+ <Table columns={customCellColumns} data={data}/>
  ```
 
 */
diff --git a/styleguide/package.json b/styleguide/package.json
@@ -79,7 +79,7 @@
     "pui-react-portals": "file:../library/dist/react/portals",
     "pui-react-radio": "file:../library/dist/react/radio",
     "pui-react-ribbons": "file:../library/dist/react/ribbons",
-    "pui-react-sortable-table": "file:../library/dist/react/sortable-table",
+    "pui-react-table": "file:../library/dist/react/table",
     "pui-react-stream-list": "file:../library/dist/react/stream-list",
     "pui-react-tabs": "file:../library/dist/react/tabs",
     "pui-react-tile-layout": "file:../library/dist/react/tile-layout",

diff --git a/styleguide/src/pivotal-ui-components.js b/styleguide/src/pivotal-ui-components.js
@@ -36,7 +36,7 @@ assignToGlobal([
   require('pui-react-portals'),
   require('pui-react-radio'),
   require('pui-react-ribbons'),
-  require('pui-react-sortable-table'),
+  require('pui-react-table'),
   require('pui-react-stream-list'),
   require('pui-react-tabs'),
   require('pui-react-tile-layout'),