MUI X 数据网格：如何拥有初始可见列并稍后切换它

Question

如果我不使用

columnVisibilityModel={visibleColumns}

，那么列管理中的切换工作正常，但它最初显示所有列，而我希望最初只显示几列。

当前代码不切换意味着它既不检查也不取消检查。

const visibleColumns = {
  id: true,
  name: true,
  publisher: false,
  stickerCount: false,
  createdAt:false,
  createdBy: false,
  updatedAt: false,
  stickersCount: false,
  view: false  ,
}

const simpleColumns = [
  { 
    field: 'id', 
    headerName: 'ID', 
    width: 200,
  },
  ...
];



function DataGridDemo() {



  return (
    <Box sx={{ height: 400, width: '100%' }}>

      <DataGrid
        apiRef={apiRef}
        rows={rows}
        columns={columns}
        loading={isLoading || rows.length === 0}

        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
          sorting: {
            sortModel: [
              {
                field: 'createdAt',
                sort: 'asc',
              },
            ],
          }
        }}
        columnVisibilityModel={visibleColumns}
        

      />


    </Box>
  );
}

export default DataGridDemo;

Answer 1

我们需要状态来保存可见性信息，并且需要将该方法传递给 DataGrid 组件的

onColumnVisibilityModelChange

属性。

我们必须将其存储到状态中并将该状态传递给

visibleColumns

组件，然后在切换事件上更改状态，而不是直接将

DataGrid

传递给

DataGrid

。

代码：

const [columnVisibility, setColumnVisibility] = React.useState(visibleColumns);

const handleColumnVisibilityChange = React.useCallback((newModel) => {
  setColumnVisibility(newModel);
}, []);

...
<DataGrid
  columnVisibilityModel={columnVisibility}
  onColumnVisibilityModelChange={handleColumnVisibilityChange}
/>