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

- use tanstack as basis for table implementation - add in relevant stories for styles
chanzuckerberg · Sep 6, 2024 · 30390b9 · 30390b9
1 parent 4f6ed48
commit 30390b9
Show file tree

Hide file tree

Showing 6 changed files with 874 additions and 498 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
@@ -6,6 +6,7 @@
  * DataTable
  */
 
+
  /* Visible table caption */
 .data-table__caption-container {
   display: flex;
@@ -37,7 +38,6 @@
 }
 
 .data-table__table {
-  border: 1px solid;
   width: 100%;
 
   .data-table__caption + &,
@@ -50,11 +50,67 @@
   width: calc(var(--eds-size-34) / 16 * 1rem);
 }
 
+.data-table--tableStyle-border {
+  /* TODO-AH: token for 1px */
+  border: 1px solid;
+}
+
+.data-table__header-cell {
+  font: var(--eds-theme-typography-title-md);
+  text-align: left;
+
+  .data-table--size-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 {
+  font: var(--eds-theme-typography-body-md);
+
+  .data-table--size-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__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 +119,20 @@
   .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);
+  }
 }