Table

Preview

A working preview of Table in the Brickclay style. Try it.

That inversion is the point. Column spans, grouped headers, editable cells, nested tables and summary rows are all just markup here, and none of them can be expressed as a config object without inventing a language for it. Styling, sizing and every input control are the same bk components used everywhere else.

Playground

Every switch below maps to one input. The markup underneath is generated from the current settings, so it is the thing to copy rather than an illustration of it.

Turn stableColumnWidth off, then sort or filter: the columns resize to whatever happens to be on screen. That is the default table behaviour the input exists to stop.

Rows per page

Showing 1 to 23 of 23 Records

1 - 1 of 1

-

• 1

Copy<bk-table #t="bkTable" [data]="rows" [bordered]="true">
  <thead>
    <tr>
      <th bk-th [sortFn]="byName" [left]="pinned">Name</th>
      <th bk-th [sortFn]="byAge">Age</th>
      <th bk-th [filters]="depts" [filterFn]="byDept">Department</th>
      <th bk-th >Address</th>
    </tr>
  </thead>
  <tbody>
    @for (row of t.renderData(); track row.id) {
      <tr>
        …
      </tr>
    }
  </tbody>
</bk-table>

1 · Simple table with actions

Actions are ordinary buttons in an ordinary cell, no action registry, no permission callbacks to configure. Show, hide and disable them with the template syntax you already use.

2 · Row selection

