🎉 ReactGrid 5.0 is released. Read more →
Introduction
4.0
Implementing core features
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 }, //highlight-line
  { columnId: "surname", width: 150, resizable: true }, //highlight-line
];

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()); //highlight-line
 
  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:

ReactGrid

Code

interface Person {
  name: string;
  surname: string;
}
 
const getPeople = (): Person[] => [
  { name: "Thomas", surname: "Goldman" },
  { name: "Susie", surname: "Quattro" },
  { name: "", surname: "" }
];
 
const getColumns = (): Column[] => [
  { columnId: "name", width: 150, resizable: true },
  { columnId: "surname", width: 150, resizable: true }
];
 
const headerRow: Row = {
  rowId: "header",
  cells: [
    { type: "header", text: "Name" },
    { type: "header", text: "Surname" }
  ]
};
 
const getRows = (people: Person[]): Row[] => [
  headerRow,
  ...people.map<Row>((person, idx) => ({
    rowId: idx,
    cells: [
      { type: "text", text: person.name },
      { type: "text", text: person.surname }
    ]
  }))
];
 
const ColumnResizingSample = () => {
  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} 
  />;
}
 
render(<ColumnResizingSample/>)
ReactGrid

Preview

Column and row reorderingContext menu