djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix dialog tables on mobile

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-11-04 21:31:49 +01:00 committed by dominik-zeglen
parent f2caca15fe
commit 89d351ccc6
1 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/ResponsiveTable/ResponsiveTable.tsx
View file

@ -1,20 +1,20 @@
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/core/styles/makeStyles";
import React from "react"; import React from "react";
const useStyles = makeStyles( const useStyles = makeStyles(
(theme: Theme) => ({ theme => ({
[theme.breakpoints.up("sm")]: {
"& table": {
tableLayout: "fixed"
}
},
root: { root: {
[theme.breakpoints.up("sm")]: {
"& table": {
tableLayout: "fixed"
}
},
"& table": { "& table": {
tableLayout: "auto" tableLayout: "auto"
}, },
overflowX: "auto" overflowX: "auto",
width: "100%"
} }
}), }),
{ {
@ -29,15 +29,13 @@ interface ResponsiveTableProps {
} }
const ResponsiveTable: React.FC<ResponsiveTableProps> = props => { const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
const { children, className, key } = props; const { children, className } = props;
const classes = useStyles(props); const classes = useStyles(props);
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Table className={className} key={key}> <Table className={className}>{children}</Table>
{children}
</Table>
</div> </div>
); );
}; };