diff --git a/src/Table.tsx b/src/Table.tsx index ed0a7258..a50977ef 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -23,22 +23,20 @@ export type TableProps = { noCaption?: boolean; /** Default: false */ bottomCaption?: boolean; + cellsAlignment?: (TableProps.Alignment | undefined)[][] | (TableProps.Alignment | undefined)[]; size?: TableProps.Size; style?: CSSProperties; - colorVariant?: TableProps.ColorVariant; }; export namespace TableProps { export type Size = "sm" | "md" | "lg"; - type ExtractColorVariant = FrClassName extends `fr-table--${infer AccentColor}` - ? Exclude< - AccentColor, - "no-scroll" | "no-caption" | "caption-bottom" | "layout-fixed" | "bordered" | Size - > + type ExtractCellClasses = FrClassName extends `fr-cell--${infer Alignment}` + ? Alignment : never; - export type ColorVariant = ExtractColorVariant; + export type Alignment = ExtractCellClasses & + ("center" | "top" | "bottom" | "right"); } /** @see */ @@ -55,7 +53,7 @@ export const Table = memo( noCaption = false, bottomCaption = false, size = "md", - colorVariant, + cellsAlignment = undefined, className, style, ...rest @@ -68,24 +66,35 @@ export const Table = memo( "explicitlyProvidedId": id_props }); + const getCellAlignment = (i: number, j: number): undefined | string => { + if (Array.isArray(cellsAlignment)) { + const rowCellsAlignement = cellsAlignment[i]; + if (Array.isArray(rowCellsAlignement)) { + const cellAlignement = rowCellsAlignement[j]; + return cellAlignement === undefined ? undefined : `fr-cell--${cellAlignement}`; + } + + const cellAlignement = cellsAlignment[j]; + return cellAlignement === undefined || Array.isArray(cellAlignement) + ? undefined + : `fr-cell--${cellAlignement}`; + } + return undefined; + }; + return (
@@ -109,7 +118,9 @@ export const Table = memo( {data.map((row, i) => ( {row.map((col, j) => ( - {col} + + {col} + ))} ))} diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx index e70cd221..06b22e8e 100644 --- a/stories/Table.stories.tsx +++ b/stories/Table.stories.tsx @@ -1,8 +1,7 @@ -import { Table, type TableProps } from "../dist/Table"; +import { Table } from "../dist/Table"; import { getStoryFactory } from "./getStory"; import { sectionName } from "./sectionName"; -import { assert } from "tsafe/assert"; -import type { Equals } from "tsafe"; +import React from "react"; const { meta, getStory } = getStoryFactory({ sectionName, @@ -36,35 +35,6 @@ const { meta, getStory } = getStoryFactory({ "bottomCaption": { "description": "Move caption to bottom", "type": { "name": "boolean" } - }, - "colorVariant": { - "options": (() => { - const options = [ - "green-tilleul-verveine", - "green-bourgeon", - "green-emeraude", - "green-menthe", - "green-archipel", - "blue-ecume", - "blue-cumulus", - "purple-glycine", - "pink-macaron", - "pink-tuile", - "brown-cafe-creme", - "brown-caramel", - "brown-opera", - "orange-terre-battue", - "yellow-moutarde", - "yellow-tournesol", - "beige-gris-galet", - undefined - ] as const; - - assert>(); - - return options; - })(), - "control": { "type": "select", "labels": { "null": "no color variant" } } } } }); @@ -158,24 +128,6 @@ export const TableWithBottomCaption = getStory({ ] }); -export const TableWithColorVariant = getStory({ - "colorVariant": "green-emeraude", - "caption": "Titre du tableau", - "headers": ["td", "titre"], - "data": [ - [ - "Lorem ipsum dolor sit amet consectetur adipisicin", - "Lorem ipsum dolor sit amet consectetur" - ], - ["Lorem ipsum d", "Lorem ipsu"], - [ - "Lorem ipsum dolor sit amet consectetur adipisicin", - "Lorem ipsum dolor sit amet consectetur" - ], - ["Lorem ipsum d", "Lorem ipsu"] - ] -}); - export const SmallTable = getStory({ "caption": "Titre du tableau", "headers": ["td", "titre"], @@ -211,3 +163,42 @@ export const LargeTable = getStory({ ], "size": "lg" }); + +const CellWithBr = ( + + Lorem
+ ipsu +
d +
+); + +export const TableWithSomeColumnAlignement = getStory({ + "caption": "Titre du tableau", + "headers": ["aligné à droite", "aligné au centre", "aligné en haut", "aligné en bas"], + "data": [ + [CellWithBr, "Lorem ipsum d", "Lorem ipsum d", "Lorem ipsum d"], + ["Lorem ipsum d", CellWithBr, "Lorem ipsu", "Lorem ipsum d"], + ["Lorem ipsum d", "Lorem ipsum d", CellWithBr, "Lorem ipsum d"], + ["Lorem ipsum d", "Lorem ipsu", "Lorem ipsum d", CellWithBr] + ], + "size": "lg", + "cellsAlignment": ["right", "center", "top", "bottom"] +}); + +export const TableWithSomeCellAlignement = getStory({ + "caption": "Titre du tableau", + "headers": ["colonne 1", "colonne 2", "colonne 3", "colonne 4"], + "data": [ + ["aligné à droite", "Lorem ipsum d", "Lorem ipsum d", CellWithBr], + ["Lorem ipsum d", "aligné au centre", "Lorem ipsum d", CellWithBr], + ["Lorem ipsum d", "Lorem ipsum d", "aligné en haut", CellWithBr], + ["Lorem ipsum d", "Lorem ipsu", CellWithBr, "aligné en bas"] + ], + "size": "lg", + "cellsAlignment": [ + ["right", undefined, undefined, undefined], + [undefined, "center", undefined, undefined], + [undefined, undefined, "top", undefined], + [undefined, undefined, undefined, "bottom"] + ] +});