Как сделать продвинутый типизированный Generic для компонента React таблицы?

Для создания продвинутого типизированного Generic компонента для React таблицы можно использовать TypeScript. TypeScript позволяет добавить статическую типизацию к JavaScript и обладает сильной интеграцией с React.

Для начала, установите TypeScript, если у вас его еще нет, с помощью следующей команды:

npm install typescript --save-dev

Затем, создайте новый файл с расширением .tsx и добавьте следующий код:

import React from "react";

type TableProps<T> = {
  data: T[];
  columns: {
    title: string;
    key: keyof T;
  }[];
};

function Table<T>({ data, columns }: TableProps<T>) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(({ title }) => (
            <th key={title}>{title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            {columns.map(({ key }) => (
              <td key={key}>{item[key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Table;

В этом коде мы определяем тип TableProps<T>, где T является типом элементов данных в таблице. Этот тип принимает два поля: data и columns. data - это массив элементов данных, а columns - это массив объектов, описывающих заголовки столбцов и соответствующие им ключи данных.

Затем мы создаем компонент Table, который принимает объект TableProps в качестве своих свойств data и columns. Внутри компонента мы отображаем таблицу с заголовками столбцов из массива columns и данными из массива data. Для каждого элемента data мы отображаем строку таблицы, а для каждого ключа из массива columns мы отображаем значение соответствующего ключа для этого элемента данных.

Теперь вы можете использовать компонент Table в других компонентах React, указывая тип данных, которые вы хотите отобразить в таблице. Например:

import React from "react";
import Table from "./Table";

type User = {
  id: number;
  name: string;
  email: string;
};

const users: User[] = [
  { id: 1, name: "John Doe", email: "[email protected]" },
  { id: 2, name: "Jane Smith", email: "[email protected]" },
];

function App() {
  return (
    <div>
      <h1>User Table</h1>
      <Table<User>
        data={users}
        columns={[
          { title: "ID", key: "id" },
          { title: "Name", key: "name" },
          { title: "Email", key: "email" },
        ]}
      />
    </div>
  );
}

export default App;

В этом примере мы определяем тип User и создаем массив users с данными пользователей. Затем мы используем компонент Table для отображения пользователей. Компонент принимает свойство data со значением users и массив columns, который описывает заголовки столбцов и соответствующие ключи данных для полей id, name и email.

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