feat(tables): Add width to columns metadata

[#144241651] Signed-off-by: Ming Xiao <mxiao@pivotal.io>
pivotal-cf · May 26, 2017 · e3c7d45 · e3c7d45
1 parent daa4664
commit e3c7d45
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 10 deletions.
diff --git a/library/spec/pivotal-ui-react/table/flex-table_spec.js b/library/spec/pivotal-ui-react/table/flex-table_spec.js
@@ -316,5 +316,36 @@ describe('Flex Table', () => {
         expect($('.td').length).toBe(2);
       });
     });
+
+    describe('cell width', () => {
+      beforeEach(() => {
+        const columns = [{
+          attribute: 'guid',
+          width: '100px'
+        }];
+        ReactDOM.render(<FlexTable {...{
+          columns,
+          data
+        }}/>, root);
+      });
+
+      it('adds col-fixed class to the header cells', () => {
+        expect('.tr:eq(0) .th:eq(0)').toHaveClass('col-fixed');
+      });
+
+      it('adds width style to the header cells', () => {
+        expect('.tr:eq(0) .th:eq(0)').toHaveAttr('style', 'width: 100px;');
+      });
+
+      it('adds col-fixed class to the body cells', () => {
+        expect('.tr:eq(1) .td:eq(0)').toHaveClass('col-fixed');
+        expect('.tr:eq(2) .td:eq(0)').toHaveClass('col-fixed');
+      });
+
+      it('adds width style to the body cells', () => {
+        expect('.tr:eq(1) .td:eq(0)').toHaveAttr('style', 'width: 100px;');
+        expect('.tr:eq(2) .td:eq(0)').toHaveAttr('style', 'width: 100px;');
+      });
+    });
   });
 });
diff --git a/library/src/pivotal-ui-react/table/table.js b/library/src/pivotal-ui-react/table/table.js
@@ -52,7 +52,10 @@ export class TableCell extends React.Component {
   };
 
   render() {
-    let {children, index, rowDatum, ...others} = this.props;
+    let {children, ...others} = this.props;
+
+    ['attribute', 'displayName', 'index', 'headerProps', 'rowDatum', 'sortable', 'sortBy']
+      .forEach(prop => delete others[prop]);
 
     return (<td {...others}>
       {children}
@@ -129,11 +132,24 @@ export class Table extends React.Component {
   rows = data => {
     const {bodyRowClassName, columns, CustomRow} = this.props;
 
-    return data.map((datum, rowKey) => {
-      const cells = columns.map(({attribute, CustomCell, cellClass}, key) => {
+    return data.map((rowDatum, rowKey) => {
+      const cells = columns.map((opts, key) => {
+        const {attribute, CustomCell, width} = opts;
+        let style, {cellClass} = opts;
+        if (width) {
+          style = {width};
+          opts.cellClass = classnames(cellClass, 'col-fixed');
+        }
         const Cell = CustomCell || this.defaultCell;
-        return (<Cell key={key} index={rowKey} value={datum[attribute]} className={cellClass}
-                      rowDatum={datum}>{datum[attribute]}</Cell>);
+        const cellProps = {
+          key,
+          index: rowKey,
+          value: rowDatum[attribute],
+          rowDatum,
+          style,
+          ...opts
+        };
+        return (<Cell {...cellProps}>{rowDatum[attribute]}</Cell>);
       });
 
       const Row = CustomRow || this.defaultRow;
@@ -149,7 +165,7 @@ export class Table extends React.Component {
   renderHeaders = () => {
     const {sortColumn, sortOrder} = this.state;
     return this.props.columns.map((column, index) => {
-      let {attribute, sortable, displayName, cellClass, headerProps = {}} = column;
+      let {attribute, sortable, displayName, cellClass, headerProps = {}, width} = column;
       const isSortColumn = column === sortColumn;
       let className, icon;
       if (isSortColumn) {
@@ -168,6 +184,14 @@ export class Table extends React.Component {
         onSortableTableHeaderClick: () => this.updateSort(column, isSortColumn)
       };
 
+      if (width) {
+        headerProps = {
+          ...headerProps,
+          className: classnames(className, 'col-fixed'),
+          style: {width}
+        };
+      }
+
       const Header = this.defaultHeader;
       return (<Header {...headerProps}>
         <div>{displayName || attribute}{icon}</div>
@@ -219,12 +243,17 @@ class FlexTableHeader extends TableHeader {
 export class FlexTableCell extends React.Component {
   static propTypes = {
     index: PropTypes.number,
-    rowDatum: PropTypes.any
+    rowDatum: PropTypes.any,
+    cellClass: PropTypes.string
   };
 
   render() {
-    let {children, index, rowDatum, className, ...others} = this.props;
-    const classes = classnames(className, 'td', 'col');
+    let {cellClass, children, className, ...others} = this.props;
+
+    ['attribute', 'displayName', 'index', 'headerProps', 'rowDatum', 'sortable', 'sortBy']
+      .forEach(prop => delete others[prop]);
+
+    const classes = classnames(className, 'td', 'col', cellClass);
     const props = mergeProps(others, {className: classes});
 
     return (<div {...props}>

diff --git a/styleguide/docs/react/table.js b/styleguide/docs/react/table.js
@@ -215,7 +215,8 @@ const columns = [
     attribute: 'title',
     displayName: 'Title',
     sortable: false,
-    cellClass: 'col-2'
+    cellClass: 'col-2',
+    width: '100px'
   },
   {
     attribute: 'instances',