aplance-ui 1.0.1

package/registry/components/ui/data-table/data-table.module.css

@@ -0,0 +1,594 @@
+/* ─────────────────────────────────────────────
+   Root
+   Fills its flex parent. Stacks filter bar (fixed) + content wrap (grows).
+───────────────────────────────────────────── */
+.root {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+/* ─────────────────────────────────────────────
+   Filter bar
+   CSS grid - always one row, never wraps.
+   gridTemplateColumns is set inline from FilterBar.
+───────────────────────────────────────────── */
+.filter_bar {
+  display: grid;
+  align-items: center;
+  place-items: center;
+  gap: var(--spacing-6);
+  width: 100%;
+  flex-shrink: 0;
+
+  > * {
+    min-width: 0;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Content wrap
+   Grows to fill all space below the filter bar.
+   Flex column: table shell (grows) + pagination (pinned to bottom via margin-top:auto).
+───────────────────────────────────────────── */
+.content_wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─────────────────────────────────────────────
+   Table shell
+   Grows to fill space above pagination. Header pill + scrollable body.
+───────────────────────────────────────────── */
+.table_shell {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  padding-bottom: var(--spacing-6);
+}
+
+/* no bottom padding when pagination is not shown */
+.table_shell_no_pagination {
+  padding-bottom: 0;
+}
+
+/* ─────────────────────────────────────────────
+   Detached header pill
+   Rounded standalone bar. scrollLeft synced to body via JS so pinned
+   columns stay perfectly aligned with their body counterparts.
+───────────────────────────────────────────── */
+.table_header_container {
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.table_header_wrap {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-radius: var(--radius-md);
+  background: var(--color-muted);
+  border: var(--border-1) solid var(--color-border);
+  scrollbar-width: none;
+}
+
+.table_header_wrap::-webkit-scrollbar {
+  display: none;
+}
+
+.header_padding_mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--header-padding-right, 0px);
+  background: var(--color-muted);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-top: var(--border-1) solid var(--color-border);
+  border-right: var(--border-1) solid var(--color-border);
+  border-bottom: var(--border-1) solid var(--color-border);
+  pointer-events: none;
+  z-index: 10;
+  visibility: hidden;
+}
+
+.table_header_container[data-has-scroll="true"] .header_padding_mask {
+  visibility: visible;
+}
+
+/* ─────────────────────────────────────────────
+   Scrollable body
+   flex:1 + min-height:0 = fills all space, then scrolls.
+───────────────────────────────────────────── */
+.table_body_wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  position: relative;
+  /* Add this smooth transition */
+  transition: opacity 0.2s ease;
+}
+
+/* ─────────────────────────────────────────────
+   Shared <table> - header wrap + body wrap.
+   table-layout:fixed + identical widths = perfect column alignment.
+───────────────────────────────────────────── */
+.table {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+
+  thead th {
+    position: relative;
+    height: var(--spacing-11);
+    padding: 0 var(--spacing-6);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+    white-space: nowrap;
+    /* explicit background so sticky pinned cells mask scrolled content */
+    background: var(--color-muted);
+    /* visible: header checkbox focus ring not clipped */
+    overflow: visible;
+  }
+
+  tbody tr {
+    transition: background var(--transition-fast);
+
+    &:hover td {
+      background: var(--color-secondary);
+    }
+
+    &.row_selected td {
+      background: var(--color-muted);
+    }
+
+    &.row_group td {
+      background: var(--color-secondary);
+      font-weight: var(--font-weight-medium);
+    }
+
+    &.row_editing {
+      /* hover should not flicker the background of a row the user is editing */
+      &:hover td {
+        background: var(--color-background);
+      }
+
+      td {
+        background: var(--color-background);
+
+        .td_inner {
+          /* let inline-edit focus rings + dropdown shadows escape the cell */
+          overflow: visible;
+          text-overflow: clip;
+        }
+      }
+    }
+
+    &.row_dragging td {
+      opacity: 0.5;
+      background: var(--color-muted);
+    }
+
+    &.row_drop_target td {
+      box-shadow: inset 0 2px 0 0 var(--color-primary);
+    }
+
+    td {
+      padding: var(--spacing-5) var(--spacing-6);
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-normal);
+      color: var(--color-foreground);
+      vertical-align: middle;
+      border-bottom: var(--border-1) solid var(--color-border);
+      /* explicit background so sticky pinned cells mask scrolled content */
+      background: var(--color-background);
+      /* visible: focus rings + dropdowns escape the cell */
+      overflow: visible;
+    }
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Vertical column borders (showVerticalBorders prop)
+   Drawn on the LEFT of every cell except the first, so we never get a
+   double border at the table's outer edge.
+───────────────────────────────────────────── */
+.table_vertical_borders {
+  /* Only add vertical border if the previous cell is not the last left-pinned cell. Prevents double border with pinned columns. */
+  thead th:not(.col_pinned_last.col_pinned_left) + th,
+  tbody td:not(.col_pinned_last.col_pinned_left) + td {
+    border-left: var(--border-1) solid var(--color-border);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Header inner - flex container that hugs its content.
+   No `flex: 1` on the label; icons sit immediately next to the text and
+   `justify-content` (set by `.align_*`) determines start/end alignment.
+───────────────────────────────────────────── */
+.th_inner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: var(--spacing-11);
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.th_label {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.th_actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex-shrink: 0;
+}
+
+.drag_handle {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-muted-foreground);
+  cursor: grab;
+  flex-shrink: 0;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Compact icon-only button used for sort / group / pin in the header.
+───────────────────────────────────────────── */
+.icon_btn {
+  /* !important needed: --button-icon is also set by :is(.ghost, .tone_ghost) in
+     button.module.css at equal specificity - CSS module load order is not guaranteed,
+     so !important on the var is the only reliable way to win without hardcoding svg color. */
+  --button-icon: var(--color-muted-foreground) !important;
+
+  &:hover:not(.disabled) {
+    --button-icon: var(--color-foreground) !important;
+    background-color: var(--color-border) !important;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Body cell inner - default truncates with ellipsis.
+   Override per-column with `meta.truncate = false` for cells hosting
+   inputs/buttons so focus rings and dropdowns aren't clipped.
+───────────────────────────────────────────── */
+.td_inner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* outset breathing room mirrors the header's */
+  margin: calc(var(--spacing-2) * -1);
+  padding: var(--spacing-2);
+}
+
+.td_inner_no_truncate {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.selection_checkbox {
+  width: fit-content;
+  min-width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+
+  > * {
+    width: fit-content;
+    min-width: fit-content;
+  }
+
+  > * > * {
+    width: fit-content;
+    min-width: fit-content;
+  }
+}
+
+.col_select {
+  padding-left: var(--spacing-5) !important;
+  padding-right: var(--spacing-5) !important;
+
+  .th_inner,
+  .td_inner {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    overflow: visible;
+  }
+}
+
+.group_anchor_cell {
+  text-align: left !important;
+
+  .td_inner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Cell alignment via `column.meta.align`
+   - text-align handles inline text (truncate=true case)
+   - flex justify-content handles non-truncated content (action buttons, inputs)
+   - header is always a flex container so we always set justify-content there
+───────────────────────────────────────────── */
+.align_left {
+  text-align: left;
+
+  .th_inner {
+    justify-content: flex-start;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+.align_center {
+  text-align: center;
+
+  .th_inner {
+    justify-content: center;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.align_right {
+  text-align: right;
+
+  .th_inner {
+    justify-content: flex-end;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Column pinning - sticky offsets are written inline by JS
+   The hairline divider lives only on the LAST column of each pinning group
+   (`col_pinned_last`) so adjacent pinned columns don't get double dividers.
+───────────────────────────────────────────── */
+.table th.col_pinned_left,
+.table th.col_pinned_right,
+.table td.col_pinned_left,
+.table td.col_pinned_right {
+  position: sticky;
+  z-index: 1;
+
+  /* To ensure pinned columns are visible above other content */
+  background-color: var(--color-muted);
+}
+
+.table thead th.col_pinned_left,
+.table thead th.col_pinned_right {
+  z-index: 2;
+}
+
+/* Pinned left columns: add a right border only to the last pinned cell to act as a divider. */
+.col_pinned_last.col_pinned_left {
+  border-right: var(--border-1) solid var(--color-border);
+}
+
+/* Pinned right columns: add a left border only to the last pinned cell to act as a divider. */
+.col_pinned_last.col_pinned_right {
+  border-left: var(--border-1) solid var(--color-border);
+}
+
+/* Keep interactive cell popovers above sticky neighbors when they are rendered
+   in-place (non-portal mode). */
+.table tbody td:focus-within {
+  position: relative;
+  z-index: 3;
+}
+
+/* ─────────────────────────────────────────────
+   Drag-and-drop column reordering
+───────────────────────────────────────────── */
+.col_dragging {
+  opacity: 0.5;
+}
+
+.col_drop_target {
+  /* a slim vertical bar on the leading edge of the drop target */
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+/* ─────────────────────────────────────────────
+   Column resize handle - narrow vertical strip on the cell's right edge
+───────────────────────────────────────────── */
+.resize_handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+  transition: background var(--transition-fast);
+
+  &:hover,
+  &.resize_handle_active {
+    background: var(--color-primary);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Group rows + toggle
+───────────────────────────────────────────── */
+.group_toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+
+.group_chevron_icon {
+  color: var(--color-muted-foreground);
+}
+
+.group_chevron {
+  transition: transform var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.group_chevron_open {
+  transform: rotate(90deg);
+}
+
+.group_value {
+  font-weight: var(--font-weight-semibold);
+}
+
+.group_count {
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.cell_aggregated {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ─────────────────────────────────────────────
+   Loading / empty states
+───────────────────────────────────────────── */
+.state_overlay {
+  width: 100%;
+  padding: var(--spacing-14) var(--spacing-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty_msg {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+}
+
+/* ─────────────────────────────────────────────
+   Pagination bar
+   margin-top:auto pushes it to the absolute bottom of content_wrap
+   no matter how few rows are visible.
+   flex-shrink:0 stops it compressing when space is tight.
+───────────────────────────────────────────── */
+.pagination_bar {
+  flex-shrink: 0;
+  margin-top: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.pagination_left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.pagination_count {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+
+  span {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground);
+  }
+}
+
+.pagination_controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-shrink: 0;
+}
+
+.page_size_wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5);
+}
+
+.page_size_label {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+}
+
+.page_indicator {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+  min-width: 6rem;
+  text-align: center;
+
+  span {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground);
+  }
+}
+
+.page_nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}