The Tanstack Table component is by far Makerkit's recommended component for displaying tabular data. Being a lower-level component, it is not as opinionated as the other components and can be used in a variety of ways. It is extremely flexible, which means it needs more boilerplate code to use.
In this snippet, we will build a Table component that can be used to display tabular data. We will use Tailwind CSS for styling and the Tanstack Table component for the table itself.
The goal is to make it simpler to display tabular data in React.js, by reducing the boilerplate and keeping the code DRY.
This table component can:
- Display tabular data
- Display sub-components for each row
- Paginate the data
Let's get started!
The component's props
The Table component will accept the following props:
import type { ColumnDef, Row, PaginationState,} from '@tanstack/react-table';interface ReactTableProps<T extends object> { data: T[]; columns: ColumnDef<T>[]; renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement; pageIndex?: number; pageSize?: number; pageCount?: number; onPaginationChange?: (pagination: PaginationState) => void; className?: string;}The simplest version of your table will look like this:
<Table data={data} columns={columns} />The Table component
Let's start by creating the Table component. We will use the Tanstack Table component for the table itself. We will also use Tailwind CSS for styling.
Third-party packages
Additionally, we will use the following packages:
classnamesfor conditionally applying CSS classes@heroicons/reactfor the pagination icons- a few internal Makerkit components such as
IconButton.
Treat these as details and feel free to replace these with your own components.
The React.js table component
Now, let's create the React.js table component. Below is the full code for the component:
import { Fragment, useEffect, useState } from 'react';import { getCoreRowModel, useReactTable, flexRender,} from '@tanstack/react-table';import type { ColumnDef, Row, Table as ReactTable, PaginationState,} from '@tanstack/react-table';import classNames from 'classnames';import IconButton from '~/core/ui/IconButton';import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronLeftIcon, ChevronRightIcon,} from '@heroicons/react/24/outline';interface ReactTableProps<T extends object> { data: T[]; columns: ColumnDef<T>[]; renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement; pageIndex?: number; pageSize?: number; pageCount?: number; onPaginationChange?: (pagination: PaginationState) => void; className?: string;}function Table<T extends object>({ data, columns, renderSubComponent, pageIndex, pageSize, pageCount, onPaginationChange, className,}: ReactTableProps<T>) { const [pagination, setPagination] = useState<PaginationState>({ pageIndex: pageIndex ?? 0, pageSize: pageSize ?? 15, }); const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), manualPagination: true, pageCount, state: { pagination, }, onPaginationChange: setPagination, }); useEffect(() => { if (onPaginationChange) { onPaginationChange(pagination); } }, [pagination, onPaginationChange]); return ( <div className="flex flex-col"> <div className="overflow-x-auto"> <div className="inline-block min-w-full py-1"> <div className="overflow-hidden p-1"> <table className={classNames(`Table min-w-full`, className)}> <thead> {table.getHeaderGroups().map((headerGroup) => ( <tr key={headerGroup.id}> {headerGroup.headers.map((header) => ( <th key={header.id}> {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} </th> ))} </tr> ))} </thead> <tbody> {table.getRowModel().rows.map((row) => ( <Fragment key={row.id}> <tr className={classNames({ 'bg-gray-50 transition-colors dark:bg-black-300': row.getIsExpanded(), })} > {row.getVisibleCells().map((cell) => ( <td style={{ width: cell.column.getSize(), }} key={cell.id} > {flexRender( cell.column.columnDef.cell, cell.getContext(), )} </td> ))} </tr> {renderSubComponent ? ( <tr key={row.id + '-expanded'}> <td colSpan={columns.length}> {renderSubComponent({ row })} </td> </tr> ) : null} </Fragment> ))} </tbody> </table> </div> <Pagination table={table} /> </div> </div> </div> );}function Pagination<T>({ table,}: React.PropsWithChildren<{ table: ReactTable<T>;}>) { return ( <div className="flex items-center gap-2"> <IconButton onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()} > <ChevronDoubleLeftIcon className={'h-5'} /> </IconButton> <IconButton onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > <ChevronLeftIcon className={'h-5'} /> </IconButton> <IconButton onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} > <ChevronRightIcon className={'h-5'} /> </IconButton> <IconButton onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()} > <ChevronDoubleRightIcon className={'h-5'} /> </IconButton> <span className="flex items-center gap-1 text-sm"> <div>Page</div> <strong> {table.getState().pagination.pageIndex + 1} of {table.getPageCount()} </strong> </span> </div> );}export default Table;Usage
Now, let's use the table component in our app. Assuming you want to use the table on a page, you can do the following:
function App() { const data = [ { id: 1, name: 'John Doe', email: '' }, ]; const columns = [ { id: 'id', header: 'Id', accessorKey: 'id', cell: (ctx) => ctx.getValue(), }, { id: 'name', header: 'Name', accessorKey: 'name', cell: (ctx) => ctx.getValue(), }, { id: 'email', header: 'Email', cell: (ctx) => { const { email } = ctx.row.original; return <span className='font-bold'>{email}</span> }, }, ]; return <Table data={data} columns={columns} />}The above is a very simple example of how to use the table component. To see a more complex example, check out our article for paginating data with React.js and Supabase.
Conclusion
In this article, we have seen how to create a table component using React.js and Tanstack. The component above is very basic and can be extended to support more features, but can be used as a starting point for your own table component.
If you have any questions, feel free to join the Discord server!