In React js, After reading excel file, I need to apply border color each row...
How to apply border color in each row using sheetjs
Taking a quick look at the sheetjs example demo, you can see that the populated table is a simple HTML table composed of <table/>, <tr/> (rows) and <td/> (cells) among others. See html table documentation.
All you need to do is create a stylesheet (say, my_table.css) and import it in the script that builds thee table (import "./my_table.css") and add a clause for the tr element, as such:
tr {
border: 1px red;
}
If you're struggling to get the desired result with CSS, I'd recommend reading up more on the css border documentation.
Good luck!
You may exceljs npm
worksheet.getCell("A1").border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
Related
I have a row of pivot buttons which I use for my spfx form in a web part. I need to be able to give a grey background when users hover over the control. so at the moment my control looks like this :
So the blue bar changes on select but I want a grey hover over so the users know where to click.
Thanks in advance.
I have written this code to get the style but I cannot add the style into the component:
const styler = {
root: [
{
selectors: {
':hover': {
background: '#2C3539'
}
}
}
]
};
In this codepen you can see how you can pass styles to the correct style areas for Pivot control.
link: [
!rootIsTabs && {
selectors: {
':hover': {
backgroundColor: palette.neutralLighter,
color: palette.neutralDark
},
':active': {
backgroundColor: palette.neutralLight
}
}
}
],
To mention also, is that the styles I demo will be default styles in the next major release (Fabric v7), so you can have this in your code until we have an official release (within a few weeks) and when you have the ability to upgrade you can remove it and have it backed in into the component.
P.S.: the animation is another bonus that comes with this new major release.
I have data and each row/user is formatted something like this:
{
first: <string>
active: <bool>
}
I wish to apply a background color to the entire row if active property is false. Currently I have this, to try to get style applied to every row
rowClassName = (rowData) => {
return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}
<DataTable value={this.props.users.toJS()} //in render
selectionMode="single"
selection={user}
onSelectionChange={this.props.dispatch.editAccount}
rowClassName={this.rowClassName}
>
<Column field="first" header="First" filter={true}/>
</DataTable>
.greyed{ //in css
background-color: red;
}
which is only applying the style to every other row (see picture)
Any ideas on what I should try? i posted this question on the primeFaces forum 3 days ago and never got a response: https://forum.primefaces.org/viewtopic.php?f=57&t=58605
I just ran into this problem while trying out PrimeReact. My issue turned out to be that the default selector that sets the row background was more specific than my own.
This is the default:
body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: #f9f9f9;
}
so just having
.specialRowColor { background-color: 'blue' }
is not specific enough to override the default. Instead I needed to do this in my css:
.p-datatable .p-datatable-tbody .specialRowColor {
background-color: blue;
}
Solved by overriding the css like this
.ui-datatable tbody > tr.ui-widget-content.greyed {
background-color: #808080;
}
I'm trying to create a class specificity in Material UI Next same way as they allow you to use pseudo classes, but for nested elements. For example, in Material UI Next (MUI-Next) I can create a class with styles in it:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
},
};
and use it this way
<Toolbar className={classes.appbar}>
... blah blah blah
</Toolbar>
That paints my Toolbar element in color #6d6146 and hovers to #9e8e6a.
Now, if imagine I have some elements inside the Toolbar and I don't want to create a class for every single element in it. (especially if they are not MUI-Next elements, but some custom HTML) For the sake of an example, a hyperlink. Like this:
<Toolbar className={classes.appbar}>
<a href="www.google.com">
<span>Title</span>
</a>
</Toolbar>
Yes, there are ways to do this particular example correctly using MUI control properties, remember this is an example. Real world code is very complex and lots of code.
I would like to access that hyperlink by way of specificity using the main parent class as a hook class. The desired rendered css would look like this:
.appbar {
background: #6d6146;
}
.appbar:hover {
background: #9e8e6a;
}
.appbar a{
color: #d63302;
}
My attempt to create specificity is not working. This is what I tried:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
'a': {
color: '#d63302',
},
},
};
According to how MUI-Next handles pseudo-classes to create specificity, this element specificity should work, but doesn't. Can this be done and I am not using the right syntax, or is this not supported?
Remember this is Material UI Next found here. Completely different than the older Material UI.
Here is a playground for ya. Thanks in advance.
SAMPLE CODE
Try this :
appbar: {
background: "#6d6146",
"&:hover": {
background: "#9e8e6a"
},
"& a": {
color: "black",
"&:hover": {
color: "red"
}
}
}
Working link
I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.