@harvest-profit/npk/src/Table/Table.module.css

NPK UI Design System

.TableMetrics {
  color: var(--color-neutral-50);
  font-size: var(--size-12);
  margin-bottom: 6px;
  display: block;
}

.Table {
  --table-sticky-z-index: 5;
  --table-cell-padding-x: 0.3rem;
  --table-cell-padding-y: 0.35rem;
  --table-section-padding: 0.3rem;
  --internal-table-header-padding: var(--table-header-padding, var(--table-section-padding));
  --internal-table-footer-padding: var(--table-footer-padding, var(--table-section-padding));
  --table-header-height: 2.1rem;
  --internal-table-border-color: var(--table-border-color, var(--color-neutral-90));
  --internal-table-bg-color: var(--table-bg-color, var(--body-bg-color));
  --internal-table-section-bg-color: var(--table-section-bg-color, var(--color-neutral-90));
  --internal-table-section-lg-bg-color: var(--table-section-lg-bg-color, var(--color-neutral-95));
  --internal-table-footer-bg-color: var(--table-footer-bg-color, var(--color-neutral-90));
  --table-zebra-bg-color: lch(from var(--internal-table-bg-color) calc(l - var(--table-zebra-brightness-adjustment, 2)) c h);
  --table-grid-default-bg-color: #e9ecef;

  --table-grid-really-positive-bg-color: #abcfac;
  --table-grid-positive-bg-color: #c9e0ca;
  --table-grid-negative-bg-color: #f4c8cc;
  --table-grid-really-negative-bg-color: #eda9af;
  --table-grid-neutral-bg-color: #f9e7ba;

  --table-grid-really-positive-bg-color--hover: #bad7bb;
  --table-grid-positive-bg-color--hover: #d9e9d9;
  --table-grid-negative-bg-color--hover: #f7d8db;
  --table-grid-really-negative-bg-color--hover: #f0b8bd;
  --table-grid-neutral-bg-color--hover: #faeece;

  --table-row-color--hover: var(--control-bg-color--hover);
  --table-row-color--active: var(--control-bg-color--active);

  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0rem;
  font-size: 15px;

  caption {
    font-weight: 600;
    font-size: var(--size-18);

    &[data-align="bottom"] {
      margin-top: var(--size-16);
      caption-side: bottom;
    }
  }

  &[data-layout="fixed"] {
    table-layout: fixed;
  }

  &[data-variant="zebra"] > tbody > tr:nth-child(even) {
    --table-row-color: var(--table-zebra-bg-color, var(--internal-table-bg-color));
  }

  & > tbody > tr[data-variant="emphasis"] {
    --table-row-color: var(--control-variant-emphasis-bg-color);
    color: var(--control-variant-emphasis-fg-color);
    --table-row-color--hover: var(--control-variant-emphasis-bg-color--hover);
    --table-row-color--active: var(--control-variant-emphasis-bg-color--active);
  }

  & > tbody > tr[data-variant="muted"] {
    --table-row-color: var(--control-variant-muted-bg-color);
    color: var(--control-variant-muted-fg-color);
    --table-row-color--hover: var(--control-variant-muted-bg-color--hover);
    --table-row-color--active: var(--control-variant-muted-bg-color--active);
  }

  & > tbody > tr:has(+ tr[aria-labelledby]:not([data-bordered="true"])) {
    --table-border: none;
  }

  &[role="grid"] {
    border-spacing: 1px;

    [data-color="positive"] {
      --internal-table-grid-bg-color: var(--table-grid-positive-bg-color);
      &[data-column-focused="true"], &:hover {
        --internal-table-grid-bg-color: var(--table-grid-positive-bg-color--hover);
      }
    }
    [data-color="negative"] {
      --internal-table-grid-bg-color: var(--table-grid-negative-bg-color);
      &[data-column-focused="true"], &:hover {
        --internal-table-grid-bg-color: var(--table-grid-negative-bg-color--hover);
      }
    }

    [data-color="neutral"] {
      --internal-table-grid-bg-color: var(--table-grid-neutral-bg-color);
      &[data-column-focused="true"], &:hover {
        --internal-table-grid-bg-color: var(--table-grid-neutral-bg-color--hover);
      }
    }

    [data-color="really-positive"] {
      --internal-table-grid-bg-color: var(--table-grid-really-positive-bg-color);
      &[data-column-focused="true"], &:hover {
        --internal-table-grid-bg-color: var(--table-grid-really-positive-bg-color--hover);
      }
    }

    [data-color="really-negative"] {
      --internal-table-grid-bg-color: var(--table-grid-really-negative-bg-color);
      &[data-column-focused="true"], &:hover {
        --internal-table-grid-bg-color: var(--table-grid-really-negative-bg-color--hover);
      }
    }

    thead > tr > th,
    tbody > tr > th {
      background-color: transparent;
      border: 0;
      font-weight: normal;
      font-size: var(--size-14);

      &[data-column-focused="true"] {
        background-color: var(--table-grid-default-bg-color);
      }
    }

    tr[aria-hidden="true"] {
      opacity: 0.7;
    }

    tbody > tr > th[rowSpan] > * {
      writing-mode: vertical-rl;
    }

    tbody > tr:nth-child(1 of :has(td)) {
      td:first-of-type {
        border-top-left-radius: 8px;
      }
      td:last-of-type {
        border-top-right-radius: 8px;
      }
    }

    tbody > tr:last-child {
      td:first-of-type {
        border-bottom-left-radius: 8px;
      }
      td:last-of-type {
        border-bottom-right-radius: 8px;
      }
    }

    tbody > tr > td {
      border: 0;
      cursor: pointer;
      font-size: var(--size-14);
      background-color: var(--internal-table-grid-bg-color, var(--table-grid-default-bg-color));
    }
  }

  /* treegrids are clickable tables that may or may not expand */
  &[role="treegrid"] > tbody > tr {
    /* level=1 (assumed if not specified), always clickable */
    /* expandable, always clickable */
    &:not([aria-disabled="true"]):not(:has(th[scope="row"])) {
      &[aria-expanded],
      &[aria-level="1"],
      &:not([aria-level]) {


        &:hover {
          cursor: pointer;
          --table-row-color: var(--table-row-color--hover);
        }

        &:active {
          cursor: pointer;
          --table-row-color: var(--table-row-color--active);
        }
      }

    }

    &[aria-expanded="true"] {
      --table-row-color: var(--internal-table-bg-color);
      --table-border: none;
    }

    &[aria-expanded="true"] + tr {
      --table-row-color: var(--internal-table-bg-color);
    }
  }

  > * > tr > :is(td, th) {
    transition: background-color 200ms ease-in-out;
    background-color: var(--table-row-color, var(--internal-table-bg-color));
  }

  &[data-truncate="true"] > * > tr > :is(td, th),
  > * > tr > :is(td, th)[data-truncate="true"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--internal-table-border-color);
    padding: var(--internal-table-header-padding);
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
    font-weight: bold;
    font-size: var(--size-14);
    z-index: var(--table-sticky-z-index, 5);

    small {
      font-size: inherit;
      font-weight: normal;
    }

    &:first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

    &:last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }
  }

  > tbody > tr:has( th[scope="row"][data-size="lg"]):first-child th {
    top: calc(var(--table-header-height) + var(--sticky-top, 0rem));
    padding-top: calc(var(--table-section-padding) * 2);
  }

  > tbody > tr > :where(th[scope="row"]) {
    background: var(--internal-table-section-bg-color);
    font-size: var(--size-12);
    font-weight: bold;
    line-height: 1.6;
    color: var(--control-fg-color);
    padding: var(--table-section-padding);
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
    z-index: 1;

    position: sticky;
    top: calc(var(--table-header-height) + var(--sticky-top, 0rem));

    &[data-size="lg"] {
      top: calc(var(--table-header-height) + var(--sticky-top, 0rem) - calc(var(--table-section-padding) * 6));
      font-size: var(--size-13);
      padding-top: calc(var(--table-section-padding) * 8);
      background: var(--internal-table-section-lg-bg-color);
    }

    &[data-sticky="false"] {
      position: static;
      top: auto;
    }

    &:first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

    &:last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }
  }

  > tbody > tr > * {
    vertical-align: middle;
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: var(--table-border, 1px solid var(--internal-table-border-color));

    &:first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

    &:last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }
  }

  > tbody:last-child > tr:last-child {
    --table-border: none;
  }

  > thead > tr > th {
    background: var(--internal-table-bg-color);
    position: sticky;
    top: var(--sticky-top, 0);
    height: var(--table-header-height);
  }

  [data-type^="num"] + :not([data-type^="num"]):not([data-type="actions"]) {
    padding-left: calc(var(--table-cell-padding-x) * 3);
  }

  [data-type^="num"] {
    text-align: right;
  }

  [data-type="actions"] {
    text-align: right;

    [data-invisible="true"] {
      margin-right: calc(var(--table-cell-ends-padding-x, var(--table-cell-padding-x)) / 2 * -1);
    }
  }

  > tfoot {
    > tr > td {
      background: var(--internal-table-footer-bg-color);
      position: sticky;
      line-height: 1.6;
      font-size: var(--size-14);
      color: var(--control-fg-color);
      bottom: var(--sticky-bottom, 0);
      border-top: var(--table-border, 1px solid var(--internal-table-border-color));
      padding: var(--table-footer-padding);
      padding-left: var(--table-cell-padding-x);
      padding-right: var(--table-cell-padding-x);

      &[data-sticky="false"] {
        position: static;
        bottom: auto;
      }

      &:first-child {
        padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
      }

      &:last-child {
        padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
      }
    }

    &[data-sticky="false"] > tr > td {
      position: static;
      bottom: auto;
    }
  }
}