数据网格 - 列表视图 🧪

在单列列表视图中显示数据。可用于在较小屏幕和移动设备上呈现更紧凑的网格。

可以通过提供 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 开始编辑

高级用法

列表视图功能可以与自定义子组件结合使用，以在小屏幕上提供改进的用户体验，如下所示。

功能兼容性

列表视图功能可以与以下功能结合使用