Desktop UI
Table
The table component is per default using virtual scrolling, which means it only renders the rows that are currently visible and all have the same height (see itemHeight setting). This is very efficient for large datasets.
With right click on the header, you can display additional columns.
Virtual Scrolling
Disabling Virtual Scrolling
For small datasets, you can disable virtual scrolling by setting the virtualScroll property to false. This enables rows to have different heights. This example has also no-focus-outline, multi-select, and freezeColumns enabled.
PreviewHTML
1
first lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
2
second lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
3
another lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
4
yet another lorem ipsum dolor
2025-08-08 10:55:11
5
fifth lorem ipsum dolor sit
2025-08-08 10:55:11
6
sixth lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
7
seventh lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
8
eighth lorem ipsum dolor sit amet consectetur adipiscing elit
2025-08-08 10:55:11
9
ninth lorem ipsum dolor sit
2025-08-08 10:55:11
10
tenth lorem ipsum dolor sit
2025-08-08 10:55:11
Array of items that should be used for each row.
@Input() borderless?: boolean
@Input() cellClass?: (item: T, column: string) => string
@Input() defaultSort?: string
Default field of T for sorting.
@Input() defaultSortDirection?: 'desc' | 'asc'
Default sorting order.
@Input() filter?: (item: T) => boolean
Filter function.
@Input() filterFields?: string[]
Against which fields filterQuery should run.
@Input() filterQuery?: string
Filter query.
@Input() freezeColumns?: number
How many columns (from the left) are frozen (stay visible even if user scrolls horizontally).
Whether the table row should have a hover effect.
@Input() itemHeight?: number
Since dui-table has virtual-scroll active per default, it's required to define the itemHeight to
make scrolling actually workable correctly.
@Input() multi-select?: boolean
Whether multiple rows are selectable at the same time.
@Input() no-focus-outline?: boolean
@Input() preferenceKey?: string
When the user changes the order or width of the columns, the information is stored
in localStorage using this key, prefixed with
`@dui/table/`
.
@Input() rowClass?: (item: T) => string
@Input() selectable?: boolean
Whether rows are selectable.
Elements that are selected, by reference.
@Input() showHeader?: boolean
Whether the header should be shown.
@Input() sortFunction?: (sort: ) => (undefined | (a: T, b: T) => number)
A hook to provide custom sorting behavior for certain columns.
@Input() sorting?: boolean
Whether sorting is enabled (clicking headers trigger sort).
@Input() text-selection?: boolean
Allow text selection in the table.
@Input() trackFn?: (index: number, item: T) => any
TrackFn for ngFor to improve performance. Default is order by index.
@Input() valueFetcher?: (object: any, path: string) => any
Alternate object value fetcher, important for sorting and filtering.
@Input() virtualScrolling?: boolean
Whether the table height just prints all rows, or if virtual scrolling is enabled.
If true, the row height depends on the content.
@Output() cellClick?: {column: string, item: T}
@Output() cellDblClick?: {column: string, item: T}
@Output() cellSelect?: {cell: string, item: T}
@Output() rowDblClick?: T
When a row gets double-clicked.
@Output() selectedChange?: T[]
element: ElementRef<HTMLElement>
filterSorted: Signal<T[]>
sortedColumns: Signal<TableColumnDirective[]>
sortedFilteredColumns: Signal<TableColumnDirective[]>
onHeadDrag(event: DuiDragEvent): void
onHeadDragEnd(event: DuiDragEvent): void
onHeadDragStart(event: DuiDragStartEvent, index: number): void
select(item: T, $event: MouseEvent): void
Defines a new column.
<dui-table-column name="fieldName" header="Field Name" [width]="100" />
Adds additional class to the columns cells.
@Input() effectiveHidden?: boolean
@Input() effectiveWidth?: number
A different header name. Use dui-table-header to render HTML there.
@Input() hidden?: boolean
Whether this column is start hidden. User can unhide it using the context menu on the header.
@Input() hideable?: boolean
The name of the column. Needs to be unique. If no renderer (*duiTableCell) is specified, this
name is used to render the content T[name].
This supports dot notation, so you can use
`user.name`
to access the
`name`
property of the
`user`
object.
@Input() position?: number
At which position this column will be placed.
@Input() sortable?: boolean
@Output() effectiveHiddenChange?: boolean
@Output() effectiveWidthChange?: number
cell: Signal<TableCellDirective>
headerDirective: Signal<TableHeaderDirective>
Directive to allow dynamic content in a column header.
<dui-table-column name="fieldName">
<ng-container *duiTableHead>
<strong>Header</strong>
</ng-container>
</dui-table-column>template: TemplateRef<any>
Directive to allow dynamic content in a cell.
<dui-table-column>
<ng-container *duiTableCell="let item">
{{item.fieldName | date}}
</ng-container>
</dui-table-column>template: TemplateRef<any>
Can be used to define own dropdown items once the user opens the header context menu.
<dui-table>
<dui-dropdown duiTableCustomHeaderContextMenu>
<dui-dropdown-item>Custom Item</dui-dropdown-item>
</dui-dropdown>
</dui-table>dropdown: DropdownComponent
Can be used to define own dropdown items once the user opens the row context menu.
<dui-table>
<dui-dropdown duiTableCustomRowContextMenu>
<dui-dropdown-item>Custom Item</dui-dropdown-item>
</dui-dropdown>
</dui-table>dropdown: DropdownComponent
