Table

<table bsTable [data]="employees" [(columns)]="columns">
  <caption>
    Employees
  </caption>
</table>

<div class="d-flex flex-wrap gap-5 mb-5">
  <div bsFormField>
    <input #s type="checkbox" bsCheck [checked]="striped()" (change)="striped.set(s.checked)" />
    <label bsLabel>Striped</label>
  </div>
  <div bsFormField>
    <input #h type="checkbox" bsCheck [checked]="hover()" (change)="hover.set(h.checked)" />
    <label bsLabel>Hover</label>
  </div>
  <div bsFormField>
    <input #b type="checkbox" bsCheck [checked]="bordered()" (change)="bordered.set(b.checked)" />
    <label bsLabel>Bordered</label>
  </div>
  <div bsFormField>
    <input
      #bl
      type="checkbox"
      bsCheck
      [checked]="borderless()"
      (change)="borderless.set(bl.checked)" />
    <label bsLabel>Borderless</label>
  </div>
  <div bsFormField>
    <input #sm type="checkbox" bsCheck [checked]="small()" (change)="small.set(sm.checked)" />
    <label bsLabel>Small</label>
  </div>
</div>
<table
  bsTable
  [data]="employees"
  [(columns)]="columns"
  [striped]="striped()"
  [hover]="hover()"
  [bordered]="bordered()"
  [borderless]="borderless()"
  [size]="small() ? 'sm' : 'md'">
  <caption>
    Table styles
  </caption>
</table>
<table bsTable [data]="employees" [(columns)]="columns" theme="primary" class="mb-0">
  <caption>
    Primary theme
  </caption>
</table>

<table bsTable [data]="employees" [(columns)]="columns" [(sort)]="sort" hover>
  <caption>
    Employees, sortable
  </caption>
</table>
<p class="mb-0">
  @if (sort(); as sort) {
    Sorted by {{ sort.key }}, {{ sort.direction === 'asc' ? 'ascending' : 'descending' }}
  } @else {
    Not sorted
  }
</p>

<div class="d-flex flex-wrap align-items-end gap-5 mb-5">
  <div bsFormField class="flex-grow-1">
    <label bsFormLabel>Search employees</label>
    <input #q type="search" bsFormControl [value]="search()" (input)="onSearch(q.value)" />
  </div>
  <div bsFormField>
    <label bsFormLabel>Rows per page</label>
    <select #size bsFormControl (change)="pageSize.set(+size.value); page.set(1)">
      <option value="5">5</option>
      <option value="8" selected>8</option>
      <option value="20">20</option>
      <option value="0">All</option>
    </select>
  </div>
</div>
<table
  bsTable
  #table="bsTable"
  [data]="employees"
  [(columns)]="columns"
  [(sort)]="sort"
  [(page)]="page"
  [pageSize]="pageSize()"
  [filter]="search()"
  striped
  hover>
  <caption>
    Employees, searchable and paged
  </caption>
</table>
<div class="d-flex flex-wrap align-items-center justify-content-between gap-5">
  <p class="mb-0" aria-live="polite">{{ table.totalRows() }} of {{ employees.length }} employees</p>
  <nav
    bsPagination
    aria-label="Employee pages"
    [page]="table.currentPage()"
    (pageChange)="page.set($event)"
    [pageCount]="table.pageCount()"></nav>
</div>

<div class="d-flex gap-5 mb-5" role="radiogroup" aria-label="Selection mode">
  <div bsFormField>
    <input
      type="radio"
      bsRadio
      name="selection-mode"
      [checked]="mode() === 'multiple'"
      (change)="setMode('multiple')" />
    <label bsLabel>Multiple</label>
  </div>
  <div bsFormField>
    <input
      type="radio"
      bsRadio
      name="selection-mode"
      [checked]="mode() === 'single'"
      (change)="setMode('single')" />
    <label bsLabel>Single</label>
  </div>
</div>
<table
  bsTable
  [data]="employees"
  [(columns)]="columns"
  [selection]="mode()"
  [(selected)]="selected"
  [rowKey]="rowKey"
  hover>
  <caption>
    Selectable employees
  </caption>
</table>
<p class="mb-0" aria-live="polite">Selected: {{ names() || 'nobody' }}</p>

