Возможно ли в приложение React сделать таблицу, в которой мы выбираем, какую таблицу загружать?

Да, в приложении, использующем React, совершенно возможно создать таблицу, в которой можно выбрать, какую таблицу загружать. Для этого мы можем использовать состояние (state) и условный рендеринг (conditional rendering), которые являются одной из самых мощных возможностей React.

Прежде всего, мы можем создать компонент Tables, который будет содержать логику для выбора и загрузки таблицы. Внутри состояния компонента Tables мы определим переменную selectedTable, которая будет хранить выбранную таблицу:

import React, { useState } from "react";

const Tables = () => {
  const [selectedTable, setSelectedTable] = useState(null);

  const handleTableSelect = (table) => {
    setSelectedTable(table);
  };

  return (
    <div>
      <h1>Select a table</h1>
      <button onClick={() => handleTableSelect("Table 1")}>Table 1</button>
      <button onClick={() => handleTableSelect("Table 2")}>Table 2</button>

      {selectedTable && (
        <TableLoader table={selectedTable} />
      )}
    </div>
  );
};

export default Tables;

Здесь мы создаем кнопки для выбора таблицы и устанавливаем значение selectedTable с помощью handleTableSelect при нажатии на каждую кнопку. Затем мы проверяем, выбрана ли какая-либо таблица, и если да, то рендерим компонент TableLoader, передавая выбранную таблицу в качестве свойства.

Компонент TableLoader будет отвечать за загрузку таблицы и ее отображение. Мы можем создать отдельные компоненты для каждой таблицы или использовать условный рендеринг внутри TableLoader для выбора соответствующего отображения таблицы:

import React from "react";

const TableLoader = ({ table }) => {
  return (
    <div>
      {table === "Table 1" && <Table1 />}
      {table === "Table 2" && <Table2 />}
    </div>
  );
};

const Table1 = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
        </tr>
      </tbody>
    </table>
  );
};

const Table2 = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>25</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>30</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  );
};

export default TableLoader;

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

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