Documents

Data table

Complete data in a named, keyboard-reachable scroll region inside a native disclosure.

Recorded output

Recorded CSS outputComplete measurements

Fixture	Variant	Raw CSS	Gzip	Brotli	Samples
Documentation	Static	56.2 kB	6.8 kB	5.1 kB	10
Documentation	Runtime	32.4 kB	4.9 kB	3.7 kB	10
Dashboard	Static	104.8 kB	13.2 kB	9.4 kB	10

Complete chart presentation

Illustrative component data. Follow the product link for measured benchmark results.

Fixture	CSS (kB)	Samples
Fixture A	18.4	10
Fixture B	21.8	10
Fixture C	34.2	10
Fixture D	38.6	10

Used on the benchmarks.

Usage and interface

BenchmarkDataTable accepts a title and a complete native table as children. Its native disclosure keeps all rows in the server-rendered document. The inner, named scroll region is keyboard reachable and confines wide columns to the table.

<BenchmarkDataTable title="All recorded measurements">  <table>    <thead><tr><th scope="col">Fixture</th><th scope="col">Median</th></tr></thead>    <tbody><tr><th scope="row">Illustrative fixture</th><td>12.5 ms</td></tr></tbody>  </table></BenchmarkDataTable>

Keep row and column headers in the table, include units, and distinguish zero from missing data. Opening the disclosure uses native mouse, touch, Enter and Space behavior. The scroll region handles arrow keys consistently in WebKit; the disclosure and full table remain available without JavaScript. Print exposes the complete table.

See all chart patterns and the measured benchmark fixtures.