Как добавить таблицы в приложение React

Содержание

1. Предварительный обзор API таблиц
2. Установка и импорт таблицы Tanstack
3. Подготовка данных
4. Настройка таблиц с помощью Tanstack Table
5. Оформление стола Tanstack
6. Заключение
7. Ссылки

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

Таблица Tanstack - это рабочая лошадка, созданная для фильтрации, сортировки, группировки, агрегации, пагинации, материализации и отображения массивных наборов данных. Она предлагает множество улучшенных возможностей, таких как производительность, поддержка рендеринга на стороне сервера (SSR), новые крючки и более современный, гибкий API. Безголовый дизайн не поставляется с компонентами и стилями разметки, что дает нам полный контроль над разметкой и стилями. В этой статье мы рассмотрим, как начать добавлять и стилизовать наши ReactJS-таблицы с помощью Tanstack Table. Итак, давайте погрузимся и посмотрим, что предлагает Tanstack Table!

Предварительный обзор API таблиц

Table API - это набор функций и объектов, используемых для создания и визуализации таблиц. Ниже представлены адаптеры библиотек на выбор.

• React Table
• Solid Table
• Svelte Table
• Vue Table
• Vanilla JS/TS

Вот некоторые ключевые особенности Tanstack React Table API:

• столбцы: Это массив объектов, определяющих столбцы таблицы. Каждый объект должен содержать как минимум свойство Header, которое является меткой для столбца, и свойство accessor, которое является функцией, возвращающей значение для столбца на основе данных.

• data: Свойство data представляет собой массив объектов, представляющих строки таблицы. Каждый объект должен иметь свойства, соответствующие функциям-аксессорам, определенным в массиве columns.

• useReactTable: Этот хук создает новый экземпляр таблицы и возвращает функции и объекты, необходимые для ее отображения. В число функций входят getTableProps, getTableBodyProps, headerGroups и rows.

• getTableProps: Функция getTableProps - это функция, возвращающая набор реквизитов, которые должны быть применены к элементу <table>.

• getTableBodyProps: Функция getTableBodyProps - это функция, возвращающая набор реквизитов, которые должны быть применены к элементу <tbody>.

• headerGroups: Свойство headerGroups представляет собой массив объектов, представляющих группы заголовков таблицы. Каждый объект содержит свойство headers, представляющее собой массив столбцов данной группы.

• rows: Свойство rows - это массив объектов, представляющих строки таблицы. Каждый объект содержит свойство cells - массив объектов, представляющих ячейки в данной строке.

• prepareRow: Эта функция подготавливает объект строки к рендерингу, применяя все необходимые стили и реквизиты.

Установка и импорт таблицы Tanstack

Прежде чем перейти к рассмотрению API, важно отметить, что мы будем использовать Typescript вместе с React, поэтому при инициализации проекта выберите Typescript в качестве предпочтительного языка. Это можно легко сделать с помощью NextJS или ViteJS.

Приступим к настройке! Указав в терминале на папку с проектом, мы можем выполнить следующую команду для установки адаптера Tanstack для ReactJS.

npm install @tanstack/react-table

Далее нам необходимо импортировать его, чтобы использовать. Быстро перейдите в рабочую директорию нашего проекта в папку с исходным кодом, создайте новую папку и назовите ее components. В этой папке создайте файл, назовите его tanstack.tsx и добавьте в него следующий код.

import {
	createColumnHelper,
	flexRender,
	getCoreRowModel,
	useReactTable,
} from '@tanstack/react-table';

Код импортирует из библиотеки две наиболее важные функции: createColumnHelper и useReactTable.

-. createColumnHelper - вспомогательная функция, используемая для создания определений колонок для нашей таблицы. -. useReactTable - это основная hook-функция, с помощью которой мы будем генерировать экземпляр таблицы на основе наших данных и определений столбцов.

Вот структура нашей рабочей директории.

Подготовка данных

Мы будем сохранять данные в формате JSON, поэтому, если у вас его еще нет, можно воспользоваться его копией. Чтобы использовать ее в приложении, перейдите в папку components, создайте новый файл с именем data.json и вставьте в него данные в виде массива объектов.

Мы должны импортировать этот файл в наш React-компонент tanstack.tsx.

