Setting Up React TanStack Table with React Bootstrap

Demonstrate the initial setup and configuration for using React TanStack Table and React Bootstrap in a React project, including installing necessary packages and wrapping the application in a Bootstrap provider.
// Install necessary packages
// npm install @tanstack/react-table react-bootstrap bootstrap
First, install TanStack Table and React Bootstrap along with Bootstrap itself using npm or yarn.
import { Container } from 'react-bootstrap';
import { useReactTable } from '@tanstack/react-table';
Import the Container component from React Bootstrap and useReactTable from TanStack Table to be used in your component.
function App() {
  // Example table setup
  const columns = React.useMemo(() => [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Name' }
  ], []);
  const data = React.useMemo(() => [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ], []);
  const table = useReactTable({

  return (
      {/* Table setup will go here */}
Create the App component where you use React Bootstrap's Container to wrap your table component. Setup the table's basic columns and data using `useReactTable` hook from TanStack Table.
// React Bootstrap does not include table components out of the box
// Hence, use basic `table` tags for layout, styled with Bootstrap classes
Note on using React Bootstrap with tables: React Bootstrap does not include a specific table component, you will use standard HTML table tags styled with Bootstrap's classes.
<table className='table'>
    <tr>{table.getHeaderGroups().map(headerGroup => (
      <th {...headerGroup.getHeaderGroupProps()}>
        { => (
          <div {...header.getHeaderProps()}>{header.renderHeader()}</div>
  <tbody>{table.getRowModel() => (
    <tr {...row.getRowProps()}>
      {row.getVisibleCells().map(cell => (
        <td {...cell.getCellProps()}>{cell.renderCell()}</td>
Render the table using HTML `table` elements, applying Bootstrap classes for styling. Use TanStack Table hooks to dynamically generate the table head and body based on your data and columns.