A table is similar to a grid but simpler in structure. Users cannot sort columns or change their widths. Only standard HTML table capabilities are available.
By default, text in cells wraps to a new line:
| Incident | Description, or a long header text that wraps to the next line | Type |
|---|---|---|
| INC–20180823–05 | One or more failed attempts to open a VPN connection from 10.0.210.126 to host 10.0.221.202 within one hour | EXT. Use of phishing resources (phishingAttacks) |
| INC–20180601–5 | 10.0.64.224: average memory usage over the last 5 minutes: 49% in use | EXT. IMSI change on the SIM card, IMEI change on the phone (sim) |
| INC–20180926–31 | Zone example.com was transferred from the domain DNS server ns1.example.com to the untrusted host 10.0.0.2 over an AXFR request | INT. Use of malicious software (malware) |
| INC–20190622–238 | An attempt to list the processes running on host ns1.example.com was detected | EXT. Hosting of a malicious resource on the Internet (maliciousResources) |
Use border to draw a line under every row.
In most cases, borders should be avoided, but sometimes they help support the layout when a table has gaps due to cell content varying between long and short text.
Borders are also useful in tables with complex structures — for example, when rows are grouped or some cells are merged vertically.
Use disableHover to remove the background color change on row hover. This is useful when rows are not interactive and the hover highlight would be misleading.
If a table has a lot of rows, use stickyHeader to keep the column names visible while you scroll down. This way you always see what each column means, even after scrolling.
| File | Owner | Modified |
|---|---|---|
| document.txt | User 1 | Сегодня, 14:29 |
| report-2023.pdf | User 2 | Сегодня, 14:29 |
| notes.doc | User 3 | Сегодня, 14:29 |
| archive.zip | User 4 | Сегодня, 14:29 |
| presentation.pptx | User 5 | Сегодня, 14:29 |
| budget.xlsx | User 6 | Сегодня, 14:29 |
| photo.png | User 7 | Сегодня, 14:29 |
| contract.pdf | User 8 | Сегодня, 14:29 |
| summary.doc | User 9 | Сегодня, 14:29 |
| backup.zip | User 10 | Сегодня, 14:29 |
The pinned header is opaque and covers the top of the scroll area. When focus moves to a control above the visible part, the browser scrolls it to that top edge — under the header.
The table accounts for the header height on its own cells and the controls inside them. If the scroll container holds other content as well, set scroll-padding-block-start on the container to the header height.
The header color comes from --kbq-table-sticky-header-background. It defaults to the page background. For a table on a card, in a modal or in a sidepanel, point the token at that surface:
--kbq-table-sticky-header-background: var(--kbq-background-card);