Installing TanStack Table in a React Project

Shows the command to install TanStack Table using npm and a basic example to import and use it in a React component.

npm install @tanstack/react-table

Command to install TanStack Table for a React project using npm.

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

Import the useReactTable hook from the @tanstack/react-table package.

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

function MyTableComponent() {
  const columnHelper = createColumnHelper();
  const columns = useMemo(() => [
    columnHelper.accessor('firstName', { header: 'First Name' }),
    columnHelper.accessor('surname', { header: 'Surname' }),
    // Add more columns as needed
  ], []);
  const data = useMemo(() => [
    { firstName: 'Jane', surname: 'Doe' },
    { firstName: 'John', surname: 'Doe' },
    // Add more data rows as needed
  ], []);
  
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
  
  return (
    // Render your table UI using the table state and methods
  );
}

Use 'useReactTable' to create a React Table component. The 'useMemo' hook is used to memoize columns and data for performance optimization. The 'createColumnHelper' function simplifies column definition.