@harvest-profit/npk/dist/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;
}

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

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

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

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

.Table > 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);
  }

.Table > 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);
  }

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

.Table[role="grid"] {
    border-spacing: 1px;
  }

.Table[role="grid"] [data-color="positive"] {
      --internal-table-grid-bg-color: var(--table-grid-positive-bg-color);
    }

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

.Table[role="grid"] [data-color="negative"] {
      --internal-table-grid-bg-color: var(--table-grid-negative-bg-color);
    }

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

.Table[role="grid"] [data-color="neutral"] {
      --internal-table-grid-bg-color: var(--table-grid-neutral-bg-color);
    }

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

.Table[role="grid"] [data-color="really-positive"] {
      --internal-table-grid-bg-color: var(--table-grid-really-positive-bg-color);
    }

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

.Table[role="grid"] [data-color="really-negative"] {
      --internal-table-grid-bg-color: var(--table-grid-really-negative-bg-color);
    }

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

.Table[role="grid"] thead > tr > th,.Table[role="grid"] tbody > tr > th {
      background-color: transparent;
      border: 0;
      font-weight: normal;
      font-size: var(--size-14);
    }

[data-column-focused="true"]:is(.Table[role="grid"] thead > tr > th,.Table[role="grid"] tbody > tr > th) {
        background-color: var(--table-grid-default-bg-color);
      }

.Table[role="grid"] tr[aria-hidden="true"] {
      opacity: 0.7;
    }

.Table[role="grid"] tbody > tr > th[rowSpan] > * {
      writing-mode: vertical-rl;
    }

:is(.Table[role="grid"] tbody > tr:nth-child(1 of :has(td))) td:first-of-type {
        border-top-left-radius: 8px;
      }

:is(.Table[role="grid"] tbody > tr:nth-child(1 of :has(td))) td:last-of-type {
        border-top-right-radius: 8px;
      }

:is(.Table[role="grid"] tbody > tr:last-child) td:first-of-type {
        border-bottom-left-radius: 8px;
      }

:is(.Table[role="grid"] tbody > tr:last-child) td:last-of-type {
        border-bottom-right-radius: 8px;
      }

.Table[role="grid"] 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 */

/* level=1 (assumed if not specified), always clickable */

/* expandable, always clickable */

:is([aria-expanded]:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])),[aria-level="1"]:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])),:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])):not([aria-level])):hover {
          cursor: pointer;
          --table-row-color: var(--table-row-color--hover);
        }

:is([aria-expanded]:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])),[aria-level="1"]:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])),:is(.Table[role="treegrid"] > tbody > tr):not([aria-disabled="true"]):not(:has(th[scope="row"])):not([aria-level])):active {
          cursor: pointer;
          --table-row-color: var(--table-row-color--active);
        }

[aria-expanded="true"]:is(.Table[role="treegrid"] > tbody > tr) {
      --table-row-color: var(--internal-table-bg-color);
      --table-border: none;
    }

[aria-expanded="true"]:is(.Table[role="treegrid"] > tbody > tr) + tr {
      --table-row-color: var(--internal-table-bg-color);
    }

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

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

.Table  > 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: 5;
    z-index: var(--table-sticky-z-index, 5);
  }

:is(.Table > thead > tr > th) small {
      font-size: inherit;
      font-weight: normal;
    }

:is(.Table > thead > tr > th):first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

:is(.Table > thead > tr > th):last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

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

.Table  > 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) + 0rem);
    top: calc(var(--table-header-height) + var(--sticky-top, 0rem));
  }

[data-size="lg"]:is(.Table > tbody > tr > :where(th[scope="row"])) {
      top: calc(var(--table-header-height) + 0rem - calc(var(--table-section-padding) * 6));
      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"]:is(.Table > tbody > tr > :where(th[scope="row"])) {
      position: static;
      top: auto;
    }

:is(.Table > tbody > tr > :where(th[scope="row"])):first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

:is(.Table > tbody > tr > :where(th[scope="row"])):last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

.Table  > 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));
  }

:is(.Table > tbody > tr > *):first-child {
      padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

:is(.Table > tbody > tr > *):last-child {
      padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
    }

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

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

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

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

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

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

:is(.Table > 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: 0;
      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"]:is(:is(.Table > tfoot) > tr > td) {
        position: static;
        bottom: auto;
      }

:is(:is(.Table > tfoot) > tr > td):first-child {
        padding-left: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
      }

:is(:is(.Table > tfoot) > tr > td):last-child {
        padding-right: var(--table-cell-ends-padding-x, var(--table-cell-padding-x));
      }

[data-sticky="false"]:is(.Table > tfoot) > tr > td {
      position: static;
      bottom: auto;
    }