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 [columns, setColumns] = React.useState<Column[]>(() => [
  { columnId: "Name", width: 100, resizable: true },  { columnId: "Surname", width: 100, 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 data changes , we can also define a handler function for that and pass it to our ReactGrid component.

Implement the event handler function

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];
  });
}

Pass the handler function

return (
  <ReactGrid
    rows={rows}
    columns={columns}
    onColumnResized={handleColumnResize}  />
);

Live demo

Let’s check the results: