Added support to fix columns to the right side of the table. (schrodinger#250)

garytang8 · wcjordan · commit 0a26dd1a1298 · 2017-10-27T22:08:54.000-04:00
* Added support to fix columns to right side of table.

* Added new `fixedRight` prop type to `FixedDataTableColumn`
diff --git a/examples/FixedRightColumnsExample.js b/examples/FixedRightColumnsExample.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright Schrodinger, LLC
+ */
+
+"use strict";
+
+const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
+const { DateCell, ImageCell, LinkCell, TextCell } = require('./helpers/cells');
+const { Table, Column, Cell } = require('fixed-data-table-2');
+const React = require('react');
+
+class FixedRightColumnsExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataList: new FakeObjectDataListStore(1000000),
+    };
+  }
+
+  render() {
+    var {dataList} = this.state;
+    return (
+      <Table
+        rowHeight={50}
+        headerHeight={50}
+        rowsCount={dataList.getSize()}
+        width={1000}
+        height={500}
+        {...this.props}>
+        <Column
+          columnKey="avatar"
+          cell={<ImageCell data={dataList} />}
+          fixed={true}
+          width={50}
+        />
+        <Column
+          columnKey="firstName"
+          header={<Cell>First Name</Cell>}
+          cell={<LinkCell data={dataList} />}
+          fixedRight={true}
+          width={100}
+        />
+        <Column
+          columnKey="lastName"
+          header={<Cell>Last Name</Cell>}
+          cell={<TextCell data={dataList} />}
+          fixedRight={true}
+          width={100}
+        />
+        <Column
+          columnKey="city"
+          header={<Cell>City</Cell>}
+          cell={<TextCell data={dataList} />}
+          width={100}
+        />
+        <Column
+          columnKey="street"
+          header={<Cell>Street</Cell>}
+          cell={<TextCell data={dataList} />}
+          width={200}
+        />
+        <Column
+          columnKey="zipCode"
+          header={<Cell>Zip Code</Cell>}
+          cell={<TextCell data={dataList} />}
+          width={200}
+        />
+        <Column
+          columnKey="email"
+          header={<Cell>Email</Cell>}
+          cell={<LinkCell data={dataList} />}
+          width={200}
+        />
+        <Column
+          columnKey="date"
+          header={<Cell>DOB</Cell>}
+          cell={<DateCell data={dataList} />}
+          width={200}
+        />
+      </Table>
+    );
+  }
+}
+
+module.exports = FixedRightColumnsExample;
diff --git a/site/Constants.js b/site/Constants.js
@@ -36,6 +36,12 @@ exports.ExamplePages = {
     title: 'With JSON Data',
     description: 'A basic table example with two fixed columns, fed in some JSON data.',
   },
