I have been trying to disable the row hover for antd table (for expandable rows) but no success. I want to disable the hover on all child rows.
Here is a simple table that I am generating using antd.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
}
];
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
},
{
key: 12,
name: 'John Brown jr.'
},
{
key: 13,
name: 'Jim Green sr.'
},
],
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} />,
document.getElementById('container'),
);
Here is the table fiddle that shows the table, that gets rendered. The CSS that I am trying to apply the change the hover is:
tr.ant-table-row.ant-table-row-level-1:hover {
background: red;
}
But this does not work. I see a fluctuation of colors between red and blue. How could I do this?
What I mainly want is no hover effect. But I am unable to do this.
Try this :
.ant-table-tbody > tr.ant-table-row-level-1:hover > td {
background: unset;
}
That's working on your fiddle.
(background: unset as suggested by #ravibagul91)
This is the place you can change this effect,
.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
.ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td,
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
background: unset; //Change the existing color to `unset`
}
The accepted answers did not work for me, if anyone else has this problem this is how I fixed it:
First, set the className property in the Table component to something, for e.g. 'time-table-row-select' like below:
<Table
dataSource={data}
columns={columns}
className='time-table-row-select'
/>
Then add the following in CSS:
.time-table-row-select > .ant-spin-nested-loading > .ant-spin-container > div > .ant-table-content > .ant-table-body > table > tbody > tr:hover > td {
background-color: unset;
}
Alternatively, if you're using the scroll parameter you need to use this:
.time-table-row-select > .ant-spin-nested-loading > .ant-spin-container > div > .ant-table-content > .ant-table-scroll > .ant-table-body > table > tbody > tr:hover > td {
background-color: unset;
}
Since there appears to be additional caveats depending on how you are using the table, I'll go through my logic for how to figure out which class selector to use (as it seems like most people on web development stackoverflow do not do this & it's incredibly frustrating):
Find the location of the class you provided to the Table component, then append each subsequent child tag to your selector until you reach the tr tag that follows tbody, add :hover to it, then add > td to that
If you are overriding other theme variables with Less, you can just add this line to the variables override file.
#table-row-hover-bg: unset;
You can also change unset to any other color you want to set there.
This turned off the row highlight hover for me.
.ant-table-tbody > tr.ant-table-row:hover > td {
background: none !important;
}
Related
here the changes herder row BG color work for me but how we can change the BG color of the striped row.
import React from 'react';
import DataTable from 'react-data-table-component';
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
striped: {
default: 'red'
},
}
function App() {
return (
<div className="App">
<h3>DataTable in React - Clue Mediator</h3>
<DataTable
title="Employees"
columns={columns}
data={data}
pagination
highlightOnHover
striped
customStyles={tableCustomStyles}
/>
</div>
);
}
export default App;
here I used the react-data-table-component and want to change the customized BG color of the striped row.
how can we do that?
After looking through the documentation for using custom styles found here and the available fields here, it appears you need to nest the striped styles inside of a row object in the style config.
Edit for comment:
To change the order of striped and non-striped rows, you could just swap the colors of the regular rows and striped rows (i.e. set the regular row to have the striped attributes and vise-versa).
Your tableCustomStyles should look like this (for even row stripes):
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
rows: {
style: {
color: "STRIPEDCOLOR",
backgroundColor: "STRIPEDCOLOR"
},
stripedStyle: {
color: "NORMALCOLOR",
backgroundColor: "NORMALCOLOR"
}
}
}
I tried editing all sorts of CSS and elements of Table and TableCells but still I can't make the lines go away. How do you make lines go away between rows in the Table element in MUI?
As mentioned by Soothran in the comments, this is controlled by the bottom border of TableCell. Below is one way to customize this.
import MuiTableCell from "#material-ui/core/TableCell";
const TableCell = withStyles({
root: {
borderBottom: "none"
}
})(MuiTableCell);
If you're using MUI v5, you can use the sx props. The new MUI release also added tableCellClasses object to help you reference the component CSS className in a type-safe way instead of using the hardcoded string "MuiTableCell-root":
import Table from "#mui/material/Table";
import TableCell, { tableCellClasses } from "#mui/material/TableCell";
<Table
sx={{
[`& .${tableCellClasses.root}`]: {
borderBottom: "none"
}
}}
>
Live Demo
To remove the border lines of the particular Table Cell use :
<TableCell style={{borderBottom:"none"}}></TableCell>
To remove the border from a specific TableRow you can use:
sx={{ "& td": { border: 0 } }}
classes={{ root: classes.MuiTableCell}} class of a Tablecell,then
MuiTableCell: {
borderBottom: "none"
}
This works me fine to remove the BorderBottom line of a tablecell.
To remove the table border lines:
.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}
I am trying to overwrite the css of MuiPrivateTabScrollButton.
but this class is generated from material ui so I am not able to overwite.
even I debugged by putting border colors and find out the fix, but still I am not able to findout.
all my code is in tab-demo.js
Can you tell me how to fix it, so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/n5l8znn2y0
update 1: removed unnecessary code for easy debugging https://codesandbox.io/s/8xw88yl9j0
MuiPrivateTabScrollButton: {
width: "0 !important"
},
tabRoot: {
textTransform: "initial",
width: "stretch",
display: "flex",
flex: 1,
border: "1px solid red",
"&:hover": {
color: "red",
opacity: 1,
textTransform: "initial"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
In the documentation for each Material-UI component is a CSS section that indicates the classes that can be passed in to control CSS for different aspects. Here is that documentation for Tabs.
In particular you care about:
scrollButtons Styles applied to the ScrollButtonComponent component.
You then need to specify the appropriate class via the classes property.
For instance if you have the following in the styles passed to withStyles:
const styles = theme => ({
tabsScrollButton: {
backgroundColor: "green"
}
};
Then you would leverage that class like the following:
<Tabs
classes={{ scrollButtons: props.classes.tabsScrollButton }}
>
Hi I'm new with angular 2. I'm using ng2-table. I added to my website table like this.
I need to add a color to specific row inside the table. How is that possible ?
I tried to add it like the tutorial did with his columns but without success.
Found an answer, taken from here:
https://github.com/valor-software/ng2-table/issues/342
We can change te color of the row by adding some style to it like this:
A quick and dirty solution:
Step 1: Integrate jQuery
Step 2: Give your result table an ID like:
<ng-table id="resultDataTable" ...
Step 3: Modify your onCellClick method:
onCellClick(data: any): any {
/* get index of row */
let index = this.tableData.indexOf(data.row);
/* add an class 'active' on click */
$('#resultDataTable').on('click', 'tr', function (event: any) {
//noinspection TypeScriptUnresolvedFunction
$(this).addClass('active').siblings().removeClass('active');
});}
Check their style file provided to know what css-class Names are using and try to override them:
E.g. of classes used: table dataTable table-striped table-bordered
CSS:
table.dataTable tbody th, table.dataTable tbody td {
padding: 8px 10px;
background-color: red;
}
Reulsts:
I'm using 'material-ui' and trying to get a table element to change color when the element has a certain value. Below is the code I tried, if the cell value is "Out of Zone", the background should go red'ish. The table renders fine, but toggling the color change doesn't work, how come (or is my approach all wrong)?
function renderRowColumn(row, column) {
if (row.status == "Out of Zone") {
return (
<TableRowColumn className="ae-zone">
{row[column.name]}
</TableRowColumn>
)
}
return (
<TableRowColumn>
{row[column.name]}
</TableRowColumn>
)
}
In style.css:
.ae-zone {
background-color: '#e57373';
font: "white";
}
Your specificity on the css selector is not high enough. The rendered TD element has an inline style in which the background property is getting inherited which is overriding your class style.
Is there any reason since you already have the logic seperated out you don't just use inline styles for something like this.
<TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>
This is definitely working well and I tested it.
Your other option would be to add !important to your css.
td.ae-zone {
background-color: '#e57373' !important;
color: "white" !important;
}
I think if I had to chose though I would recommend the first as it is cleaner.
Don't put quotes around color values in css:
.ae-zone {
background-color: #e57373;
color: white;
}
Also, it's color: white, not font: white.
Most of the time the Table takes the default style, so if the styles didn't get applied try appending !important to the style. This worked for me.
.ae-zone {
background-color: '#e57373' !important;
color:red;
}
There is another way to do this :
import { makeStyles } from "#mui/styles";
// Declare this bellow your import
const UseStyles = makeStyles({
root: {
"& .MuiTableBody-root": {
backgroundColor: "#121212",
},
},
});
// Declare this after your declaration page
const classes = UseStyles();
// Now in your Table, use the class :
<Table className={classes.root}>
<TableHead>
{...}
</TableHead>
</Table>
With the inspector you can see each automatic class from Material UI and target them in the makeStyle.
Be carefull to use the same code example :
"& .MuiClassNameYouWantTarget" : {
textAlign: "center",
},