Roadmap UIRoadmap UI

Table

Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.

Alice Johnson
AI Scene Analysis
Video Editor ProCore AI Features
Jun 1, 2024Dec 26, 2024v1.0
Bob Smith
Collaborative Editing
Video Editor ProCollaboration Tools
Jul 1, 2024Dec 26, 2024v1.0
Charlie Brown
AI-Powered Color Grading
Video Editor ProCore AI Features
Aug 1, 2024Dec 26, 2024v1.1
Diana Prince
Real-time Video Chat
Video Editor ProCollaboration Tools
Sep 1, 2024Dec 19, 2024v1.1
Ethan Hunt
AI Voice-to-Text Subtitles
Video Editor ProCore AI Features
Oct 1, 2024Dec 26, 2024v1.1
Fiona Gallagher
Cloud Asset Management
Video Editor ProCloud Infrastructure
Nov 1, 2024Dec 31, 2024v1.2
George Lucas
AI-Assisted Video Transitions
Video Editor ProCore AI Features
Dec 1, 2024Jan 31, 2025v1.2
Hannah Montana
Version Control System
Video Editor ProCollaboration Tools
Jan 1, 2025Feb 28, 2025v1.2
Ian Malcolm
AI Content-Aware Fill
Video Editor ProCore AI Features
Feb 1, 2025Mar 31, 2025v1.3
Julia Roberts
Multi-User Permissions
Video Editor ProCollaboration Tools
Mar 1, 2025Apr 30, 2025v1.3
Kevin Hart
AI-Powered Audio Enhancement
Video Editor ProCore AI Features
Apr 1, 2025May 31, 2025v1.3
Lara Croft
Real-time Project Analytics
Video Editor ProCloud Infrastructure
May 1, 2025Jun 30, 2025v1.4
Michael Scott
AI Scene Recommendations
Video Editor ProCore AI Features
Jun 1, 2025Jul 31, 2025v1.4
Natalie Portman
Collaborative Storyboarding
Video Editor ProCollaboration Tools
Jul 1, 2025Aug 31, 2025v1.4
Oscar Isaac
AI-Driven Video Compression
Video Editor ProCore AI Features
Aug 1, 2025Sep 30, 2025v1.5
Penelope Cruz
Global CDN Integration
Video Editor ProCloud Infrastructure
Sep 1, 2025Oct 31, 2025v1.5
Quentin Tarantino
AI Object Tracking
Video Editor ProCore AI Features
Oct 1, 2025Nov 30, 2025v1.5
Rachel Green
Real-time Language Translation
Video Editor ProCollaboration Tools
Nov 1, 2025Dec 31, 2025v1.6
Samuel L. Jackson
AI-Powered Video Summarization
Video Editor ProCore AI Features
Dec 1, 2025Jan 31, 2026v1.6
Tom Hanks
Blockchain-based Asset Licensing
Video Editor ProCloud Infrastructure
Jan 1, 2026Feb 28, 2026v1.6

Installation

npx roadmap-ui add table

Features

  • Customizable columns
  • Sortable columns

Code

table.tsx
'use client';
 
import { exampleFeatures } from '@/lib/content';
import {
  TableBody,
  TableCell,
  TableColumnHeader,
  TableHead,
  TableHeader,
  TableHeaderGroup,
  TableProvider,
  TableRow,
} from '@/components/roadmap-ui/table';
import type { ColumnDef } from '@tanstack/react-table';
import { ChevronRightIcon } from 'lucide-react';
import Image from 'next/image';
 
export const TableExample = () => {
  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [
    {
      accessorKey: 'name',
      header: ({ column }) => (
        <TableColumnHeader column={column} title="Name" />
      ),
      cell: ({ row }) => (
        <div className="flex items-center gap-2">
          <div className="relative">
            <Image
              src={row.original.owner.image}
              alt={row.original.owner.name}
              width={24}
              height={24}
              unoptimized
              className="h-6 w-6 rounded-full"
            />
            <div
              className="absolute right-0 bottom-0 h-2 w-2 rounded-full ring-2 ring-background"
              style={{
                backgroundColor: row.original.status.color,
              }}
            />
          </div>
          <div>
            <span className="font-medium">{row.original.name}</span>
            <div className="flex items-center gap-1 text-muted-foreground text-xs">
              <span>{row.original.product.name}</span>
              <ChevronRightIcon size={12} />
              <span>{row.original.group.name}</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      accessorKey: 'startAt',
      header: ({ column }) => (
        <TableColumnHeader column={column} title="Start At" />
      ),
      cell: ({ row }) =>
        new Intl.DateTimeFormat('en-US', {
          dateStyle: 'medium',
        }).format(row.original.startAt),
    },
    {
      accessorKey: 'endAt',
      header: ({ column }) => (
        <TableColumnHeader column={column} title="End At" />
      ),
      cell: ({ row }) =>
        new Intl.DateTimeFormat('en-US', {
          dateStyle: 'medium',
        }).format(row.original.endAt),
    },
    {
      id: 'release',
      accessorFn: (row) => row.release.id,
      header: ({ column }) => (
        <TableColumnHeader column={column} title="Release" />
      ),
      cell: ({ row }) => row.original.release.name,
    },
  ];
 
  return (
    <TableProvider columns={columns} data={exampleFeatures}>
      <TableHeader>
        {({ headerGroup }) => (
          <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup}>
            {({ header }) => <TableHead key={header.id} header={header} />}
          </TableHeaderGroup>
        )}
      </TableHeader>
      <TableBody>
        {({ row }) => (
          <TableRow key={row.id} row={row}>
            {({ cell }) => <TableCell key={cell.id} cell={cell} />}
          </TableRow>
        )}
      </TableBody>
    </TableProvider>
  );
};

Subcomponents

The Table component is made up of the following subcomponents:

TableProvider

The TableProvider component is the root component of the Table. It contains the context for the other components.

PropTypeDefault
columns
ColumnDef<TData, TValue>[]
-
data
TData[]
-
children
ReactNode
-
className
string
-

TableHeader

The TableHeader component is a container for the column headers of the Table.

PropTypeDefault
className
string
-
children
(props: { headerGroup: HeaderGroup<unknown>; }) => ReactNode
-

TableHeaderGroup

The TableHeaderGroup component is a container for the column headers of the Table.

PropTypeDefault
headerGroup
HeaderGroup<unknown>
-
children
(props: { header: Header<unknown, unknown>; }) => ReactNode
-

TableHead

The TableHead component is a single column header in the Table.

PropTypeDefault
header
Header<unknown, unknown>
-
className
string
-

TableBody

The TableBody component is a container for the rows of the Table.

PropTypeDefault
children
(props: { row: Row<unknown>; }) => ReactNode
-
className
string
-

TableRow

The TableRow component is a single row in the Table.

PropTypeDefault
row
Row<unknown>
-
children
(props: { cell: Cell<unknown, unknown>; }) => ReactNode
-
className
string
-

TableCell

The TableCell component is a single cell in the Table.

PropTypeDefault
cell
Cell<unknown, unknown>
-
className
string
-

On this page