I'm building a website in React, using Material-UI. I have a table and was wondering, if it's possible to set column width to fit the data + some additional padding on both ends?
This is my table:
<Table className={classes.table} size="small">
<TableHead>
<TableRow>
<TableCell width="???">CA</TableCell> <--- Width should be as much as "Fit to data" + margin of X pixels
<TableCell width="140px">CB</TableCell>
<TableCell width="240px">CC</TableCell>
<TableCell width="200px">CD</TableCell>
<TableCell>CE</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.ca}</TableCell>
<TableCell>{row.cb}</TableCell>
<TableCell>{row.cc}</TableCell>
<TableCell>{row.cd}</TableCell>
<TableCell>{row.ce}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
I'd like column CA to be minimal, just so it fits the data with additional space on both sides, so that content doesn't touch column borders.
I've tried:
not declaring width at all - didn't work
width="auto" - didn't work
You can target this th with css and set it to width: 1px; white-space: nowrap;
I think this should work in your case:
.MuiTableCell-head:first-child {
width: 1px;
white-space: nowrap;
}
And here's how this can be achieved using react inline-styling:
// You can also add padding or any other style props to this style object
<TableCell style={{width: '1px', whiteSpace: 'nowrap'}}>CA</TableCell>
Related
How can you style the header of a MUI table like height and width?
<TableHead >
<TableRow >
<TableCell hover>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
I tried passing
sx={{ height:'20px' }}
but the height is fixed
You can achieve that by using sx on the TableHead component:
<TableHead sx={{height:"150px"}}>
<TableRow >
<TableCell hover>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
To customize the styling of the TableHead you need to target the MuiTableCell-head class of the Table.
One important thing to notice, Mui TableHead height is not coming from the height property, It is coming from line-height. Please check the example below:
import { Table, TableHead, TableBody } from '#mui/material'
<Table sx={{ '& .MuiTableCell-head':{ lineHeight: 20, color: 'red' } }}>
<TableHead>
</TableHead>
<TableBody>
</TableBody>
</Table>
I have the following simple code that generates the location of various records in a table.
return (
<TableRow>
<TableCell >
// some code_1
</TableCell>
<TableCell >
// some code_2
</TableCell>
<TableCell>
<TableRow> // here I get warning
<TableCell>
// some code_3
</TableCell>
</TableRow>
<TableRow>
<TableCell >
// some code_4
</TableCell>
</TableRow>
<TableRow>
<TableCell >
// some code_5
</TableCell>
</TableRow>
</TableCell>
<TableCell
// some code_6
</TableCell>
</TableRow >
);
And as you can guess, when I add more components to the TableCell (in my case I add TableRow ), I get a warning:
Warning: validateDOMNesting(...): tr cannot appear as a child of td.
Tell me how to save this table structure, get rid of warnings
Copied from my comment above:
You can put table rows inside your cells but not directly. They need to be wrapped in their own seperate inner table element. In the rendered html it will look something like ... > td > table > tbody > tr > td > ...
In this examble I have wrapped your table rows in tables with table body elements, but you may want to wrap the top row in a table head element, <TableHead> instead and subsequently the rest in a table body.
Table head and body may not be required so you can try to place the rows directly inside the table element.
Here is the documentation from Material UI https://mui.com/material-ui/react-table/
return (
<TableRow>
<TableCell>
// some code_1
</TableCell>
<TableCell>
// some code_2
</TableCell>
<TableCell>
<Table>
<TableBody>
<TableRow>
<TableCell>
// some code_3
</TableCell>
</TableRow>
<TableRow>
<TableCell>
// some code_4
</TableCell>
</TableRow>
<TableRow>
<TableCell>
// some code_5
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableCell>
<TableCell>
// some code_6
</TableCell>
</TableRow>
);
I am using Material UI table with stickyHeader prop as i want my table header to be fixed. But then other css is not applying on the header part.
const useStyles = makeStyles((theme) => ({
tableHead: {
borderBottomStyle: "solid",
borderBottomColor: "blue",
},
}))
const CustomTable = () => {
return(
<TableContainer component={Paper} className={classes.tableContainer}>
<Table stickyHeader aria-label="simple table">
<TableHead classes={{ root: classes.tableHead }}>
<TableRow>
<TableCell>Hii</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
)
}
When I am removing "stickyHeader" props. I am getting blue border at the bottom of header but not in case of stickyHeader.
Updated answer for MUI 5 as I had the same issue - anytime I would set the stickyHeader prop for my <Table> my styling would go away.
I targeted the MuiTableCell-root class in my TableHead component and it was just fine.
Example with styled-components:
export const StyledTableHead = styled(TableHead)`
& .MuiTableCell-root {
background-color: red;
}
`;
It appears that in the stickyHeader prop will not function as intended without first setting a maxHeight for the <Table> in the <TableContainer>.
Example with styled-components:
export const StyledTableContainer = styled(TableContainer)`
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
max-height: 500px;
`;
This could then be used like so:
<StyledTableContainer>
<Table stickyHeader>
<StyledTableHead>
<TableRow>
[your table header cells here]
</TableRow>
</StyledTableHead>
</Table>
</StyledTableContainer>
by adding the props stickyHeader a class gets added which sets the border-collapse:separate. this needs to be removed for the header border to be visible.
Target the stickyHeader Mui class from Table.
<TableContainer component={Paper} className={classes.tableContainer}>
<Table stickyHeader classes={{stickyHeader:classes.stickyHeader}} aria-label="simple table">
<TableHead classes={{ root: classes.tableHead }}>
<TableRow>
<TableCell>Hii</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
const useStyles = makeStyles((theme) => ({
tableHead: {
borderBottomStyle: "solid",
borderBottomColor: "blue"
},
stickyHeader:{
borderCollapse:'collapse'
}
}));
Update
To make the border to be fixed, there's a workaround is that just add a borderBottom in the TableCell of the TableHead.
<Table stickyHeader aria-label="simple table">
<TableHead>
<TableRow>
<TableCell
style={{
borderBottom: "5px solid blue"
}}
>
Hii
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{//Tablebody items}
</TableBody>
</Table>
Working demo:
I have to create a table populated with two accordions with mock data and one accordion with the data from the database using reactjs in Material-UI. I have created an accordion having the table data. I want only the Table data in the accordion not the heading. I am having trouble getting the Table data in the accordion section.
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>OutStanding</Typography>
</AccordionSummary>
<AccordionDetails>
<TableBody>
{rows.map(row => (
<ExpandingRow row={row} />
))}
</TableBody>
</AccordionDetails>
</Accordion>
</Table>
</Paper>
The Screen looks like this
current screen
How do I achieve it?
Any assistance would be greatly appreciated, thanks!
You will need to include table inside accordionDetails, and map rows.
Somewhat similar I have just created to show, Please check :
https://codesandbox.io/s/mui-table-accordion-inside-qc7sq
I am using material UI with react .I am showing my data in table.Actually in table I have some titles example "
GENERAL_INFORMATION" and INFORMATION are the titles .I want to show this in middle .But my table cell is not taking width 100% why ?
here is my code
https://codesandbox.io/s/qlj0l8yrx9
<Fragment>
<TableRow key={row.id}>
<TableCell> {title}</TableCell>
</TableRow>
{row.map(({ displaytext, value }) => (
<TableRow key={row.id}>
<TableCell>{displaytext}</TableCell>
<TableCell>{value}</TableCell>
</TableRow>
))}
</Fragment>
I am taking help from this url
https://material-ui.com/demos/tables/
how about: https://codesandbox.io/s/wo9n5vvjvk
i just modify line:84
<TableCell colspan="2" style={{ "text-align": "center" }}>