BaryoDev / BaryoDev/barakoBrew
Adopt TanStack Table and Virtual for the list screens
- 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
Assessment
This issue has not been assessed yet.