feat(Table): new component

.storybook/main.js

@@ -72,6 +72,7 @@ module.exports = {
     stories,
     addons: [
         '@storybook/addon-links',
+        '@storybook/addon-controls',
         {
             name: '@storybook/addon-storysource',
             options: {
@@ -88,7 +89,6 @@ module.exports = {
         './platform-selector-addon/register',
         './dark-mode-addon/register',
         './font-size-addon/register',
-        '@storybook/addon-controls',
     ],
     webpackFinal: async (config) => {
         config.watchOptions = {

playroom/snippets.tsx

@@ -399,6 +399,7 @@ const tableSnippets: Array<Snippet> = [
                     'Rarity',
                     'Average Rating',
                 ]}
+                columnTextAlign={["left", "right", "right", "right", "center", "right"]}
                 content={[
                     ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
                     ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
@@ -422,6 +423,7 @@ const tableSnippets: Array<Snippet> = [
                     'Rarity',
                     'Average Rating',
                 ]}
+                columnTextAlign={["left", "right", "right", "right", "center", "right"]}
                 content={[
                     ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
                     ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],

src/__stories__/table-story.tsx

@@ -42,6 +42,7 @@ type Args = {
     numItems: number;
     emptyCase: string;
     columnTextAlign: Array<'left' | 'right' | 'center'>;
+    rowVerticalAlign: 'top' | 'middle';
     columnWidth: Array<number | string>;
 };
 
@@ -54,6 +55,7 @@ export const Default: StoryComponent<Args> = ({
     numItems,
     emptyCase,
     columnTextAlign,
+    rowVerticalAlign,
     columnWidth,
 }) => {
     return (
@@ -74,6 +76,7 @@ export const Default: StoryComponent<Args> = ({
                     ]}
                     columnTextAlign={columnTextAlign}
                     columnWidth={columnWidth}
+                    rowVerticalAlign={rowVerticalAlign}
                     content={foodList.slice(0, numItems)}
                     emptyCase={emptyCase}
                 />
@@ -92,6 +95,7 @@ Default.args = {
     numItems: 5,
     emptyCase: 'No food items found',
     columnTextAlign: ['left', 'right', 'right', 'right', 'center', 'right'],
+    rowVerticalAlign: 'middle',
     columnWidth: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
 };
 Default.argTypes = {
@@ -105,4 +109,8 @@ Default.argTypes = {
     numItems: {
         control: {type: 'range', min: 0, max: foodList.length, step: 1},
     },
+    rowVerticalAlign: {
+        options: ['top', 'middle'],
+        control: {type: 'select'},
+    },
 };

src/table.css.ts

@@ -62,18 +62,24 @@ export const scrollContainer = style({
     },
 });
 
+export const verticalAlign = styleVariants({
+    top: {verticalAlign: 'top'},
+    middle: {verticalAlign: 'middle'},
+});
+
 // we can only apply sticky head to boxed tables, because non-boxed tables don't have a background
 globalStyle(`${boxed} thead`, {
     position: 'sticky',
     top: 0,
     background: skinVars.colors.backgroundContainer,
 });
 
+const ROW_MIN_HEIGHT = 56;
+
 globalStyle(`${table} th, ${table} td`, {
     borderBottom: `1px solid ${skinVars.colors.divider}`,
     padding: '16px 12px',
-    minHeight: 56,
-    verticalAlign: 'middle',
+    height: ROW_MIN_HEIGHT, // height behaves like a min-height in table layout
 });
 
 globalStyle(`${table}:not(${boxed}) th:first-child, ${table}:not(${boxed}) td:first-child`, {
@@ -125,7 +131,7 @@ globalStyle(`${collapsedRowsInMobile} tbody td`, {
         [mq.tabletOrSmaller]: {
             verticalAlign: 'initial',
             border: 'none',
-            minHeight: 0,
+            height: 'auto', // reset min-height
             padding: '0 0 8px 0',
         },
     },

src/table.tsx

@@ -7,9 +7,13 @@ import {InternalBoxed} from './boxed';
 import classNames from 'classnames';
 import Box from './box';
 import {applyCssVars} from './utils/css';
+import ResponsiveLayout, {ResetResponsiveLayout} from './responsive-layout';
 
 import type {DataAttributes} from './utils/types';
 
+type TextAlign = 'left' | 'right' | 'center';
+type VerticalAlign = 'top' | 'middle';
+
 type TableProps = {
     heading: Array<string>;
     content?: Array<Array<React.ReactNode>>;
@@ -20,7 +24,8 @@ type TableProps = {
      * render every row as a card
      */
     responsive?: 'scroll' | 'collapse-rows';
-    columnTextAlign?: Array<'left' | 'right' | 'center'>;
+    columnTextAlign?: Array<TextAlign> | TextAlign;
+    rowVerticalAlign?: VerticalAlign;
     columnWidth?: Array<number | string>;
     /**
      * by default, the table expands to all the available width, if you want the table to have the minimum width to fit the rows content, set fullWidth to false.
@@ -51,11 +56,23 @@ export const Table = React.forwardRef(
             maxHeight,
             emptyCase,
             columnTextAlign,
+            rowVerticalAlign = 'middle',
             columnWidth,
             ...otherProps
         }: TableProps,
         ref: React.Ref<HTMLDivElement>
     ) => {
+        const getColumnTextAlign = (column: number) => {
+            const defaultTextAlign = 'left';
+            if (columnTextAlign) {
+                if (Array.isArray(columnTextAlign)) {
+                    return columnTextAlign[column] ?? defaultTextAlign;
+                }
+                return columnTextAlign;
+            }
+            return defaultTextAlign;
+        };
+
         const collapsedRowsMode = responsive === 'collapse-rows';
         const table = (
             <table
@@ -80,7 +97,10 @@ export const Table = React.forwardRef(
                             <th
                                 scope="col"
                                 key={idx}
-                                className={styles.cellTextAlign[columnTextAlign?.[idx] ?? 'left']}
+                                className={classNames(
+                                    styles.cellTextAlign[getColumnTextAlign(idx)],
+                                    styles.verticalAlign[rowVerticalAlign]
+                                )}
                                 style={{width: columnWidth?.[idx]}}
                             >
                                 {header}
@@ -90,10 +110,10 @@ export const Table = React.forwardRef(
                 </thead>
                 <tbody>
                     {content && content.length ? (
-                        content.map((row, idx) => (
-                            <tr key={idx}>
+                        content.map((row, rowIdx) => (
+                            <tr key={rowIdx}>
                                 {row.map((cell, idx) => (
-                                    <td key={idx}>
+                                    <td key={idx} className={styles.verticalAlign[rowVerticalAlign]}>
                                         {/**
                                          * In collapsedRowsMode, we render the row heading text before every cell content, except for the first cell
                                          * of every row, which is rendered with a medium weight font, as it's the row title.
@@ -114,7 +134,7 @@ export const Table = React.forwardRef(
                                         >
                                             <div
                                                 className={classNames(
-                                                    styles.cellTextAlign[columnTextAlign?.[idx] ?? 'left'],
+                                                    styles.cellTextAlign[getColumnTextAlign(idx)],
                                                     {
                                                         [styles.collapsedRowTittle]:
                                                             idx === 0 && collapsedRowsMode,
@@ -169,16 +189,27 @@ export const Table = React.forwardRef(
                     dataAttributes={{'component-name': 'Table', ...dataAttributes}}
                 >
                     <div {...scrollContainerStyles}>
-                        <Box paddingX={{desktop: 8, mobile: collapsedRowsMode ? 0 : 8}}>{table}</Box>
+                        <Box
+                            paddingX={{desktop: 16, mobile: collapsedRowsMode ? 0 : 8}}
+                            paddingY={{desktop: 8, mobile: 0}}
+                        >
+                            {table}
+                        </Box>
                     </div>
                 </InternalBoxed>
             );
         }
 
         return (
-            <div ref={ref} {...getPrefixedDataAttributes(dataAttributes, 'Table')} {...scrollContainerStyles}>
-                {table}
-            </div>
+            <ResetResponsiveLayout>
+                <div
+                    ref={ref}
+                    {...getPrefixedDataAttributes(dataAttributes, 'Table')}
+                    {...scrollContainerStyles}
+                >
+                    <ResponsiveLayout>{table}</ResponsiveLayout>
+                </div>
+            </ResetResponsiveLayout>
         );
     }
 );