@helpwave/hightide/dist/style/uncompiled/theme/components/table.css

helpwave's component and theming library

@layer components {
  [data-name="table-container"] {
    @apply flex-col-0 w-full overflow-auto border-2 rounded-lg bg-background;

    --table-rounding-bottom: var(--radius-lg);
    --table-rounding-right: var(--radius-lg);

    &[data-scrollbar="horizontal"],
    &[data-scrollbar="both"] {
      --table-rounding-bottom: 0px;
    }

    &[data-scrollbar="vertical"],
    &[data-scrollbar="both"] {
      --table-rounding-right: 0px;
    }

    &[data-page-scroll] {
      @apply overflow-x-auto w-full max-w-full;
    }
  }

  [data-name="table"] {
    @apply table-fixed border-separate border-spacing-0;
    @apply bg-table-background text-table-text;

    &[data-column-sizing="natural"] {
      @apply table-auto w-full;

      &[data-natural-locked] {
        @apply table-fixed;
      }
    }
  }

  [data-name="table-filler-cell"] {
    @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
  }

  [data-name="table-default-cell"] {
    @apply block max-w-full overflow-ellipsis truncate;
  }

  [data-name="table-header-cell"] {
    @apply relative;
    @apply first:pl-3 last:pr-3;
    @apply border-b-2;
    @apply first:rounded-tl-lg last:rounded-tr-[var(--table-rounding-right)];
    @apply bg-table-header-background text-description font-bold;

    &[data-sticky] {
      @apply sticky top-0 z-10;
    }
  }

  .table-header-cell-content {
    @apply px-3 py-2.5 flex-row-1 items-center truncate;
  }

  [data-name="table-body-row"] {
    @apply hover:bg-table-row-hover-background;
    &[data-clickable] {
      @apply hover:cursor-pointer;
    }
  }

  [data-name="table-body-filler-row"] {
    @apply hover:cursor-not-allowed;
    &[data-clickable] {
      @apply hover:cursor-pointer hover:bg-table-row-hover-background;
    }
  }

  [data-name="table-body-cell"],
  [data-name="table-body-filler-cell"] {
    @apply px-3 first:pl-6 last:pr-6 py-2.5;
    @apply border-b-1;
  }

  [data-name="table-resize-indicator"] {
    @apply absolute right-1 top-1/2 -translate-y-1/2;
    @apply h-6 w-2 rounded bg-primary;
    @apply cursor-col-resize;
    @apply select-none touch-none;
    @apply opacity-0 transition-opacity;

    &[data-active] {
      @apply opacity-100;
    }

    &[data-disabled] {
      @apply opacity-0 hidden;
    }

    &:not([data-disabled]) {
      @apply group-hover/table-header-cell:opacity-100;
    }
  }

  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"],
  [data-name="table-body-filler-row"]:last-child
    > [data-name="table-body-filler-cell"] {
    @apply first:rounded-bl-[var(--table-rounding-bottom)];
    @apply last:rounded-br-[calc(min(var(--table-rounding-right),var(--table-rounding-bottom)))];
    @apply border-b-0;
  }
}