[Table] Responsive option

I notice there is currently no option to make the table “responsive” like in Bootstrap. I think it would be a good addition since this framework is also used a lot on mobile devices.

I’d just add a responsive prop like this:

<Table responsive>

And the code behind is basically this style code applyed to the <Table> element.

const styles = theme => ({
  table: {
    display: 'block',
    width: '100%',
    overflowX: 'auto',
  },
});

What do you think?

[oliviertassinari]

I can think of 2 solutions to this problem, what do you guys prefer?

1. We add a responsive prop to the Table component, That can be used like this:

<Table responsive>

--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -23,6 +23,10 @@ export const styles = theme => ({
   stickyHeader: {
     borderCollapse: 'separate',
   },
+  /* Styles applied to the wrapper element if `responsive={true}`. */
+  responsive: {
+    overflowX: 'auto',
+  },
 });

 const Table = React.forwardRef(function Table(props, ref) {
@@ -31,6 +35,7 @@ const Table = React.forwardRef(function Table(props, ref) {
     className,
     component: Component = 'table',
     padding = 'default',
+    responsive = false,
     size = 'medium',
     stickyHeader = false,
     ...other
@@ -41,13 +46,17 @@ const Table = React.forwardRef(function Table(props, ref) {
     stickyHeader,
   ]);

+  const rootElement = (
+    <Component
+      ref={ref}
+      className={clsx(classes.root, { [classes.stickyHeader]: stickyHeader }, className)}
+      {...other}
+    />
+  );
+
   return (
     <TableContext.Provider value={table}>
-      <Component
-        ref={ref}
-        className={clsx(classes.root, { [classes.stickyHeader]: stickyHeader }, className)}
-        {...other}
-      />
+      {responsive ? <div className={classes.responsive}>{rootElement}</div> : rootElement}
     </TableContext.Provider>
   );
 });
@@ -75,6 +84,10 @@ Table.propTypes = {
    * Allows TableCells to inherit padding of the Table.
    */
   padding: PropTypes.oneOf(['default', 'checkbox', 'none']),
+  /**
+   * Allows TableCells to inherit padding of the Table.
+   */
+  responsive: PropTypes.boolean,
   /**
    * Allows TableCells to inherit size of the Table.
    */

1. We add a new TableResponsive component that can be used like this:

<TableResponsive>
  <Table>
    {...}
  </Table>
</TableResponsive>

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';

export const styles = {
  /* Styles applied to the root element. */
  root: {
    overflowX: 'auto',
  },
};

const TableResponsive = React.forwardRef(function TableResponsive(props, ref) {
  const { classes, className, ...other } = props;

  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
});

TableResponsive.propTypes = {
  /**
   * The content of the component.
   */
  children: PropTypes.node,
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object.isRequired,
  /**
   * @ignore
   */
  className: PropTypes.string,
};

export default withStyles(styles, { name: 'MuiTableResponsive' })(TableResponsive);

1. Any other idea?

I have a preference for option 1.

I could find the following for benchmark:

• https://quasar.dev/vue-components/table#Responsive-tables
• https://react-bootstrap.netlify.com/components/table/#tables
• https://sancho-ui.com/components/table/#table
• https://elastic.github.io/eui/#/tabular-content/tables
• https://polaris.shopify.com/components/lists-and-tables/data-table#navigation

[cappslock]

As a workaround, it’s relatively easy to wrap the table in a div:

<div style={{width: 'auto', overflowX: 'scroll'}}>
  <Table>
    ...
  </Table>
</div>

YMMV based on parent hierarchy, but I’ve had good luck with this approach inside of a Grid component.