如何从 devextreme-reactive 反应网格中的列选择器中删除列?请注意,我不想禁用列选择器中的列。
我正在使用以下网格: https ://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-visibility/
有 columnChooserItem 的文档,但我不知道如何使用它。 https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/column-chooser/#columnchooseritem
您可以在这里尝试代码:https ://codesandbox.io/s/f1ogw
import React, { useState } from 'react';
import Paper from '@material-ui/core/Paper';
import {
Grid,
Table,
TableHeaderRow,
ColumnChooser,
TableColumnVisibility,
Toolbar,
} from '@devexpress/dx-react-grid-material-ui';
import { generateRows } from '../../../demo-data/generator';
export default () => {
const [columns] = useState([
{ name: 'name', title: 'Name' },
{ name: 'gender', title: 'Gender' },
{ name: 'city', title: 'City' },
{ name: 'car', title: 'Car' },
]);
const [rows] = useState(generateRows({ length: 6 }));
const [defaultHiddenColumnNames] = useState(['gender', 'car']);
const [tableColumnVisibilityColumnExtensions] = useState([
{ columnName: 'city', togglingEnabled: false },
]);
return (
<Paper>
<Grid
rows={rows}
columns={columns}
>
<Table />
<TableHeaderRow />
<TableColumnVisibility
defaultHiddenColumnNames={defaultHiddenColumnNames}
columnExtensions={tableColumnVisibilityColumnExtensions}
/>
<Toolbar />
<ColumnChooser />
</Grid>
</Paper>
);
};