Question: How to personalize each ".BaseTable__row-cell" style according with its value?
See original GitHub issueI’d like to change de cell style according to its value. I tried to customize the TableCell component, but it didn’t change the whole cell as you can see in the picture below.
Instead, I’d like to obtain the result like in the next image, but I don’t know how to access each cell
Suggestion
If this feature doesn’t exist, maybe create a new prop for override .BaseTable__row-cell
CSS class could be an option like the example below.
<BaseTable
columns={tableColumns}
data={dataExample}
//... other props
rowCellClassName={({ cellData }) => {
return classnames(classes.default, {
[classes.low]: cellData <= 20,
[classes.mediumLow]: cellData > 20 && cellData <= 40,
[classes.medium]: cellData > 40 && cellData <= 60,
[classes.mediumHigh]: cellData > 60 && cellData <= 80,
[classes.high]: cellData > 80
})
}}
/>
Issue Analytics
- State:
- Created 4 years ago
- Comments:5
Top Results From Across the Web
How to Apply Conditional Formatting to Rows Based on Cell ...
Click on New Rule. This will open the New Formatting Rule window. Under Select a Rule Type, choose Use a formula to determine...
Read more >How to conditionally style ReactJs material-table cell based ...
first you need classes which every of them has the style you desire then you can find some <TableCell ...
Read more >Excel: Change the row color based on cell value - Ablebits
Click the "Format…" button and switch to Fill tab to choose the background color. If the default colors do not suffice, click the...
Read more >table-layout - CSS: Cascading Style Sheets - MDN Web Docs
The table -layout CSS property sets the algorithm used to lay out cells, rows, and columns.
Read more >How To Apply Conditional Formatting Across An Entire Row
Step 1. Highlight the data range you want to format · Step 2. Choose Format > Conditional formatting… in the top menu ·...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I got it!!
I manipulated the column array adding the className props before passing it to the BaseTable component. Thank you for the quick response!!
https://autodesk.github.io/react-base-table/api/column