A checkbox column, select-all with an indeterminate state, and custom entries in the select-all dropdown (ng-zorro's nzSelections). Header state is derived from the rows rather than stored, so it can't drift out of sync with them.

3–5 · Sorting, filtering, multi-sort and reset

Pass sortFn a comparator and the table sorts in-process; pass it true and the column is still sortable but only reports the change through queryParams for the server to act on. filterFn works the same way. Age and Department both carry a sortPriority, so sorting both applies Age first and Department only to the rows Age ties, the badge beside each arrow shows the rank.

Showing 1 to 6 of 12 Records

1 - 2 of 2

• 2

Status filters in single-select mode (radios); Department allows multiple (checkboxes).

Server-side mode

Set frontPagination to false, feed total, and mark columns [sortFn]="true". The table stops touching the rows and reports everything the server needs through queryParams.

Showing 1 to 4 of 120 Records

1 - 2 of 30

frontPagination: front vs. server

Same simulated 60-row "server" all three ways. front: the request ignores paging and the server returns everything; the table slices it, the only correct use of frontPagination: true. server: the request is paged, frontPagination is false, one page plus the real total comes back, and the table trusts both instead of computing either. front (misused) fetches exactly like server, same one page, same real total available, but leaves frontPagination on true. That's the whole bug regions.ts had: the table has no way to know 10 rows isn't the whole dataset, so it paginates over just that page and the real total never gets used.

Showing 1 to 10 of 60 Records

1 - 2 of 6

Server actually has 60 rows. This fetch handed the table 60 of them. Table's pager is showing a total of 60, correct.

6 · Sizes

Four densities, roomiest first: lg, default, md, sm. Each moves the type scale along with the padding, padding alone makes a large table look like a normal one that has been stretched. sm is the one for a modal, where the surrounding chrome has already spent most of the height. middle and small still work as ng-zorro's names for md and sm.

size = "lg"

size = "default"

size = "md"

size = "sm"

7 · Border, title and footer

bordered draws vertical rules. Title and footer take a plain string, or projected content via [bkTableTitle] / [bkTableFooter] when you need controls in the bar rather than text.

8 · Expandable rows

For rows carrying more than a row can show. The detail row is hidden rather than destroyed, so anything with state inside it survives being collapsed. The second table passes a custom template to expandIcon.

9 · colSpan and rowSpan

The native colspan and rowspan attributes, used directly. There is no wrapper input for them because there doesn't need to be, this is the clearest case for why the control projects your markup instead of generating it.

10 · Tree structure

A table renders a list, so the tree is flattened to one, only branches whose ancestors are all open contribute rows. indentSize sets the pixels per level; leaf rows get a spacer where the toggle would be so their labels stay aligned.

10b · Dragging children and sub-children

The same tree, draggable at every depth. The pointer's position within the row under it decides the relationship, and an indicator shows it before you commit: a line in the top third inserts before that row as a sibling, the middle third tints the row and drops inside it as a child, the bottom third inserts after it. One gesture covers reordering, re-parenting and nesting, no modes.

Rest the pointer on a collapsed branch's middle for a moment and it opens, so you can drop deeper without cancelling. Illegal targets, the dragged row itself, anything inside its own subtree, simply show no indicator: try dragging a division onto one of its own teams. A node's subtree always travels with it.

11 · Fixed header and fixed columns

scroll.y caps the body height and pins the header; scroll.x sets a minimum width so columns scroll instead of collapsing. Pin a column with [left]="true" or [right]="true", the offset is measured from the rendered columns, so it stays right when widths change. Pinned columns must be contiguous from their edge.

ellipsis on Name keeps every row one line, a wrapped row is taller than its neighbours, and that unevenness is exactly what makes a capped scroll.y look broken at the boundary, not the cap itself. Height and width both already accept any CSS length (vh, %, calc()), so scroll: { y: 'calc(100vh - 320px)' } is valid today; there's no built-in "fill remaining space" mode beyond that.

12 · Grouping table head

Two header rows, spanned with the native attributes. The second row sticks below the first, so both stay visible when the body scrolls. [right]="true" on Work, Department and Status pins them as one contiguous block from the right edge, safe here because nothing spans down from row 1 on that side. Pinning Age next to the rowspan'd Name on the left is the case that doesn't work yet. scroll is a plain input, so breakpoint-based sizing (768px / 1024px, below) is computed in the component and passed in, the same way you'd do it for any other value, resize the window to see it switch.

Copyprivate readonly width = toSignal(
  fromEvent(window, 'resize').pipe(map(() => window.innerWidth), startWith(window.innerWidth))
);

readonly tableScroll = computed<BkTableScroll>(() => {
  const w = this.width() ?? window.innerWidth;
  if (w < 768) return { x: '600px', y: '220px' };   // mobile
  if (w < 1024) return { x: '900px', y: '240px' };  // tablet
  return { x: '1600px', y: '260px' };               // desktop
});

13 · Editable cells

Click a Name or Address cell to edit it. This needs no table API at all, it is an @if swapping text for a bk-input inside a cell you already own.

14 · Editable rows

The whole row swaps into inputs at once. Edits go to a working copy, so Cancel leaves the committed row untouched rather than needing to be undone field by field.

15 · Nested tables

A second bk-table inside an expanded row. It is a table like any other, its own sorting, its own size, because the outer one makes no assumptions about what a cell contains.

16 · Virtual scroll

10,000 rows, only the visible ones in the DOM. Rows are created by the viewport as it scrolls, so they come from a [bkVirtualScroll] template rather than a projected <tbody>, and virtualItemSize must match the real row height.

Rows have to be uniform height for the viewport to predict scroll position, so virtual scroll does not combine with rowspan, tree data or expandable rows.

17 · Drag sorting

CDK drag-and-drop with the two table-specific fixes carried over from bk-grid: the drag preview keeps its column widths instead of collapsing, and dragging near an edge scrolls the table so rows below the fold stay reachable. The handle is <bk-drag-handle>, a small component, not a fixed part of the table, so where it sits and what it looks like are both just markup choices.

18–19 · Break word and ellipsis

breakWord allows breaks inside a word, so an unbroken code or URL wraps instead of pushing past the cell. ellipsis truncates on one line instead, pair it with a tooltip when the full value still matters.

20 · Summary row

Totals live in a <tfoot bkTableSummary>. With fixed the footer pins to the bottom of the scroll container, the counterpart to the fixed header, so totals stay visible while the body scrolls.

21 · Close overlays on scroll

Panels from bk-select, bk-popover, bk-menu and the other overlay controls are portaled out of the table, so a scroll would strand them over the wrong row. bk-table closes them whenever it scrolls on either axis, open a select or the popover below, then scroll the body or drag the horizontal bar. It is on by default; [closeOverlaysOnScroll]="false" turns it off.

Copy<bk-table #t="bkTable" [data]="rows" [bordered]="true" [scroll]="{ x: '1100px', y: '260px' }" [showPagination]="false">
  <thead>
    <tr>
      <th bk-th>Name</th>
      <th bk-th>Employee</th>
      <th bk-th>Coach</th>
    </tr>
  </thead>
  <tbody>
    @for (row of t.renderData(); track row.id) {
      <tr>
        <td bk-td>{{ row.name }}</td>
        <td bk-td [block]="true">
          <bk-select [items]="employees" bindLabel="label" bindValue="value" [(ngModel)]="row.employee" />
        </td>
        <td bk-td [block]="true">
          <bk-select [items]="coaches" bindLabel="label" bindValue="value" [(ngModel)]="row.coach" />
        </td>
      </tr>
    }
  </tbody>
</bk-table>

Without a table

The table is just one user of a public directive. Put bkCloseOverlaysOnScroll on any scrolling element and every overlay control inside it closes when it scrolls. The select in the second box sits in a container without it, so it keeps today's behaviour.

With bkCloseOverlaysOnScroll

Plain container

Copy<!-- imports: [BkCloseOverlaysOnScroll, BkSelect] -->
<div bkCloseOverlaysOnScroll class="h-40 overflow-auto">
  <bk-select [items]="employees" [(ngModel)]="value" />
  ...
</div>

<!-- or switch it on and off -->
<div [bkCloseOverlaysOnScroll]="closeOnScroll()">…</div>