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

[daniellycosta]

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.

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
                                      })
          }}
	/>

[nihgwu]

hey, you can use Column.className, it could be a callback

[nihgwu]

https://autodesk.github.io/react-base-table/api/column

[daniellycosta]

Can I access the column props using BaseTable component? I'm not using Column component

[daniellycosta]

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}
		
	/>

[nihgwu]

Or you can use it this way:

<BaseTable>
  <Column key className />
</BaseTable>