Skill: pretext-tables

Build React table components powered by @chenglou/pretext — text is measured before rendering so row heights are exact, columns resize without reflow, and large datasets virtualize without scroll jitter.

Core concept

@chenglou/pretext separates text measurement into two phases:

• prepare() — Canvas font measurement, ~19 ms for 500 texts. Runs once per (data, font) change.
• layout() — Pure arithmetic line-breaking at a given width, ~0.09 ms per text. Runs on every resize.

This means row heights are known before the first paint. No getBoundingClientRect, no ResizeObserver for height, no reflow.

Instructions

1. Understand what the table needs