I am building a web application in react js and I'm using the material-ui components library. I'm using the table component and it looks good on desktop but I want it to adjust and look good also on mobile browser. Is material-ui supports such thing? How can I do it? Example of the current situation: PC\Mobile:
Source code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const data = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell numeric>Calories</TableCell>
<TableCell numeric>Fat (g)</TableCell>
<TableCell numeric>Carbs (g)</TableCell>
<TableCell numeric>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell component="th" scope="row">
{n.name}
</TableCell>
<TableCell numeric>{n.calories}</TableCell>
<TableCell numeric>{n.fat}</TableCell>
<TableCell numeric>{n.carbs}</TableCell>
<TableCell numeric>{n.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
Material Table is not responsive. It only reduces the width of the table when shrinking a page. A lot of other table libraries create "stacked" table in mobile view (e.g. https://github.com/gregnb/mui-datatables).
React Bootstrap 5 Table responsive component. React Responsive Table built with Bootstrap 5 allow tables to be scrolled horizontally with ease. They can be comfortably used both on desktops and mobile devices.
import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; Step 3: Now, create a function to store our Table row data into an array of objects.
Material UI is a React-based CSS utility framework that enables developers to create quality user interfaces. Material UI can be compared to Bootstrap but in a more advanced way. Since it is a React-based CSS framework, it features numerous components that can be imported anywhere in a React application.
For Material-UI tables padding-right
and padding-left
of every table cell should be changed,
you can have code in Codesandbox
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
display: 'flex',
marginTop: theme.spacing.unit * 3,
overflowX: 'hide',
},
table: {
minWidth: 340,
},
tableCell: {
paddingRight: 4,
paddingLeft: 5
}
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const data = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.tableCell}>Dessert (100g serving)</TableCell>
<TableCell numeric className={classes.tableCell}>Calories</TableCell>
<TableCell numeric className={classes.tableCell}>Fat (g)</TableCell>
<TableCell numeric className={classes.tableCell}>Carbs (g)</TableCell>
<TableCell numeric className={classes.tableCell}>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell component="th" scope="row" className={classes.TableCell}>
{n.name}
</TableCell>
<TableCell numeric className={classes.tableCell}>{n.calories}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.fat}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.carbs}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
To make it responsive you need to use Grid system in the first place, For example this is grid system for full-page:
<Grid item xs={12}>
<Table/>
</Grid>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With