Resizable Columns Data Table for React

useTable gets columnResizingFeature, columnSizingFeature and columnResizeMode: "onChange", so the width updates while you drag. The handle calls header.getResizeHandler() from onMouseDown and onTouchStart.

Each column sets size: Name 150, Department 120, Position 180, Email 220 and Salary 120. Heads and cells take getSize() as their width, and the table takes table.getTotalSize() with table-fixed, so a cell's text is cut off with an ellipsis instead of widening its column.

A thin div on the end edge of each TableHead, with cursor-col-resize. It shows on hover and turns bg-primary while header.column.getIsResizing() is true. The note under the table says to drag column edges.

Not in this demo: the handle answers the pointer and touch only, and it's hidden from screen readers. For keyboard resizing, add buttons or keys that call column.setSize or table.setColumnSizing.

Table sits in a container that scrolls sideways, so a table wider than the frame scrolls rather than squeezing its columns.

No. The widths live in the table's state and start from each column's size. Save columnSizing from onColumnSizingChange and pass it back as initial state to keep them.