diff --git a/docs/components/TableView.jsx b/docs/components/TableView.jsx index 19ff45759..c84a2ab53 100644 --- a/docs/components/TableView.jsx +++ b/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 ( @@ -80,6 +81,7 @@ export default class TableView extends PureComponent {
!this.state.tableFilter || _.includes( [rowData.name.first, rowData.name.last].join(" "), @@ -113,6 +115,7 @@ export default class TableView extends PureComponent { )}} noWrap + width="15%" /> [r.name.first, r.name.last].join(" ")} - width="25%" + width="15%" /> r.age}} sortable sortValueFn={r => r.age} + width="10%" /> r.status} + width="10%" /> r.notes}} - width="100%" + width="50%" />
@@ -176,10 +181,29 @@ export default class TableView extends PureComponent { {" "} Dynamic cell class names + - {column.header && column.header.content} + {column.header && column.header.content || (bodyScroll ? "\u00a0" : null) /*   */ } ))} + { bodyScroll ?   : null } ); } Header.propTypes = { + bodyScroll: PropTypes.bool, children: PropTypes.arrayOf(MorePropTypes.instanceOfComponent(Column)), disableSort: PropTypes.bool, onSortChange: PropTypes.func, diff --git a/src/Table/Table.jsx b/src/Table/Table.jsx index 259ba8f7c..7e5e339ee 100644 --- a/src/Table/Table.jsx +++ b/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 ( - -
this._toggleSort(columnID)} sortState={sortState}> +
+
this._toggleSort(columnID)} sortState={sortState} bodyScroll={bodyScroll}> {columns}
- + {displayedData.length === 0 ? ( @@ -309,7 +317,7 @@ export class Table extends Component { onClick={e => onRowClick && onRowClick(e, rowIDFn(rowData), rowData)} > {columns.map(({props: col}) => ( - + {col.cell.renderer(rowData)} ))} @@ -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; diff --git a/src/Table/Table.less b/src/Table/Table.less index 783b331e5..cc894f2d8 100644 --- a/src/Table/Table.less +++ b/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; +} diff --git a/test/Button_test.jsx b/test/Button_test.jsx index c79f1c77f..aea23f759 100644 --- a/test/Button_test.jsx +++ b/test/Button_test.jsx @@ -29,7 +29,7 @@ describe("Button", () => { it("throws an error for small, destructive buttons", () => { assert.throws(() => { shallow(