I came across a very nice package called react-datasheet-grid. I want to color a specific cell depending on it's value. When I build the table (data-sheet) I do it with an array of columns as the doc says. When I want to style it there are examples only for styles the whole table. I want to style a specific cell but I don't know how to reach it.
Style cell in react-datasheet-grid
894 views Asked by Itai Ben-Avraham At
2
There are 2 answers
0
On
You can use cellClassName prop to achieve it.
https://react-datasheet-grid.netlify.app/docs/api-reference/columns/#cellclassname
<DataSheetGrid
value={data}
onChange={setData}
columns={columns}
cellClassName={({ rowData, rowIndex, columnId }) => {
if(rowData.firstName === 'Alice'){
return 'bg-red' // a class defined in our stylesheet
}
}}
/>
You can assign classNames within the cell object. Please see the [hopefully?] complete example below:
In this example, you would need to add the declared class to your CSS styling sheet. Here is my source in case you have follow-up questions - https://github.com/romanstan1/react-datasheet-header.
Note that if you plan to boilerplate the example, you will need to pass
tableContent
in via props.