Лучший способ создать общую сетку данных с использованием пользовательского интерфейса Material и React

Итак, некоторое время назад у меня возникла потребность создать общую сетку данных, которую можно было бы использовать внутри различных компонентов в реакции.

Я пробовал разные сценарии, но не смог придумать лучшего способа создать общую сетку данных с разными параметрами. Мое требование также соответствует Typescript и Material UI версии 5.0.

Поэтому я использовал их последнюю бесплатную версию сетки данных материалов (версия 6). Когда мы планируем использовать сетку данных версии 6, она немного отличается от версии 5. Поэтому мне нравится показывать, как я выполняю свои требования и как я улучшил свои компоненты.

Хорошо пойдем.

Сначала нам нужна последняя версия React и версия Material UI до 5. Затем я планирую поработать над Material UI x-data-grid версии 6.

Здесь я использую Typescript, чтобы показать примеры кодирования.

Хорошо, давайте создадим наши общие компоненты сетки данных, как показано ниже. Я расскажу о некоторых свойствах, которые я использовал внутри этого компонента пользовательского интерфейса Material сетки данных.

Это моя базовая настройка компонента сетки данных.

import React from 'react';
import { DataGrid, DataGridProps, GridToolbar } from '@mui/x-data-grid';

const PAGE_SIZE = 10;
const PAGE_SIZE_OPTIONS = [10, 15, 30];

interface GridProps extends DataGridProps {
    initialStateValue: object,
}

const SharedDataGrid: React.FunctionComponent<GridProps> = (props) => {
  return (
    <>
      <DataGrid
        pageSizeOptions={PAGE_SIZE_OPTIONS}
        density="standard"
        rowHeight={50}
        initialState={{
          ...props.initialStateValue,
          pagination: {
            paginationModel: { pageSize: PAGE_SIZE, page: 0 }
          },
        }}
        slots={{ toolbar: GridToolbar }}
        slotProps={{ toolbar: { csvOptions: {disableToolButton: true }, printOptions: { disableToolButton: true }} }}
        disableColumnFilter
        disableColumnMenu
        paginationMode="server"
        {...props}
      />
    </>
  );
}

export default SharedDataGrid;

Хорошо, это наш основной общий компонент. Для простоты я отключил фильтрацию столбцов и параметры меню столбцов с возможностью печати страницы и параметрами загрузки CSV. Вы можете включить эти вещи, если вам нужно.

Здесь мы используем реквизиты слота, чтобы включить панель инструментов внутри заголовка таблицы. Он включает в себя страницу для печати, опцию CSV и т. д.

Более подробную информацию о нумерации страниц можно найти на официальной странице документации Material UI.

Официальная документация модели пагинации.

Для использования этого общего компонента мы можем создать наш основной компонент, как показано ниже.

import React from 'react';
import { Grid } from '@mui/material';
import { GridColDef } from '@mui/x-data-grid';
import uuid4 from 'uuid4';

import SharedDataGrid from './shared/DataGrid';

const App: React.FunctionComponent = () => {
    // define table columns
 const tableColumns: GridColDef[] = [
  {
    field: 'firstName',
    headerName: 'First Name',
    width: 160,
    editable: false,
    sortable: false,
  },
  {
    field: 'lastName',
    headerName: 'Last Name',
    width: 160,
    editable: false,
    sortable: false,
  },
];

// initial data
const dummyData = [
  {
    "id": uuid4(),
    "firstName": "Peter",
    "lastName": "John"
  },
  {
    "id": uuid4(),
    "firstName": "Will",
    "lastName": "Smith",
  }
];
 return ( 
   <>
      <h1>App</h1> 
        <SharedDataGrid
          columns={tableColumns}
          rows={dummyData}
          getRowId={(row) => row.id}
          initialStateValue={dummyData}
         />
    </>
   )
};

export default App;

На данный момент наш базовый компонент таблицы общих данных и основной компонент завершены.

Здесь мы определили уникальный идентификатор строки в качестве идентификатора моего массива результатов, а также передали начальные значения в качестве моего фиктивного массива результатов.

Подумайте, иногда нужно сбросить страницу и размер страницы. Например, если нам нужно сбросить номер начальной страницы и размер страницы при выполнении пользовательского поиска, как мы можем этого добиться?

Итак, для этой сетки данных есть реквизит под названием apiRef.

Мы можем использовать эту опору для изменения размера страницы и других связанных с этим вещей. Этот apiRef должен быть определен внутри компонента сетки данных. Я просто использовал значение триггера для повторной визуализации моего компонента.

import React from 'react';
import { DataGrid, DataGridProps, GridToolbar, useGridApiRef } from '@mui/x-data-grid';

const PAGE_SIZE = 10;
const PAGE_SIZE_OPTIONS = [10, 15, 30];

interface GridProps extends DataGridProps {
    initialStateValue: object,
}

const SharedDataGrid: React.FunctionComponent<GridProps> = (props) => {
  const apiRef = useGridApiRef();

  useEffect(() => {
    if(trigger) {
      apiRef.current.setPageSize(10);
      apiRef.current.setPage(0);
    }
  }, [trigger, apiRef])
  
  return (
      <>
        <DataGrid
          pageSizeOptions={PAGE_SIZE_OPTIONS}
          density="standard"
          rowHeight={50}
          initialState={{
            ...props.initialStateValue,
            pagination: {
              paginationModel: { pageSize: PAGE_SIZE, page: 0 }
            },
          }}
          slots={{ toolbar: GridToolbar }}
          slotProps={{ toolbar: { csvOptions: {disableToolButton: true }, printOptions: { disableToolButton: true }} }}
          disableColumnFilter
          disableColumnMenu
          paginationMode="server"
          apiRef={apiRef}
          {...props}
        />
      </>
    );
}

export default SharedDataGrid;

Для получения более подробной информации об apiRef вы можете обратиться к их официальной странице документа.

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

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

Спасибо. Наслаждайтесь контентом.

Стеккадемический

Спасибо, что дочитали до конца. Прежде чем уйти:

• Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
• Следуйте за нами в Twitter(X), LinkedIn и YouTube.
• Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.