diff --git a/src/Table.tsx b/src/Table.tsx index 7a67b7a84..7cc4e3025 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -23,6 +23,8 @@ export type TableProps = { noCaption?: boolean; /** Default: false */ bottomCaption?: boolean; + /** Default: false */ + multiline?: boolean; style?: CSSProperties; colorVariant?: TableProps.ColorVariant; }; @@ -31,7 +33,14 @@ export namespace TableProps { type ExtractColorVariant = FrClassName extends `fr-table--${infer AccentColor}` ? Exclude< AccentColor, - "no-scroll" | "no-caption" | "caption-bottom" | "layout-fixed" | "bordered" + | "no-scroll" + | "no-caption" + | "caption-bottom" + | "layout-fixed" + | "bordered" + | "multiline" + | "sm" + | "lg" > : never; @@ -51,6 +60,7 @@ export const Table = memo( fixed = false, noCaption = false, bottomCaption = false, + multiline = false, colorVariant, className, style, @@ -77,7 +87,8 @@ export const Table = memo( "fr-table--no-scroll": noScroll, "fr-table--layout-fixed": fixed, "fr-table--no-caption": noCaption, - "fr-table--caption-bottom": bottomCaption + "fr-table--caption-bottom": bottomCaption, + "fr-table--multiline": multiline }, colorVariant !== undefined && `fr-table--${colorVariant}` ), diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx index aaa936ee1..22fc056a0 100644 --- a/stories/Table.stories.tsx +++ b/stories/Table.stories.tsx @@ -37,6 +37,11 @@ const { meta, getStory } = getStoryFactory({ "description": "Move caption to bottom", "type": { "name": "boolean" } }, + "multiline": { + "description": + "Allow the browser to split cell text on multiple lines to avoid scrolling", + "type": { "name": "boolean" } + }, "colorVariant": { "options": (() => { const options = [