<table bsTable [data]="employees" [(columns)]="columns" class="align-middle">
  <caption>
    Employees with custom cells
  </caption>
  <ng-template bsTableCell="name" [bsTableCellOf]="employees" let-row>
    <div class="fw-semibold">{{ row.name }}</div>
    <div class="fs-sm fg-3">{{ row.email }}</div>
  </ng-template>
  <ng-template bsTableCell="status" [bsTableCellOf]="employees" let-row>
    <span bsBadge variant="subtle" [theme]="theme(row.status)">{{ row.status }}</span>
  </ng-template>
  <ng-template bsTableCell="actions" [bsTableCellOf]="employees" let-row>
    <button
      type="button"
      bsButton="outline"
      theme="primary"
      size="sm"
      (click)="message.set(`Editing ${row.name}`)">
      Edit <span class="visually-hidden">{{ row.name }}</span>
    </button>
  </ng-template>
</table>
<p class="mb-0" aria-live="polite">{{ message() }}</p>

<table bsTable [data]="employees" [(columns)]="columns" [(expanded)]="expanded" class="mb-0">
  <caption>
    Employees with details
  </caption>
  <ng-template bsTableDetail [bsTableDetailOf]="employees" let-row>
    <dl class="row mb-0">
      <dt class="col-sm-3">Email</dt>
      <dd class="col-sm-9">{{ row.email }}</dd>
      <dt class="col-sm-3">Started</dt>
      <dd class="col-sm-9 mb-0">{{ row.started }}</dd>
    </dl>
  </ng-template>
</table>

<ul class="list-unstyled d-flex flex-wrap gap-4 mb-5" aria-label="Columns">
  @for (column of columns(); track column.key) {
    <li class="d-flex align-items-center gap-2 border rounded px-3 py-1">
      <input
        #visible
        type="checkbox"
        bsCheck
        [checked]="!column.hidden"
        [attr.aria-label]="`Show ${column.header}`"
        (change)="toggle(column.key, visible.checked)" />
      <span>{{ column.header }}</span>
      <button
        type="button"
        bsButton="text"
        size="xs"
        [disabled]="$first"
        [attr.aria-label]="`Move ${column.header} left`"
        (click)="table.moveColumn(column.key, $index - 1)">
        ←
      </button>
      <button
        type="button"
        bsButton="text"
        size="xs"
        [disabled]="$last"
        [attr.aria-label]="`Move ${column.header} right`"
        (click)="table.moveColumn(column.key, $index + 1)">
        →
      </button>
    </li>
  }
</ul>
<div class="table-responsive">
  <table
    bsTable
    #table="bsTable"
    [data]="employees"
    [(columns)]="columns"
    resizable
    reorderable
    bordered
    class="mb-0">
    <caption>
      Employees with configurable columns
    </caption>
  </table>
</div>

<div
  class="overflow-auto border rounded"
  style="max-height: 18rem"
  tabindex="0"
  role="region"
  aria-label="Employees, scrollable">
  <table
    bsTable
    [data]="employees"
    [(columns)]="columns"
    stickyHeader
    striped
    size="sm"
    class="mb-0">
    <caption class="visually-hidden">
      Employees with a sticky header
    </caption>
  </table>
</div>

<div class="d-flex gap-5 mb-5">
  <div bsFormField>
    <input #l type="checkbox" bsCheck [checked]="loading()" (change)="loading.set(l.checked)" />
    <label bsLabel>Loading</label>
  </div>
  <div bsFormField>
    <input #e type="checkbox" bsCheck [checked]="empty()" (change)="empty.set(e.checked)" />
    <label bsLabel>No data</label>
  </div>
</div>
<table
  bsTable
  [data]="empty() ? [] : employees"
  [(columns)]="columns"
  [loading]="loading()"
  class="mb-0">
  <caption>
    Employees, loading and empty states
  </caption>
  <ng-template bsTableEmpty>
    <p class="mb-2">No employees yet.</p>
    <button type="button" bsButton theme="primary" size="sm" (click)="empty.set(false)">
      Load sample data
    </button>
  </ng-template>
</table>

<table
  bsTable
  #table="bsTable"
  manual
  [data]="rows()"
  [total]="total()"
  [pageSize]="pageSize"
  [loading]="result.isLoading()"
  [(columns)]="columns"
  [(sort)]="sort"
  [(page)]="page">
  <caption>
    Employees loaded page by page
  </caption>
</table>
<nav
  bsPagination
  aria-label="Server-side employee pages"
  [(page)]="page"
  [pageCount]="table.pageCount()"></nav>

<div class="table-responsive">
  <table bsTable [data]="employees" [(columns)]="columns" stacked="md" class="mb-0">
    <caption>
      Employees, stacked in narrow containers
    </caption>
  </table>
</div>