Setting Up TanStack Table in a React Project

Demonstrate the steps to install TanStack Table v8, import the necessary modules, and create a basic table component with static data in a React application.
// Step 1: Install TanStack Table v8
// Run this command in your terminal
npm install @tanstack/react-table
This command installs the TanStack Table package required for creating tables in a React application.
import React from 'react';
import { useReactTable, createColumnHelper } from '@tanstack/react-table';
Import React and the necessary hooks from the TanStack Table package.
// Define your data structure
const defaultData = [
  { id: 1, firstName: 'Jane', lastName: 'Doe' },
  { id: 2, firstName: 'John', lastName: 'Doe' }
Define a simple data structure to populate the table.
const columnHelper = createColumnHelper();
const columns = [
  columnHelper.accessor('id', {
    header: 'ID'
  columnHelper.accessor('firstName', {
    header: 'First Name'
  columnHelper.accessor('lastName', {
    header: 'Last Name'
Utilize the createColumnHelper function to define columns for your table based on data keys.
function Table() {
  const table = useReactTable({
    data: defaultData,
    getCoreRowModel: getCoreRowModel()
  return (
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={}>
            { => (
              <th key={}>{header.renderHeader()}</th>
        {table.getRowModel() => (
          <tr key={}>
            {row.getVisibleCells().map(cell => (
              <td key={}>{cell.renderCell()}</td>
Create a React function component that renders a table using the TanStack Table. This demonstrates using hooks to manage table state and render.