ReactJS - Table: A Beginner's Guide

Привет,野心勃勃的开发者们！Сегодня мы окунемся в мир таблиц ReactJS. Как кто-то, кто уже давно преподает информатику, я могу告诉你, что таблицы - это незаслуженно забытые герои веб-разработки. Они могут не быть такими эффектными, как анимации, или модными, как адаптивные дизайны, но, эй, они полезны! Итак, натянем рукава и начнем.

Понимание компонента Table

Что такое компонент Table?

В ReactJS компонент Table - это способ отображения данных в строках и столбцах. Представьте его как цифровой Spreadsheet, который можно вставить в ваше веб-приложение. Он идеально подходит для представления структурированной информации в понятной и организованной форме.

Основная структура React таблицы

Давайте начнем с простого примера:

import React from 'react';

function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
<th>Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
);
}

export default SimpleTable;

В этом примере:

• <table> - это основной контейнер для нашей таблицы.
• <thead> содержит заголовок строки.
• <tbody> содержит строки данных.
• <tr> представляет собой строку таблицы.
• <th> используется для ячеек заголовка.
• <td> используется для ячеек данных.

Применение компонента Table

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

import React from 'react';

function DynamicTable({ data }) {
return (
<table>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default DynamicTable;

Этот компонент более гибкий:

• Он принимает проп data, который является массивом объектов.
• Он динамически generates заголовки на основе ключей первого объекта данных.
• Он создает строки для каждого элемента массива данных.

Чтобы использовать этот компонент:

import React from 'react';
import DynamicTable from './DynamicTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>Данные пользователей</h1>
<DynamicTable data={tableData} />
</div>
);
}

export default App;

Добавление темного варианта и чередование столбцов

Чтобы сделать нашу таблицу более визуально привлекательной и легкой для чтения, добавим темный вариант и чередование столбцов.

import React from 'react';
import './Table.css'; // Мы создадим этот файл для стилизации

function EnhancedTable({ data, darkMode = false }) {
const tableClass = darkMode ? 'table dark' : 'table';

return (
<table className={tableClass}>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index} className={index % 2 === 0 ? 'even' : 'odd'}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default EnhancedTable;

Теперь создадим файл CSS (Table.css) для стилизации нашей таблицы:

.table {
border-collapse: collapse;
width: 100%;
}

.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.table th {
background-color: #f2f2f2;
font-weight: bold;
}

.table .even {
background-color: #f9f9f9;
}

.table.dark {
color: white;
background-color: #333;
}

.table.dark th {
background-color: #444;
}

.table.dark .even {
background-color: #2a2a2a;
}

.table.dark .odd {
background-color: #333;
}

Этот CSS предоставляет:

• Основной стиль таблицы с границами и отступами.
• Чередующиеся цвета строк для лучшей читаемости.
• Темный режим таблицы.

Чтобы использовать эту улучшенную таблицу:

import React from 'react';
import EnhancedTable from './EnhancedTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>Данные пользователей (светлый режим)</h1>
<EnhancedTable data={tableData} />

<h1>Данные пользователей (темный режим)</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}

export default App;

Заключение

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

Продолжая ваше путешествие в React, продолжайте экспериментировать с различными способами представления данных. Таблицы - это только начало! Кто знает? Может быть, в следующий раз мы займемся сортировкой, фильтрацией или даже редактируемыми таблицами. Возможности безграничны!

Продолжайте программировать, оставайтесь любопытными и помните: в мире программирования каждое сообщение об ошибке - это новая возможность для обучения. Счастливого кодирования!

Credits: Image by storyset