Design system · Component review 22

Benchmark data table

A complete measurement table needs a compact entrance and an obvious way to inspect every column. The Guide’s original expansion pattern remains visible alongside the newer native disclosure.

Adopted shared style: BenchmarkDataTable now uses the refined native disclosure. The published Guide keeps its original Expand control.

Preview themeLight · Dark · System

Disclosure treatments

Open each treatment with click or keyboard. At phone width, focus the table region and use arrow keys to inspect hidden columns.

Original Guide

Expand button below a table preview

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

The published benchmark page reveals more of a full table with its established Expand button. The original presentation remains in the Guide.

Previous shared

Native disclosure and scroll region

Recorded CSS outputComplete data · scroll for more columns

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

The previous shared component kept the complete server-rendered table behind a native summary and a keyboard-scrollable region.

Adopted

Refined disclosure heading

Data tableRecorded CSS outputComplete measurements · scroll for more columns

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

The adopted shared style improves the title, reading hint, chevron, expanded boundary and focus while preserving the native disclosure and scroll behavior.

Actual Guide use

The live static CSS table still uses its original expansion control and committed measurements.

Open /guide/benchmarks

Fixture	Variant	Raw	Gzip	Brotli	Files
Minimal	Master CSS static CLI	5.1 kB	1.9 kB	1.6 kB	1
Minimal	Master CSS static Vite	5.1 kB	1.9 kB	1.6 kB	1
Minimal	Tailwind CSS CLI	9.2 kB	2.6 kB	2.2 kB	1
Minimal	Tailwind CSS Vite	7.7 kB	2.4 kB	2.1 kB	1
Docs	Master CSS static CLI	5.8 kB	2.2 kB	1.8 kB	1
Docs	Master CSS static Vite	5.8 kB	2.2 kB	1.8 kB	1
Docs	Tailwind CSS CLI	12.0 kB	3.0 kB	2.6 kB	1
Docs	Tailwind CSS Vite	10.0 kB	2.8 kB	2.4 kB	1
Dashboard	Master CSS static CLI	6.0 kB	2.1 kB	1.8 kB	1
Dashboard	Master CSS static Vite	6.0 kB	2.1 kB	1.8 kB	1
Dashboard	Tailwind CSS CLI	10.5 kB	2.8 kB	2.4 kB	1
Dashboard	Tailwind CSS Vite	8.7 kB	2.6 kB	2.3 kB	1
Stress CSS	Master CSS static CLI	11.7 kB	3.1 kB	2.0 kB	1
Stress CSS	Master CSS static Vite	11.7 kB	3.1 kB	2.1 kB	1
Stress CSS	Tailwind CSS CLI	17.1 kB	3.7 kB	2.5 kB	1
Stress CSS	Tailwind CSS Vite	12.7 kB	3.4 kB	2.3 kB	1

Only the shared Design System disclosure is being considered. The Guide’s table content and surrounding interpretation remain intact.