Tabular Grid

A grid-table is a fundamental component on a webpage, designed to display data in a structured, tabular format. It organizes information into rows and columns, making it easy for users to view, compare, and analyze data efficiently. This layout is ideal for presenting large datasets, financial information, or any content that benefits from a clear, orderly arrangement.

Keyboard navigation changes focus only.

4. Selection: single + keyboard: select

Keyboard navigation changes focus and selection.

5. Selection: multiple + keyboard: focus

Keyboard navigation changes focus only. To select multiple rows, press ctrl/cmd for individual selection, or shift for multiple selection at once.

6. Selection: multiple + keyboard: select

Keyboard navigation changes focus and selection. To select multiple rows, press ctrl/cmd for individual selection, or shift for multiple selection at once.

7. Row mark + keyboard: select

Adds checkboxes that allows marking the rows (Keyboard navigation changes focus and selection). Press space-bar to mark a row, or multiple rows.

9. Row reorder (dragging)

It allows row re-ordering.

10. Row action

It allows displaying a window with custom actions that he user defines by using slotted content (hover a row, or right click on it). Note: The stylization of buttons have to be defined by the user.

11. Tree grid

Note:
By default, node icons and node-leaf icons are not displayed. To display these icons you have to add tabular-grid-show-node-icons on the ch-tabular-grid.

12. Align cells: block start

In some cases, you may wish to align the cell content to the top in a vertical direction. To do this, simply add the class .tabular-grid-align-cells-block-start on the ch-tabular-grid element.

13. Align cells: block center

In some cases, you may wish to align the cell content to the center in a vertical direction. To do this, simply add the class .tabular-grid-align-cells-block-center on the ch-tabular-grid element.

14. Align cells: block end

In some cases, you may wish to align the cell content to the bottom in a vertical direction. To do this, simply add the class .tabular-grid-align-cells-block-end on the ch-tabular-grid element.

15. Align cells: inline start

In some cases, you may wish to align the cell content to the start in an horizontal direction. To do this, simply add the class .tabular-grid-align-cells-inline-start on the ch-tabular-grid element.

16. Align cells: inline center

In some cases, you may wish to align the cell content to the center in an horizontal direction. To do this, simply add the class .tabular-grid-align-cells-inline-center on the ch-tabular-grid element.

17. Align cells: inline end

In some cases, you may wish to align the cell content to the end in an horizontal direction. To do this, simply add the class .tabular-grid-align-cells-inline-end on the ch-tabular-grid element.