Initializing TanStack Table

Set up a basic TanStack Table instance in React, demonstrating how to define columns and pass in data.

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

Import necessary hooks from TanStack Table package.

const columnHelper = createColumnHelper();

Initialize the column helper function to easily define columns.

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

Define data to be displayed in the table.

const columns = [
  columnHelper.accessor('firstName', { header: 'First Name' }),
  columnHelper.accessor('lastName', { header: 'Last Name' }),
  columnHelper.accessor('age', { header: 'Age' })
];

Define columns for the table using the column helper.

function Table() {
  const tableInstance = useReactTable({
    data,
    columns
  });

  return (
    <table>
      {/* Table markup using tableInstance goes here */}
    </table>
  );
}

Create a functional component that initializes the table with useReactTable hook and renders it.