@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;
  }

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

  [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 px-3 first:pl-6 last:pr-6 py-2.5;
    @apply border-y-1 first:border-l-1 last:border-r-1;
    @apply first:rounded-tl-lg last:rounded-tr-lg;
    @apply bg-table-header-background text-description font-bold;

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

  [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 first:border-l-1 last:border-r-1;
    @apply [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
  }

  [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 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-lg last:rounded-br-lg;
  }
}