Permettre de définir une largeur de colonne fixe à la <Table>

[pierrelemee]

Permettre de définir une largeur de colonne fixe à la <Table>

J'ai déjà eu à définir des largeurs de colonnes fixes sur un tableau, défini en HTML, afin de garantir les retours à la ligne aux bon endroits et assurer l'affichage des données au bon endroit.

Ex :

<div className="fr-table fr-m-0">
    <div className="fr-table__wrapper">
      <div className="fr-table__container">
        <div className="fr-table__content">
          <table data-testid="tableau-dossiers-resultats">
            <thead>
              <tr>
                <th scope="col" className="fr-col-2">
                  Référence / état
                </th>
                <th scope="col" className="fr-col-4">
                  Identité et adresse du requérant
                </th>
                <th scope="col" className="fr-col-3">
                  Déposé le
                </th>
                <th scope="col" className="fr-col-2">
                  Attribué à
                </th>
                <th scope="col" className="fr-col-1">
                  <span className="fr-hidden">Action</span>
                </th>
              </tr>
            </thead>
            <tbody>
               <!-- le corps vient ici -->
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Le hic c'est que je ne peux pas toucher aux props de chacun des <th> ou <td> qui seront engendrés par le DOM virtuel du composant <Table />.

J'ai bien imaginé un composant plus généraliste, qui me permette à la fois d'assigner un className et du style, mais je voudrais m'assurer que c'est respectueux de la philosophie du design système avant de proposer une PR :

export type TableauProps = Omit<TableProps, "headers"> & {
  headers?:
    | ReactNode[]
    | {
        className?: string;
        style?: CSSProperties;
        children: ReactNode;
      }[];
};

L'idée 💡 serait de faire de même pour les data, donc. Je garde la définition originelle pour la rétro-compatibilité ;)