Fix responsive table props
This commit is contained in:
parent
3cb0c7d523
commit
bb5990c4d5
1 changed files with 21 additions and 4 deletions
|
@ -1,10 +1,19 @@
|
||||||
|
import { Theme } from "@material-ui/core/styles";
|
||||||
import Table from "@material-ui/core/Table";
|
import Table from "@material-ui/core/Table";
|
||||||
import { makeStyles } from "@material-ui/styles";
|
import { makeStyles } from "@material-ui/styles";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
const useStyles = makeStyles(
|
||||||
() => ({
|
(theme: Theme) => ({
|
||||||
|
[theme.breakpoints.up("sm")]: {
|
||||||
|
"& table": {
|
||||||
|
tableLayout: "fixed"
|
||||||
|
}
|
||||||
|
},
|
||||||
root: {
|
root: {
|
||||||
|
"& table": {
|
||||||
|
tableLayout: "auto"
|
||||||
|
},
|
||||||
overflowX: "auto"
|
overflowX: "auto"
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
@ -13,14 +22,22 @@ const useStyles = makeStyles(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const ResponsiveTable: React.FC = props => {
|
interface ResponsiveTableProps {
|
||||||
const { children } = props;
|
children: React.ReactNode | React.ReactNodeArray;
|
||||||
|
className?: string;
|
||||||
|
key?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
|
||||||
|
const { children, className, key } = props;
|
||||||
|
|
||||||
const classes = useStyles(props);
|
const classes = useStyles(props);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
<Table>{children}</Table>
|
<Table className={className} key={key}>
|
||||||
|
{children}
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue