Setting Up the TanStack Table in React

Demonstrate how to install and set up the TanStack Table library in a React project, including initializing the useTable hook with basic column and data setup.

npm install @tanstack/react-table

Installs the TanStack Table library for React.

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

const data = [
  { id: 1, firstName: 'John', lastName: 'Doe', age: 28 },
  { id: 2, firstName: 'Jane', lastName: 'Doe', age: 34 },
];

const columns = createColumnHelper().createColumns([
  {
    accessorKey: 'firstName',
    header: () => 'First Name',
    cell: info => info.getValue()
  },
  {
    accessorKey: 'lastName',
    header: () => 'Last Name',
    cell: info => info.getValue()
  },
  {
    accessorKey: 'age',
    header: () => 'Age',
    cell: info => info.getValue()
  }
]);

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

  // Render logic...
}

Sets up the TanStack Table in a React component. It first imports necessary functions, defines data and columns configurations using a column helper, and initializes the useReactTable hook.