feat: Ajout de la gestion d'une classe specifique pour les cellule TD des Tableau #278
Conversation
CyrilBillon
changed the title
| @@ -136,7 +136,7 @@ const Table = ({ | |||
| .map((row) => ( | |||
| <tr key={getRowKey(row)}> | |||
| {columns.map((column) => ( | |||
| <td key={column.name}> | |||
| <td key={column.name} className={column.columnClassName || undefined}> | |||
There was a problem hiding this comment.
This behavior is not managed by the dsfr i guess ?
What prevent you to do that in your own code like
<div className="myclass">
<Table .../>
</div>
.my-class {
td {
...
}
}
There was a problem hiding this comment.
Our client, "Ministère de la transition écologique et de la cohésion des territoires" ask us to change td background color depending on cell value.
For example, my request is to set green background color to the td if the state value is "VALIDEE"
For your solution, i agree with you if i have to set class to all td cell (I already do that depending on my table struct to set width or other stuff).
…blea + maj du projet example
|
L'ajout d'une fonction pour la gestion des classes CSS d'une cellule d'un tableau est fait. |
| <td key={column.name}> | ||
| <td | ||
| key={column.name} | ||
| className={column.cellClassRender ? column.cellClassRender(row) : null} |
There was a problem hiding this comment.
Can we keep undefined ? to be consistend with the rest ?
or laybe this should work ?
| className={column.cellClassRender ? column.cellClassRender(row) : null} | |
| className={column.cellClassRender && column.cellClassRender(row)} |
There was a problem hiding this comment.
It works perfectly so i did the update.
There was a problem hiding this comment.
just add the cellClassRenderin the TS declaration and we'll be good :)
There was a problem hiding this comment.
I would like to, but i didn't find the TS declaration for columns... I only have:
...
export interface TableProps {
columns: Object[];
data: any[];
...
in Table.d.ts...
# [3.3.0](v3.2.0...v3.3.0) (2022-10-26) ### Features * Ajout de la gestion d'une classe specifique pour les cellule TD des Tableau ([#278](#278)) ([3d914e0](3d914e0))
|
🎉 This PR is included in version 3.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Bonjour,
L'objectif de ce besoin est de pouvoir conditionner le style de la cellule en fonction de son contenu, notamment la couleur de fond.
Merci d'avance pour la prise en compte de cette demande.
Cordialement,