table-create

Create TanStack Table

Create a data table component with TanStack Table, including sorting, filtering, and pagination.

Instructions

1. Gather Information (if not provided via args):

   • Ask for the table name (e.g., PostsTable)
   • Ask for the feature it belongs to
   • Ask what columns to include
   • Ask what features to enable: sorting, filtering, pagination, row selection

2. Create Column Definitions in src/features/{feature}/components/{Name}Columns.tsx:

   import { createColumnHelper } from '@tanstack/react-table'
   import { Link } from '@tanstack/react-router'
   import type { {Feature} } from '../types'
   
   const columnHelper = createColumnHelper<{Feature}>()
   
   export const {name}Columns = [
     columnHelper.accessor('title', {
       header: ({ column }) => (
         <button
           onClick={() => column.toggleSorting()}
           className="flex items-center gap-1"
         >
           Title
           {column.getIsSorted() === 'asc' && ' ↑'}
           {column.getIsSorted() === 'desc' && ' ↓'}
         </button>
       ),
       cell: (info) => (
         <Link
           to="/{feature}/$id"
           params={{ id: info.row.original.id }}
           className="hover:underline"
         >
           {info.getValue()}
         </Link>
       ),
     }),
   
     columnHelper.accessor('status', {
       header: 'Status',
       cell: (info) => (
         <span className={`badge badge-${info.getValue()}`}>
           {info.getValue()}
         </span>
       ),
       filterFn: 'equals',
     }),
   
     columnHelper.accessor('createdAt', {
       header: 'Created',
       cell: (info) => new Date(info.getValue()).toLocaleDateString(),
       sortingFn: 'datetime',
     }),
   
     columnHelper.display({
       id: 'actions',
       header: 'Actions',
       cell: ({ row }) => (
         <div className="flex gap-2">
           <Link to="/{feature}/$id/edit" params={{ id: row.original.id }}>
             Edit
           </Link>
           <button onClick={() => handleDelete(row.original.id)}>
             Delete
           </button>
         </div>
       ),
     }),
   ]