feat(DataTable): introduce 1.0 component

.storybook/data/tokens.json

@@ -811,6 +811,7 @@
   "eds-size-20": "160",
   "eds-size-24": "192",
   "eds-size-32": "256",
+  "eds-size-34": "272",
   "eds-size-40": "320",
   "eds-size-base-unit": "8",
   "eds-size-half": "4",

.storybook/preview.tsx

@@ -84,6 +84,7 @@ export const parameters: Preview['parameters'] = {
     ...createInitialReleaseConfig('1.2'),
     ...createInitialReleaseConfig('1.1'),
     ...createInitialReleaseConfig('1.0'),
+    ...createCurrentReleaseConfig('1.0'),
     ...createCurrentReleaseConfig('1.3'),
     ...createCurrentReleaseConfig('2.0'),
     ...createCurrentReleaseConfig('2.1'),

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",

src/components/DataTable/DataTable.module.css

@@ -0,0 +1,291 @@
+/*------------------------------------*\
+    # DATA TABLE
+\*------------------------------------*/
+
+/* Visible table caption */
+
+/* TODO: 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;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  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);
+}
+
+.data-table__caption-text {
+  flex-grow: 1;
+}
+
+/* Invisible table caption (a11y) */
+.data-table__aria-caption {
+  display: none;
+}
+
+.data-table__caption {
+  caption-side: top;
+  font: var(--eds-theme-typography-headline-md-bold);
+}
+
+.data-table__subcaption {
+  font: var(--eds-theme-typography-headline-sm);
+}
+
+.data-table__table {
+  table-layout: fixed;
+  width: 100%;
+
+  /* add class instead of tag for styles? */
+  th,
+  td {
+    padding: 0;
+    vertical-align: top;
+    /**
+     * inherit height from 1px size of table rows. This allows height: 100% on cells containers
+     *  to affect full height of cell
+     */
+    height: inherit;
+  }
+
+  .data-table__caption + &,
+  .data-table__subcaption + & {
+    margin-top: calc(var(--eds-size-4) / 16 * 1rem);
+  }
+}
+
+.data-table__search {
+  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);
+  height: 100%;
+
+  border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
+
+  &.data-table__cell--has-horizontal-divider {
+    border-right-color: var(
+      --eds-theme-color-border-utility-default-low-emphasis
+    );
+  }
+
+  .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);
+  height: 100%;
+
+  border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
+
+  &.data-table__cell--has-horizontal-divider {
+    border-right-color: var(
+      --eds-theme-color-border-utility-default-low-emphasis
+    );
+  }
+
+  .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__header-row {
+  border-bottom: calc(var(--eds-border-width-sm) * 1px) solid;
+  position: sticky;
+  top: -1px;
+}
+
+.data-table__group-row {
+  font: var(--eds-theme-typography-label-sm);
+  position: sticky;
+  top: -1px;
+
+  pointer-events: none;
+
+  .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)
+      calc(var(--eds-size-3) / 16 * 1rem);
+  }
+}
+
+.data-table--is-pinned {
+  box-shadow: var(--eds-box-shadow-sm);
+
+}
+
+/**
+ * Color Tokens
+ */
+
+.data-table__row {
+  /* setting the height to 1px so that later, table cell containers can take up 100% of height */
+  height: 1px;
+
+  &.data-table__row--is-selected {
+    background-color: var(--eds-theme-color-background-table-row-selected);
+  }
+
+  .data-table--rowStyle-lined & {
+    border-bottom: calc(var(--eds-border-width-sm) * 1px) solid;
+
+    &.data-table__row--is-selected {
+      background-color: var(--eds-theme-color-background-table-row-selected);
+    }
+  }
+
+  .data-table--rowStyle-striped &:nth-child(even) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-2);
+
+    &.data-table__row--is-selected {
+      background-color: var(--eds-theme-color-background-table-row-selected);
+    }
+  }
+
+  .data-table--rowStyle-striped &:nth-child(odd) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-1);
+
+    &.data-table__row--is-selected {
+      background-color: var(--eds-theme-color-background-table-row-selected);
+    }
+  }
+}
+
+.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);
+  }
+
+  .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);
+  }
+
+  .data-table__row--is-interactive {
+    /**
+     * TODO: Add in handling for when focused (i dont think you can do?)
+    */
+    &:hover {
+      box-shadow: var(--eds-box-shadow-sm);
+      position: relative;
+      z-index: 1;
+    }
+
+    &:hover:active {
+      box-shadow: var(--eds-box-shadow-md);
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .data-table__group-row {
+    color: var(--eds-theme-color-text-utility-default-primary);
+    background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
+  }
+}