Column resizing
Allow column to be resized
For each column which should be resizable, add the resizable property
to the corresponding column object and set its value to true.
const getColumns = (): Column[] => [
{ columnId: "name", width: 150, resizable: true }, { columnId: "surname", width: 150, resizable: true }];If you hover over the vertical border line between the column headers, you will see your mouse pointer change to indicate that a column can be resized. However, you’ll quickly notice that the column resizing functionality doesn’t work. Why is that? We still need to handle the events fired by ReactGrid when a column is being resized. Similar to how we handled data changes in handling changes , we can also define a handler function for that and pass it to our ReactGrid component.
useState hook for columns storing
function App() {
const [people] = React.useState<Person[]>(getPeople());
const [columns, setColumns] = React.useState<Column[]>(getColumns());
const rows = getRows(people);
return <ReactGrid rows={rows} columns={columns} />;
}Implement the handler function
handleColumnResize handles the event when its finished. Knowing the column Id and its new width, we can apply
changes by calling setColumns function and returning array of updated columns (width/widths).
function App() {
const [people] = React.useState<Person[]>(getPeople());
const [columns, setColumns] = React.useState<Column[]>(getColumns());
const rows = getRows(people);
const handleColumnResize = (ci: Id, width: number) => {
setColumns((prevColumns) => {
const columnIndex = prevColumns.findIndex(el => el.columnId === ci);
const resizedColumn = prevColumns[columnIndex];
const updatedColumn = { ...resizedColumn, width };
prevColumns[columnIndex] = updatedColumn;
return [...prevColumns];
});
}
return <ReactGrid rows={rows} columns={columns} onColumnResized={handleColumnResize} />;
}Live demo
Let’s check the results: