Блог

Обращаясь к документации Datagrid о событиях, я обнаружил, что columnVisibilityChange ее можно использовать для обнаружения всех видов изменений видимости столбцов. Но когда я включил его в компонент DataGrid, он, похоже, не срабатывает, когда я показываю/скрываю столбцы. Вот как я пытаюсь обнаружить триггер:

 export default function DataGridDemo(props) {
  let { updateSelections } = props;
  updateSelections =
    updateSelections || (() => console.log('Update Selections Not Configured'));
  return (
    <div
      style={{ height: '100%', width: '100%' }}
      className={classes.DataGridComponents}>
      <DataGrid
        rows={props.data || rows}
        columns={props.schema || columns}
        components={{
          Toolbar: CustomToolbar,
          Footer: GridFooter,
        }}
        className={classes.root}
        checkboxSelection
        disableSelectionOnClick
        scrollbarSize={5}
        pageSize={props.pageSize || 10}
        rowsPerPageOptions={[10]}
        density={props.density || 'compact'}
        onSelectionModelChange={updateSelections}
        columnVisibilityChange={(params) => {
          console.log(`Column State Changed: ${params}`);
        }}
        selectionChange={() => console.log('selection change')}
      />
    </div>
  );
}
 

Что здесь происходит не так?

Чтобы использовать прослушиватели событий, необходимо добавить термин «включено» и прописными буквами «прослушиватель событий». Меняю свой код с:

 columnVisibilityChange={(params) => {
          console.log(`Column State Changed: ${params}`);
        }}
 

Для

 onColumnVisibilityChange={(params) => {
          console.log(`Column State Changed: ${params}`);
        }}
 

работал на меня.