資料格線 - 列表視圖 🧪

以單欄列表視圖顯示資料。可用於在較小的螢幕和行動裝置上呈現更精簡的格線。

列表視圖可以透過提供 unstable_listView 屬性來啟用。

與預設格線視圖不同，列表視圖不對資料如何呈現給終端使用者做任何假設。

為了在列表視圖中顯示資料，必須提供帶有 renderCell 函數的 unstable_listColumn 屬性。

function ListViewCell(params: GridRenderCellParams) {
  return <>{params.row.id}</>;
}

const listColDef: GridListColDef = {
  field: 'listColumn',
  renderCell: ListViewCell,
};

<DataGridPro unstable_listColumn={listColDef} unstable_listView={true} />;

使用媒體查詢啟用

使用來自 @mui/material 的 useMediaQuery Hook，在指定的斷點啟用列表視圖功能。

以下示範在視口寬度低於 md 斷點時，自動切換到列表佈局。

<DataGridPro
  {...data}
  loading={loading}
  rowHeight={rowHeight}
  unstable_listView={isListView}
  unstable_listColumn={listColDef}
/>

<DataGridPro
  {...data}
  loading={loading}
  rowHeight={rowHeight}
  unstable_listView={isListView}
  unstable_listColumn={listColDef}
/>

按下 Enter 開始編輯

可編輯列

列表視圖不支援編輯功能，但是可以從您的自訂儲存格渲染器中建立編輯體驗，如下所示。

<DataGridPro
  rows={rows}
  columns={columns}
  rowHeight={64}
  unstable_listView
  unstable_listColumn={listColDef}
  sx={{ backgroundColor: 'background.paper' }}
/>

<DataGridPro
  rows={rows}
  columns={columns}
  rowHeight={64}
  unstable_listView
  unstable_listColumn={listColDef}
  sx={{ backgroundColor: 'background.paper' }}
/>

按下 Enter 開始編輯

進階用法

列表視圖功能可以與自訂子組件結合使用，以在小型螢幕上提供更佳的使用者體驗，如下所示。

功能相容性

列表視圖功能可以與以下功能結合使用