File

table/src/table/table.component.ts

Description

The Table component renders tabular data.

Basic usage example

Example :

// Component class
import { ITableColumn, ITableRow } from '@talenra/components/table';

protected readonly columns: ITableColumn[] = [
  { identifier: '0', field: 'author', label: 'Author' },
  { identifier: '1', field: 'title', label: 'Title' },
  { identifier: '2', field: 'isbn', label: 'ISBN' },
];

protected readonly data: ITableRow[] = [
  {
    identifier: "e5472204-4410-479a-9e90-c591dc8329e5",
    author: "Gabrielle-Suzanne Barbot de Villeneuve",
    title: "La Belle et la Bête",
    isbn: "978-1-910-88006-7",
  },
  {
    identifier: "6cf48942-341d-4b3d-b76a-be444a3f46dc",
    author: "Mary Shelley",
    title: "Frankenstein; or, The Modern Prometheus",
    isbn: "978-1-530-27844-2",
  },
  {
    identifier: "0e1ea95b-5e9b-4638-be2d-419c1455ea2e",
    author: "Herman Melville",
    title: "Moby-Dick; or, The Whale",
    isbn: "978-1-530-69790-8",
  }
]

Example :

<!-- Component template -->
<talenra-table [columns]="columns" [data]="data" />

Column configuration

Input property columns is key to to configure the Table and assign keys from your data object to Table columns.

Custom cell-renderer

String values are supported out of the box. Provide a cell-renderer component if you need to display more complex data or UI (icons, checkboxes, links, graphs, …). The custom cell-renderer component has access to the cell's context.

Features

Sorting (s. columns)
Optional horizontal alignment per column (s. columns)
Optional column min-/max-width per column (s. columns)
Optional custom cell renderer component to display non-string content (s. columns)
Optional row selection (none, single or multi) (s. selectable)
Skeleton loader (s. isLoading)
Responsive mode: Display rows "card style" on small viewports (breakpoint is currently not configurable) (s. useResponsiveMode)
Scroll indicators (vertical gradients if content has overflow)
Support for appearance schemes and color themes

Layout

The width of tables is controlled by the containing element. Tables are the same width as their container.

Import

Example :

import { TableComponent } from '@talenra/components/table';

../../../#/table

Implements

AfterViewInit

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
host	`{ }`
selector	`talenra-table`
imports	`NgTemplateOutlet` `FormsModule` `CheckboxComponent` `FieldUnderlineComponent` `IconComponent` `MessageComponent` `ScrollContainerComponent` `SkeletonComponent` `TableCellRendererDirective` `TooltipDirective` `DragDropModule` `DoubleClickDirective`
styleUrls	`./table.component.scss, ./table.responsive.scss`
templateUrl	`./table.component.html`

Index

Outputs

columns
data
rowDoubleClick
rowSelectionChange
sortState

Inputs

columns

Type : ITableColumn[]

Default value : []

Array of column definitions. Used to configure the table's columns including the column header.

While the field property is used to map provided data to columns, the label property is displayed to the user in the column header. Please refer to ITableColumn for full documentation.

Example :

// Component class
import { ITableColumn, TableColumnHAlign, ITableRow } from '@talenra/components/table';

protected readonly columns: ITableColumn[] = [
  { identifier: '0', field: 'author', label: 'Author' },
  { identifier: '1', field: 'title', label: 'Title', width: { min: '150px', max: '500px' } },
  { identifier: '2', field: 'pages', label: 'Pages', hAlign: TableColumnHAlign.Right },
];

protected readonly data: ITableRow[] = [
  {
    identifier: "0e1ea95b-5e9b-4638-be2d-419c1455ea2e",
    author: "Herman Melville",
    title: "Moby-Dick; or, The Whale",
    pages: "450",
  },
  // ...
]

Example :

<!-- Component template -->
<talenra-table [columns]="columns" [data]="data" />

Custom cell renderer

Out of the box, the Table renders string values. Custom renderer component allow you to implement more complex layout, interaction: From a simple icon indicating state to a button or a complex chart – all these use-cases involve a custom cell-renderer component.

Your custom component will be rendered in the table cell and be provided with context (table data). This requires to implement the ITableCellRenderer interface as in the example below.

Example :

// Custom cell renderer component
import { ITableCellContext, ITableCellRenderer } from '@talenra/components/table';

export class MyRendererComponent implements ITableCellRenderer {
  private destroyRef: DestroyRef = inject(DestroyRef);
  // Reference to the app/component. Used for binding in both directions.
  private contextRef: MyHostComponent | undefined;
  // The table cell's value (s. `onContext` method)
  protected rating: number = 0;

  // Invoked by Table component to provide the cell renderer with context.
  // Example of how to implement App → Renderer data flow.
  onContext({ contextRef, value }: ITableCellContext): void {
    this.contextRef = contextRef as MyHostComponent;
    this.rating = value as number;
    // App → Renderer data flow
    this.contextRef?.myProperty$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value: string) => {
      // Do something with `value`
    });
  }

  // Example of how to implement Renderer → App data flow
  private myHandler(): void {
    if (!this.contextRef) return;
    // Renderer → App data flow
    this.contextRef.myHandlerMethod(this.rating);
  }
}

