BaryoDev / BaryoDev/barakoBrew

Adopt TanStack Table and Virtual for the list screens

Open
#41 0 comments 0 reactions 1 assignee Claimed by @arnelirobles View on GitHub
enhancement
Dominant language
TypeScript
Stars
1
Forks
2
Avg merge
4h 34m
Merged PRs (30d)
60

Description

**Target release: 0.3.0**

List screens are hand-rolled around `src/components/ui/table.tsx`. #10 wants search, a status filter and a per-row version on the entries list; #11 wants a version rail in the entry editor. Both are sorting, filtering and windowing problems that a headless table solves once.

## The picks

| Package | Licence | Health |
|---|---|---|
| `@tanstack/react-table` 9.2.4 | MIT | ~333 releases, last publish 2026-08-28 |
| `@tanstack/react-virtual` 3.14.10 | MIT | active |

Headless is the point: they supply sorting, filtering, pagination and windowing state and render nothing, so the existing Radix and Tailwind styling survives intact. This is not a restyle.

## Policy check (#39)

- **Licence:** MIT. Passes.
- **Runtime gate:** none. TanStack is independently operated with no VC and no paid products for the libraries; what is sold is optional enterprise support and a separate boilerplate product. Nothing in the package validates entitlement.
- **Maintenance:** active, published within the last two weeks.

You already depend on `@tanstack/react-query`, so this is the same maintainer and the same idioms rather than a new vendor.

## Explicitly not AG Grid

`ag-grid-community` is MIT but banned by #39: enterprise features ship in the same install gated by a licence key, and unlicensed use puts a watermark over the grid plus console errors — found in production rather than review. TanStack avoids the category entirely.

## Scope

1. Convert the entries list first — it is the screen #10 is about and the one with the most rows.
2. Add virtualisation only where a list is actually long. A windowed 20-row table is complexity with no payoff.
3. Keep the existing `table.tsx` primitives as the rendering layer.

**Bounded lists are a rule, not a preference.** barakoCMS's standard says a list endpoint always takes `PaginatedRequest` because "an unbounded query on an anonymous endpoint is an availability problem anyone can trigger". The console's mirror is that no screen fetches unbounded — virtualisation makes a large page *render* acceptably, it does not make fetching it acceptable. Keep the pagination.

## Caution

React Compiler is on. Introduce behind the E2E pack, one screen at a time.

Serves #10 and #11. Follows #39.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.