数据表格 - 列自定义技巧

高级列自定义技巧。

持久化列宽和顺序

当 columns prop 引用更新时，列宽和顺序会重置为 colDef.width 以及 colDef 对象的顺序，并且任何更新都将丢失。这是因为数据表格将 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 开始编辑