Resizing table columns should feel immediate. You hover over the
column border, the cursor changes to a resize indicator, you drag,
and the column changes width. The columns around it adjust
predictably. Nothing else moves.
In practice this is harder to implement correctly than it sounds.
The naive approach, updating the column width on every mousemove event, causes layout recalculations on every pixel of drag movement.
On a table with many columns this produces noticeable lag, especially
on lower-powered devices.
The implementation in Tablesmit uses requestAnimationFrame with a
ghost line indicator. The ghost line, a vertical line that follows the cursor during drag, shows where the column border will land
without actually moving it. The column width only commits on mouseup.
This means the layout recalculates once, at the end of the drag,
instead of hundreds of times during it. The result is 60fps drag
performance regardless of table size.
To resize a column: hover over the right border of the column header
until the cursor changes to a horizontal resize indicator, then click
and drag. Release to commit the width.
Column widths carry through to PDF and PNG exports. The table in
the export looks exactly as it does in the editor, with the column
widths you set.
Row height is automatic based on content. Cells wrap text when the
content is longer than the column width.
Free, no account, MIT licensed. tablesmit.com
This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-resize-table-columns-rows. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.
