feat(Table) add size option on cells

packages/visualizations-react/stories/Table/options.ts

@@ -8,6 +8,7 @@ export const columns: Column[] = [
         options: {
             display: (title: string) => `${title.toUpperCase()}`,
         },
+        size: 'medium',
     },
     {
         title: 'Price',
@@ -24,6 +25,7 @@ export const columns: Column[] = [
         title: 'Content',
         key: 'content',
         dataFormat: 'long-text',
+        size: 'large',
     },
     {
         title: 'Published date',

packages/visualizations/src/components/Table/Cell/Cell.svelte

@@ -4,12 +4,14 @@
 
     export let rawValue: unknown;
     export let column: Column;
+    const defautSize = 'fit-content';
 
-    $: ({ dataFormat, options = {} } = column);
+    $: ({ dataFormat, options = {}, size } = column);
+    $: columnSizeClass = size ? `table-column-size--${size}` : `table-column-size--${defautSize}`;
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
-<td class={`table-data--${dataFormat}`}>
+<td class={`table-data--${dataFormat} ${columnSizeClass}`}>
     {#if isValidRawValue(rawValue)}
         <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
     {/if}
@@ -24,23 +26,37 @@
         text-align: right;
     }
     /* to be improved in the formatting story */
-    :global(.ods-dataviz--default td.table-data--long-text > span),
+    :global(.ods-dataviz--default td.table-data--long-text),
     :global(.ods-dataviz--default td.table-data--short-text),
     :global(.ods-dataviz--default td.table-data--url) {
         text-overflow: ellipsis;
         overflow: hidden;
-        width: max-content;
         min-width: 40px;
-        max-width: 240px;
     }
-    :global(.ods-dataviz--default td.table-data--long-text > span) {
+    :global(.ods-dataviz--default td.table-data--long-text > span),
+    :global(.ods-dataviz--default td.table-data--geo > div) {
         display: -webkit-box;
         -webkit-line-clamp: 3;
         line-clamp: 3;
         -webkit-box-orient: vertical;
         white-space: pre-wrap;
+        width: max-content;
+        max-width: 100%;
+        overflow: hidden;
     }
     :global(.ods-dataviz--default td.table-data--number) {
         text-align: right;
     }
+    td.table-column-size--large {
+        max-width: 400px;
+    }
+    td.table-column-size--medium {
+        max-width: 200px;
+    }
+    td.table-column-size--small {
+        max-width: 100px;
+    }
+    td.table-column-size--fit-content {
+        max-width: none;
+    }
 </style>

packages/visualizations/src/components/Table/types.ts

@@ -24,6 +24,7 @@ type BaseColumn = {
         desc: string;
     };
     onClick?: () => void;
+    size?: 'large' | 'medium' | 'small' | 'fit-content';
 };
 
 export type ShortTextColumn = BaseColumn & {