diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 0f436c108d0c97..3ef4c724f324cd 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -9,7 +9,9 @@ import keycode from 'keycode'; import Table, { TableBody, TableCell, + TableFooter, TableHead, + TablePagination, TableRow, TableSortLabel, } from 'material-ui/Table'; @@ -42,6 +44,7 @@ class EnhancedTableHead extends React.Component { onSelectAllClick: PropTypes.func.isRequired, order: PropTypes.string.isRequired, orderBy: PropTypes.string.isRequired, + rowCount: PropTypes.number.isRequired, }; createSortHandler = property => event => { @@ -49,15 +52,15 @@ class EnhancedTableHead extends React.Component { }; render() { - const { onSelectAllClick, order, orderBy, numSelected } = this.props; + const { onSelectAllClick, order, orderBy, numSelected, rowCount } = this.props; return ( 0 && numSelected < 5} - checked={numSelected === 5} + indeterminate={numSelected > 0 && numSelected < rowCount} + checked={numSelected === rowCount} onChange={onSelectAllClick} /> @@ -157,18 +160,31 @@ const styles = theme => ({ }); class EnhancedTable extends React.Component { - state = { - order: 'asc', - orderBy: 'calories', - selected: [], - data: [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9), - ], - }; + constructor(props) { + super(props); + this.state = { + order: 'asc', + orderBy: 'calories', + selected: [], + data: [ + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Donut', 452, 25.0, 51, 4.9), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Gingerbread', 356, 16.0, 49, 3.9), + createData('Honeycomb', 408, 3.2, 87, 6.5), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Jelly Bean', 375, 0.0, 94, 0.0), + createData('KitKat', 518, 26.0, 65, 7.0), + createData('Lollipop', 392, 0.2, 98, 0.0), + createData('Marshmallow', 318, 0, 81, 2.0), + createData('Nougat', 360, 19.0, 9, 37.0), + createData('Oreo', 437, 18.0, 63, 4.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + }; + } handleRequestSort = (event, property) => { const orderBy = property; @@ -178,9 +194,10 @@ class EnhancedTable extends React.Component { order = 'asc'; } - const data = this.state.data.sort( - (a, b) => (order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy]), - ); + const data = + order === 'desc' + ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)) + : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1)); this.setState({ data, order, orderBy }); }; @@ -220,11 +237,19 @@ class EnhancedTable extends React.Component { this.setState({ selected: newSelected }); }; + handleChangePage = (event, page) => { + this.setState({ page }); + }; + + handleChangeRowsPerPage = event => { + this.setState({ rowsPerPage: event.target.value }); + }; + isSelected = id => this.state.selected.indexOf(id) !== -1; render() { const classes = this.props.classes; - const { data, order, orderBy, selected } = this.state; + const { data, order, orderBy, selected, rowsPerPage, page } = this.state; return ( @@ -236,9 +261,10 @@ class EnhancedTable extends React.Component { orderBy={orderBy} onSelectAllClick={this.handleSelectAllClick} onRequestSort={this.handleRequestSort} + rowCount={data.length} /> - {data.map(n => { + {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => { const isSelected = this.isSelected(n.id); return ( + + + ); diff --git a/docs/src/pages/demos/tables/tables.md b/docs/src/pages/demos/tables/tables.md index c84a9a2b9b52d3..57a53911212a12 100644 --- a/docs/src/pages/demos/tables/tables.md +++ b/docs/src/pages/demos/tables/tables.md @@ -1,5 +1,5 @@ --- -components: Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel +components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel --- # Tables diff --git a/docs/src/pages/getting-started/supported-components.md b/docs/src/pages/getting-started/supported-components.md index 7f7d01fd979675..bcd04949ea863b 100644 --- a/docs/src/pages/getting-started/supported-components.md +++ b/docs/src/pages/getting-started/supported-components.md @@ -42,7 +42,7 @@ to discuss the approach before submitting a PR. - **[Data tables](https://www.google.com/design/spec/components/data-tables.html) ✓** - **Sortable ✓** - **Selectable ✓** - - Pagination + - **Pagination ✓** - **[Dialogs](https://www.google.com/design/spec/components/dialogs.html) ✓** - **[Alerts](https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts) ✓** - **[Simple menus](https://www.google.com/design/spec/components/dialogs.html#dialogs-simple-menus) (Menu) ✓** diff --git a/package.json b/package.json index 940ec5c589c729..dd49887794b28a 100644 --- a/package.json +++ b/package.json @@ -176,7 +176,7 @@ "size-limit": [ { "path": "build/index.js", - "limit": "90 KB" + "limit": "91 KB" } ], "nyc": { diff --git a/pages/api/table-footer.js b/pages/api/table-footer.js new file mode 100644 index 00000000000000..aeb8ccf5447963 --- /dev/null +++ b/pages/api/table-footer.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './table-footer.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md new file mode 100644 index 00000000000000..9c060487dfa538 --- /dev/null +++ b/pages/api/table-footer.md @@ -0,0 +1,32 @@ + + +# TableFooter + + + +## Props +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | Node | | The content of the component, normally `TableRow`. | +| classes | Object | | Useful to extend the style applied to components. | +| component | union: string
 ComponentType<*>
| 'tfoot' | The component used for the root node. Either a string to use a DOM element or a component. | + +Any other properties supplied will be [spread to the root element](/customization/api#spread). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `root` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) +section for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiTableFooter`. + +## Demos + +- [Tables](/demos/tables) + diff --git a/pages/api/table-pagination.js b/pages/api/table-pagination.js new file mode 100644 index 00000000000000..456226efb3fbd5 --- /dev/null +++ b/pages/api/table-pagination.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './table-pagination.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md new file mode 100644 index 00000000000000..a003dbf6903652 --- /dev/null +++ b/pages/api/table-pagination.md @@ -0,0 +1,43 @@ + + +# TablePagination + +A `TableRow` based component for placing inside `TableFooter` for pagination. + +## Props +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| classes | Object | | Useful to extend the style applied to components. | +| count * | number | | The total number of rows. | +| labelDisplayedRows | signature | ({ from, to, count }) => `${from}-${to} of ${count}` | Useful to customize the displayed rows label. | +| labelRowsPerPage | Node | 'Rows per page:' | Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` object. | +| onChangePage * | signature | | Callback fired when the page is changed. Invoked with two arguments: the event and the page to show. | +| onChangeRowsPerPage * | signature | | Callback fired when the number of rows per page is changed. Invoked with two arguments: the event. | +| page * | number | | The zero-based index of the current page. | +| rowsPerPage * | number | | The number of rows per page. | +| rowsPerPageOptions | unknown | [5, 10, 25] | Customizes the options of the rows per page select field. | + +Any other properties supplied will be [spread to the root element](/customization/api#spread). + +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `cell` +- `toolbar` +- `spacer` +- `select` +- `selectRoot` +- `actions` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) +section for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiTablePagination`. + +## Demos + +- [Tables](/demos/tables) + diff --git a/src/Table/TableBody.js b/src/Table/TableBody.js index 3ffaf4627016b7..41dda53250e553 100644 --- a/src/Table/TableBody.js +++ b/src/Table/TableBody.js @@ -74,10 +74,6 @@ class TableBody extends React.Component { } } -TableBody.contextTypes = { - table: PropTypes.object, -}; - TableBody.childContextTypes = { table: PropTypes.object, }; diff --git a/src/Table/TableCell.js b/src/Table/TableCell.js index 20daef1aeeec70..d5dc47d7f3e662 100644 --- a/src/Table/TableCell.js +++ b/src/Table/TableCell.js @@ -34,7 +34,9 @@ export const styles = (theme: Object) => ({ paddingLeft: 12, paddingRight: 12, }, - footer: {}, + footer: { + borderBottom: 0, + }, }); function TableCell(props, context) { @@ -122,7 +124,7 @@ TableCell.defaultProps = { }; TableCell.contextTypes = { - table: PropTypes.object, + table: PropTypes.object.isRequired, }; export default withStyles(styles, { name: 'MuiTableCell' })(TableCell); diff --git a/src/Table/TableCell.spec.js b/src/Table/TableCell.spec.js index f7129d0e438cc0..189e5d5ac13471 100644 --- a/src/Table/TableCell.spec.js +++ b/src/Table/TableCell.spec.js @@ -10,7 +10,12 @@ describe('', () => { let classes; before(() => { - shallow = createShallow({ dive: true }); + shallow = createShallow({ + dive: true, + context: { + table: { footer: true }, + }, + }); classes = getClasses(); }); @@ -22,7 +27,7 @@ describe('', () => { it('should spread custom props on the root node', () => { const wrapper = shallow(); assert.strictEqual( - wrapper.prop('data-my-prop'), + wrapper.props()['data-my-prop'], 'woofTableCell', 'custom prop should be woofTableCell', ); @@ -60,6 +65,14 @@ describe('', () => { assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class'); }); + it('should render a th with the footer class when in the context of a table footer', () => { + const wrapper = shallow(); + wrapper.setContext({ ...wrapper.options.context, table: { footer: true } }); + assert.strictEqual(wrapper.name(), 'td'); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class'); + }); + it('should render a div when custom component prop is used', () => { const wrapper = shallow(); assert.strictEqual(wrapper.name(), 'div', 'should be a div element'); diff --git a/src/Table/TableFooter.d.ts b/src/Table/TableFooter.d.ts new file mode 100644 index 00000000000000..ebfc20e07159f4 --- /dev/null +++ b/src/Table/TableFooter.d.ts @@ -0,0 +1,7 @@ +import * as React from 'react'; +import { StyledComponent } from '..'; + +export interface TableFooterProps + extends React.HTMLAttributes {} + +export default class TableFooter extends StyledComponent {} diff --git a/src/Table/TableFooter.js b/src/Table/TableFooter.js new file mode 100644 index 00000000000000..8f90956d680792 --- /dev/null +++ b/src/Table/TableFooter.js @@ -0,0 +1,80 @@ +// @flow + +import React from 'react'; +import type { ComponentType, Node } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '../styles/withStyles'; + +export const styles = (theme: Object) => ({ + root: { + fontSize: 12, + color: theme.palette.text.secondary, + }, +}); + +type DefaultProps = { + classes: Object, + component: string, +}; + +export type Props = { + /** + * The content of the component, normally `TableRow`. + */ + children?: Node, + /** + * Useful to extend the style applied to components. + */ + classes?: Object, + /** + * @ignore + */ + className?: string, + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ + component?: string | ComponentType<*>, +}; + +type AllProps = DefaultProps & Props; + +class TableFooter extends React.Component { + props: AllProps; + + static defaultProps = { + component: 'tfoot', + }; + + getChildContext() { + // eslint-disable-line class-methods-use-this + return { + table: { + footer: true, + }, + }; + } + + render() { + const { + classes, + className: classNameProp, + children, + component: ComponentProp, + ...other + } = this.props; + + return ( + + {children} + + ); + } +} + +TableFooter.childContextTypes = { + table: PropTypes.object, +}; + +export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter); diff --git a/src/Table/TableFooter.spec.js b/src/Table/TableFooter.spec.js new file mode 100644 index 00000000000000..617bd7a405f4ed --- /dev/null +++ b/src/Table/TableFooter.spec.js @@ -0,0 +1,38 @@ +// @flow + +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, getClasses } from '../test-utils'; +import TableFooter from './TableFooter'; + +describe('', () => { + let shallow; + let classes; + + before(() => { + shallow = createShallow({ dive: true }); + classes = getClasses(); + }); + + it('should render a tfoot', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.name(), 'tfoot'); + }); + + it('should render a div', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.name(), 'div'); + }); + + it('should render with the user and root classes', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass('woofTableHead'), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); + }); + + it('should render children', () => { + const children = ; + const wrapper = shallow({children}); + assert.strictEqual(wrapper.childAt(0).equals(children), true); + }); +}); diff --git a/src/Table/TableHead.js b/src/Table/TableHead.js index e741490a8dbaf8..fbc3fc9490f2ba 100644 --- a/src/Table/TableHead.js +++ b/src/Table/TableHead.js @@ -75,10 +75,6 @@ class TableHead extends React.Component { } } -TableHead.contextTypes = { - table: PropTypes.object, -}; - TableHead.childContextTypes = { table: PropTypes.object, }; diff --git a/src/Table/TablePagination.d.ts b/src/Table/TablePagination.d.ts new file mode 100644 index 00000000000000..c4143345e24568 --- /dev/null +++ b/src/Table/TablePagination.d.ts @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { StyledComponent } from '..'; + +interface LabelDisplayedRowsArgs { + from: number; + to: number; + count: number; + page: number; +} + +export interface TablePaginationProps { + count: number; + labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => Node; + labelRowsPerPage?: Node; + onChangePage: (event: React.MouseEvent | null, page: number) => void; + onChangeRowsPerPage: React.ChangeEventHandler; + page: number; + rowsPerPage: number; + rowsPerPageOptions?: number[]; +} + +export default class TablePagination extends StyledComponent {} diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js new file mode 100644 index 00000000000000..0e971587ed6d12 --- /dev/null +++ b/src/Table/TablePagination.js @@ -0,0 +1,201 @@ +// @flow + +import React from 'react'; +import type { Node } from 'react'; +import withStyles from '../styles/withStyles'; +import IconButton from '../IconButton'; +import Input from '../Input'; +import { MenuItem } from '../Menu'; +import Select from '../Select'; +import TableCell from './TableCell'; +import TableRow from './TableRow'; +import Toolbar from '../Toolbar'; +import Typography from '../Typography'; +import KeyboardArrowLeft from '../svg-icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '../svg-icons/KeyboardArrowRight'; + +export const styles = (theme: Object) => ({ + cell: { + // Increase the specificity to override TableCell. + '&:last-child': { + padding: '0', + }, + }, + toolbar: { + height: 56, + minHeight: 56, + paddingRight: 2, + }, + spacer: { + flex: '1 1 100%', + }, + select: { + marginLeft: theme.spacing.unit, + width: 34, + textAlign: 'right', + paddingRight: 22, + color: theme.palette.text.secondary, + height: 32, + lineHeight: '32px', + }, + selectRoot: { + marginRight: theme.spacing.unit * 4, + }, + actions: { + color: theme.palette.text.secondary, + marginLeft: theme.spacing.unit * 2.5, + }, +}); + +type LabelDisplayedRowsArgs = { + from: number, + to: number, + count: number, + page: number, +}; + +type DefaultProps = { + classes: Object, + labelRowsPerPage: string, + labelDisplayedRows: (paginationInfo: LabelDisplayedRowsArgs) => string, + rowsPerPageOptions: number[], +}; + +export type Props = { + /** + * Useful to extend the style applied to components. + */ + classes?: Object, + /** + * @ignore + */ + className?: string, + /** + * The total number of rows. + */ + count: number, + /** + * Useful to customize the displayed rows label. + */ + labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => Node, + /** + * Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` + * object. + */ + labelRowsPerPage?: Node, + /** + * Callback fired when the page is changed. Invoked with two arguments: the event and the + * page to show. + */ + onChangePage: (event: SyntheticInputEvent<> | null, page: number) => void, + /** + * Callback fired when the number of rows per page is changed. Invoked with two arguments: the + * event. + */ + onChangeRowsPerPage: (event: SyntheticInputEvent<>) => void, + /** + * The zero-based index of the current page. + */ + page: number, + /** + * The number of rows per page. + */ + rowsPerPage: number, + /** + * Customizes the options of the rows per page select field. + */ + rowsPerPageOptions?: number[], +}; + +type AllProps = DefaultProps & Props; + +/** + * A `TableRow` based component for placing inside `TableFooter` for pagination. + */ +class TablePagination extends React.Component { + props: AllProps; + + static defaultProps = { + labelRowsPerPage: 'Rows per page:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`, + rowsPerPageOptions: [5, 10, 25], + }; + + componentWillReceiveProps({ count, onChangePage, rowsPerPage }) { + const newLastPage = Math.ceil(count / rowsPerPage) - 1; + if (this.props.page > newLastPage) { + onChangePage(null, newLastPage); + } + } + + handleBackButtonClick = event => { + this.props.onChangePage(event, this.props.page - 1); + }; + + handleNextButtonClick = event => { + this.props.onChangePage(event, this.props.page + 1); + }; + + render() { + const { + classes, + className, + count, + labelDisplayedRows, + labelRowsPerPage, + onChangePage, + onChangeRowsPerPage, + page, + rowsPerPage, + rowsPerPageOptions, + ...other + } = this.props; + + return ( + + + +
+ {labelRowsPerPage} + + + {labelDisplayedRows({ + from: page * rowsPerPage + 1, + to: Math.min(count, (page + 1) * rowsPerPage), + count, + page, + })} + +
+ + + + = Math.ceil(count / rowsPerPage) - 1} + > + + +
+ + + + ); + } +} + +export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination); diff --git a/src/Table/TablePagination.spec.js b/src/Table/TablePagination.spec.js new file mode 100644 index 00000000000000..d8a95f4b59bb35 --- /dev/null +++ b/src/Table/TablePagination.spec.js @@ -0,0 +1,217 @@ +// @flow + +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, createMount } from '../test-utils'; +import TableFooter from './TableFooter'; +import TablePagination from './TablePagination'; + +describe('', () => { + const noop = () => {}; + let shallow; + let mount; + + before(() => { + shallow = createShallow({ dive: true }); + mount = createMount(); + }); + + after(() => { + mount.cleanUp(); + }); + + it('should render a TableRow', () => { + const wrapper = shallow( + , + ); + assert.strictEqual(wrapper.name(), 'withStyles(TableRow)'); + }); + + it('should spread custom props on the root node', () => { + const wrapper = shallow( + , + ); + assert.strictEqual( + wrapper.props()['data-my-prop'], + 'woofTablePagination', + 'custom prop should be woofTablePagination', + ); + }); + + describe('mount', () => { + it('should use the labelDisplayedRows callback', () => { + let labelDisplayedRowsCalled = false; + function labelDisplayedRows({ from, to, count, page }) { + labelDisplayedRowsCalled = true; + assert.strictEqual(from, 6); + assert.strictEqual(to, 10); + assert.strictEqual(count, 42); + assert.strictEqual(page, 1); + return `Page ${page}`; + } + + const wrapper = mount( + + + + +
, + ); + assert.strictEqual(labelDisplayedRowsCalled, true); + assert.strictEqual(wrapper.html().includes('Page 1'), true); + }); + + it('should use labelRowsPerPage', () => { + const wrapper = mount( + + + + +
, + ); + assert.strictEqual(wrapper.html().includes('Zeilen pro Seite:'), true); + }); + + it('should disable the back button on the first page', () => { + const wrapper = mount( + + + + +
, + ); + + const backButton = wrapper.find('withStyles(IconButton)').at(0); + const nextButton = wrapper.find('withStyles(IconButton)').at(1); + assert.strictEqual(backButton.props().disabled, true); + assert.strictEqual(nextButton.props().disabled, false); + }); + + it('should disable the next button on the last page', () => { + const wrapper = mount( + + + + +
, + ); + + const backButton = wrapper.find('withStyles(IconButton)').at(0); + const nextButton = wrapper.find('withStyles(IconButton)').at(1); + assert.strictEqual(backButton.props().disabled, false); + assert.strictEqual(nextButton.props().disabled, true); + }); + + it('should handle next button clicks properly', () => { + let page = 1; + const wrapper = mount( + + + { + page = nextPage; + }} + onChangeRowsPerPage={noop} + rowsPerPage={5} + /> + +
, + ); + + const nextButton = wrapper.find('withStyles(IconButton)').at(1); + nextButton.simulate('click'); + assert.strictEqual(page, 2); + }); + + it('should handle back button clicks properly', () => { + let page = 1; + const wrapper = mount( + + + { + page = nextPage; + }} + onChangeRowsPerPage={noop} + rowsPerPage={5} + /> + +
, + ); + + const nextButton = wrapper.find('withStyles(IconButton)').at(0); + nextButton.simulate('click'); + assert.strictEqual(page, 0); + }); + + it('should handle too high pages after changing rowsPerPage', () => { + let page = 2; + function ExampleTable(props) { + // setProps only works on the mounted root element, so wrap the table + return ( + + + { + page = nextPage; + }} + onChangeRowsPerPage={noop} + {...props} + /> + +
+ ); + } + + const wrapper = mount(); + wrapper.setProps({ rowsPerPage: 10 }); + // now, the third page doesn't exist anymore + assert.strictEqual(page, 1); + }); + }); +}); diff --git a/src/Table/index.d.ts b/src/Table/index.d.ts index 1db5541b0f3edf..c2b144e6d509a9 100644 --- a/src/Table/index.d.ts +++ b/src/Table/index.d.ts @@ -1,9 +1,13 @@ export { default } from './Table'; export * from './Table'; +export { default as TableFooter } from './TableFooter'; +export * from './TableFooter'; export { default as TableHead } from './TableHead'; export * from './TableHead'; export { default as TableBody } from './TableBody'; export * from './TableBody'; +export { default as TablePagination } from './TablePagination'; +export * from './TablePagination'; export { default as TableRow } from './TableRow'; export * from './TableRow'; export { default as TableCell } from './TableCell'; diff --git a/src/Table/index.js b/src/Table/index.js index 084b3d39d22cf6..0b36560404b05a 100644 --- a/src/Table/index.js +++ b/src/Table/index.js @@ -1,8 +1,10 @@ // @flow export { default } from './Table'; -export { default as TableHead } from './TableHead'; export { default as TableBody } from './TableBody'; -export { default as TableRow } from './TableRow'; export { default as TableCell } from './TableCell'; +export { default as TableFooter } from './TableFooter'; +export { default as TableHead } from './TableHead'; +export { default as TablePagination } from './TablePagination'; +export { default as TableRow } from './TableRow'; export { default as TableSortLabel } from './TableSortLabel';