feat(DataTable): implement TanStack Table (#2055)

- use tanstack as basis for table implementation - add in relevant stories for styles - add in snapshots for tests
chanzuckerberg · Sep 16, 2024 · bf77dd2 · bf77dd2
1 parent fe70330
commit bf77dd2
Show file tree

Hide file tree

Showing 11 changed files with 5,753 additions and 543 deletions.
diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.20.5",
     "@tippyjs/react": "^4.2.6",
     "chalk": "^4.1.2",
     "clsx": "^2.1.1",

diff --git a/src/components/DataTable/DataTable.module.css b/src/components/DataTable/DataTable.module.css
@@ -2,11 +2,8 @@
     # DATA TABLE
 \*------------------------------------*/
 
-/**
- * DataTable
- */
-
  /* Visible table caption */
+ /* TODO-AH: make it so that we have the search bar and actions wrap together instead of separately */
 .data-table__caption-container {
   display: flex;
   align-items: flex-end;
@@ -15,7 +12,7 @@
   gap: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-6) / 16 * 1rem);
 
   text-align: start;
-  margin: 0 calc(var(--eds-size-3) / 16 * 1rem)  calc(var(--eds-size-4) / 16 * 1rem);
+  margin: 0 calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
 }
 
 .data-table__caption-text {
@@ -37,9 +34,15 @@
 }
 
 .data-table__table {
-  border: 1px solid;
+  table-layout: fixed;
   width: 100%;
 
+  /* add class instead of tag for styles? */
+  th, td {
+    padding: 0;
+    vertical-align: top;
+  }
+
   .data-table__caption + &,
   .data-table__subcaption + & {
     margin-top: calc(var(--eds-size-4) / 16 * 1rem);
@@ -50,11 +53,116 @@
   width: calc(var(--eds-size-34) / 16 * 1rem);
 }
 
+.data-table--tableStyle-border {
+  border: calc(var(--eds-border-width-sm) * 1px) solid;
+}
+
+.data-table__cell-text {
+  text-align: start;
+
+  .data-table__cell--alignment-leading & {
+    text-align: start;
+  }
+
+  .data-table__cell--alignment-trailing & {
+    text-align: end;
+  }
+}
+
+.data-table__cell--alignment-leading {
+  justify-content: flex-start;
+}
+
+.data-table__cell--alignment-trailing {
+  justify-content: flex-end;
+}
+
+.data-table__cell-sublabel {
+  display: block;
+  font: var(--eds-theme-typography-body-sm);
+}
+
+.data-table__header-cell {
+  display: flex;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  align-items: flex-start;
+  font: var(--eds-theme-typography-title-md);
+
+  .data-table--size-sm & {
+    font: var(--eds-theme-typography-title-sm);
+    /* TODO(bug): we want to use top-/bottom-padding of 5px (instead of 4px) to give overall height divisible by 8 (32px) */
+    padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  .data-table--size-md & {
+    padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-3) / 16 * 1rem);
+  }
+
+  .data-cell__cell--icon {
+    margin-top: calc(var(--eds-size-1) / 16 * 1rem);
+    flex-shrink: 0;
+
+    .data-table--size-sm & {
+      margin-top: calc(var(--eds-size-half) / 16 * 1rem);
+    }
+  }
+}
+
+.data-table__cell {
+  display: flex;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  align-items: flex-start;
+  font: var(--eds-theme-typography-body-md);
+
+  .data-table--size-sm & {
+    font: var(--eds-theme-typography-body-sm);
+    padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  .data-table--size-md & {
+    padding: calc(var(--eds-size-2) / 16 * 1rem) calc(var(--eds-size-3) / 16 * 1rem);
+  }
+
+  .data-cell__cell--icon {
+    margin-top: calc(var(--eds-size-half) / 16 * 1rem);
+    flex-shrink: 0;
+  }
+}
+
+.data-table__row {
+  .data-table--rowStyle-lined & {
+    border-bottom: calc(var(--eds-border-width-sm) * 1px) solid;
+  }
+
+  .data-table--rowStyle-striped &:nth-child(even) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-2);
+  }
+
+  .data-table--rowStyle-striped &:nth-child(odd) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-1);
+  }
+}
+
+.data-table__header-row {
+  border-bottom: calc(var(--eds-border-width-sm) * 1px) solid;
+  position: sticky;
+  top: 0;
+}
+
 /**
  * Color Tokens
  */
 .data-table {
   display: block;
+  position: relative;
+
+  .data-table__table {
+    background-color: var(--eds-theme-color-background-utility-base-1);
+
+    th {
+      background-color: var(--eds-theme-color-background-utility-base-1);
+    }
+  }
 
   .data-table__caption {
     color: var(--eds-theme-color-text-utility-default-primary);
@@ -63,4 +171,24 @@
   .data-table__subcaption {
     color: var(--eds-theme-color-text-utility-default-secondary);
   }
+
+  .data-table--tableStyle-border, .data-table__header-row {
+    border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
+
+  .data-table__header-cell {
+    color: var(--eds-theme-color-text-utility-default-primary);
+  }
+
+  .data-table__cell {
+    color: var(--eds-theme-color-text-utility-default-primary);
+  }
+
+  .data-table--rowStyle-lined {
+    color: var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
+
+  .data-table__cell-sublabel, .data-table__header-cell-sublabel {
+    color: var(--eds-theme-color-text-utility-default-secondary);
+  }
 }