Table Column Resizing#

Keep's UI has two distinct column-resizing mechanisms: TanStack React Table column resizing (for data tables like the alerts table) and panel-level layout splitting (the ResizableColumns component). These serve different purposes and should not be confused.

TanStack React Table Column Resizing (Alerts Table)#

Table Setup#

Both AlertTableServerSide 1 and the deprecated AlertTable 2 configure TanStack React Table with:

• columnResizeMode: "onChange" — column width updates in real time while dragging.
• onColumnSizingChange: setColumnSizing — writes updated sizes back to state.
• Column sizing state is persisted via useLocalStorage under the key "table-sizes" 3. This key is shared across all presets, not scoped per preset name.

Resize Handle#

The resize handle is rendered inside DraggableHeaderCell at the right edge of each non-pinned column header:

• It is a div with position: absolute; top: 0; right: 0.
• Invisible by default (opacity-0), visible only on parent group-hover (group-hover:opacity-100).
• At rest: w-0.5 width, bg-blue-100 — a thin, light handle.
• Expanded on hover: hover:w-2 — grows to 0.5rem.
• While resizing: w-2 bg-blue-400 — wider and darker blue.
• Pinned columns do not get a resize handle; the handle is gated by column.getIsPinned() === false 4.
• The handler is wired via TanStack's getResizeHandler() from the header object 5.

Per-Column Width Constraints#

Default sizes and constraints are defined in alert-table-utils.tsx:

6

Fixed-size columns (status, source) use enableResizing: false. Note that DraggableHeaderCell also hard-codes override widths for checkbox (32px), source (40px), and status (24px) in the drag style, which can diverge from TanStack-reported sizes 7.

Column Visibility Gate#

The getOnlyVisibleCols utility filters the stored visibility state against the actual column IDs present in the current table instance before passing it to TanStack 8. This prevents stale visibility keys from affecting the table.

ResizableColumns — Panel Layout Splitter#

This is a separate component that splits a page into two resizable panes (e.g., sidebar + main content). It does not use TanStack Table at all.

Two versions exist:

Both share the same core behavior:

• Left pane width is stored as a percentage (leftWidth state, default 50%).
• Clamped to [20%, 80%] during drag 9.
• Drag start/stop wires mouseup and mouseleave listeners on document 10.
• The divider is w-1 (0.25rem) and styled cursor-col-resize 11.

The shared version additionally enforces a strict two-children contract and adds min-w-0 to prevent flex overflow .

Key Files#