The renderer component is then assigned to a column as in the example below.

Example :

import { MyRendererComponent } from './my-renderer.component'

protected readonly columns: TableColumn[] = [
  ...
  { identifier: '3': field: 'rating', label: 'Rating', renderer: MyRendererComponent,
];

Two-way binding

An event is emitted when columns is updated. Listen to the event to persist the column configuration (e.g. store column widths when resized by the user).

Example :

<!-- Component template -->
<talenra-table [(columns)]="columns" (columnsChange)="columnsChange($event)" ... />

Example :

// Component class
protected columnsChange(columns: ITableColumn[]): void {
 console.log('Columns updated', columns);
}

See ITableColumn See ITableCellContext

contextRef

Type : unknown

Reference to your app's context. This is typically the component hosting the Table component.

Context reference is used for data flow between cell renderer components and your app. You can safely omit it if you're not using a custom cell-renderer.

Example :

// Component class
protected contextRef = this;

Example :

<!-- Component template -->
<talenra-table ... [contextRef]="contextRef" />

See ITableCellContext

customMessages

Type : ITableMessages | undefined

Default value : undefined

Custom messages/translations will override default messages provided via localize. Use this feature if your app involves multiple instances of Table using different messages per instance. If all Table instances of your app share the same messages, you should provide/customize messages via localization instead.

Note that custom messages can be translated using the $localize tag function (cmp. example below).

Example :

protected customMessages: ITableMessages = {
  noEntries: $localize`:Table showcase|Custom message "no entries":No data available`,
};

Example :

<talenra-table ... [customMessages]="customMessages" />

data

Type : ITableRow[]

Default value : []

Table data, represented by an array of table rows.

The provided data's fields are matched to the Table's columns based on the ITableColumn's field property.

Example :

// Component class
import { ITableColumn, ITableRow } from '@talenra/components/table';

protected readonly columns: ITableColumn[] = [
  { identifier: '0', field: 'author', label: 'Author' },
  { identifier: '1', field: 'title', label: 'Title' },
  { identifier: '2', field: 'isbn', label: 'ISBN' },
];

protected readonly data: ITableRow[] = [
  {
    identifier: "0e1ea95b-5e9b-4638-be2d-419c1455ea2e",
    author: "Herman Melville",
    title: "Moby-Dick; or, The Whale",
    isbn: "978-1-530-69790-8",
  },
  // ...
]

Example :

<!-- Component template -->
<talenra-table [columns]="columns" [data]="data" />

See ITableRow

emitRowDoubleClick

Default value : false, { transform: booleanAttribute }

Determines whether row double click event is emitted. If double click support is turned on, single click (used for row selection) is slightly delayed.

Example :

<talenra-table ... (rowDoubleClick)="handleRowDoubleClick($event)" emitRowDoubleClick />

isLoading

Default value : false, { transform: booleanAttribute }

Determines whether the table is loading data. If set to true, a skeleton is displayed.

Example :

<talenra-table ... [isLoading]="dataLoaded | async" />

selectionMode

Type : TTableSelectionMode

Default value : TableSelectionMode.None

Determines whether rows are selectable or not. Supports single-row or multi-row selection.

Example :

<talenra-table ... selectionMode="single row" />

See TableSelectionMode

sortState

Type : ITableSortState | null

Default value : null

The current sort state. Input a value to pre-set sort and/or use two-way binding to update the sort state programmatically.

Note that the Table component does not sort data. It is up to the consuming app to update data based on the sort state. Here's an implementation example.

Example :

// Component class
import { ITableSortState, TableSortDirection } from '@talenra/components/table';

protected sortState: ITableSortState | null = { field: 'author', direction: TableSortDirection.Ascending }

Example :

<!-- Component template -->
<talenra-table ... [(sortState)]="sortState" />

sortStateChange event is emitted when sortState is changed by the user. Contains the current sortState or null if the table is not sorted.

Example :

// Component class
protected sortStateChange(sortState: ITableSortState | null): void {
  // Update data based on sortState
}

Example :

<!-- Component template -->
<talenra-table ... (sortStateChange)="sortStateChange($event)" />

useResponsiveMode

Default value : false, { transform: booleanAttribute }

Determines whether the optimized responsive layout is used on small viewports.

Example :

<talenra-table ... useResponsiveMode><talenra-table>

Outputs

columns

Type : ITableColumn[]

Array of column definitions. Used to configure the table's columns including the column header.

While the field property is used to map provided data to columns, the label property is displayed to the user in the column header. Please refer to ITableColumn for full documentation.

Example :

// Component class
import { ITableColumn, TableColumnHAlign, ITableRow } from '@talenra/components/table';

protected readonly columns: ITableColumn[] = [
  { identifier: '0', field: 'author', label: 'Author' },
  { identifier: '1', field: 'title', label: 'Title', width: { min: '150px', max: '500px' } },
  { identifier: '2', field: 'pages', label: 'Pages', hAlign: TableColumnHAlign.Right },
];

protected readonly data: ITableRow[] = [
  {
    identifier: "0e1ea95b-5e9b-4638-be2d-419c1455ea2e",
    author: "Herman Melville",
    title: "Moby-Dick; or, The Whale",
    pages: "450",
  },
  // ...
]

Example :

<!-- Component template -->
<talenra-table [columns]="columns" [data]="data" />

Custom cell renderer

Your custom component will be rendered in the table cell and be provided with context (table data). This requires to implement the ITableCellRenderer interface as in the example below.

Example :

// Custom cell renderer component
import { ITableCellContext, ITableCellRenderer } from '@talenra/components/table';

export class MyRendererComponent implements ITableCellRenderer {
  private destroyRef: DestroyRef = inject(DestroyRef);
  // Reference to the app/component. Used for binding in both directions.
  private contextRef: MyHostComponent | undefined;
  // The table cell's value (s. `onContext` method)
  protected rating: number = 0;

  // Invoked by Table component to provide the cell renderer with context.
  // Example of how to implement App → Renderer data flow.
  onContext({ contextRef, value }: ITableCellContext): void {
    this.contextRef = contextRef as MyHostComponent;
    this.rating = value as number;
    // App → Renderer data flow
    this.contextRef?.myProperty$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value: string) => {
      // Do something with `value`
    });
  }

  // Example of how to implement Renderer → App data flow
  private myHandler(): void {
    if (!this.contextRef) return;
    // Renderer → App data flow
    this.contextRef.myHandlerMethod(this.rating);
  }
}

