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

color-theme
PreviewHTML
Title
i
Created
Another A
Another B
removeadd

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 set.

color-theme
PreviewHTML
Title
i
Created
first lorem ipsum dolor sit amet consectetur adipiscing elit
2025-06-27 07:00:24
second lorem ipsum dolor sit amet consectetur adipiscing elit
2
2025-06-27 07:00:24
another lorem ipsum dolor sit amet consectetur adipiscing elit
3
2025-06-27 07:00:24
yet another lorem ipsum dolor
4
2025-06-27 07:00:24
fifth lorem ipsum dolor sit
5
2025-06-27 07:00:24
sixth lorem ipsum dolor sit amet consectetur adipiscing elit
6
2025-06-27 07:00:24
seventh lorem ipsum dolor sit amet consectetur adipiscing elit
7
2025-06-27 07:00:24
eighth lorem ipsum dolor sit amet consectetur adipiscing elit
8
2025-06-27 07:00:24
ninth lorem ipsum dolor sit
9
2025-06-27 07:00:24
tenth lorem ipsum dolor sit
10
2025-06-27 07:00:24

API <dui-table>(source)

API <dui-table-column>(source)

API [duiTableHeader](source)

API [duiTableCell](source)

API <dui-dropdown[duiTableCustomHeaderContextMenu]>(source)

API <dui-dropdown[duiTableCustomRowContextMenu]>(source)