Как только я начал работать с Material-UI DataGrid, я почувствовал больше контроля над действиями, которые пользователь обычно должен выполнять при работе с таблицами. Я не буду вдаваться в подробности того, как реализовать таблицу в вашей кодовой базе, поскольку эта тема широко освещена, а документация также довольно интуитивно понятна. Вы можете найти документацию здесь; Начало работы с Mui-DataGrid.
Давайте углубимся в вариант использования, который мы будем изучать в этой статье. Mui-DataGrid предоставляет возможность переупорядочивать столбцы вашей таблицы, очень удобно, верно? Позвольте пользователю управлять тем, как он хочет просматривать свою таблицу. Однако в некоторых случаях вы захотите сделать состояние столбцов постоянным в соответствии с тем, как пользователь переупорядочил их, даже после того, как они закроют приложение и вернутся к нему снова, они будут иметь тот же порядок, в котором они его покинули. .
Я продемонстрирую 2 способа сделать столбцы постоянными. Давайте начнем.
- Используя свойство 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 }}
Наконец, у вас есть несколько вариантов, например, для сохранения состояния;
- В вашей базе данных
- сохранить их как файлы cookie
- сохранить их в IndexedDB
- сохраните их в магазине 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')
И увы, мы закончили! Теперь мы сделали наши столбцы постоянными, даже при обновлении пользователь может сохранить порядок столбцов таким, каким он хотел их видеть! Первый метод, продемонстрированный в этой статье, является простым, но в некоторых случаях вам придется использовать второй.
Если у вас есть какие-либо вопросы или запросы; не стесняйтесь комментировать ниже, и я буду рад помочь вам. :)