Data Tables & Column Architectures

Relevant source files

The following files were used as context for generating this wiki page:

• components/ui/table.tsx
• components/Sandboxes/sandboxesColumns.tsx
• components/ContentSlack/contentSlackColumns.tsx
• components/CodingAgentSlackTags/createSlackTagsColumns.tsx
• components/SandboxOrgs/sandboxOrgsColumns.tsx
• components/Sandboxes/SandboxesTable.tsx
• components/SandboxOrgs/SandboxOrgsTable.tsx

The Data Table architecture in the Recoup Admin platform is built upon a layered approach combining low-level UI primitives, the @tanstack/react-table headless logic library, and domain-specific column definitions. This system provides a consistent interface for displaying complex administrative data, such as sandbox usage, Slack agent interactions, and repository commit statistics, while supporting features like sorting, custom cell rendering, and responsive layouts.

The architecture is divided into three primary layers: the foundational UI components that wrap standard HTML table elements, the table implementation components that manage state (like sorting), and the column definitions that map raw data to interactive UI elements. Sources: components/ui/table.tsx, components/Sandboxes/SandboxesTable.tsx, components/Sandboxes/sandboxesColumns.tsx

Foundational Table Components

The base of the table system consists of a set of React components that provide a styled wrapper around standard HTML table elements (<table>, <thead>, <tbody>, etc.). These components utilize the cn utility for tailwind class merging and React.forwardRef to allow direct DOM access when necessary.

UI Primitives

Component	HTML Equivalent	Key Styling/Features
Table	<table>	Relative positioning, full width, overflow-auto for horizontal scrolling.
TableHeader	<thead>	Bottom border on rows.
TableRow	<tr>	Hover effects (hover:bg-muted/50), transition colors, and bottom borders.
TableHead	<th>	Padded, middle-aligned, muted foreground text, supports checkbox alignment.
TableCell	<td>	Padded, middle-aligned.

Sources: components/ui/table.tsx:7-106

Table Implementation & State Management

Tables are implemented using the useReactTable hook from TanStack Table. This hook manages the internal state of the table, including sorting and row models. Typical implementations define a default sorting state and pass the data and column definitions to the hook.

Component Logic Flow

The following diagram illustrates how data flows from the parent container through the TanStack hook into the rendered UI components.

Key Sorting Logic

Sorting is handled via the getSortedRowModel and local state sorting. For specific columns, custom sorting functions are implemented. For example, the account_repos column in the Sandbox Orgs table uses a custom function to sort by the length of the repos array.

sortingFn: (rowA, rowB) => {
  const a = (rowA.getValue<string[]>("account_repos") ?? []).length;
  const b = (rowB.getValue<string[]>("account_repos") ?? []).length;
  return a - b;
}

Sources: components/SandboxOrgs/sandboxOrgsColumns.tsx:47-51

Column Architectures

Columns are defined using the ColumnDef<T> type. Each definition specifies how to access data (accessorKey or accessorFn), what to display in the header, and how to render the cell.

Sandbox Table Columns

Focuses on account identification and usage metrics.

• Account Email: Uses AccountEmailCell for custom formatting.
• Total Sandboxes: Supports interactive sorting with an ArrowUp/Down icon.
• Last Created: Displays formatted dates using toLocaleString() and uses datetime sorting.

Sources: components/Sandboxes/sandboxesColumns.tsx:8-58

Slack Tag Columns

Used for both "Content Agent" and "Coding Agent" tracking. These columns often include complex logic, such as mapping GitHub PR URLs to specific display formats or rendering user avatars.

Data Models for Columns

Table Type	Source Data Type	Key Column IDs
Sandboxes	AccountSandboxRow	account_email, total_sandboxes, last_created_at
Content Slack	ContentSlackTag	user_name, timestamp, prompt, video_links
Org Repos	OrgRepoRow	repo_name, total_commits, latest_committed_at

Sources: components/Sandboxes/sandboxesColumns.tsx:7, components/ContentSlack/contentSlackColumns.tsx:5, components/SandboxOrgs/sandboxOrgsColumns.tsx:8

Summary

The Data Table system provides a robust framework for administrative oversight. By abstracting the table layout into reusable UI primitives and delegating data logic to TanStack Table and specialized column definitions, the project ensures that data presentation is decoupled from data fetching. This allows for features like the dynamic rendering of GitHub PR statuses in Slack tags or complex commit history visualization in the sandbox organization views.

Sources: components/ui/table.tsx, components/CodingAgentSlackTags/createSlackTagsColumns.tsx, components/SandboxOrgs/SandboxOrgsTable.tsx