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, multi-select, and freezeColumns enabled.

color_theme
PreviewHTML
i
Title
Created
1
first lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
2
second lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
3
another lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
4
yet another lorem ipsum dolor
2025-07-19 05:53:07
5
fifth lorem ipsum dolor sit
2025-07-19 05:53:07
6
sixth lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
7
seventh lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
8
eighth lorem ipsum dolor sit amet consectetur adipiscing elit
2025-07-19 05:53:07
9
ninth lorem ipsum dolor sit
2025-07-19 05:53:07
10
tenth lorem ipsum dolor sit
2025-07-19 05:53:07

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)