reactjs - 是否可以将 Material 表的列顺序保存到数据库中以保持其持久性？

Question

我希望我的用户能够拖动 Material 表上的列并保持该状态持久。我可以随时获取我的列的状态及其顺序。我确实拯救了他们。但是，当我尝试使用保存的列顺序进行渲染时，它似乎没有更新我的 Material 表。

我正在使用来自material-table.com的react Material-Table

这是我正在尝试执行的代码:

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}
      />
}

这样做可以吗？ Material 是否设计为每次都只有相同的列顺序？奇怪的是他们允许拖动事件，但如果是这样的话？

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