Resizable Columns Table Block for React

Edit RESIZABLE (each resizable column's label, least width, widest and starting width, in pixels) and ENTRIES. The widths live in one array and reach the table as a CSS variable per head (--w), so a head's width is a class, never a number in a style object, and the table's own minimum width is their sum plus the status column's least. The last column is not resizable on purpose: it takes whatever room is left, so the table always fills its frame.

Tab to a divider ("Resize the Source column"); the arrow that points toward the end of the line widens it and the opposite one narrows it, 8 pixels at a time, 32 with Shift, and Home puts the column back at its starting width. The separator's value, minimum and maximum are exposed (aria-valuenow, aria-valuemin, aria-valuemax), and after each press the polite line says the new width, or that the column is at its minimum or maximum. In a right-to-left page the arrows swap sides with the layout.

Pressing a divider captures the pointer, and as it moves the column takes the width it started with plus the distance travelled, held between the column's limits; letting go announces the final width. The divider is 24 pixels wide, so it is an easy target for a finger, and it has touch-none so the page doesn't scroll while you drag. A double click on a divider puts that column back.

The table keeps its widths and the framed region scrolls sideways under your finger, with the hint line above it. The page itself never scrolls sideways. The dividers stay 24 pixels wide, and every column can still be sized with a drag.

Source and translation cells are cut with an ellipsis and keep their full text as a title, so a hover shows it; the full text is still there for a screen reader. The table uses a fixed layout so a width means what it says, and rows stay one line tall whatever the widths, so resizing never changes the block's height.

The widths live in one useState array; nothing is saved or sent. To keep them, store the array with the user's settings and pass it as the initial state. Reset widths returns to STARTS, the starting widths written in RESIZABLE.