-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
Table.js
80 lines (72 loc) · 1.96 KB
/
Table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import TableContext from './TableContext';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'table',
width: '100%',
borderCollapse: 'collapse',
borderSpacing: 0,
},
};
export const useStyles = makeStyles(styles, { name: 'MuiTable' });
const Table = React.forwardRef(function Table(props, ref) {
const { classes: _, className, component: Component, padding, size, ...other } = useThemeProps(
props,
{ name: 'MuiTable' },
);
const classes = useStyles(props);
const table = React.useMemo(() => ({ padding, size }), [padding, size]);
return (
<TableContext.Provider value={table}>
<Component ref={ref} className={clsx(classes.root, className)} {...other} />
</TableContext.Provider>
);
});
Table.propTypes = {
/**
* The content of the table, normally `TableHead` and `TableBody`.
*/
children: PropTypes.node.isRequired,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.elementType,
/**
* @ignore
* from `withForwardRef`
*/
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
/**
* Allows TableCells to inherit padding of the Table.
*/
padding: PropTypes.oneOf(['default', 'checkbox', 'none']),
/**
* Allows TableCells to inherit size of the Table.
*/
size: PropTypes.oneOf(['small', 'medium']),
};
Table.defaultProps = {
component: 'table',
padding: 'default',
size: 'medium',
};
Table.useStyles = useStyles;
Table.options = {
name: 'MuiTable',
};
export default Table;