justadigit/rezerv-data-table

How justadigit/rezerv-data-table works

Rezerv is a React dashboard demonstrating a reusable typed data table through a Class Timetable and a User Directory. Users view fixture-backed rows, sort and paginate them, and expand rows for inline or asynchronously loaded details. Class data is loaded by its feature hook; the User Directory hook owns manual sort and pagination requests. Both services use mock transport rather than a backend. The README documents the generic table’s processing and accessibility capabilities; sampled source confirms the request hooks, services, fixtures, and transport, but not every page-to-component detail.

Main entry points: DataTable.tsx Generic DataTable · App.tsx Routes · classTimetable.service.ts Class service · usersDemo.service.ts User service

Components 18

Application shell

Routes src/app/App.tsx
App layout src/app/layouts/AppLayout.tsx

Feature views

Class page src/features/class-timetable/pages/ClassTimetablePage.tsx
Class timetable src/features/class-timetable/components/ClassTimetable.tsx
Class loading src/features/class-timetable/hooks/useClassTimetable.ts
Class service src/features/class-timetable/services/classTimetable.service.ts
Class fixtures src/features/class-timetable/classTimetable.mock.ts
User directory page src/features/users-demo/pages/UsersDemoPage.tsx
Users table view src/features/users-demo/components/UsersTable.tsx
User query state src/features/users-demo/hooks/useUsersDemo.ts
User service src/features/users-demo/services/usersDemo.service.ts
User fixtures src/features/users-demo/usersDemo.mock.ts

Data table

Generic DataTable src/components/data-table/DataTable.tsx
Sort and pagination src/components/data-table/dataTable.process.ts
Row expansion src/components/data-table/useRowExpansion.ts

Mock data and design

Mock transport src/core/api/mockTransport.ts
Design system src/design/index.ts

Other components

Dashboard user

Connections 21

Dashboard user → Routes: opens routes
Routes → App layout: renders shell
Routes → Class page: routes to
Routes → User directory page: routes to
Class page → Class loading: loads classes
Class page → Class timetable: presents timetable
Class loading → Class service: requests classes
Class service → Class fixtures: reads fixtures
Class service → Mock transport: sends mock request
Class timetable → Generic DataTable: renders table
Generic DataTable → Row expansion: manages expansion
Generic DataTable → Sort and pagination: processes rows
Generic DataTable → Class service: loads rosters
User directory page → User query state: owns query state
User directory page → Users table view: presents directory
Users table view → Generic DataTable: renders table
Users table view → User service: loads activity
User query state → User service: requests page
User service → User fixtures: reads fixtures
User service → Mock transport: sends mock request
Generic DataTable → Design system: uses icons

More TypeScript diagrams: egoist/fetch-mcp · eranziel/foundryvtt-lancer · gitdagray/nestjs-course · infinitel8p/extreme-infinitv · kazeyukiro/3m-ui

Drawn by GitDiagram on September 27, 2026 from the repository's file tree, README and source files. Read as Markdown ·