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 9, 2024 · 1ae7a7e · 1ae7a7e
1 parent 4f6ed48
commit 1ae7a7e
Show file tree

Hide file tree

Showing 9 changed files with 1,855 additions and 500 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,13 @@
 }
 
 .data-table__table {
-  border: 1px solid;
   width: 100%;
 
+  /* TODO-AH: add class instead of tag for styles */
+  th {
+    padding: 0;
+  }
+
   .data-table__caption + &,
   .data-table__subcaption + & {
     margin-top: calc(var(--eds-size-4) / 16 * 1rem);
@@ -50,11 +51,107 @@
   width: calc(var(--eds-size-34) / 16 * 1rem);
 }
 
+.data-table--tableStyle-border {
+  /* TODO-AH: token for 1px */
+  border: 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__header-cell {
+  display: flex;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  align-items: center;
+  font: var(--eds-theme-typography-title-md);
+
+  .data-table--size-sm & {
+    font: var(--eds-theme-typography-title-sm);
+    /* TODO-AH: we want to use top-/bottom-padding of 5px 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);
+  }
+
+  .data-table__cell-sublabel {
+    display: block;
+    font: var(--eds-theme-typography-body-sm);
+  }
+}
+
+.data-table__cell {
+  display: flex;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  font: var(--eds-theme-typography-body-md);
+  align-items: center;
+
+  .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);
+  }
+
+  .data-table__cell-sublabel {
+    display: block;
+    font: var(--eds-theme-typography-body-sm);
+  }
+
+  /* TODO-AH .data-cell__cell--icon {} */
+}
+
+.data-table__row {
+  .data-table--rowStyle-lined & {
+    border-bottom: 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: 1px solid;
+  /* TODO-AH: figure out positioning styles for sticky headers/columns */
+  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);
+  }
 
   .data-table__caption {
     color: var(--eds-theme-color-text-utility-default-primary);
@@ -63,4 +160,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);
+  }
 }