Создание компонента таблицы React из JSON
Одним из простых способов вынести данные из HTML — хранить их в формате JSON. JSON популярен и удобен, особенно при работе с JavaScript.
В React логично отдавать JSON-данные в компонент, который генерирует таблицу. Такой компонент масштабируется вместе с данными: количество строк не фиксировано, оно зависит от содержимого JSON.
Что понадобится
- Установленный Node.js и npm/yarn.
- Базовое понимание React (функциональные компоненты, props).
- Проект React (например, созданный через create-react-app).
Создание JSON-данных
В этой инструкции таблица берет данные из локального файла JSON. В реальном приложении данные могут подгружаться с API.
В папке src создайте файл data.json и добавьте:
[{
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
},{
"id": 2,
"first_name": "Reta",
"last_name": "Woolmer",
"email": "rwoolmer1@miibeian.gov.cn"
},{
"id": 3,
"first_name": "Arabel",
"last_name": "Pestor",
"email": "apestor2@bloglovin.com"
}]
Это простой JSON с тремя объектами. Ключи объектов (id, first_name, last_name, email) используются как заголовки таблицы, а их значения — как содержимое строк.
Создание компонента Table
Создайте файл Table.js в папке src и добавьте базовую структуру:
export default function Table({theadData, tbodyData}) {
return (
// header row
// body data
);
}
Компонент принимает theadData и tbodyData как props. theadData содержит заголовки (ключи объектов), tbodyData — массив объектов с данными.
В App.js добавьте функцию getHeadings(), которая берёт ключи первого объекта:
const getHeadings = () => {
return Object.keys(data[0]);
}Не забудьте импортировать data.json в App.js:
import data from "./data.json" И при рендере передать пропсы в Table:
Создание строки заголовка
Для отображения заголовков пропишите итерацию по theadData внутри thead:
{theadData.map(heading => {
return {heading}
})}
Для улучшения читаемости заголовков вы можете преобразовать ключи в человекочитаемый вид (см. секцию “Советы по улучшению заголовков”).
Создание строк тела таблицы
Тело таблицы формируется из массива объектов. Сначала итерируемся по массиву, затем — по ключам (theadData) для каждой строки:
{tbodyData.map((row, index) => {
return
// row data
;
})}
Пример объекта строки:
const row = {
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
}
Чтобы вывести значения, проходим по theadData и по каждому ключу берем соответствующее свойство в row:
// theadData contains the keys
{theadData.map((key, index) => {
return {row[key]}
})}
;
Итоговый компонент Table выглядит так:
export default function Table({theadData, tbodyData}) {
return (
{theadData.map(heading => {
return {heading}
})}
{tbodyData.map((row, index) => {
return
{theadData.map((key, index) => {
return {row[key]}
})}
;
})}
);
}
В tbody компонент итерирует массив данных и возвращает tr для каждого объекта.
Использование компонента Table
Импортируйте Table в App.js и используйте так:
import Table from './Table';
import data from "./data.json"
function App() {
const getHeadings = () => {
return Object.keys(data[0]);
}
return (
);
}
export default App; Советы по улучшению заголовков и отображаемых значений
- Преобразуйте ключи вида first_name в человекочитаемый вид: замените подчёркивания пробелами и сделайте первую букву заглавной. Это улучшает UX.
- Для значений, таких как email, можно рендерить теги или кнопки “Копировать”.
Пример утилиты для заголовков (вставлять в код на ваш вкус):
function humanize(key) {
return key.replace(/_/g, ' ').replace(/\b\w/g, ch => ch.toUpperCase());
}
Затем в заголовках:
{humanize(heading)}
Стилизация с CSS-модулями
Чтобы добавить локально scoped стили используйте CSS Modules. Например, создайте файл Table.module.css и импортируйте его в Table.js:
import styles from './Table.module.css';
...
CSS-модули помогают избежать конфликтов глобальных классов и делают компонент портируемым.
Масштабирование и большие наборы данных
- Для больших массивов используйте виртуализацию (react-window, react-virtualized). Это снижает количество рендеров DOM.
- Рассмотрите пагинацию или бесконечную подгрузку (infinite scroll) на стороне сервера или клиента.
- Если требуется сортировка/фильтрация — реализуйте соответствующие контролы в родительском компоненте и передавайте отфильтрованные данные в Table.
Доступность (a11y)
- Используйте семантические теги
