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;}
Related
In a few places, vuetify sets text color to the "primary color" defined in its theme (eg. hilighting selected drop down menus). With my company's colors, this looks ugly. How can I set this to be different?
From what I can tell, this comes from these css rules:
.v-application.primary--text {
color: #0064a2 !important;
caret-color: #0064a2 !important;
}
When I change those, I can make the text color look nice. Unfortunately, they're generated by vuetify and marked as !important, so I can't seem to change them outside of the browser inspector.
I can add something like 'primary--text': 'color: #FF00FF' to the style theme, but that changes the background color, not the text color.
Here's a codepen example
I could use vuetify's themes exclusively for text, and set the rest of the element colors manually, but this doesn't seem to be their intended use. What should I do to change the text color?
You can add a class to the app and create a more-specific CSS rule like so (this example doesn't actually run here, but you can copy it over to your codepen):
new Vue({
el: '#app',
vuetify: new Vuetify({
theme: {
dark: true,
themes: {
dark: {
// Color is applied to selected drop down item
primary: '#0064A2',
// Uncomment this to make things worse
// 'primary--text': '#FF00FF'
}
}
}
}),
})
.my-app.v-application .primary--text {
color: white !important;
}
<div id="app">
<v-app class="my-app">
<!--Click the dropdown to see ugly colors-->
<v-select :items="[undefined]"/>
</v-app>
</div>
Was having the same issue and Roy's answer guided me to this solution:
.my-app.v-application .primary--text {
color: inherit !important;
}
This way, you aren't screwing up styling for other items that are using the primary color.
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;
}
I'm using ng2-select2 in my Angular2 project and I want to add some style such as width, height, border-radius, font-weight, font-size, ... but I couldn't manage it.
My Html code is like:
<select2 [data]="exampleData"></select2>
I also tried adding class and id to my select2 element, but it doesn't work. Do you have any idea how can I do that?
If you want to use "width", you can use it with Select2Options class.
In your component just define one object of Select2Options:
let options: Select2Options;
Set the attribute that you want:
this.optionsSelect = {
placeholder: "Select option...",
allowClear: true,
width: "100%"
}
In your html, put the [options] input with the name of your option:
<select2 [data]="seccion" [cssImport]="true" (valueChanged)="onSeccionChange($event)" [options]="optionsSelect"></select2>
With this class you can customize some things, for example: add a placeholder, or allow to keep the select without selection.
In my case , I'm trying to change background-color but I can't find a solution.
You could try to customize component
#Component({
selector: "your-component",
templateUrl: "your-template.component.html",
styles: [`
:host >>> .select2-container {
min-width: 1000px;
}
`]
})
you have to use width attribute as mentioned there in the repo description like this
<select2 [width]="dynamic_width"></select2>
refer from here
https://github.com/NejcZdovc/ng2-select2#inputs
else you can use ngStyle or ngClass for dynamic binding to style (PS:- Not Tested)
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",
},