The renderer component is then assigned to a column as in the example below.

Example :

import { MyRendererComponent } from './my-renderer.component'

protected readonly columns: TableColumn[] = [
  ...
  { identifier: '3': field: 'rating', label: 'Rating', renderer: MyRendererComponent,
];

Two-way binding

An event is emitted when columns is updated. Listen to the event to persist the column configuration (e.g. store column widths when resized by the user).

Example :

<!-- Component template -->
<talenra-table [(columns)]="columns" (columnsChange)="columnsChange($event)" ... />

Example :

// Component class
protected columnsChange(columns: ITableColumn[]): void {
 console.log('Columns updated', columns);
}

See ITableColumn See ITableCellContext

data

Type : ITableRow[]

Table data, represented by an array of table rows.

The provided data's fields are matched to the Table's columns based on the ITableColumn's field property.

Example :

// Component class
import { ITableColumn, ITableRow } from '@talenra/components/table';

protected readonly columns: ITableColumn[] = [
  { identifier: '0', field: 'author', label: 'Author' },
  { identifier: '1', field: 'title', label: 'Title' },
  { identifier: '2', field: 'isbn', label: 'ISBN' },
];

protected readonly data: ITableRow[] = [
  {
    identifier: "0e1ea95b-5e9b-4638-be2d-419c1455ea2e",
    author: "Herman Melville",
    title: "Moby-Dick; or, The Whale",
    isbn: "978-1-530-69790-8",
  },
  // ...
]

Example :

<!-- Component template -->
<talenra-table [columns]="columns" [data]="data" />

See ITableRow

rowDoubleClick

Type : ITableRowDoubleClick

Event emitted if a row is double clicked. Contains the relevant row and the mouse event. Requires emitRowDoubleClick to be set to true.

Example :

<talenra-table ... (rowDoubleClick)="handleRowDoubleClick($event)" emitRowDoubleClick />

See ITableRowDoubleClick

rowSelectionChange

Type : ITableRowSelectionChange

Event emitted when a row is un-/selected. Contains the relevant row and its selection state.

Example :

// Component class
protected rowSelectionChange(event: ITableRowSelectionChange): void {
  console.log(`${event.row.identifier} was ${event.isSelected ? 'selected' : 'unselected'}`);
}

Example :

<!-- Component template -->
<talenra-table ... (rowSelectionChange)="rowSelectionChange($event)" selectable />

sortState

Type : ITableSortState | null

The current sort state. Input a value to pre-set sort and/or use two-way binding to update the sort state programmatically.

Note that the Table component does not sort data. It is up to the consuming app to update data based on the sort state. Here's an implementation example.

Example :

// Component class
import { ITableSortState, TableSortDirection } from '@talenra/components/table';

protected sortState: ITableSortState | null = { field: 'author', direction: TableSortDirection.Ascending }

Example :

<!-- Component template -->
<talenra-table ... [(sortState)]="sortState" />

sortStateChange event is emitted when sortState is changed by the user. Contains the current sortState or null if the table is not sorted.

Example :

// Component class
protected sortStateChange(sortState: ITableSortState | null): void {
  // Update data based on sortState
}

Example :

<!-- Component template -->
<talenra-table ... (sortStateChange)="sortStateChange($event)" />

File

Description

Basic usage example

Column configuration

Custom cell-renderer

Features

Layout

Import

Implements

Metadata

Index

Inputs

Outputs

Inputs

Custom cell renderer

Two-way binding

Outputs

Custom cell renderer

Two-way binding

results matching ""

No results matching ""