Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Ajout de la gestion d'une classe specifique pour les cellule TD des Tableau #278

Merged
merged 3 commits into from
Oct 26, 2022
Merged

feat: Ajout de la gestion d'une classe specifique pour les cellule TD des Tableau #278

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27453e5
Ajout de la gestion du classe specifique pour les cellule TD des Tableau
Oct 19, 2022
aa16bcb
ajout de la gestion des classes conditionnels sur une cellule d'un ta…
Oct 24, 2022
1ca7e6e
optimisation condition de gestion du css
Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/src/components/Table/Table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const columns = [
),
sortable: true,
},
{ name: 'name_en', label: 'Anglais', sortable: true },
{ name: 'name_en', label: 'Anglais', sortable: true, columnClassName: 'my-own-css-class' },
];

const TableExample = () => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/interface/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Copy link
Collaborator

@desoindx desoindx Oct 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 {
    ...
  }
}

Copy link
Contributor Author

@CyrilBillon CyrilBillon Oct 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

{column.render ? column.render(row) : row[column.name]}
</td>
))}
Expand Down