Import
import { TableModule } from '@backbase/ui-ang/table'
Usage
Use the bbTable directive on a table element to enable table functionality. The directive provides data binding, row selection, and sorting capabilities.
<!-- Basic table usage -->
<table [bbTable]="data">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
</tbody>
</table>
Table directive inputs
|
Input |
Type |
Default |
|---|---|---|
|
bbTable |
Array<Object> |
undefined |
bbTable
The bbTable input sets the data source for the table.
<!-- Table with data source -->
<table [bbTable]="tableData">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of tableData">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
</tr>
</tbody>
</table>
Table sortable directive Inputs
|
Input |
Type |
Default |
|---|---|---|
|
bbSortable |
string |
undefined |
|
direction |
'asc' | 'desc' | null |
null |
|
sortDisabled |
boolean |
false |
bbSortable
The bbSortable input sets the name of the column to be sorted. Apply this directive to th elements to enable sorting.
<!-- Sortable table header -->
<table [bbTable]="data">
<thead>
<tr>
<th [bbSortable]="'name'">
<span class="th-content">Name</span>
</th>
</tr>
</thead>
</table>
direction
The direction input sets the current sort direction for the column.
<!-- Header with initial sort direction -->
<th [bbSortable]="'name'" [direction]="'asc'">
<span class="th-content">Name</span>
</th>
sortDisabled
The sortDisabled input toggles the sorting functionality on the column.
<!-- Disabled sortable header -->
<th [bbSortable]="'name'" [sortDisabled]="true">
<span class="th-content">Name</span>
</th>
Table row directive inputs
|
Input |
Type |
Default |
|---|---|---|
|
bbRow |
any |
undefined |
bbRow
The bbRow input sets the data of the row element. Required for row selection and click handling.
<!-- Table with clickable rows -->
<table [bbTable]="data" bbTableFocus>
<tbody>
<tr [bbRow]="item" *ngFor="let item of data">
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
Table focus directive inputs
|
Input |
Type |
Default |
|---|---|---|
|
focusFirstRowOnChanges |
boolean |
false |
focusFirstRowOnChanges
The focusFirstRowOnChanges input sets whether the first row should be focused when the row list changes.
<!-- Table with automatic focus on first row -->
<table [bbTable]="data" bbTableFocus [focusFirstRowOnChanges]="true">
<tbody>
<tr [bbRow]="item" *ngFor="let item of data">
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
Table directive outputs
|
Event |
Type |
Description |
|---|---|---|
|
rowClick |
EventEmitter<any> |
Emits when a row is clicked |
|
selectRow |
EventEmitter<Set<Object>> |
Emits when row selection changes |
|
sort |
EventEmitter<SortEvent> |
Emits when a sortable column is clicked |
Table sortable directive outputs
|
Event |
Type |
Description |
|---|---|---|
|
sort |
EventEmitter<SortEvent> |
Emits when the sortable column is clicked |
Sorting
Enable sorting by adding the bbSortable directive to table headers. The table will emit sort events that need to be handled in the component.
<!-- Table with sorting -->
<table [bbTable]="data" (sort)="onSort($event)">
<thead>
<tr>
<th [bbSortable]="'name'">
<span class="th-content">Name</span>
</th>
<th [bbSortable]="'email'">
<span class="th-content">Email</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of sortedData">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
</tr>
</tbody>
</table>
// Handle sort events
onSort(event: SortEvent) {
const { column, direction } = event;
if (direction) {
this.sortedData = this.data.sort((a, b) => {
const aVal = a[column];
const bVal = b[column];
return direction === 'asc' ?
aVal.localeCompare(bVal) :
bVal.localeCompare(aVal);
});
} else {
this.sortedData = [...this.data];
}
}
Row selection and navigation
Enable clickable rows and keyboard navigation by adding bbTableFocus to the table and bbRow to each row.
<!-- Table with row selection and keyboard navigation -->
<table [bbTable]="data" bbTableFocus
(rowClick)="onRowClick($event)"
(selectRow)="onRowSelect($event)">
<tbody>
<tr [bbRow]="item" *ngFor="let item of data">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
</tr>
</tbody>
</table>
// Handle row interactions
onRowClick(rowData: any) {
console.log('Row clicked:', rowData);
}
onRowSelect(selectedRows: Set<Object>) {
console.log('Selected rows:', selectedRows);
}
Angular CDK table integration
The CdkTable provides an unopinionated, highly customizable data-table solution with a flexible templating API, dynamic column management, and an accessible DOM structure. It can be seamlessly used alongside the bbTable directive to combine CDK's powerful features with bbTable functionality. In order to add sorting to the table with CdkTable, you can use the bbSortable directive and follow steps in the Sorting section.
Key advantages of using Angular CDK tables:
- Dynamic column management: Add, remove, or replace columns through configuration
- Flexible templating system for custom cell rendering
- Built-in accessibility features
- Seamless integration with Angular's change detection
@Component({
selector: 'bb-cdk-table-example-ui',
imports: [
TableModule,
CdkTableModule,
NgComponentOutlet,
AsyncPipe,
DecimalPipe,
],
template: `
<table
cdk-table
[bbTable]="dataSource | async"
class="table table-hover"
[dataSource]="dataSource"
>
<ng-container cdkColumnDef="name">
<th bbSortable="name" cdk-header-cell *cdkHeaderCellDef>
<span class="th-content">Country</span>
</th>
<td cdk-cell *cdkCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container cdkColumnDef="area">
<th cdk-header-cell *cdkHeaderCellDef>
<span class="th-content">Area</span>
</th>
<td cdk-cell *cdkCellDef="let element">
{{ element.area | number }}
</td>
</ng-container>
<ng-container cdkColumnDef="population">
<th cdk-header-cell *cdkHeaderCellDef>
<span class="th-content">Population</span>
</th>
<td cdk-cell *cdkCellDef="let element">
{{ element.population | number }}
</td>
</ng-container>
<ng-container cdkColumnDef="flag">
<th cdk-header-cell *cdkHeaderCellDef>
<span class="th-content">Flag</span>
</th>
<td cdk-cell *cdkCellDef="let element">
<img [alt]="'Flag of ' + element.name" [src]="pathFlagAssets + element.flag" width="32" />
</td>
</ng-container>
<tr cdk-header-row *cdkHeaderRowDef="displayColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayColumns;"></tr>
</table>
`,
standalone: true,
})
export class CdkTableExampleComponent {
readonly displayColumns: string[] = ['name', 'area', 'population', 'flag'];
readonly dataSource = new BehaviorSubject<CountryData[]>(countryData);
readonly pathFlagAssets = 'https://upload.wikimedia.org/wikipedia/commons/';
}
CSS classes
The following CSS classes are automatically applied by the directives:
|
Class |
Description |
|---|---|
|
sortable |
Applied to sortable table headers |
|
sortable--disabled |
Applied to disabled sortable headers |
|
asc |
Applied when column is sorted ascending |
|
desc |
Applied when column is sorted descending |
|
selected |
Applied to selected table rows |
|
active |
Applied to focused table rows |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
The table directives include comprehensive accessibility features:
- Sortable headers automatically receive aria-sort attributes indicating sort state
- Sort buttons are created with appropriate aria-label attributes
- Keyboard navigation is supported with arrow keys for row navigation
- Focus management is handled automatically
- Sort arrows are marked with aria-hidden="true" to avoid screen reader confusion
Keyboard navigation
|
Key |
Actions |
|---|---|
|
ArrowDown ↓ |
Moves focus to the next table row |
|
ArrowUp ↑ |
Moves focus to the previous table row |
|
Enter ⏎ |
Activates the currently focused row |
|
Space ␣ |
Toggles sort on focused sortable header |
ARIA support
The table automatically handles ARIA attributes:
- aria-sort="ascending" or aria-sort="descending" on sorted columns
- aria-label on sort buttons using column header text
- tabindex="0" on focusable rows
- aria-hidden="true" on decorative sort arrows
Types
type SortDirection = 'asc' | 'desc' | null;
interface SortEvent {
column: string;
direction: SortDirection;
}