In this example, I would like to be able to monitor the width of a specific column (say the ‘address’ one) in a Material React Table and trigger a useEffect when it changes (like when the column header or the table’s window gets resized). Is there a way to achieve this using useRef maybe?

import {
  MaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';

const Example = () => {

  const columns: MRT_ColumnDef<Person>[] = [
    {
      accessorKey: 'name.firstName',
      header: 'First Name',
      size: 150,
    },
    {
      accessorKey: 'name.lastName',
      header: 'Last Name',
      size: 150,
    },
    {
      accessorKey: 'address',
      header: 'Address',
      size: 200,
    },
    {
      accessorKey: 'city',
      header: 'City',
      size: 150,
    },
    {
      accessorKey: 'state',
      header: 'State',
      size: 150,
    },
  ];

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      // More properties...
    />
  );
};

export default Example;

I’m having difficulty setting up a useRef on a specific column. There also may be a way to achieve this using the TanStack API that Material React Table uses?