数据表格 - 列菜单
自定义您的列菜单。
列菜单
每个列标题都带有一个列菜单，其中包含快速访问的数据表格功能，例如列可见性、排序、筛选等。
可以通过点击标题单元格悬停时出现的三点图标，或者在聚焦列标题并按下 Ctrl+Enter (或 macOS 上的 ⌘ Command+Enter) 来访问它。
自定义列菜单项
您可以通过将 slots 和 slotProps 属性传递给 <GridColumnMenu /> 组件来自定义列菜单项
slots- 使用此属性覆盖默认列菜单插槽或添加新插槽。slotProps- 使用此属性覆盖或传递列菜单项的displayOrder。您也可以使用它将额外的属性传递给自定义列菜单插槽。
添加菜单项
要添加新的菜单项，请创建一个新的项目插槽并将其传递给 slots 属性。在下面的示例中，新的插槽名为 columnMenuUserItem，但您可以选择任何名称，它将自动添加到菜单中。您还可以使用 slotProps 属性设置 displayOrder (默认 100) 或将新属性传递给插槽。
function CustomColumnMenu(props: GridColumnMenuProps) {
return (
<GridColumnMenu
{...props}
slots={{
// Add new item
columnMenuUserItem: CustomUserItem,
}}
slotProps={{
columnMenuUserItem: {
// set `displayOrder` for the new item
displayOrder: 15,
// Additional props
myCustomValue: 'Do custom action',
myCustomHandler: () => alert('Custom handler fired'),
},
}}
/>
);
}
覆盖默认菜单项
使用 slots 属性覆盖默认菜单项。查看此表以了解每个菜单项的可覆盖插槽名称。
function CustomColumnMenu(props: GridColumnMenuProps) {
return (
<GridColumnMenu
{...props}
slots={{
// Override `columnMenuFilterItem` component
columnMenuFilterItem: CustomFilterItem,
}}
/>
);
}
隐藏菜单项
要隐藏菜单项，您可以将 slots 中的相应插槽设置为 null。查看此表以了解每个菜单项的插槽名称。
function CustomColumnMenu(props: GridColumnMenuProps) {
return (
<GridColumnMenu
{...props}
slots={{
// Hide `columnMenuColumnsItem`
columnMenuColumnsItem: null,
}}
/>
);
}
重新排序菜单项
每个项目都根据 displayOrder 分配一个值，该值决定了它在其他项目之前还是之后显示。它以升序排列；数字越小，它在列表中显示得越早。对于新项目，displayOrder 的默认值为 100。
您可以在 slotProps 中覆盖默认或新项目的 displayOrder。
查看此表以查看每个菜单项的默认 displayOrder。
function CustomColumnMenu(props: GridColumnMenuProps) {
return (
<GridColumnMenu
{...props}
slotProps={{
// Swap positions of filter and sort items
columnMenuFilterItem: {
displayOrder: 0, // Previously `10`
},
columnMenuSortItem: {
displayOrder: 10, // Previously `0`
},
}}
/>
);
}
默认列菜单项
作为参考，以下是列菜单 slots 以及默认项目组件和 displayOrder。
自定义菜单组件
您还可以通过将完全自定义的组件传递到数据表格的 columnMenu 插槽来自定义和替换列菜单。如果您想将某些默认菜单项添加到您的自定义组件中，您可以导入并重新使用它们。
禁用列菜单
默认情况下，每个列标题都启用了列菜单。要禁用列菜单，请设置属性 disableColumnMenu={true}。