@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/data-table/README.md

@@ -0,0 +1,330 @@
+# Data Table
+
+Advanced table component with sorting, filtering, column visibility, row selection, and pagination.
+
+## Usage
+
+```html
+<div sc-data-table [data]="data" [columns]="columns">
+  <input sc-data-table-filter placeholder="Search..." />
+  <div sc-data-table-column-toggle></div>
+
+  <table>
+    <thead sc-data-table-header>
+      <tr>
+        <th sc-data-table-head columnId="name" [sortable]="true">Name</th>
+        <th sc-data-table-head columnId="email" [sortable]="true">Email</th>
+      </tr>
+    </thead>
+    <tbody sc-data-table-body>
+      @for (row of data; track row.id) {
+      <tr sc-data-table-row>
+        <td sc-data-table-cell>{{ row.name }}</td>
+        <td sc-data-table-cell>{{ row.email }}</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+
+  <div sc-data-table-pagination></div>
+</div>
+```
+
+## Components
+
+### ScDataTable
+
+Root container that manages table state and provides context.
+
+**Selector:** `[sc-data-table]`
+
+**Inputs:**
+
+| Input     | Type             | Default | Description        |
+| --------- | ---------------- | ------- | ------------------ |
+| `data`    | `T[]`            | `[]`    | Data array         |
+| `columns` | `ColumnDef<T>[]` | `[]`    | Column definitions |
+| `class`   | `string`         | `''`    | Additional CSS     |
+
+**Two-way Bindings:**
+
+| Binding            | Type                    | Default     | Description           |
+| ------------------ | ----------------------- | ----------- | --------------------- |
+| `sorting`          | `SortingState \| null`  | `null`      | Current sort state    |
+| `columnVisibility` | `ColumnVisibilityState` | `{}`        | Column visibility map |
+| `globalFilter`     | `string`                | `''`        | Global filter value   |
+| `rowSelection`     | `Set<number>`           | `new Set()` | Selected row indices  |
+
+**Outputs:**
+
+| Output         | Type                   | Description            |
+| -------------- | ---------------------- | ---------------------- |
+| `sortChange`   | `SortingState \| null` | Emits on sort change   |
+| `filterChange` | `string`               | Emits on filter change |
+
+**Computed Properties:**
+
+- `visibleColumns` - Columns filtered by visibility
+- `filteredData` - Data filtered by global filter
+- `sortedData` - Data sorted by current sort state
+
+### ScDataTableHeader
+
+Table header container.
+
+**Selector:** `[sc-data-table-header]`
+
+### ScDataTableBody
+
+Table body container.
+
+**Selector:** `[sc-data-table-body]`
+
+### ScDataTableRow
+
+Table row with selection state.
+
+**Selector:** `[sc-data-table-row]`
+
+**Inputs:**
+
+| Input      | Type      | Default | Description     |
+| ---------- | --------- | ------- | --------------- |
+| `selected` | `boolean` | `false` | Selection state |
+| `class`    | `string`  | `''`    | Additional CSS  |
+
+### ScDataTableHead
+
+Table header cell with optional sorting.
+
+**Selector:** `[sc-data-table-head]`
+
+**Inputs:**
+
+| Input      | Type      | Default | Description           |
+| ---------- | --------- | ------- | --------------------- |
+| `columnId` | `string`  | `''`    | Column ID for sorting |
+| `sortable` | `boolean` | `false` | Enable sorting        |
+| `class`    | `string`  | `''`    | Additional CSS        |
+
+### ScDataTableCell
+
+Table data cell.
+
+**Selector:** `[sc-data-table-cell]`
+
+### ScDataTableFilter
+
+Global filter input.
+
+**Selector:** `input[sc-data-table-filter]`
+
+**Inputs:**
+
+| Input         | Type     | Default       | Description       |
+| ------------- | -------- | ------------- | ----------------- |
+| `placeholder` | `string` | `'Filter...'` | Input placeholder |
+| `class`       | `string` | `''`          | Additional CSS    |
+
+### ScDataTableColumnToggle
+
+Dropdown to toggle column visibility.
+
+**Selector:** `[sc-data-table-column-toggle]`
+
+### ScDataTablePagination
+
+Pagination controls with page size selector.
+
+**Selector:** `[sc-data-table-pagination]`
+
+**Inputs:**
+
+| Input           | Type       | Default                | Description          |
+| --------------- | ---------- | ---------------------- | -------------------- |
+| `pageSizes`     | `number[]` | `[10, 20, 30, 40, 50]` | Page size options    |
+| `showSelection` | `boolean`  | `true`                 | Show selection count |
+| `class`         | `string`   | `''`                   | Additional CSS       |
+
+**Two-way Bindings:**
+
+| Binding       | Type     | Default | Description    |
+| ------------- | -------- | ------- | -------------- |
+| `pageSize`    | `number` | `10`    | Items per page |
+| `currentPage` | `number` | `1`     | Current page   |
+
+## Types
+
+### ColumnDef<T>
+
+```typescript
+interface ColumnDef<T> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T;
+  accessorFn?: (row: T) => unknown;
+  cell?: (row: T) => string;
+  enableSorting?: boolean;
+  enableHiding?: boolean;
+  sortingFn?: (a: T, b: T, direction: SortDirection) => number;
+}
+```
+
+### SortingState
+
+```typescript
+interface SortingState {
+  id: string;
+  desc: boolean;
+}
+```
+
+### ColumnVisibilityState
+
+```typescript
+interface ColumnVisibilityState {
+  [columnId: string]: boolean;
+}
+```
+
+## Examples
+
+### Basic Table
+
+```html
+<div sc-data-table [data]="users" [columns]="columns">
+  <table>
+    <thead sc-data-table-header>
+      <tr>
+        <th sc-data-table-head>Name</th>
+        <th sc-data-table-head>Email</th>
+      </tr>
+    </thead>
+    <tbody sc-data-table-body>
+      @for (user of users; track user.id) {
+      <tr sc-data-table-row>
+        <td sc-data-table-cell>{{ user.name }}</td>
+        <td sc-data-table-cell>{{ user.email }}</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>
+```
+
+### With Sorting
+
+```html
+<div #table sc-data-table [data]="users" [columns]="columns">
+  <table>
+    <thead sc-data-table-header>
+      <tr>
+        <th sc-data-table-head columnId="name" [sortable]="true">Name</th>
+        <th sc-data-table-head columnId="email" [sortable]="true">Email</th>
+      </tr>
+    </thead>
+    <tbody sc-data-table-body>
+      @for (user of table.sortedData(); track user.id) {
+      <tr sc-data-table-row>
+        <td sc-data-table-cell>{{ user.name }}</td>
+        <td sc-data-table-cell>{{ user.email }}</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>
+```
+
+### With Filtering
+
+```html
+<div #table sc-data-table [data]="users" [columns]="columns">
+  <input sc-data-table-filter placeholder="Search users..." />
+
+  <table>
+    <thead sc-data-table-header>
+      <tr>
+        <th sc-data-table-head>Name</th>
+        <th sc-data-table-head>Email</th>
+      </tr>
+    </thead>
+    <tbody sc-data-table-body>
+      @for (user of table.filteredData(); track user.id) {
+      <tr sc-data-table-row>
+        <td sc-data-table-cell>{{ user.name }}</td>
+        <td sc-data-table-cell>{{ user.email }}</td>
+      </tr>
+      } @empty {
+      <tr>
+        <td colspan="2" class="text-center">No results found.</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>
+```
+
+### With Row Selection
+
+```html
+<div #table sc-data-table [data]="users" [columns]="columns">
+  <table>
+    <thead sc-data-table-header>
+      <tr>
+        <th sc-data-table-head>
+          <input type="checkbox" [checked]="table.isAllRowsSelected()" [indeterminate]="table.isSomeRowsSelected()" (change)="table.toggleAllRowSelection()" />
+        </th>
+        <th sc-data-table-head>Name</th>
+      </tr>
+    </thead>
+    <tbody sc-data-table-body>
+      @for (user of table.sortedData(); track user.id; let i = $index) {
+      <tr sc-data-table-row [selected]="table.isRowSelected(i)">
+        <td sc-data-table-cell>
+          <input type="checkbox" [checked]="table.isRowSelected(i)" (change)="table.toggleRowSelection(i)" />
+        </td>
+        <td sc-data-table-cell>{{ user.name }}</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>
+```
+
+### With Column Visibility
+
+```html
+<div sc-data-table [data]="users" [columns]="columns">
+  <div sc-data-table-column-toggle></div>
+  <!-- ... -->
+</div>
+```
+
+### With Pagination
+
+```html
+<div sc-data-table [data]="users" [columns]="columns">
+  <!-- ... table ... -->
+
+  <div sc-data-table-pagination [(pageSize)]="pageSize" [(currentPage)]="currentPage" [pageSizes]="[5, 10, 25, 50]"></div>
+</div>
+```
+
+## Features
+
+- **Sorting**: Click column headers to sort ascending/descending
+- **Filtering**: Global text search across all columns
+- **Column Visibility**: Show/hide columns dynamically
+- **Row Selection**: Single and bulk selection with indeterminate state
+- **Pagination**: Configurable page sizes with navigation controls
+- **Custom Rendering**: Use accessorFn for computed values, cell for custom display
+- **Custom Sorting**: Provide sortingFn for custom sort logic
+- **Generic Types**: Full TypeScript support with generic data types
+
+## Accessibility
+
+- Proper table semantics with `<table>`, `<thead>`, `<tbody>`
+- Sortable columns indicate direction with icons
+- Checkboxes have proper focus states
+- Keyboard navigation supported for interactive elements
+- Selected rows indicated with `data-selected` attribute