+  FIXED_RIGHT_COLUMNS_EXAMPLE: {
+    location: 'fixed-right-columns.html',
+    fileName: 'FixedRightColumnsExample.js',
+    title: 'Fixed Right Columns',
+    description: 'A table example that has a columns fixed to the right side of the table.',
+  },
   FLEXGROW_EXAMPLE: {
     location: 'example-flexgrow.html',
     fileName: 'FlexGrowExample.js',
diff --git a/site/examples/ExamplesPage.js b/site/examples/ExamplesPage.js
@@ -45,6 +45,7 @@ var EXAMPLE_COMPONENTS = {
   [ExamplePages.TOOLTIP_EXAMPLE.location]: require('../../examples/TooltipExample'),
   [ExamplePages.LONG_CLICK_EXAMPLE.location]: require('../../examples/LongClickExample'),
   [ExamplePages.CONTEXT_EXAMPLE.location]: require('../../examples/ContextExample'),
+  [ExamplePages.FIXED_RIGHT_COLUMNS_EXAMPLE.location]: require('../../examples/FixedRightColumnsExample'),
 };
 
 class ExamplesPage extends React.Component {
diff --git a/src/FixedDataTable.js b/src/FixedDataTable.js
@@ -571,6 +571,7 @@ var FixedDataTable = createReactClass({
           offsetTop={0}
           scrollLeft={state.scrollX}
           fixedColumns={state.groupHeaderFixedColumns}
+          fixedRightColumns={state.groupHeaderFixedRightColumns}
           scrollableColumns={state.groupHeaderScrollableColumns}
           onColumnResize={this._onColumnResize}
           onColumnReorder={onColumnReorder}
@@ -662,6 +663,7 @@ var FixedDataTable = createReactClass({
           zIndex={1}
           offsetTop={footOffsetTop}
           fixedColumns={state.footFixedColumns}
+          fixedRightColumns={state.footFixedRightColumns}
           scrollableColumns={state.footScrollableColumns}
           scrollLeft={state.scrollX}
         />;
@@ -685,6 +687,7 @@ var FixedDataTable = createReactClass({
         offsetTop={headerOffsetTop}
         scrollLeft={state.scrollX}
         fixedColumns={state.headFixedColumns}
+        fixedRightColumns={state.headFixedRightColumns}
         scrollableColumns={state.headScrollableColumns}
         touchEnabled={state.touchScrollEnabled}
         onColumnResize={this._onColumnResize}
@@ -764,6 +767,7 @@ var FixedDataTable = createReactClass({
         firstRowIndex={state.firstRowIndex}
         firstRowOffset={state.firstRowOffset}
         fixedColumns={state.bodyFixedColumns}
+        fixedRightColumns={state.bodyFixedRightColumns}
         height={state.bodyHeight}
         offsetTop={offsetTop}
         onRowClick={state.onRowClick}
@@ -957,31 +961,38 @@ var FixedDataTable = createReactClass({
     var columnInfo = {};
     if (canReuseColumnSettings) {
       columnInfo.bodyFixedColumns = oldState.bodyFixedColumns;
+      columnInfo.bodyFixedRightColumns = oldState.bodyFixedRightColumns;
       columnInfo.bodyScrollableColumns = oldState.bodyScrollableColumns;
       columnInfo.headFixedColumns = oldState.headFixedColumns;
+      columnInfo.headFixedRightColumns = oldState.headFixedRightColumns;
       columnInfo.headScrollableColumns = oldState.headScrollableColumns;
       columnInfo.footFixedColumns = oldState.footFixedColumns;
+      columnInfo.footFixedRightColumns = oldState.footFixedRightColumns;
       columnInfo.footScrollableColumns = oldState.footScrollableColumns;
     } else {
       var bodyColumnTypes = this._splitColumnTypes(columns);
       columnInfo.bodyFixedColumns = bodyColumnTypes.fixed;
+      columnInfo.bodyFixedRightColumns = bodyColumnTypes.fixedRight;
       columnInfo.bodyScrollableColumns = bodyColumnTypes.scrollable;
 
       var headColumnTypes = this._splitColumnTypes(
         this._selectColumnElement(HEADER, columns)
       );
       columnInfo.headFixedColumns = headColumnTypes.fixed;
+      columnInfo.headFixedRightColumns = headColumnTypes.fixedRight;
       columnInfo.headScrollableColumns = headColumnTypes.scrollable;
 
       var footColumnTypes = this._splitColumnTypes(
         this._selectColumnElement(FOOTER, columns)
       );
       columnInfo.footFixedColumns = footColumnTypes.fixed;
+      columnInfo.footFixedRightColumns = footColumnTypes.fixedRight;
       columnInfo.footScrollableColumns = footColumnTypes.scrollable;
     }
 
     if (canReuseColumnGroupSettings) {
       columnInfo.groupHeaderFixedColumns = oldState.groupHeaderFixedColumns;
+      columnInfo.groupHeaderFixedRightColumns = oldState.groupHeaderFixedRightColumns;
       columnInfo.groupHeaderScrollableColumns =
         oldState.groupHeaderScrollableColumns;
     } else {
@@ -990,6 +1001,7 @@ var FixedDataTable = createReactClass({
           this._selectColumnElement(HEADER, columnGroups)
         );
         columnInfo.groupHeaderFixedColumns = groupHeaderColumnTypes.fixed;
+        columnInfo.groupHeaderFixedRightColumns = groupHeaderColumnTypes.fixedRight;
         columnInfo.groupHeaderScrollableColumns =
           groupHeaderColumnTypes.scrollable;
       }
@@ -1285,16 +1297,20 @@ var FixedDataTable = createReactClass({
 
   _splitColumnTypes(/*array*/ columns) /*object*/ {
     var fixedColumns = [];
+    var fixedRightColumns = [];
     var scrollableColumns = [];
     for (var i = 0; i < columns.length; ++i) {
       if (columns[i].props.fixed) {
         fixedColumns.push(columns[i]);
+      } else if (columns[i].props.fixedRight) {
+        fixedRightColumns.push(columns[i]);
       } else {
         scrollableColumns.push(columns[i]);
       }
     }
     return {
       fixed: fixedColumns,
+      fixedRight: fixedRightColumns,
       scrollable: scrollableColumns,
     };
   },
diff --git a/src/FixedDataTableBufferedRows.js b/src/FixedDataTableBufferedRows.js
@@ -30,6 +30,7 @@ var FixedDataTableBufferedRows = createReactClass({
     firstRowIndex: PropTypes.number.isRequired,
     firstRowOffset: PropTypes.number.isRequired,
     fixedColumns: PropTypes.array.isRequired,
+    fixedRightColumns: PropTypes.array.isRequired,
     height: PropTypes.number.isRequired,
     offsetTop: PropTypes.number.isRequired,
     onRowClick: PropTypes.func,
@@ -170,6 +171,7 @@ var FixedDataTableBufferedRows = createReactClass({
           scrollLeft={Math.round(props.scrollLeft)}
           offsetTop={Math.round(rowOffsetTop)}
           fixedColumns={props.fixedColumns}
+          fixedRightColumns={props.fixedRightColumns}
           scrollableColumns={props.scrollableColumns}
           onClick={props.onRowClick}
           onDoubleClick={props.onRowDoubleClick}
diff --git a/src/FixedDataTableColumn.js b/src/FixedDataTableColumn.js
@@ -31,6 +31,11 @@ class FixedDataTableColumn extends React.Component {
     */
    fixed: PropTypes.bool,
 
+   /**
+    * Controls if the column is fixed to the right side of the table when scrolling in the X axis.
+    */
+   fixedRight: PropTypes.bool,
+
    /**
     * The header cell for this column.
     * This can either be a string a React element, or a function that generates
@@ -181,6 +186,7 @@ class FixedDataTableColumn extends React.Component {
  static defaultProps = {
    allowCellsRecycling: false,
    fixed: false,
+   fixedRight: false,
  };
 
  render() {
diff --git a/src/FixedDataTableRow.js b/src/FixedDataTableRow.js
@@ -44,6 +44,11 @@ class FixedDataTableRowImpl extends React.Component {
      */
     fixedColumns: PropTypes.array.isRequired,
 
+    /**
+     * Array of <FixedDataTableColumn /> for the fixed columns positioned at end of the table.
+     */
+    fixedRightColumns: PropTypes.array.isRequired,
+
     /**
      * Height of the row.
      */
@@ -172,15 +177,39 @@ class FixedDataTableRowImpl extends React.Component {
         rowIndex={this.props.index}
       />;
     var columnsLeftShadow = this._renderColumnsLeftShadow(fixedColumnsWidth);
+    var fixedRightColumnsWidth = this._getColumnsWidth(this.props.fixedRightColumns);
+    var fixedRightColumns = 
+      <FixedDataTableCellGroup
+        key="fixed_right_cells"
+        isScrolling={this.props.isScrolling}
+        height={this.props.height}
+        cellGroupWrapperHeight={this.props.cellGroupWrapperHeight}
+        left={-this.props.width + fixedRightColumnsWidth}
+        width={fixedRightColumnsWidth}
+        zIndex={2}
+        columns={this.props.fixedRightColumns}
+        touchEnabled={this.props.touchEnabled}
+        onColumnResize={this.props.onColumnResize}
+        onColumnReorder={this.props.onColumnReorder}
+        onColumnReorderMove={this.props.onColumnReorderMove}
+        onColumnReorderEnd={this.props.onColumnReorderEnd}
+        isColumnReordering={this.props.isColumnReordering}
+        columnReorderingData={this.props.columnReorderingData}
+        rowHeight={this.props.height}
+        rowIndex={this.props.index}
+      />;
+    var fixedRightColumnsShdadow = fixedRightColumnsWidth ?
+      this._renderFixedRightColumnsShadow(this.props.width - fixedRightColumnsWidth - 5) : null;
     var scrollableColumns =
       <FixedDataTableCellGroup
         key="scrollable_cells"
         isScrolling={this.props.isScrolling}
         height={this.props.height}
         cellGroupWrapperHeight={this.props.cellGroupWrapperHeight}
+        align="right"
         left={this.props.scrollLeft}
         offsetLeft={fixedColumnsWidth}
-        width={this.props.width - fixedColumnsWidth}
+        width={this.props.width - fixedColumnsWidth - fixedRightColumnsWidth}
         zIndex={0}
         columns={this.props.scrollableColumns}
         touchEnabled={this.props.touchEnabled}
@@ -219,6 +248,8 @@ class FixedDataTableRowImpl extends React.Component {
           {fixedColumns}
           {scrollableColumns}
           {columnsLeftShadow}
+          {fixedRightColumns}
+          {fixedRightColumnsShdadow}
         </div>
         {rowExpanded && <div
           className={cx('fixedDataTableRowLayout/rowExpanded')}
@@ -271,7 +302,23 @@ class FixedDataTableRowImpl extends React.Component {
        height: dividerHeight
      };
      return <div className={className} style={style} />;
-   };
+  };
+
+  _renderFixedRightColumnsShadow = (/*number*/ left) => /*?object*/ {
+    var className = cx(
+      'fixedDataTableRowLayout/columnsShadow',
+      'fixedDataTableRowLayout/columnsRightShadow',
+      'fixedDataTableRowLayout/fixedColumnsDivider',
+      'public/fixedDataTableRow/columnsShadow',
+      'public/fixedDataTableRow/columnsRightShadow',
+      'public/fixedDataTableRow/fixedColumnsDivider'
+    );
+    var style = {
+      height: this.props.height,
+      left: left
+    };
+    return <div className={className} style={style} />;
+  };
 
   _renderColumnsRightShadow = (/*number*/ totalWidth) => /*?object*/ {
     if (Math.ceil(this.props.scrollLeft + this.props.width) < Math.floor(totalWidth)) {
