Data Grid - 列定義

定義您的列。

資料饋送

列可以使用 rows prop 定義，它預期是一個物件陣列。

<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { id: 1, name: 'React' },
    { id: 2, name: 'MUI' },
  ]}
/>

<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { id: 1, name: 'React' },
    { id: 2, name: 'MUI' },
  ]}
/>

按下 Enter 開始編輯

每列都必須具有唯一的識別符。

此識別符在內部用於識別各種模型中的列——例如，列選取模型——並在更新中追蹤列。

預設情況下，Data Grid 會在資料集中尋找名為 id 的屬性以取得該識別符。

如果列的識別符不稱為 id，那麼您需要使用 getRowId prop 來告訴 Data Grid 它位於何處。

以下示範展示如何使用 getRowId 從名為 internalId 的屬性中抓取唯一的識別符

function getRowId(row) {
  return row.internalId;
}

<DataGrid getRowId={getRowId} />;

如果資料集中不存在此類唯一的識別符，那麼您必須透過其他方式建立它，但應避免這種情況，因為它會導致 Data Grid 的其他功能出現問題。

請注意，沒有必要建立一個欄來顯示唯一的識別符資料。Data Grid 直接從資料集本身提取此資訊，而不是從螢幕上顯示的任何內容中提取。

您可以查看樣式化列章節以獲取更多資訊。