package/src/lib/components/data-table/data-table-body.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-data-table-body]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'data-table-body',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTableBody {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('[&_tr:last-child]:border-0', this.classInput()),
+  );
+}

package/src/lib/components/data-table/data-table-cell.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-data-table-cell]',
+  host: {
+    'data-slot': 'data-table-cell',
+    '[class]': 'class()',
+  },
+})
+export class ScDataTableCell {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/data-table/data-table-column-toggle.ts

@@ -0,0 +1,96 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_DATA_TABLE } from './data-table';
+
+@Component({
+  selector: '[sc-data-table-column-toggle]',
+  template: `
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+      (click)="toggleOpen()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="size-4"
+      >
+        <path d="M12 3v18" />
+        <rect width="8" height="4" x="8" y="8" rx="1" />
+        <path d="M2 8h2" />
+        <path d="M2 12h2" />
+        <path d="M20 8h2" />
+        <path d="M20 12h2" />
+      </svg>
+      Columns
+    </button>
+
+    @if (isOpen()) {
+      <div
+        class="absolute right-0 top-full z-50 mt-2 min-w-[150px] rounded-md border bg-popover p-2 shadow-md"
+      >
+        @for (column of table.columns(); track column.id) {
+          @if (column.enableHiding !== false) {
+            <label
+              class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                class="size-4 rounded border-primary"
+                [checked]="isColumnVisible(column.id)"
+                (change)="toggleColumn(column.id)"
+              />
+              {{ column.header }}
+            </label>
+          }
+        }
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'data-table-column-toggle',
+    '[class]': 'class()',
+    '(document:click)': 'onDocumentClick($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTableColumnToggle {
+  readonly table = inject(SC_DATA_TABLE);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly isOpen = signal(false);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  toggleOpen(): void {
+    this.isOpen.update((v) => !v);
+  }
+
+  isColumnVisible(columnId: string): boolean {
+    return this.table.columnVisibility()[columnId] !== false;
+  }
+
+  toggleColumn(columnId: string): void {
+    this.table.toggleColumnVisibility(columnId);
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (!target.closest('[sc-data-table-column-toggle]')) {
+      this.isOpen.set(false);
+    }
+  }
+}

package/src/lib/components/data-table/data-table-filter.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_DATA_TABLE } from './data-table';
+
+@Component({
+  selector: 'input[sc-data-table-filter]',
+  template: ``,
+  host: {
+    'data-slot': 'data-table-filter',
+    type: 'text',
+    '[class]': 'class()',
+    '[value]': 'table.globalFilter()',
+    '(input)': 'onInput($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTableFilter {
+  readonly table = inject(SC_DATA_TABLE);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly placeholder = input<string>('Filter...');
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex h-9 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm',
+      'placeholder:text-muted-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.table.globalFilter.set(value);
+  }
+}

package/src/lib/components/data-table/data-table-head.ts

@@ -0,0 +1,96 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_DATA_TABLE, SortDirection } from './data-table';
+
+@Component({
+  selector: '[sc-data-table-head]',
+  template: `
+    @if (sortable()) {
+      <button
+        type="button"
+        class="flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 rounded-md hover:bg-accent"
+        (click)="onSort()"
+      >
+        <ng-content />
+        @if (sortDirection() === 'asc') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            class="size-4"
+          >
+            <path d="m5 15 7-7 7 7" />
+          </svg>
+        } @else if (sortDirection() === 'desc') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            class="size-4"
+          >
+            <path d="m19 9-7 7-7-7" />
+          </svg>
+        } @else {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            class="size-4 opacity-0 group-hover:opacity-50"
+          >
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        }
+      </button>
+    } @else {
+      <ng-content />
+    }
+  `,
+  host: {
+    'data-slot': 'data-table-head',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTableHead {
+  private readonly table = inject(SC_DATA_TABLE);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly columnId = input<string>('');
+  readonly sortable = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'group',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly sortDirection = computed((): SortDirection => {
+    const sorting = this.table.sorting();
+    if (!sorting || sorting.id !== this.columnId()) return null;
+    return sorting.desc ? 'desc' : 'asc';
+  });
+
+  onSort(): void {
+    const id = this.columnId();
+    if (id) {
+      this.table.toggleSort(id);
+    }
+  }
+}

package/src/lib/components/data-table/data-table-header.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-data-table-header]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'data-table-header',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScDataTableHeader {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('[&_tr]:border-b', this.classInput()),
+  );
+}