Как только я начал работать с Material-UI DataGrid, я почувствовал больше контроля над действиями, которые пользователь обычно должен выполнять при работе с таблицами. Я не буду вдаваться в подробности того, как реализовать таблицу в вашей кодовой базе, поскольку эта тема широко освещена, а документация также довольно интуитивно понятна. Вы можете найти документацию здесь; Начало работы с Mui-DataGrid.

Давайте углубимся в вариант использования, который мы будем изучать в этой статье. Mui-DataGrid предоставляет возможность переупорядочивать столбцы вашей таблицы, очень удобно, верно? Позвольте пользователю управлять тем, как он хочет просматривать свою таблицу. Однако в некоторых случаях вы захотите сделать состояние столбцов постоянным в соответствии с тем, как пользователь переупорядочил их, даже после того, как они закроют приложение и вернутся к нему снова, они будут иметь тот же порядок, в котором они его покинули. .

Я продемонстрирую 2 способа сделать столбцы постоянными. Давайте начнем.

  1. Используя свойство InitialState, предоставленное в DataGrid.
    В версии релиза 5.7.0Mui-DataGrid добавлена ​​возможность переупорядочивания столбцов в их переносимом состоянии. Это очень просто, и ниже приведен пример того, как вы можете этого добиться.
<DataGrid
 columns={[{field: ‘second’ }, { field: ‘first’ }]}
 initialState={{
   columns: {
     orderedFields: [‘first’, ‘second’]
   }
 }}
/>

Я предлагаю, прежде чем внедрять это в свой проект, поиграть с этим примером codeSandbox, чтобы опробовать различные случаи.

Если вам интересно, нужно ли вам определять все столбцы для упорядочения; ну, абсолютно нет.

<DataGridPro
  columns={[{ field: “second” }, { field: “first” }, { field:     “third” }]}
 initialState={{
      columns: {
      orderedFields: [“first”]
     }
  }}
/> 
// column order will be first, second, third

DataGrid разместит столбец с именем first на первой позиции, а остальные — в соответствии с вашими указаниями.

2. Используя метод apiRef
При работе с данными, которые извлекаются с сервера, не забывайте запоминать свои столбцы. В конкретном случае использования, когда ваша таблица должна быть повторно визуализирована, этот метод вам пригодится.

Если вы работаете с функциональными компонентами в React, DataGrid предоставляет хук useGridApiRef, который можно просто импортировать следующим образом;

import {useGridApiRef} from ‘@mui/x-data-grid-pro’;

Этот хук можно использовать для доступа к событиям, предоставляемым DataGrid. Вы можете увидеть список свойств, к которым вы можете получить доступ с помощью этого хука.

Чтобы использовать этот метод, нам сначала нужно использовать свойство onColumnOrderChange.

const [columnOrder, setColumnOrder] = useState([]);
onColumnOrderChange={(columnOrder)=>{
const {field, targetIndex} = columnOrder; // Destructure column Name // and it's target Index
setColumnOrder((prevState) => {
   return {
      ...prevState,
      [field]: targetIndex,
     };
    }); // save the state of columns that were reordered in an array
}}

Наконец, у вас есть несколько вариантов, например, для сохранения состояния;

  1. В вашей базе данных
  2. сохранить их как файлы cookie
  3. сохранить их в IndexedDB
  4. сохраните их в магазине Redux, используя redux-persist.

В этом уроке я бы сохранил его в файлах cookie.

Проще говоря, чтобы сохранить его в файлах cookie, вы можете использовать пакет npm-package «react-cookies».

import cookie from ‘react-cookies’;
// You can save them like this
cookie.save(‘columnOrder’, columnOrder, {path: ‘/’});
// You can load them like this
cookie.load('columnOrder')

И увы, мы закончили! Теперь мы сделали наши столбцы постоянными, даже при обновлении пользователь может сохранить порядок столбцов таким, каким он хотел их видеть! Первый метод, продемонстрированный в этой статье, является простым, но в некоторых случаях вам придется использовать второй.

Если у вас есть какие-либо вопросы или запросы; не стесняйтесь комментировать ниже, и я буду рад помочь вам. :)