Data Grid - 欄位自訂配方

進階欄位自訂配方。

持久化欄位寬度和順序

當 columns prop 參考更新時，欄位寬度和順序會重設為 colDef.width 以及 colDef 物件的順序，並且任何更新都將遺失。這是因為 Data Grid 將 columns prop 的更新視為一組新的欄位，並且先前的狀態將被捨棄。

若要在 columns prop 更新時持久化欄位寬度和順序，請考慮在使用者端持久化欄位的狀態。

<Button onClick={() => setIndex((prev) => prev + 1)}>
  Update columns reference
</Button>
<div style={{ height: 250 }}>
  <DataGridPro
    apiRef={apiRef}
    columns={columnsState.columns}
    onColumnWidthChange={columnsState.onColumnWidthChange}
    onColumnOrderChange={columnsState.onColumnOrderChange}
    rows={rows}
  />
</div>

<Button onClick={() => setIndex((prev) => prev + 1)}>
  Update columns reference
</Button>
<div style={{ height: 250 }}>
  <DataGridPro
    apiRef={apiRef}
    columns={columnsState.columns}
    onColumnWidthChange={columnsState.onColumnWidthChange}
    onColumnOrderChange={columnsState.onColumnOrderChange}
    rows={rows}
  />
</div>

按下 Enter 開始編輯