Как сделать таблицу в React.js?

@roma 

В React.js можно создать таблицу, используя элемент <table> и дочерние элементы <tr> (строка таблицы) и <td> (ячейка таблицы).

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

1
2
3
4
5
6

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

Чтобы создать таблицу с несколькими строками, нужно добавить несколько элементов <tr> с соответствующими ячейками <td>:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Также можно использовать элемент <th> для создания заголовков таблицы. Заголовки обычно располагаются в первой строке таблицы, перед ячейками данных:

1
2
3
4
5

<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>

@roma 

В React.js для создания таблицы можно использовать JSX и JavaScript. Вот пример кода, который создает простую таблицу с двумя столбцами и тремя строками:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React from 'react';

function Table() {
  return (
    <table>
      <thead>
        <tr>
          <th>Имя</th>
          <th>Возраст</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Анна</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Иван</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Елена</td>
          <td>35</td>
        </tr>
      </tbody>
    </table>
  );
}

export default Table;

В этом примере мы создали функциональный компонент Table, который возвращает JSX код таблицы. Внутри table мы создали thead и tbody для заголовка и тела таблицы, соответственно. В thead мы создали одну строку с двумя ячейками th, а в tbody мы создали три строки tr, каждая из которых содержит две ячейки td.

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