We Keep Coding

(MUI) Two table on the same row

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>
);
}

When I render a button inside a material-ui table, the button is not clickable

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');

How to apply css on table header of Material ui Table stickyHeader?

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:

How to set smallest width on table column in Material-UI?

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>

ReactJS: How to remove row highlight on <TableRow> of Material-UI's <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>