I'm doing a custom table with React Table & Typescript and I did when selecting a row on a checkbox it must change the checkbox and update the background color for the ones that are selected.
The problem is when I select the row for the first time, it works as expected but then when I click it again it doesn't update the background color. I'm using the property of row.isSelected to put the background color.
<Tr
{...row.getRowProps()}
style={{
backgroundColor: !row.isSelected ? "none" : "#E9D8FD",
}}
The list is being updated correctly but the background color doesn't.
I'm missing something ?
"none" is not a valid color. You may want to use "transparent" instead.
Related
I have a react virtualized table. Im trying to add a border color to the whole description column, like image below.
I've tried this : style= {{ borderColor: "red"}} in <Column, but seems like not working. How can I achieve this?
sandbox url: https://codesandbox.io/s/sleepy-cray-7wn98r?file=/src/App.js
Is it possible to change the background color of the row based on the returned key value of the row? I'm doing this project where a row's background color must turn black if that row's key value is currently active in my this.state.index.
My code:
So for example if the this.state.index = 0, the background color of row with the key = 0 should change to black.
You can add inline css styling:
style={{backgroundColor: this.state.index === index ? 'black' : null}}
Maybe something like
<tr key={index} className={this.state.index === index ? 'highlight' : ''}>
...
</tr>
Where highlight is a custom css class that sets the colour of the background to black (you can name this whatever you like).
Also unrelated to your question, but I don't think you need to call slice() on this.props.table, it looks like you should just be able to do this.props.table.map(). Currently, slice() is just producing a duplicate of the array.
I am using CRUD operation on Primeng Datatable. If i clicked row of the table it raises the dialog box to edit the data. But selected row's background changed to blue. Is there any way to change background color of selected row? Primeng version 9.1.1
i referred previous stackoverflow question But not working.
Use
:host p-table ::ng-deep .ui-state-highlight{ background:red; }
Explain
After :host you have to set the component that host in your component (in your case the Primeng table)
And then after ::ng-deep set the class that inside the hosted component that you want to change
for example stackblitz
EDIT
to make it more generic you can put the code in style.css file as below
p-table .ui-state-highlight{ background:red!important; }
see example here
Context Menu Row with different color - the last Row
I have selected 4 Row but its not clear that which Row value contains the Context Menu as all are highlighted in same color, so I want 4th Row to be highlighted in different color.
Any help appreciated.
A simple solution would be highlight the hovered on row with a different color using css as below described in this example-
.ag-row-hover {
/* putting in !important so it overrides the theme's styling as it hovers the row also */
background-color: #dfdfff !important;
}
A slightly more elaborate approach would involve listening to when the context menu event is emitted and highlighting that particular row with a different row style.
Using the material-table library.
I would like to replicate the behavior shown in this example.
https://codesandbox.io/s/table-hover-colors-zw9nt
https://www.npmjs.com/package/material-table
https://material-table.com/#/
I was thinking of using onRowClick={}
The logic would be
onRowClick =>
set value in component state that renders clicked rows background to a different color
set all other rows to background to the original color
I can use conditional rendering based on a value held in state to change the background. Although this changes the background for all rows.
options={
rowStyle:{backgroundColor: this.state.selected ? '#fff' : this.state.c}
}
My current working example is here
https://codesandbox.io/s/peaceful-haibt-2nefw
Thanks for your help
You also need to pass the selectedRowId otherwise everything will be blue. Also, the rowStyle options accept a callback, which you could invoke like so:
rowStyle: rowData => ({
backgroundColor: this.state.selected && rowData.tableData.id === this.state.selectedRowId
? this.state.c
: "#fff"
})
Your onRowClick also needs some work (the select/unselect condition was not correct).
https://codesandbox.io/embed/select-one-row-160vm
The package's documentation provides an example of how you can accomplish this with the options prop.
I forked your sandbox here.