🚀 React Table (TanStack Table): мощный инструмент для работы с таблицами Привет, друзья! 👋 Если вы работаете с таблицами в React-приложении, вам точно стоит обратить внимание на React Table (ныне TanStack Table). Это гибкая и производительная библиотека для создания динамических и интерактивных таблиц с минимальным кодом. 🔹 Почему TanStack Table? - Легкость: библиотека не навязывает конкретные стили, позволяя вам кастомизировать всё под свои нужды. - Гибкость: поддерживает сортировку, фильтрацию, пагинацию, работу с большими данными. - Высокая производительность: оптимизирована для отображения больших таблиц. - Расширяемость: можно легко добавить свои плагины и функции. 🔹 Установка Для начала установим библиотеку:

npm install @tanstack/react-table

🔹 Пример базовой таблицы

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

const defaultData = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
]

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor('firstName', {
    cell: info => info.getValue(),
  }),
  columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: info => info.renderValue(),
  }),
  columnHelper.accessor('visits', {
    header: () => <span>Visits</span>,
  }),
  columnHelper.accessor('status', {
    header: 'Status',
  }),
  columnHelper.accessor('progress', {
    header: 'Profile Progress',
  }),
]

function App() {
  const [data, _setData] = useState(() => [...defaultData])

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

  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>
  )
}

export default App;

🔹 Основные возможности 1. Сортировка Сортировка доступна из коробки 2. Фильтрация React Table поддерживает текстовую фильтрацию, выбор из списка и многое другое. 3. Пагинация Библиотека позволяет легко работать с большими объемами данных через серверную или клиентскую пагинацию. 4. Виртуализация Для очень больших таблиц можно использовать виртуализацию, чтобы отрисовывать только видимые строки. 🎯 Заключение TanStack Table — это мощный инструмент, который закрывает большинство задач, связанных с отображением таблиц. С помощью библиотеки вы можете настроить интерфейс, соответствующий вашим требованиям, от простых таблиц до сложных с сортировкой, фильтрацией и пагинацией. ReactJs Daily | #begginers