question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: How to personalize each ".BaseTable__row-cell" style according with its value?

See original GitHub issue

I’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.

Customized TableCell

Instead, I’d like to obtain the result like in the next image, but I don’t know how to access each cell image

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:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
daniellycostacommented, Feb 20, 2020

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!!

const getClasses = ({ cellData }) =>
		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
		})

	const columnsWithClasses = tableColumns.map(column => ({
		...column,
		className: getClasses
	}))

//...more code

	<BaseTable
		//...more props
		columns={columnsWithClasses}
		data={dataExample}
		className={classes.table}
		
	/>

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found