Датагрид: удобная таблица для отображения данных

<div> Datagrid - это компонент, который предоставляет пользователю возможность отображения и редактирования данных в табличной форме. Он является одним из основных элементов пользовательского интерфейса во многих приложениях, ведь таблицы широко используются для представления больших объемов данных.
Веб-разработчикам приходится часто сталкиваться с задачей отображения данных в удобной и интуитивно понятной форме. Datagrid становится незаменимым помощником в таких случаях, позволяя отображать данные в виде таблицы с возможностью сортировки, фильтрации и редактирования.

<pre> <code class="html"> <import React, { useState } from 'react';> <import { DataGrid } from '@material-ui/data-grid';>

<const columns = [
<{ field: 'id', headerName: 'ID', width: 70 },
<{ field: 'firstName', headerName: 'First Name', width: 130 },
<{ field: 'lastName', headerName: 'Last Name', width: 130 },
<{ field: 'age', headerName: 'Age', type: 'number', width: 90 },
<{ field: 'email', headerName: 'Email', width: 200 },
<];>

<const rows = [
<{ id: 1, firstName: 'John', lastName: 'Doe', age: 25, email: 'john.doe@example.com' },
<{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 32, email: 'jane.smith@example.com' },
<{ id: 3, firstName: 'Robert', lastName: 'Johnson', age: 42, email: 'robert.johnson@example.com' },
<// и так далее...>

<const MyDataGrid = () => {
<{ const [selectedRows, setSelectedRows] = useState([]); }

<{ const handleSelectionChange = (selection) => { setSelectedRows(selection.rowIds); } }

<{ return (
<{ { height: 400, width: '100%' } }

<{
<{ rows={rows} }
<{ columns={columns} }
<{ checkboxSelection }
<{ onSelectionModelChange={handleSelectionChange} }
<{ selectionModel={selectedRows} }
<{ />} }
<{ /> }
<) }
</div>

В этом примере мы используем библиотеку Material-UI для создания компонента Datagrid. У нас есть две основные переменные: columns и rows. Переменная columns определяет столбцы таблицы и их свойства, такие как заголовки и ширина. Переменная rows содержит данные, которые мы хотим отобразить.

Мы также добавляем обработчик события handleSelectionChange, который отслеживает изменения в выбранных строках и обновляет selectedRows. Этот компонент также поддерживает возможность выбора нескольких строк с помощью флажка checkboxSelection.

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