feat(Table): support row header (#1058)

mittwald · Dec 18, 2024 · b73cfdd · b73cfdd
1 parent 4242fa5
commit b73cfdd
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/packages/components/src/components/Table/Table.module.scss b/packages/components/src/components/Table/Table.module.scss
@@ -13,46 +13,50 @@
   border-spacing: 0;
   background-color: var(--table--background-color);
 
-  .header {
-    color: var(--table--header-color);
+  .column {
     font-weight: var(--table--header-font-weight);
+    text-align: start;
   }
 
-  :where(.body) {
-    tr {
-      &:where(:nth-of-type(odd):not(.footer)) {
-        background-color: var(--table--background-color-accent);
-      }
+  .cell,
+  .column {
+    padding-inline: var(--table--padding-x);
+    padding-block: var(--table--padding-y);
+    text-align: start;
+    vertical-align: top;
+    border-style: var(--table--border-style);
+    border-color: var(--table--border-color);
+    border-width: 0;
+  }
 
-      td {
-        border-block-start-width: var(--table--border-width);
-        border-block-start-style: var(--table--border-style);
-        border-block-start-color: var(--table--border-color);
+  .header {
+    .column {
+      border-block-end-width: var(--table--header-border-width);
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .body {
+    .row {
+      &:nth-of-type(odd):not(.footer) {
+        background-color: var(--table--background-color-accent);
       }
 
-      &:first-of-type {
-        td {
-          border-block-start-width: var(--table--header-border-width);
+      &:not(:last-child) {
+        .cell {
+          border-block-end-width: var(--table--border-width);
         }
       }
 
-      &.footer {
-        td {
-          border-block-start-width: var(--table--footer-border-width);
-          font-weight: var(--table--footer-font-weight);
-        }
+      &.footer .cell {
+        border-block-start-width: var(--table--border-width);
       }
     }
   }
 
-  .cell,
-  .column {
-    padding-inline: var(--table--padding-x);
-    padding-block: var(--table--padding-y);
-    text-align: start;
-    vertical-align: top;
-  }
-
   &.vertical-align-middle {
     .cell,
     .column {

diff --git a/packages/components/src/components/Table/components/TableCell/TableCell.tsx b/packages/components/src/components/Table/components/TableCell/TableCell.tsx
@@ -4,19 +4,34 @@ import * as Aria from "react-aria-components";
 import clsx from "clsx";
 import styles from "../../Table.module.scss";
 import { SkeletonText } from "@/components/SkeletonText";
+import { TableColumn } from "@/components/Table";
 
 export interface TableCellProps
-  extends Omit<Aria.CellProps, "children">,
-    PropsWithChildren {}
+  extends Omit<Aria.CellProps, "children" | "style">,
+    PropsWithChildren {
+  rowHeader?: boolean;
+}
 
 export const TableCell: FC<TableCellProps> = (props) => {
-  const { children, className, ...rest } = props;
+  const { children, className, rowHeader, ...rest } = props;
 
   const rootClassName = clsx(styles.cell, className);
 
+  const content = (
+    <Suspense fallback={<SkeletonText width="100px" />}>{children}</Suspense>
+  );
+
+  if (rowHeader) {
+    return (
+      <TableColumn className={rootClassName} {...rest}>
+        {content}
+      </TableColumn>
+    );
+  }
+
   return (
     <Aria.Cell className={rootClassName} {...rest}>
-      <Suspense fallback={<SkeletonText width="100px" />}>{children}</Suspense>
+      {content}
     </Aria.Cell>
   );
 };

diff --git a/packages/components/src/components/Table/stories/Default.stories.tsx b/packages/components/src/components/Table/stories/Default.stories.tsx
@@ -91,3 +91,25 @@ export const WithFooter: Story = {
     </Table>
   ),
 };
+
+export const WithRowHeader: Story = {
+  render: (props) => (
+    <Table {...props} aria-label="Order overview">
+      <TableHeader></TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell rowHeader>proSpace (2 vCPU / 4 GB RAM)</TableCell>
+          <TableCell>32,00 €</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell rowHeader>20 GB storage</TableCell>
+          <TableCell>Inclusive</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell rowHeader>20 GB additional storage</TableCell>
+          <TableCell>2,00 €</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
diff --git a/packages/design-tokens/src/structure/table.yml b/packages/design-tokens/src/structure/table.yml
@@ -11,8 +11,6 @@ table:
     value: "{size-px.m}"
   padding-y:
     value: "{size-px.s}"
-  header-color:
-    value: "{primary.color.1000}"
   header-font-weight:
     value: "{font-weight.bold}"
   header-border-width: