React - Handsontable資料網格：移動列並更新狀態

Question

我正在使用React的函式庫，我有一個標題的清單（陣列），另一邊是一個包含表格資料的陣列。

閱讀文件後，我能夠啟用選單，其中我新增了「在左側新增列」和「在右側新增列」的選項，但這只是在視覺上完成的，並沒有更新React狀態中的標題。

我嘗試了兩種方法。 第二種方法是“自訂下拉式選單配置”，我手動添加了列，並使用handsontable方法“updateSettings”來更新標題，但它仍然不起作用（有時它起作用，有時它在其他地方新增列）。

function addToHeader (array, index, side, valor) {
  if (side === "Left") array.splice(index, 0, valor)
  else if (side === "Right") array.splice(index + 1, 0, valor)
  return array
}

在代码中：
dropdownMenu: {
      items: {
        col_right: {
          name: 'Move column right',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Right", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }

        },
        col_left: {
          name: 'Move column left',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Left", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }
        },
}

Answer 1

我按照以下方式完成了這個任務：

afterColumnMove: (
  movedColumns: number[],
  finalIndex: number,
  dropIndex: number | undefined,
  movePossible: boolean,
  orderChanged: boolean
) => {
  if (orderChanged) {
    let ht
    if (hotRef.current) ht = hotRef.current.hotInstance
    if (ht) {
      const headers = ht.getColHeader()
      const colMoved = movedColumns[0]
      setHeaders(prevHeaders => headers as string[]) // 这样如果你更新了状态
      const newOrderData = moveColumnTable(list, finalIndex, colMoved)
      setList(prevData => newOrderData)
      ht.loadData(list)
    }
  }
}

關鍵是，我之前沒有意識到的是，除了表頭的狀態沒有被更新之外，當移動列時，表格資料也必須更新，這就是我實作一個js函數來移動資訊的地方（ moveColumnTable）

const moveColumnTable = (tableData: any[], fromIndex: number, toIndex: number) => {
  if (toIndex === fromIndex || toIndex < 0 || fromIndex < 0) {
    // 如果起始索引等于结束索引或者它们是无效值，那么就没有变化。
    return tableData
  }

  const reorderedTableData = tableData.map(row => {
    const newRow = [...row]
    const movedItem = newRow.splice(toIndex, 1)[0]
    newRow.splice(fromIndex, 0, movedItem)

    return newRow
  })

  return reorderedTableData
}

重要提示：我實作了這個函數來移動單一列