Data display

Table

@xui/table

A data table. Layout is flex rather than table-layout, so a column can grow while the rest stay sized to their content, and the row parts stay addressable for striping and selection.

Install

pnpm add @xui/table

Add the barrel to a standalone component's imports:

import { XuiTableImports } from '@xui/table';

@Component({
  imports: [XuiTableImports],
  // …
})

Examples

Default

Loading preview…

<xui-table class="w-80">
  <xui-caption>List of users</xui-caption>
  <xui-tr>
    <xui-th class="grow">Name</xui-th>
    <xui-th>Gender</xui-th>
    <xui-th>Weight</xui-th>
  </xui-tr>
  <xui-tr>
    <xui-td class="grow">John</xui-td>
    <xui-td>Male</xui-td>
    <xui-td>70kg</xui-td>
  </xui-tr>
  <xui-tr data-state="selected">
    <xui-td class="grow">John</xui-td>
    <xui-td>Male</xui-td>
    <xui-td>70kg</xui-td>
  </xui-tr>
  <xui-tr>
    <xui-td class="grow">John</xui-td>
    <xui-td>Male</xui-td>
    <xui-td>70kg</xui-td>
  </xui-tr>
</xui-table>

Modifiers

Loading preview…

<xui-table class="w-96" striped bordered interactive compact>
  <xui-tr>
    <xui-th class="grow">Name</xui-th>
    <xui-th class="w-24">Role</xui-th>
    <xui-th class="w-24">Status</xui-th>
  </xui-tr>
  <xui-tr>
    <xui-td class="grow">Ada Lovelace</xui-td>
    <xui-td class="w-24">Owner</xui-td>
    <xui-td class="w-24">Active</xui-td>
  </xui-tr>
  <xui-tr>
    <xui-td class="grow">Alan Turing</xui-td>
    <xui-td class="w-24">Admin</xui-td>
    <xui-td class="w-24">Active</xui-td>
  </xui-tr>
  <xui-tr>
    <xui-td class="grow">Grace Hopper</xui-td>
    <xui-td class="w-24">Editor</xui-td>
    <xui-td class="w-24">Invited</xui-td>
  </xui-tr>
</xui-table>

Cdktable

Source only — this one needs a component of its own to run, so there is nothing to render here.

<x-table
  xuiTable
  stickyHeader
  [dataSource]="users()"
  [displayedColumns]="columns.displayedColumns()"
  [trackBy]="trackBy"
>
  <x-column-def name="name" class="w-40">
    <xui-th *xHeaderDef>Name</xui-th>
    <xui-td truncate *xCellDef="let user">{{ user.name }}</xui-td>
  </x-column-def>
  <x-column-def name="gender" class="w-40 justify-center">
    <xui-th *xHeaderDef>Gender</xui-th>
    <xui-td truncate *xCellDef="let user">{{ user.gender }}</xui-td>
  </x-column-def>
  <x-column-def name="weight">
    <xui-th *xHeaderDef>Weight</xui-th>
    <xui-td *xCellDef="let user">{{ user.weight }}</xui-td>
  </x-column-def>
</x-table>
<ng-template
  xPaginator
  [xPaginatorTotalElements]="totalElements()"
  [xPaginatorPageSize]="pageSize()"
  (xPaginatorStateChange)="onStateChange($event)"
  let-ctx
>
  <div class="mt-2 flex items-center justify-between">
    <span class="text-sm tabular-nums">
      Showing entries {{ ctx.state().startIndex + 1 }} - {{ ctx.state().endIndex + 1 }} of {{ totalElements() }}
    </span>
    <div class="flex">
      <select
        [ngModel]="pageSize()"
        (ngModelChange)="pageSize.set($event)"
        xuiInput
        size="sm"
        class="mr-1 inline-flex pr-8"
      >
        <option [value]="size" *ngFor="let size of availablePageSizes">{{ size === 10000 ? 'All' : size }}</option>
      </select>

      <div class="flex space-x-1">
        <button size="sm" variant="outline" xuiButton [disabled]="!ctx.decrementable()" (click)="ctx.decrement()">
          Previous
        </button>
        <button size="sm" variant="outline" xuiButton [disabled]="!ctx.incrementable()" (click)="ctx.increment()">
          Next
        </button>
      </div>
    </div>
  </div>
</ng-template>

API

XuiCaption

component

xui-caption

The table's accessible name.

Inputs

Name

Type

Default

hidden

booleanTake the caption off screen while keeping it as the table's accessible name. Use it when the surrounding page already carries a visible heading.

false

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

XuiTableClasses

directive

[xuiTable]

Styles the headless <x-table> by writing the xUI Tailwind classes into its tableClasses/headerRowClasses/bodyRowClasses model inputs: <x-table xuiTable>. A consumer binding those inputs itself wins, since the input binding is applied after this constructor runs.

XuiTable

component

xui-table

A table laid out with flex rather than table-layout, so a column can grow while the rest stay sized to their content and the row parts stay addressable for striping and selection.

Variants

Axis

Options

Default

striped

true

false

false

bordered

true

false

false

interactive

true

false

false

compact

true

false

false

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

striped

booleanAlternate row background.

this.config.striped

bordered

booleanOuter border plus dividers between cells.

this.config.bordered

interactive

booleanShow a pointer cursor on rows for clickable tables.

this.config.interactive

compact

booleanTighter cell padding.

this.config.compact

labeledByInput

string | null | undefinedId of the element naming the table. Usually left alone: a projected xui-caption sets this itself.

undefined

XuiTd

component

xui-td

One body cell of a xui-table.

Inputs

Name

Type

Default

truncate

booleanClip overflowing content to one line with an ellipsis, instead of letting the cell grow.

false

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

XuiTh

component

xui-th

One header cell of a xui-table.

Inputs

Name

Type

Default

truncate

booleanClip an overlong heading to one line with an ellipsis, instead of letting the header row grow.

false

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

XuiTr

component

xui-tr

One row of a xui-table, header or body.

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

Source

libs/ui/table/xui