tanstack.tsx

import {
	createColumnHelper,
	flexRender,
	getCoreRowModel,
	useReactTable,
} from '@tanstack/react-table';

import { defaultData } from './data.json';

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

Настройка таблиц с помощью Tanstack Table

В этом разделе мы будем использовать большинство функций, доступных в Table API. Давайте приступим к определению нашей таблицы. Первый шаг - создание объекта с нужными нам свойствами из наших данных. В TypeScript это можно сделать, определив объект типа TypeScript. В нашем случае назовем его Student. В дальнейшем это будет означать, что он содержит массив, определенный как Student.

tanstack.tsx

type Student = {
  Application_No: number;
  Name: string;
  Father_Name: string;
  DOB: string;
};

Мы определили тип TypeScript Student, который представляет объект со свойствами Application No, Name, Father Name и DOB.

Далее создадим новый экземпляр функции createColumnHelper, с помощью которой определим столбцы таблицы.

tanstack.tsx

const columnHelper = createColumnHelper<Student>();

С помощью функции createColumnHelper() мы создадим объект columnHelper, который будем использовать для определения объекта columns.

Мы должны создать объект columns, чтобы завершить схему нашей таблицы. Он должен содержать массив объектов, каждый из которых представляет столбец таблицы. Мы создаем каждый объект с помощью функции columnHelper.accessor(), которая возвращает объект с параметрами конфигурации для соответствующего столбца.

tanstack.tsx

const columns = [
	columnHelper.accessor('Application_No', {
		header: 'Registration No',
		cell: (info) => info.getValue(),
	}),
	columnHelper.accessor('Name', {
		header: 'Name',
		cell: (info) => info.getValue(),
	}),
	columnHelper.accessor('Father_Name', {
		header: 'Father Name',
		cell: (info) => info.getValue(),
	}),
	columnHelper.accessor('DOB', {
		header: 'Date of Birth',
		cell: (info) => info.getValue(),
	}),
];

Функция accessor() columnHelper задает для каждого столбца аксессуар данных, который извлекает значение свойства из строки данных в файле data.json.

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

tanstack.tsx

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import defaultData from "./data.json";

