how to read material-table column headers array while dragging occurred using reactjs

There is one flexible way to get material-table column order while dragging.

function App() {
  const columns = [...];

  const data = [...];

  function handleColumnDrag() {
    let columnOrder = [];
    columns.forEach(column => {
      columnOrder.push({
        field: column.field,
        columnOrder: column.tableData.columnOrder
      });
    });
    console.log(columnOrder);
  }

  return (
    <div className="App">
      <MaterialTable
        title="Tasks"
        columns={columns}
        data={data}
        onColumnDragged={handleColumnDrag}
      />
    </div>
  );
}

You may have to change the format of columnOrder output based on your API call.

DEMO: Codesandbox Link

You can grab a ref to the table itself using tableRef property and have access to table internals and column info/data among other things while dragging or at all times in general.