Body scroll

docs/components/TableView.jsx

@@ -19,6 +19,7 @@ export default class TableView extends PureComponent {
       enableDynamicCellClass: false,
       enableRowClick: true,
       tableFilter: "",
+      bodyScroll: false,
     };
   }
 
@@ -48,7 +49,7 @@ export default class TableView extends PureComponent {
 
   render() {
     const {cssClass} = TableView;
-    const {enableDynamicCellClass, enableRowClick, tableData} = this.state;
+    const {enableDynamicCellClass, enableRowClick, bodyScroll, tableData} = this.state;
 
     return (
       <View className={cssClass.CONTAINER} title="Table">
@@ -80,6 +81,7 @@ export default class TableView extends PureComponent {
           <div style={{marginTop: "20px"}}>
             <ExampleCode>
               <Table
+                bodyScroll={this.state.bodyScroll}
                 data={tableData}
                 filter={rowData => !this.state.tableFilter || _.includes(
                   [rowData.name.first, rowData.name.last].join(" "),
@@ -113,6 +115,7 @@ export default class TableView extends PureComponent {
                     </ModalButton>
                   )}}
                   noWrap
+                  width="15%"
                 />
 
                 <Table.Column
@@ -124,7 +127,7 @@ export default class TableView extends PureComponent {
                   }}
                   sortable
                   sortValueFn={r => [r.name.first, r.name.last].join(" ")}
-                  width="25%"
+                  width="15%"
                 />
 
                 <Table.Column
@@ -133,6 +136,7 @@ export default class TableView extends PureComponent {
                   cell={{renderer: r => r.age}}
                   sortable
                   sortValueFn={r => r.age}
+                  width="10%"
                 />
 
                 <Table.Column
@@ -147,13 +151,14 @@ export default class TableView extends PureComponent {
                   }}
                   sortable
                   sortValueFn={r => r.status}
+                  width="10%"
                 />
 
                 <Table.Column
                   id="notes"
                   header={{content: "Notes"}}
                   cell={{renderer: r => r.notes}}
-                  width="100%"
+                  width="50%"
                 />
               </Table>
             </ExampleCode>
@@ -176,10 +181,29 @@ export default class TableView extends PureComponent {
             {" "}
             Dynamic cell class names
           </label>
+          <label className={cssClass.CONFIG}>
+            <input
+              type="checkbox"
+              checked={bodyScroll}
+              onChange={({target}) => this.setState({bodyScroll: target.checked})}
+            />
+            {" "}
+            Body Scroll
+          </label>
         </Example>
 
         <PropDocumentation
           availableProps={[
+            {
+              name: "bodyScroll",
+              type: "Boolean",
+              description: "Adds a scroll bar to the table's body. The body's height is set to 80vh, so that the whole"
+                + " table will fit on one page. Since the header and body are spaced independently, you must specify"
+                + " column width percentages for each column. If you fail to do this, an error will appear in the"
+                + " console.",
+              defaultValue: "False",
+              optional: true,
+            },
             {
               name: "data",
               type: "Array",

src/Table/Header.jsx

@@ -7,7 +7,7 @@ import HeaderCell from "./HeaderCell";
 import MorePropTypes from "../utils/MorePropTypes";
 
 
-export default function Header({children, disableSort, onSortChange, sortState}) {
+export default function Header({bodyScroll, children, disableSort, onSortChange, sortState}) {
   const {cssClass} = Header;
 
   return (
@@ -22,15 +22,17 @@ export default function Header({children, disableSort, onSortChange, sortState})
             sortable={column.sortable && !disableSort}
             width={column.width}
           >
-            {column.header && column.header.content}
+            {column.header && column.header.content || (bodyScroll ? "\u00a0" : null) /*   */ }
           </HeaderCell>
         ))}
+        { bodyScroll ? <td style={{minWidth: "13px", maxWidth: "13px"}}>&nbsp;</td> : null }
       </tr>
     </thead>
   );
 }
 
 Header.propTypes = {
+  bodyScroll: PropTypes.bool,
   children: PropTypes.arrayOf(MorePropTypes.instanceOfComponent(Column)),
   disableSort: PropTypes.bool,
   onSortChange: PropTypes.func,

src/Table/Table.jsx

@@ -39,6 +39,13 @@ export class Table extends Component {
         }
       }
     }
+    if (props.bodyScroll) {
+      for (const child of props.children) {
+        if (!child.props.width) {
+          console.error("Not setting width for all columns when bodyScroll is true will cause alignment issues.");
+        }
+      }
+    }
 
     this.state = {
       currentPage: props.initialPage || 1,
@@ -263,6 +270,7 @@ export class Table extends Component {
 
   render() {
     const {
+      bodyScroll,
       children,
       className,
       fixed,
@@ -287,11 +295,11 @@ export class Table extends Component {
     const disableSort = numPages <= 1 && displayedData.length <= 1;
 
     return (
-      <table className={classnames(cssClass.TABLE, fixed && cssClass.FIXED, className)}>
-        <Header disableSort={disableSort} onSortChange={columnID => this._toggleSort(columnID)} sortState={sortState}>
+      <table className={classnames(cssClass.TABLE, fixed && cssClass.FIXED, className, bodyScroll && cssClass.BODY_SCROLL)} >
+        <Header disableSort={disableSort} onSortChange={columnID => this._toggleSort(columnID)} sortState={sortState} bodyScroll={bodyScroll}>
           {columns}
         </Header>
-        <tbody className={cssClass.BODY}>
+        <tbody className={cssClass.BODY} >
           {displayedData.length === 0 ? (
             <tr className={cssClass.ROW}>
               <Cell className={cssClass.NO_DATA} colSpan={columns.length} noWrap>
@@ -309,7 +317,7 @@ export class Table extends Component {
               onClick={e => onRowClick && onRowClick(e, rowIDFn(rowData), rowData)}
             >
               {columns.map(({props: col}) => (
-                <Cell className={getCellClassName(col, rowData)} key={col.id} noWrap={col.noWrap}>
+                <Cell className={getCellClassName(col, rowData)} key={col.id} noWrap={col.noWrap} width={col.width}>
                   {col.cell.renderer(rowData)}
                 </Cell>
               ))}
@@ -343,6 +351,7 @@ function getCellClassName(columnProps, rowData) {
 }
 
 Table.propTypes = {
+  bodyScroll: PropTypes.bool,
   children: PropTypes.arrayOf(MorePropTypes.instanceOfComponent(Column)),
   className: PropTypes.string,
   data: PropTypes.array,
@@ -378,6 +387,7 @@ Table.cssClass = {
   NO_DATA: "Table--no_data_cell",
   ROW: "Table--row",
   TABLE: "Table",
+  BODY_SCROLL: "Table--body_scroll",
 };
 
 Table.Column = Column;

src/Table/Table.less

@@ -28,3 +28,22 @@
   .tint(background-color, @neutral_silver, 5);
   cursor: pointer;
 }
+
+.Table--body_scroll tbody {
+  box-sizing: border-box;
+  display: block;
+  max-height: 80vh;
+  overflow-y: scroll;
+  width: 100%;
+}
+
+.Table--body_scroll thead {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+}
+
+.Table--body_scroll tr {
+  box-sizing: border-box;
+  display: block;
+}

test/Button_test.jsx

@@ -29,7 +29,7 @@ describe("Button", () => {
   it("throws an error for small, destructive buttons", () => {
     assert.throws(() => {
       shallow(<Button size="small" type="destructive" value="A bad button" />);
-    }, "Small destructive buttons are not supported");
+    }, {message: "Small destructive buttons are not supported"});
   });
 
   it("renders a <button> element with [type=button]", () => {
@@ -56,7 +56,7 @@ describe("Button", () => {
   it("throws an error if href and submit are both set", () => {
     assert.throws(() => {
       shallow(<Button value="A bad button" href="http://clever.com" submit />);
-    }, "Buttons with href do not support the submit option");
+    }, {message: "Buttons with href do not support the submit option"});
   });
 
   it("calls the onClick handler when clicked", () => {