PixelPilot: Instructions file for GitHub Copilot

UI/UX Data Table & Kanban 2026

Data tables (TanStack Table), sortable, filterable, paginated, row selection, virtualization, filter sidebars, bulk actions, activity logs, and kanban boards.

1. DATA TABLE (TanStack Table Headless)

// React Example with TanStack Table
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';

function DataTable({ data, columns }) {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

  return (
    <div class="table-container">
      <table class="table">
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id} class="table__th">
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} class="table__tr">
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} class="table__td">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table__th {
  text-align: left;
  padding: var(--space-4);
  background: var(--surface-up);
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.table__tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-micro) var(--ease-out);
}

.table__tr:hover { background: var(--surface-up); }

.table__td { padding: var(--space-4); color: var(--text); }