Expand table on column resize #822
Replies: 2 comments 1 reply
-
Update: I was able to hack the react-table state to make it perform close to how I want, but I'm not proud of myself. It requires manually tweaking react-table's state in a way that doesn't seem intended. https://codesandbox.io/s/itwinui-react-minimal-example-forked-3ydduv?file=/src/App.tsx const stateReducer = useCallback(
(newState: TableState, action: ActionType) => {
if (action.type == "columnResizing") {
const innocentColumn = newState.columnResizing.nextHeaderIdWidths;
if (innocentColumn) {
const [innocentName, innocentWidth] = innocentColumn[0];
newState.columnResizing.columnWidths[innocentName] = innocentWidth;
}
}
return newState;
},
[]
); It also doesn't work great, as it stops expanding the column after a point... |
Beta Was this translation helpful? Give feedback.
-
Hi, it works as designed (and I spent a lot of time making it to work 😁), we copied this behavior from Word tables because if there is a table without horizontal scroll and you don't want it, it is really cool that resize only affects closest columns. I think I have seen one table that has a flag for resize type so maybe we could do something similar, need to discuss with the team. |
Beta Was this translation helpful? Give feedback.
-
It is difficult to expand columns to a wide width. Currently it looks like when a column is resized, the next column loses or gains width based on the first column resize. The overall table width stays the same.
It would be nice to expand/shrink the entire table width when a column is resized. If I make column A bigger, I likely do not want to make column B smaller.
This should work in situations when the table has horizontal scroll and does not have horizontal scroll - adding or removing the scroll as needed.
Here is a sandbox showing that it is not easy to expand a column past the point where the next column is at minimum width. There are examples with and without horizontal scroll. (I usually have the last column width set to undefined in order to allow the table to fill horizontal space if the columns do not all fit.)
https://codesandbox.io/s/itwinui-react-minimal-example-forked-7wizuj?file=/src/columns.ts
Beta Was this translation helpful? Give feedback.
All reactions