как читать массив заголовков столбцов таблицы материалов при перетаскивании с помощьюactjs

Question

Как прочитать массив заголовков столбцов таблицы материалов при перетаскивании с помощьюactjs? Я использовал функцию onColumnDragged, но получал только sourceIndex, destinationIndex. Мне нужно получить все заголовки столбцов для передачи вызова покоя, чтобы сохранить новый порядок.

Answer 1

Существует один гибкий способ получения порядка столбцов таблицы материалов при перетаскивании.

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

Возможно, вам придется изменить формат вывода columnOrder на основе вашего вызова API.

DEMO: Codesandbox Link

Answer 2

Вы можете получить ссылку на саму таблицу, используя свойство tableRef, и, кроме всего прочего, иметь доступ к внутренним элементам таблицы и информации / данным столбца при перетаскивании или в любое время вообще.