[Table] Add sticky header support

docs/pages/api/table-cell.md

@@ -56,6 +56,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">alignCenter</span> | <span class="prop-name">MuiTableCell-alignCenter</span> | Styles applied to the root element if `align="center"`.
 | <span class="prop-name">alignRight</span> | <span class="prop-name">MuiTableCell-alignRight</span> | Styles applied to the root element if `align="right"`.
 | <span class="prop-name">alignJustify</span> | <span class="prop-name">MuiTableCell-alignJustify</span> | Styles applied to the root element if `align="justify"`.
+| <span class="prop-name">stickyHeader</span> | <span class="prop-name">MuiTableCell-stickyHeader</span> | Styles applied to the root element if `context.table.stickyHeader={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api/table.md

@@ -29,6 +29,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">padding</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'checkbox'<br>&#124;&nbsp;'none'</span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
 | <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | Allows TableCells to inherit size of the Table. |
+| <span class="prop-name">stickyHeader</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Set the header sticky.<br>⚠️ It doesn't work with IE 11. |
 
 The `ref` is forwarded to the root element.
 
@@ -42,6 +43,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiTable-root</span> | Styles applied to the root element.
+| <span class="prop-name">stickyHeader</span> | <span class="prop-name">MuiTable-stickyHeader</span> | Styles applied to the root element if `stickyHeader={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/src/pages/components/tables/StickyHeadTable.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TablePagination from '@material-ui/core/TablePagination';
+import TableRow from '@material-ui/core/TableRow';
+
+const columns = [
+  { id: 'name', label: 'Name', minWidth: 200 },
+  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
+  {
+    id: 'population',
+    label: 'Population',
+    minWidth: 120,
+    align: 'right',
+    format: value => value.toLocaleString(),
+  },
+  {
+    id: 'size',
+    label: 'Size\u00a0(km\u00b2)',
+    minWidth: 120,
+    align: 'right',
+    format: value => value.toLocaleString(),
+  },
+  {
+    id: 'density',
+    label: 'Density',
+    minWidth: 120,
+    align: 'right',
+    format: value => value.toFixed(2),
+  },
+];
+
+function createData(name, code, population, size) {
+  const density = population / size;
+  return { name, code, population, size, density };
+}
+
+const rows = [
+  createData('India', 'IN', 1324171354, 3287263),
+  createData('China', 'CN', 1403500365, 9596961),
+  createData('Italy', 'IT', 60483973, 301340),
+  createData('United States', 'US', 327167434, 9833520),
+  createData('Canada', 'CA', 37602103, 9984670),
+  createData('Australia', 'AU', 25475400, 7692024),
+  createData('Germany', 'DE', 83019200, 357578),
+  createData('Ireland', 'IE', 4857000, 70273),
+  createData('Mexico', 'MX', 126577691, 1972550),
+  createData('Japan', 'JP', 126317000, 377973),
+  createData('France', 'FR', 67022000, 640679),
+  createData('United Kingdom', 'GB', 67545757, 242495),
+  createData('Russia', 'RU', 146793744, 17098246),
+  createData('Nigeria', 'NG', 200962417, 923768),
+  createData('Brazil', 'BR', 210147125, 8515767),
+];
+
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+  },
+  tableWrapper: {
+    maxHeight: 407,
+    overflow: 'auto',
+  },
+});
+
+export default function StickyHeadTable() {
+  const classes = useStyles();
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  function handleChangePage(event, newPage) {
+    setPage(newPage);
+  }
+
+  function handleChangeRowsPerPage(event) {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  }
+
+  return (
+    <Paper className={classes.root}>
+      <div className={classes.tableWrapper}>
+        <Table stickyHeader>
+          <TableHead>
+            <TableRow>
+              {columns.map(column => (
+                <TableCell
+                  key={column.id}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
+              return (
+                <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                  {columns.map(column => {
+                    const value = row[column.id];
+                    return (
+                      <TableCell key={column.id} align={column.align}>
+                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 100]}
+        component="div"
+        count={rows.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        backIconButtonProps={{
+          'aria-label': 'previous page',
+        }}
+        nextIconButtonProps={{
+          'aria-label': 'next page',
+        }}
+        onChangePage={handleChangePage}
+        onChangeRowsPerPage={handleChangeRowsPerPage}
+      />
+    </Paper>
+  );
+}

docs/src/pages/components/tables/StickyHeadTable.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TablePagination from '@material-ui/core/TablePagination';
+import TableRow from '@material-ui/core/TableRow';
+
+interface Column {
+  id: 'name' | 'code' | 'population' | 'size' | 'density';
+  label: string;
+  minWidth?: number;
+  align?: 'right';
+  format?: (value: number) => string;
+}
+
+const columns: Column[] = [
+  { id: 'name', label: 'Name', minWidth: 200 },
+  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
+  {
+    id: 'population',
+    label: 'Population',
+    minWidth: 120,
+    align: 'right',
+    format: (value: number) => value.toLocaleString(),
+  },
+  {
+    id: 'size',
+    label: 'Size\u00a0(km\u00b2)',
+    minWidth: 120,
+    align: 'right',
+    format: (value: number) => value.toLocaleString(),
+  },
+  {
+    id: 'density',
+    label: 'Density',
+    minWidth: 120,
+    align: 'right',
+    format: (value: number) => value.toFixed(2),
+  },
+];
+
+interface Data {
+  name: string;
+  code: string;
+  population: number;
+  size: number;
+  density: number;
+}
+
+function createData(name: string, code: string, population: number, size: number): Data {
+  const density = population / size;
+  return { name, code, population, size, density };
+}
+
+const rows = [
+  createData('India', 'IN', 1324171354, 3287263),
+  createData('China', 'CN', 1403500365, 9596961),
+  createData('Italy', 'IT', 60483973, 301340),
+  createData('United States', 'US', 327167434, 9833520),
+  createData('Canada', 'CA', 37602103, 9984670),
+  createData('Australia', 'AU', 25475400, 7692024),
+  createData('Germany', 'DE', 83019200, 357578),
+  createData('Ireland', 'IE', 4857000, 70273),
+  createData('Mexico', 'MX', 126577691, 1972550),
+  createData('Japan', 'JP', 126317000, 377973),
+  createData('France', 'FR', 67022000, 640679),
+  createData('United Kingdom', 'GB', 67545757, 242495),
+  createData('Russia', 'RU', 146793744, 17098246),
+  createData('Nigeria', 'NG', 200962417, 923768),
+  createData('Brazil', 'BR', 210147125, 8515767),
+];
+
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+  },
+  tableWrapper: {
+    maxHeight: 407,
+    overflow: 'auto',
+  },
+});
+
+export default function StickyHeadTable() {
+  const classes = useStyles();
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  function handleChangePage(event: unknown, newPage: number) {
+    setPage(newPage);
+  }
+
+  function handleChangeRowsPerPage(event: React.ChangeEvent<HTMLInputElement>) {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  }
+
+  return (
+    <Paper className={classes.root}>
+      <div className={classes.tableWrapper}>
+        <Table stickyHeader>
+          <TableHead>
+            <TableRow>
+              {columns.map(column => (
+                <TableCell
+                  key={column.id}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
+              return (
+                <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                  {columns.map(column => {
+                    const value = row[column.id];
+                    return (
+                      <TableCell key={column.id} align={column.align}>
+                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 100]}
+        component="div"
+        count={rows.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        backIconButtonProps={{
+          'aria-label': 'previous page',
+        }}
+        nextIconButtonProps={{
+          'aria-label': 'next page',
+        }}
+        onChangePage={handleChangePage}
+        onChangeRowsPerPage={handleChangeRowsPerPage}
+      />
+    </Paper>
+  );
+}

docs/src/pages/components/tables/tables.md

@@ -59,6 +59,13 @@ custom actions.
 
 {{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
 
+## Fixed header
+
+An example of a table with scrollable rows and fixed column headers.
+It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
 ## Spanning Table
 
 A simple example with spanning rows & columns.

packages/material-ui/src/Table/Table.d.ts

@@ -5,6 +5,7 @@ export interface TableProps extends StandardProps<TableBaseProps, TableClassKey>
   component?: React.ElementType<TableBaseProps>;
   padding?: Padding;
   size?: Size;
+  stickyHeader?: boolean;
 }
 
 export type TableBaseProps = React.TableHTMLAttributes<HTMLTableElement>;
@@ -13,7 +14,7 @@ export type Padding = 'default' | 'checkbox' | 'none';
 
 export type Size = 'small' | 'medium';
 
-export type TableClassKey = 'root';
+export type TableClassKey = 'root' | 'stickyHeader';
 
 declare const Table: React.ComponentType<TableProps>;
 

packages/material-ui/src/Table/Table.js

@@ -12,6 +12,10 @@ export const styles = {
     borderCollapse: 'collapse',
     borderSpacing: 0,
   },
+  /* Styles applied to the root element if `stickyHeader={true}`. */
+  stickyHeader: {
+    borderCollapse: 'separate',
+  },
 };
 
 const Table = React.forwardRef(function Table(props, ref) {
@@ -21,13 +25,22 @@ const Table = React.forwardRef(function Table(props, ref) {
     component: Component = 'table',
     padding = 'default',
     size = 'medium',
+    stickyHeader = false,
     ...other
   } = props;
-  const table = React.useMemo(() => ({ padding, size }), [padding, size]);
+  const table = React.useMemo(() => ({ padding, size, stickyHeader }), [
+    padding,
+    size,
+    stickyHeader,
+  ]);
 
   return (
     <TableContext.Provider value={table}>
-      <Component ref={ref} className={clsx(classes.root, className)} {...other} />
+      <Component
+        ref={ref}
+        className={clsx(classes.root, { [classes.stickyHeader]: stickyHeader }, className)}
+        {...other}
+      />
     </TableContext.Provider>
   );
 });
@@ -59,6 +72,12 @@ Table.propTypes = {
    * Allows TableCells to inherit size of the Table.
    */
   size: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * Set the header sticky.
+   *
+   * ⚠️ It doesn't work with IE 11.
+   */
+  stickyHeader: PropTypes.bool,
 };
 
 export default withStyles(styles, { name: 'MuiTable' })(Table);