diff --git a/docs/pages/api-docs/table.json b/docs/pages/api-docs/table.json
index b22f7ee77afd98..80edad26ece156 100644
--- a/docs/pages/api-docs/table.json
+++ b/docs/pages/api-docs/table.json
@@ -14,7 +14,8 @@
"type": { "name": "enum", "description": "'medium'
| 'small'" },
"default": "'medium'"
},
- "stickyHeader": { "type": { "name": "bool" } }
+ "stickyHeader": { "type": { "name": "bool" } },
+ "sx": { "type": { "name": "object" } }
},
"name": "Table",
"styles": { "classes": ["root", "stickyHeader"], "globalClasses": {}, "name": "MuiTable" },
@@ -23,6 +24,6 @@
"filename": "/packages/material-ui/src/Table/Table.js",
"inheritance": null,
"demos": "
",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/table/table.json b/docs/translations/api-docs/table/table.json
index 987c1cd0b18f4a..462ff6a771f9b3 100644
--- a/docs/translations/api-docs/table/table.json
+++ b/docs/translations/api-docs/table/table.json
@@ -6,7 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"padding": "Allows TableCells to inherit padding of the Table.",
"size": "Allows TableCells to inherit size of the Table.",
- "stickyHeader": "Set the header sticky.
⚠️ It doesn't work with IE11."
+ "stickyHeader": "Set the header sticky.
⚠️ It doesn't work with IE11.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {
"root": { "description": "Styles applied to the root element." },
diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts
index e74738ca8fe366..8086ef592031e8 100644
--- a/packages/material-ui/src/Table/Table.d.ts
+++ b/packages/material-ui/src/Table/Table.d.ts
@@ -1,4 +1,6 @@
+import { SxProps } from '@material-ui/system';
import * as React from 'react';
+import { Theme } from '..';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
export type Padding = 'default' | 'checkbox' | 'none';
@@ -37,6 +39,10 @@ export interface TableTypeMap {
* @default false
*/
stickyHeader?: boolean;
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps;
};
defaultComponent: D;
}
diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
index 8aa0284f0a9663..138049398c0cae 100644
--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -1,42 +1,82 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import TableContext from './TableContext';
-export const styles = (theme) => ({
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import { getTableUtilityClass } from './tableClasses';
+
+const overridesResolver = (props, styles) => {
+ const { styleProps } = props;
+
+ return deepmerge(styles.root || {}, {
+ ...(styleProps.stickyHeader && styles.stickyHeader),
+ });
+};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes, stickyHeader } = styleProps;
+
+ const slots = {
+ root: ['root', stickyHeader && 'stickyHeader'],
+ };
+
+ return composeClasses(slots, getTableUtilityClass, classes);
+};
+
+const TableRoot = experimentalStyled(
+ 'table',
+ {},
+ {
+ name: 'MuiTable',
+ slot: 'Root',
+ overridesResolver,
+ },
+)(({ theme, styleProps }) => ({
/* Styles applied to the root element. */
- root: {
- display: 'table',
- width: '100%',
- borderCollapse: 'collapse',
- borderSpacing: 0,
- '& caption': {
- ...theme.typography.body2,
- padding: theme.spacing(2),
- color: theme.palette.text.secondary,
- textAlign: 'left',
- captionSide: 'bottom',
- },
+ display: 'table',
+ width: '100%',
+ borderCollapse: 'collapse',
+ borderSpacing: 0,
+ '& caption': {
+ ...theme.typography.body2,
+ padding: theme.spacing(2),
+ color: theme.palette.text.secondary,
+ textAlign: 'left',
+ captionSide: 'bottom',
},
/* Styles applied to the root element if `stickyHeader={true}`. */
- stickyHeader: {
+ ...(styleProps.stickyHeader && {
borderCollapse: 'separate',
- },
-});
+ }),
+}));
const defaultComponent = 'table';
-const Table = React.forwardRef(function Table(props, ref) {
+const Table = React.forwardRef(function Table(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'MuiTable' });
const {
- classes,
className,
- component: Component = defaultComponent,
+ component = defaultComponent,
padding = 'default',
size = 'medium',
stickyHeader = false,
...other
} = props;
+
+ const styleProps = {
+ ...props,
+ component,
+ padding,
+ size,
+ stickyHeader,
+ };
+
+ const classes = useUtilityClasses(styleProps);
+
const table = React.useMemo(() => ({ padding, size, stickyHeader }), [
padding,
size,
@@ -45,10 +85,12 @@ const Table = React.forwardRef(function Table(props, ref) {
return (
-
@@ -94,6 +136,10 @@ Table.propTypes = {
* @default false
*/
stickyHeader: PropTypes.bool,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
};
-export default withStyles(styles, { name: 'MuiTable' })(Table);
+export default Table;
diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js
index 6ad1c58b50d9fa..dab2ee7c652e3b 100644
--- a/packages/material-ui/src/Table/Table.test.js
+++ b/packages/material-ui/src/Table/Table.test.js
@@ -1,19 +1,15 @@
import * as React from 'react';
import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
import Table from './Table';
import TableContext from './TableContext';
+import classes from './tableClasses';
describe('', () => {
const mount = createMount();
const render = createClientRender();
- let classes;
- before(() => {
- classes = getClasses();
- });
-
- describeConformance(
+ describeConformanceV5(
,
@@ -21,9 +17,12 @@ describe('', () => {
classes,
inheritComponent: 'table',
mount,
+ muiName: 'MuiTable',
+ testVariantProps: { variant: 'foo' },
refInstanceof: window.HTMLTableElement,
// can't test another component with tbody as a child
testComponentPropWith: 'table',
+ skip: ['componentsProp'],
}),
);
diff --git a/packages/material-ui/src/Table/index.d.ts b/packages/material-ui/src/Table/index.d.ts
index 7427f5de0fb0ba..cdf274181d3e44 100644
--- a/packages/material-ui/src/Table/index.d.ts
+++ b/packages/material-ui/src/Table/index.d.ts
@@ -1,2 +1,5 @@
export { default } from './Table';
export * from './Table';
+
+export { default as tableClasses } from './tableClasses';
+export * from './tableClasses';
diff --git a/packages/material-ui/src/Table/index.js b/packages/material-ui/src/Table/index.js
index ae769447ae5c96..dea2be8d78f2a0 100644
--- a/packages/material-ui/src/Table/index.js
+++ b/packages/material-ui/src/Table/index.js
@@ -1 +1,4 @@
export { default } from './Table';
+
+export { default as tableClasses } from './tableClasses';
+export * from './tableClasses';
diff --git a/packages/material-ui/src/Table/tableClasses.d.ts b/packages/material-ui/src/Table/tableClasses.d.ts
new file mode 100644
index 00000000000000..1ffe066b1ac0b9
--- /dev/null
+++ b/packages/material-ui/src/Table/tableClasses.d.ts
@@ -0,0 +1,10 @@
+export interface TableClasses {
+ root: string;
+ stickyHeader: string;
+}
+
+declare const tableClasses: TableClasses;
+
+export function getTableUtilityClass(slot: string): string;
+
+export default tableClasses;
diff --git a/packages/material-ui/src/Table/tableClasses.js b/packages/material-ui/src/Table/tableClasses.js
new file mode 100644
index 00000000000000..6af10ab6993801
--- /dev/null
+++ b/packages/material-ui/src/Table/tableClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTableUtilityClass(slot) {
+ return generateUtilityClass('MuiTable', slot);
+}
+
+const tableClasses = generateUtilityClasses('MuiTable', ['root', 'stickyHeader']);
+
+export default tableClasses;