type Student = {
  Application_No: number;
  Name: string;
  Father_Name: string;
  DOB: string;
};

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("Application_No", {
    header: "Registration No",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("Name", {
    header: "Name",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("Father_Name", {
    header: "Father Name",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("DOB", {
    header: "Date of Birth",
    cell: (info) => info.getValue(),
  }),
];

Следующий раздел будет определять итоговый вывод таблицы. В нашем файле tanstack.tsx под объектомcolumns мы определим функциональный компонент React с именем Table. Эта функция будет выводить таблицу, используя хук useReactTable, который мы импортировали ранее.

tanstack.tsx

function Table() {
  const [data, setData] = useState<Student[]>(defaultData);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return <></>;
}

Функция Table начинается с инициализации состояния данных массивом объектов Student с помощью хука useState, где каждый объект Student будет представлять строку таблицы.

Далее вызывается хук useReactTable для создания объекта таблицы. Хук принимает объект с тремя свойствами:

data: Массив данных, представляющих строки таблицы. columns: Массив объектов, представляющих столбцы таблицы. getCoreRowModel: Функция, возвращающая модель строки, которая определяет, как должны отображаться строки. Объект table будет отображать нашу таблицу в операторе возврата функции Table.

Прежде чем приступить к визуализации таблицы, необходимо знать, что представляют собой элементы <th>, <td> и <tr> в таблицах.

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

<td>: Этот элемент определяет стандартную ячейку таблицы. Стандартные ячейки содержат основное содержимое таблицы и обычно отображаются с обычным форматированием текста.

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

Комбинируя эти элементы, мы можем создавать таблицы, в которых информация отображается в структурированном и организованном виде.

Вернемся к нашему компоненту Table и добавим в оператор возврата следующий код.

tanstack.tsx

return (
	<div>
		<table>
			<thead>
				{table.getHeaderGroups().map((headerGroup) => (
					<tr key={headerGroup.id}>
						{headerGroup.headers.map((header) => (
							<th key={header.id}>
								{header.isPlaceholder
									? null
									: flexRender(header.column.columnDef.header, header.getContext())}
							</th>
						))}
					</tr>
				))}
			</thead>
			<tbody>
				{table.getRowModel().rows.map((row) => (
					<tr key={row.id}>
						{row.getVisibleCells().map((cell) => (
							<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
						))}
					</tr>
				))}
			</tbody>
		</table>
	</div>
);

В разделе return мы отображаем таблицу, используя ранее определенные данные и столбцы. Мы начинаем с создания элемента <div>, содержащего элемент <table>. Внутри <table> находится элемент <thead> с рядами заголовков таблицы.

Для каждой группы заголовков, возвращаемой table.getHeaderGroups(), мы используем метод map для итерации по заголовкам и создаем элемент <th> для каждого из них. Если заголовок находится на своем месте, возвращается null; если нет, используется функция flexRender для отображения элемента заголовка.

Следующий раздел — это элемент <tbody>, содержащий строки с ячейками таблицы. Для каждой строки в таблице мы используем метод map для итерации по ячейкам и создаем элемент <td> для каждой из них. Внутри каждого <td> используется функция flexRender для отображения элемента ячейки.

Не забудьте импортировать наш компонент Table в наш корневой компонент.

import Table from '@/components/tanstack';

export default function Home() {
	return (
		<>
			<Table />
		</>
	);
}

Запустим наш проект и проверим отрисованную таблицу в браузере.

Оформление стола Tanstack

Наша таблица теперь функциональна, но ей не хватает визуальной привлекательности. Для придания ей стиля мы воспользуемся Styled-Components, который предлагает подход CSS-in-JS, позволяющий писать структурированный и читабельный CSS-код.

Если вы еще не использовали Styled Components, рекомендуем ознакомиться с их документацией. Нам нужны только два стилизованных компонента, TableContainer и StyledTable. TableContainer определяет элемент div с примененными CSS-стилями как контейнер нашей таблицы.

Поскольку стилизованные компоненты используют обычный синтаксис CSS для определения стилей, наш компонент StyledTable будет использовать селекторы th и td CSS для указания элементов <th> и <td> соответственно.

В папке styles создадим новый файл tableStyles.ts; в нем мы создадим все необходимые нам стили таблицы.

/styles/tableStyle.ts

mport styled from "styled-components";

export const TableContainer = styled.div`
  position: relative;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  max-width: 800px;
`;

export const StyledTable = styled.table`
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9em;

  th {
    background-color: slategray;
    color: white;
    padding: 5px;
    border: 1px solid #ddd;
    text-align: left;
  }

  td {
    background-color: hsl(240, 50%, 90%);
    padding: 5px;
    border: 1px solid #ddd;
    text-align: left;
  }

  tr:nth-child(even) td {
    background-color: hsl(240, 50%, 85%);
  }

  tr:hover td {
    background-color: #ddd;
  }
`;

Селектор td tr:nth-child(even) применяет цвет фона к каждому ряду элементов <td>, создавая эффект полоски. Когда пользователь наводит курсор на строку, селектор tr:hover td применяет цвет фона к элементу <td>.

Далее нам необходимо обновить наш компонент Table с помощью этих стилизованных компонентов. Мы импортируем и заменим их соответствующими элементами tsx.

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import defaultData from "./data.json";
import { useState } from "react";
import { StyledTable, TableContainer } from "@/styles/tableStyle";

type Student = {
  Application_No: number;
  Name: string;
  Father_Name: string;
  DOB: string;
};

const columnHelper = createColumnHelper<Student>();

const columns = [
  columnHelper.accessor("Application_No", {
    header: "Registration No",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("Name", {
    header: "Name",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("Father_Name", {
    header: "Father Name",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("DOB", {
    header: "Date of Birth",
    cell: (info) => info.getValue(),
  }),
];

function Table() {
  const [data, setData] = useState<Student[]>(defaultData);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <TableContainer>
      <StyledTable>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </StyledTable>
    </TableContainer>
  );
}
export default Table;

Поздравляем! За то, что вы прошли этот путь, наша финальная версия таблицы теперь стилизована.

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

Заключение

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

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

Ссылки

• Tanstack documentation
• TanStack Table v8