component · tables
Column resizer
also called column divider (community), column grip (community), resize gripper (community)
The invisible strip on a column border that widens or narrows the column when dragged, and often fits the column to its content on double click.
A column resizer is a few pixels of border promoted to a control. Nothing about the line between two column headings says it can be pulled, so the strip is made wider than it looks, usually four to eight pixels of hit area straddling a one pixel rule, and the cursor changes to a horizontal double arrow when the pointer is inside it. That cursor is doing most of the work of announcing the affordance, which is also why the resizer is one of the few controls that is genuinely invisible until approached and still counts as discoverable.
Where it earns its keep is data nobody designed for. A data table is laid out by whoever built it, but the strings arriving in it belong to the reader: one account name is four characters and the next is fifty, and no default width is right for both. Rather than guess, hand the reader the boundary. The same control appears in a data grid, where it matters more, because a grid is a place people work for an hour at a time and column widths become part of their workspace, which is an argument for remembering the widths they chose.
Two behaviours belong with the drag and are often forgotten. Double clicking the resizer should fit the column to its widest visible cell, since that is what the reader actually wants most of the time and dragging to find it by eye is tedious. And the widths have to add up: dragging one boundary must not shove the columns either side of it, because a table whose other columns twitch while you are aiming at one of them is unusable. In practice that means one flexible column, or trailing slack, or a table that simply gets wider and scrolls, and it means deciding explicitly whether a column is fixed, fitted to its content, or filling the space the others left. A resizer with no policy behind it produces the familiar bug where widening one column silently crushes another.
Keep it apart from the two grips it looks like. A drag handle moves a thing: grab it and the row goes somewhere else in the order. A resize handle is the ribbed corner that grows a whole box in two dimensions at once. A column resizer changes a single dimension of a single column and moves nothing, which is why it is drawn as a line rather than as a grip with dots on it: the line is already there, doing the job of separating two columns, and the control is just permission to move it.
Which word?
| If you want | say |
|---|---|
| dragging a column border to change its width | column resizer |
| the draggable bar between two resizable panes | splitter |
| the corner grip that resizes a box | resize handle |
Related
Part of: Data table
See also: Frozen column