Можно ли сохранить порядок столбца таблицы материалов в базе данных, чтобы сохранить его постоянство?

Question

Я хочу, чтобы мои пользователи могли перетаскивать столбцы в таблице материалов и сохранять это состояние постоянным. Я могу получить состояния своих столбцов и их заказов в любое время. Я спасаю их. Однако, когда я пытаюсь выполнить рендеринг с сохраненным порядком моих столбцов, это не обновляет мою таблицу материалов.

Я использую реагирующую таблицу материалов с material-table.com

Вот код, который я пытаюсь сделать:

const tableHeaders = [];
tableHeaders.push({ title: 'a', field: 'a' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'c', field: 'c' });

const Table = (props) => {

   const [state, setState] = useState({
      headers: tableHeaders,
      data: data // some data
   });


   const handleColumnDragged = (start, end) => {

      // process the order of columns
      // create as an array i.e. order = [2, 1, 0]

      updateOrder(order);

      // save to database

   }

   const updateHeaderOrder = (order) => {
      let newHeaders = [];
      order.forEach( i => {
         newHeaders.push(tableHeaders[i]);
      });
      setState({ ...state, headers: newHeaders });
   }

   useEffect(() => {

      resource.fetchHeaderOrder( order => {
         updateHeaderOrder(order);
      });

   }, [resource]);


   return (
      <MaterialTable
          columns={state.headers}
          data={state.data}
          onColumnDragged={handleColumnDragged}
      />
}

Возможно ли это сделать или нет? Материал рассчитан на одинаковый порядок столбцов каждый раз? Странно, что они позволяют перетаскивать события, если это так?

Answer 1

Я использую следующий подход для сохранения порядка столбцов в localStorage. Вы можете улучшить его, чтобы сохранить порядок столбцов в базе данных.

    export default function Monitor() {
      let columns = [];
      let data = [...]

      // Checking if key exists in local storage  
      if (localStorage.getItem('table1') === null) {
        // If key doesn't exists then store the actual column order in local storage
        localStorage.setItem(
          'table1',
          JSON.stringify({
            0: { title: 'Avatar', field: 'avatar', removable: false },
            1: { title: 'First Name', field: 'first_name' },
            2: { title: 'Last Name', field: 'last_name' },
            3: { title: 'Last Change', field: 'lastChange' },
            4: { title: 'Last Changed By', field: 'lastChangedBy' }
          })
        );
      }

      let savedColumns = JSON.parse(localStorage.getItem('table1'));
      for (var columnIndex in savedColumns) {
        columns.push(savedColumns[columnIndex]);
      }

      function handleColumnDrag(sourceIndex, destinationIndex) {
        const sourceColumn = savedColumns[sourceIndex];
        const destinationColumn = savedColumns[destinationIndex];

        // Swapping the column order
        savedColumns[sourceIndex] = destinationColumn;
        savedColumns[destinationIndex] = sourceColumn;
        localStorage.setItem('table1', JSON.stringify(savedColumns));
      }

      return (   
              <MaterialTable
                columns={columns}
                data={data}
                onColumnDragged={handleColumnDrag}
                icons={tableIcons}
              />
      );
    }

Answer 2

Вы можете сохранить заказ на сервере в базе данных или локально в localStorage, но сохранение настойчивости зависит только от вас.

С другой стороны material-table будет отображать столбцы в указанном вами порядке. Не изменится ли порядок, если вы вставите заголовки в другом порядке сверху? Например:

tableHeaders.push({ title: 'c', field: 'c' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'a', field: 'a' });