Sobes.tech
Middle+

Have you had experience working with TanStack Table (formerly React Table)?

sobes.tech AI

Answer from AI

Yes, I have experience working with TanStack Table (formerly React Table). It is a powerful library for creating tables in React with support for:

  • Customization of columns and cells
  • Sorting, filtering, pagination
  • Virtualization of large data sets
  • Table state management

Example of basic usage:

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

const data = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'age', header: 'Age' },
];

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

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

This library is flexible and allows building complex tables with minimal effort.