[TablePagination] Make TablePagination a TableCell to allow using it …

…anywhere.
mui · Oct 4, 2017 · 1ee0e9d · 1ee0e9d
1 parent 8be0c2d
commit 1ee0e9d
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 122 deletions.
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -300,16 +300,26 @@ class EnhancedTable extends React.Component {
               })}
             </TableBody>
             <TableFooter>
-              <TablePagination
-                count={data.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                onChangePage={this.handleChangePage}
-                onChangeRowsPerPage={this.handleChangeRowsPerPage}
-              />
+              <TableRow>
+                <TablePagination
+                  count={data.length}
+                  rowsPerPage={rowsPerPage}
+                  page={page}
+                  onChangePage={this.handleChangePage}
+                  onChangeRowsPerPage={this.handleChangeRowsPerPage}
+                />
+              </TableRow>
             </TableFooter>
           </Table>
         </div>
+        <TablePagination
+          component="div"
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onChangePage={this.handleChangePage}
+          onChangeRowsPerPage={this.handleChangeRowsPerPage}
+        />
       </Paper>
     );
   }

diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md
@@ -13,6 +13,7 @@ A `TableRow` based component for placing inside `TableFooter` for pagination.
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | classes | Object |  | Useful to extend the style applied to components. |
+| component | ElementType |  | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span style="color: #31a148">count *</span> | 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. |
@@ -28,7 +29,7 @@ Any other properties supplied will be [spread to the root element](/customizatio
 
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `cell`
+- `root`
 - `toolbar`
 - `spacer`
 - `select`
@@ -45,7 +46,7 @@ you need to use the following style sheet name: `MuiTablePagination`.
 
 ## Inheritance
 
-The properties of the [&lt;TableRow /&gt;](/api/table-row) component are also available.
+The properties of the [&lt;TableCell /&gt;](/api/table-cell) component are also available.
 
 ## Demos
 

diff --git a/src/Table/TablePagination.d.ts b/src/Table/TablePagination.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyledComponent } from '..';
+import { TableCellProps, TableCellClassKey } from './TableCell.d'
 
 interface LabelDisplayedRowsArgs {
   from: number;
@@ -28,6 +29,6 @@ export type TablePaginationClassKey =
   | 'actions'
   ;
 
-declare const TablePagination: StyledComponent<TablePaginationProps, TablePaginationClassKey>;
+declare const TablePagination: StyledComponent<TablePaginationProps & TableCellProps, TablePaginationClassKey & TableCellClassKey>;
 
 export default TablePagination;
diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js
@@ -1,25 +1,24 @@
 // @flow
-// @inheritedComponent TableRow
+// @inheritedComponent TableCell
 
 import React from 'react';
-import type { Node } from 'react';
+import type { ElementType, 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: {
+  root: {
     // Increase the specificity to override TableCell.
     '&:last-child': {
-      padding: '0',
+      padding: 0,
     },
   },
   toolbar: {
@@ -30,6 +29,9 @@ export const styles = (theme: Object) => ({
   spacer: {
     flex: '1 1 100%',
   },
+  caption: {
+    flexShrink: 0,
+  },
   select: {
     marginLeft: theme.spacing.unit,
     width: 34,
@@ -43,6 +45,7 @@ export const styles = (theme: Object) => ({
     marginRight: theme.spacing.unit * 4,
   },
   actions: {
+    flexShrink: 0,
     color: theme.palette.text.secondary,
     marginLeft: theme.spacing.unit * 2.5,
   },
@@ -57,6 +60,7 @@ export type LabelDisplayedRowsArgs = {
 
 type ProvidedProps = {
   classes: Object,
+  component: ElementType,
   labelRowsPerPage: string,
   labelDisplayedRows: (paginationInfo: LabelDisplayedRowsArgs) => string,
   rowsPerPageOptions: number[],
@@ -67,10 +71,15 @@ export type Props = {
    * Useful to extend the style applied to components.
    */
   classes?: Object,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component?: ElementType,
   /**
    * @ignore
    */
-  className?: string,
+  colSpan?: number,
   /**
    * The total number of rows.
    */
@@ -113,6 +122,7 @@ export type Props = {
  */
 class TablePagination extends React.Component<ProvidedProps & Props> {
   static defaultProps = {
+    component: TableCell,
     labelRowsPerPage: 'Rows per page:',
     labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
     rowsPerPageOptions: [5, 10, 25],
@@ -136,6 +146,8 @@ class TablePagination extends React.Component<ProvidedProps & Props> {
   render() {
     const {
       classes,
+      component: Component,
+      colSpan: colSpanProp,
       count,
       labelDisplayedRows,
       labelRowsPerPage,
@@ -147,15 +159,20 @@ class TablePagination extends React.Component<ProvidedProps & Props> {
       ...other
     } = this.props;
 
+    let colSpan;
+
+    if (Component === TableCell || Component === 'td') {
+      colSpan = colSpanProp || 9001; // col-span over everything
+    }
+
     return (
-      <TableRow {...other}>
-        <TableCell
-          className={classes.cell}
-          colSpan={9001} // col-span over everything
-        >
-          <Toolbar className={classes.toolbar}>
-            <div className={classes.spacer} />
-            <Typography type="caption">{labelRowsPerPage}</Typography>
+      <Component className={classes.root} colSpan={colSpan} {...other}>
+        <Toolbar className={classes.toolbar}>
+          <div className={classes.spacer} />
+          <Typography type="caption" className={classes.caption}>
+            {labelRowsPerPage}
+          </Typography>
+          <Typography component="div" type="caption">
             <Select
               classes={{ root: classes.selectRoot, select: classes.select }}
               input={<Input disableUnderline />}
@@ -168,28 +185,28 @@ class TablePagination extends React.Component<ProvidedProps & Props> {
                 </MenuItem>
               ))}
             </Select>
-            <Typography type="caption">
-              {labelDisplayedRows({
-                from: count === 0 ? 0 : page * rowsPerPage + 1,
-                to: Math.min(count, (page + 1) * rowsPerPage),
-                count,
-                page,
-              })}
-            </Typography>
-            <div className={classes.actions}>
-              <IconButton onClick={this.handleBackButtonClick} disabled={page === 0}>
-                <KeyboardArrowLeft />
-              </IconButton>
-              <IconButton
-                onClick={this.handleNextButtonClick}
-                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-              >
-                <KeyboardArrowRight />
-              </IconButton>
-            </div>
-          </Toolbar>
-        </TableCell>
-      </TableRow>
+          </Typography>
+          <Typography type="caption" className={classes.caption}>
+            {labelDisplayedRows({
+              from: count === 0 ? 0 : page * rowsPerPage + 1,
+              to: Math.min(count, (page + 1) * rowsPerPage),
+              count,
+              page,
+            })}
+          </Typography>
+          <div className={classes.actions}>
+            <IconButton onClick={this.handleBackButtonClick} disabled={page === 0}>
+              <KeyboardArrowLeft />
+            </IconButton>
+            <IconButton
+              onClick={this.handleNextButtonClick}
+              disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+            >
+              <KeyboardArrowRight />
+            </IconButton>
+          </div>
+        </Toolbar>
+      </Component>
     );
   }
 }