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:
Related
I am trying to create two parallel tables that stick to each other on the same row. However, the second table is always stacked under the first table. The only idea I could think of is using Grid Item to determine the column span of each table, but I have no idea how to implement it.
Can you use Grid Container over the TableContainer?
const TableCellStyle = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
color: theme.palette.text.dark,
backgroundColor: theme.palette.success.light,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
}
}))
const TableRowStyle = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
'&:last-child td, &:last-child th': {
border: 0,
}
}))
function DataTable() {
return (
//first table
<TableContainer
component={Paper}
sx={{
width:'max-content',
marginLeft: 'auto',
marginRight: 'auto'
}}
>
<Table sx={{ minWidth: 400 }}>
<TableHead>
<TableRow>
<TableCellStyle>Position</TableCellStyle>
<TableCellStyle align="right">Defect Type by AI</TableCellStyle>
<TableCellStyle align="right">Tool Decision by AI</TableCellStyle>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRowStyle key={row.name}>
<TableCellStyle component="th" scope="row">
{row.name}
</TableCellStyle>
<TableCellStyle align="right">{row.Column1}</TableCellStyle>
<TableCellStyle align="right">{row.Column2}</TableCellStyle>
</TableRowStyle>
))}
</TableBody>
//second table
</Table>
<Table sx={{ minWidth: 400 }}>
<TableHead>
<TableRow>
<TableCellStyle>Position</TableCellStyle>
<TableCellStyle align="right">Defect Type by AI</TableCellStyle>
<TableCellStyle align="right">Tool Decision by AI</TableCellStyle>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRowStyle key={row.name}>
<TableCellStyle component="th" scope="row">
{row.name}
</TableCellStyle>
<TableCellStyle align="right">{row.Column1}</TableCellStyle>
<TableCellStyle align="right">{row.Column2}</TableCellStyle>
</TableRowStyle>
))}
</TableBody>
</Table>
</TableContainer>
);
}
I am trying to add some spacing between each row in my table in MUI. However when adding borderSpacing: '0px 10px!important' and borderCollapse: 'separate!important', nothing happens. How can I add spacing between each row? This normally works fine in HTML and CSS so therefor I am unsure how to solve in mui. Thanks
[![This is my goal][1]][1]
import React from 'react'
import { Container, Table, TableCell, TableHead, TableRow, Paper,TableBody, Avatar, Typography,Box,TableContainer } from '#mui/material'
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() => ({
table: {
minWidth: 650,
borderCollapse: 'separate!important',
borderSpacing: '0px 10px!important'
}
}))
const MyTable = () => {
const classes = useStyles();
return (
<React.Fragment>
<Container maxWidth={"lg"} sx={{mt:"0.5%"}}>
<TableContainer className={classes.tableContainer} component={Paper}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>SOMETHING</TableCell>
<TableCell>ELSE</TableCell>
<TableCell>TO</TableCell>
<TableCell>SORT</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow >
<TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
<TableCell>AGE</TableCell>
<TableCell>BOOK</TableCell>
<TableCell>SCHOOL</TableCell>
<TableCell>BUTTON</TableCell>
</TableRow>
<TableRow >
<TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
<TableCell>AGE</TableCell>
<TableCell>BOOK</TableCell>
<TableCell>SCHOOL</TableCell>
<TableCell>BUTTON</TableCell>
</TableRow>
<TableRow >
<TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
<TableCell>AGE</TableCell>
<TableCell>BOOK</TableCell>
<TableCell>SCHOOL</TableCell>
<TableCell>BUTTON</TableCell>
</TableRow>
<TableRow >
<TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
<TableCell>AGE</TableCell>
<TableCell>BOOK</TableCell>
<TableCell>SCHOOL</TableCell>
<TableCell>BUTTON</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Container>
</React.Fragment>
)
}
export default MyTable
'''
[1]: https://i.stack.imgur.com/FbDjm.png
It doesn't seem to be a feature in this component. You can achieve it by overriding some css as follow :
.MuiTableContainer-root {
box-shadow: none;
}
.MuiTable-root{
border-collapse: separate;
border-spacing: 0 10px;
border: transparent;
}
.MuiTable-root th, .MuiTable-root td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
Note that you have to create the border yourelf now by adding it to the td and th.
Also, think about encapsulating if you don't want this modification to be global.
My table looks as such:
<TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
<Table size="small" sx={{ minWidth: 200 }}>
<TableHead>
<TableRow>
<TableCell align="center" width="90"></TableCell>
{consequences_description.map((description) => (
<TableCell align="center" width="90">{description}</TableCell>
)
)}
</TableRow>
</TableHead>
<TableBody>
{risk_matrix.map((row, row_index) => (
<TableRow
key={row_index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{likelyhood_description[row_index]}
</TableCell>
{row.map( (column, column_index) => (
<TableCell align="center">
<ToggleButton
risk={column}
row_index={row_index}
column_index={column_index}
/>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
The button inside the table is called <ToggleButton/> and it looks as such:
<ThemeProvider theme={filtersTheme}>
<Button variant="contained" color={handleColor()} onClick={console.log("Clicked")} >{risk}</Button>
</ThemeProvider>
As soon as the table renders, the console shows "Clicked", meaning the onClick function gets called for the button as soon as it renders inside the table for some reason, but I am not able to click it and fire the onClick function. Is there a way to do this?
Try to call the onClick function like this:
onClick={() => { console.log('Clicked');
Here's the AppBar and the Table's screenshots:
This is the screenshot at the top of the page.
This is the screenshot once you start scrolling down
Here's the code for the AppBar and the Table:
<AppBar position="static" style = {{background : "#00009A"}}>
<Toolbar>
<Link to="/view" className={classes.navLink} align = 'left'>
<Box textAlign = "left" >
<Typography variant="h6" flex={1} align = 'left'>
APP TITLE
</Typography>
</Box>
</Link>
<Link to="/view" className={classes.navLink}>
<Button color="inherit" align='left' }>Map Skills</Button>
</Link>
</AppBar>
<Table stickyHeader aria-label="sticky table" style={{ marginTop: 20, marginBottom: 30 }}>
<TableHead>
<TableRow>
{columns.map(column => (
<TableCell
key={column.id}
align={column.align}
style={{ width: column.minWidth, fontWeight: 500, fontSize: 17, backgroundColor: "#C1D8F7"}}
>
{column.label === "" ? props.heading : column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
I've tried to make the AppBar's "position = 'fixed' " but that just overlapped the table's header when scrolling down.
I've also tried playing around with zIndex to move stuff to the front or back.
I need them to be both stacked under each other when scrolling, instead of overlap.
But i think that table header's sticky header always sticks to the top of the page.
Any solutions would be of great help! Thanks!
Make the AppBar position="fixed", the table header paddingTop: "68px", Table stickyHeader, and get rid of any overflow: 'auto'.
<AppBar position="fixed" color="primary">
<Toolbar>
<IconButton color="secondary">
<FilterListRounded />
</IconButton>
<Typography variant="h6">App Title</Typography>
</Toolbar>
</AppBar>
...
const StyledTableCell = withStyles(() => ({
head: {
paddingTop: "68px",
},
}))(TableCell);
...
<Table size="small" stickyHeader>
<TableHead className={classes.head}>
<TableRow>
<StyledTableCell>Header 1</StyledTableCell>
<StyledTableCell>Header 2</StyledTableCell>
<StyledTableCell>Header 3</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{props.results.map(row => {
return(
<TableRow key={row.id} hover>
<TableCell>{row.one}</TableCell>
<TableCell>{row.two}</TableCell>
<TableCell>{row.three}</TableCell>
</TableRow>
)})}
</TableBody>
</Table>
I have a <Table/> and <TableRow> within, and upon clicking on the row, the row stays highlighted. I tried <TableRow disableTouchRipple={true}>, but no luck. How can I remove this highlight even though it has been clicked on?
Here is the code:
<Table>
<TableBody displayRowCheckbox={false}>
<TableRow>
<TableRowColumn>Row 1</TableRowColumn>
<TableRowColumn>Content 1</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Row 2</TableRowColumn>
<TableRowColumn>Content 2</TableRowColumn>
</TableRow>
</TableBody>
</Table>
You can set the "className" on the table (or its rows), and then set the background-color of the tables' cells to transparent...
.table-no-highlight td {
background-color: transparent !important;
}
<div id="container"></div>
const { Table, TableHeader, TableBody, TableRow, RaisedButton, TableRowColumn, TableHeaderColumn, MuiThemeProvider, getMuiTheme } = MaterialUI;
class Example extends React.Component {
render() {
return (
<Table className="table-no-highlight">
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn>John Smith</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>2</TableRowColumn>
<TableRowColumn>Randal White</TableRowColumn>
<TableRowColumn>Unemployed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>3</TableRowColumn>
<TableRowColumn>Stephanie Sanders</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
</TableBody>
</Table>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
See example at https://jsfiddle.net/mzt8pvtu/1/
First you have to install Jquery.
npm install jquery --save
then you define import in component.
import $ from 'jquery';
Identify table row with ID like this:
<TableRow id={data.bookingNumber} key={data.bookingNumber}>
For remove the row, you can define function.
handleAllowDeleteBooking() {
const { removeBooking, fetchBookingHistory, params, fetchBookingHistoryStore } = this.props
this.setState({
showDeleteDailog: false
})
removeBooking(this.state.bookingId)
$('#' + this.state.bookingId).remove()
}
Use the selectable prop to disable the highlighting like so:
<Table selectable={false}>
<TableBody displayRowCheckbox={false}>
<TableRow>
<TableRowColumn>Row 1</TableRowColumn>
<TableRowColumn>Content 1</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Row 2</TableRowColumn>
<TableRowColumn>Content 2</TableRowColumn>
</TableRow>
</TableBody>
</Table>