# justadigit/rezerv-data-table architecture

> Architecture diagram of the GitHub repository justadigit/rezerv-data-table, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/justadigit/rezerv-data-table
- Repository: https://github.com/justadigit/rezerv-data-table

## Overview

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: [`src/components/data-table/DataTable.tsx`](https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/DataTable.tsx) (Generic DataTable), [`src/app/App.tsx`](https://github.com/justadigit/rezerv-data-table/blob/main/src/app/App.tsx) (Routes), [`src/features/class-timetable/services/classTimetable.service.ts`](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/services/classTimetable.service.ts) (Class service), [`src/features/users-demo/services/usersDemo.service.ts`](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/services/usersDemo.service.ts) (User service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["Routes<br/>[App.tsx]"]
  node_layout["App layout<br/>[AppLayout.tsx]"]
end

subgraph group_features["Feature views"]
  node_classpage["Class page"]
  node_classview["Class timetable<br/>[ClassTimetable.tsx]"]
  node_classhook["Class loading"]
  node_classservice["Class service"]
  node_classfixtures["Class fixtures"]
  node_userpage["User directory page<br/>[UsersDemoPage.tsx]"]
  node_usersview["Users table view<br/>[UsersTable.tsx]"]
  node_userhook["User query state<br/>[useUsersDemo.ts]"]
  node_userservice["User service"]
  node_userfixtures["User fixtures<br/>[usersDemo.mock.ts]"]
end

subgraph group_table["Data table"]
  node_datatable["Generic DataTable<br/>[DataTable.tsx]"]
  node_tableprocessing["Sort and pagination"]
  node_expansion["Row expansion<br/>[useRowExpansion.ts]"]
end

subgraph group_platform["Mock data and design"]
  node_transport["Mock transport<br/>[mockTransport.ts]"]
  node_design["Design system<br/>[index.ts]"]
end

node_user(("Dashboard user"))

node_user -->|"opens routes"| node_app
node_app -->|"renders shell"| node_layout
node_app -->|"routes to"| node_classpage
node_app -->|"routes to"| node_userpage
node_classpage -->|"loads classes"| node_classhook
node_classpage -->|"presents timetable"| node_classview
node_classhook -->|"requests classes"| node_classservice
node_classservice -->|"reads fixtures"| node_classfixtures
node_classservice -->|"sends mock request"| node_transport
node_classview -->|"renders table"| node_datatable
node_datatable -->|"manages expansion"| node_expansion
node_datatable -->|"processes rows"| node_tableprocessing
node_datatable -->|"loads rosters"| node_classservice
node_userpage -->|"owns query state"| node_userhook
node_userpage -->|"presents directory"| node_usersview
node_usersview -->|"renders table"| node_datatable
node_usersview -->|"loads activity"| node_userservice
node_userhook -->|"requests page"| node_userservice
node_userservice -->|"reads fixtures"| node_userfixtures
node_userservice -->|"sends mock request"| node_transport
node_datatable -.->|"uses icons"| node_design

click node_app "https://github.com/justadigit/rezerv-data-table/blob/main/src/app/App.tsx"
click node_layout "https://github.com/justadigit/rezerv-data-table/blob/main/src/app/layouts/AppLayout.tsx"
click node_classpage "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/pages/ClassTimetablePage.tsx"
click node_classview "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/components/ClassTimetable.tsx"
click node_classhook "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/hooks/useClassTimetable.ts"
click node_classservice "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/services/classTimetable.service.ts"
click node_classfixtures "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/classTimetable.mock.ts"
click node_userpage "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/pages/UsersDemoPage.tsx"
click node_usersview "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/components/UsersTable.tsx"
click node_userhook "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/hooks/useUsersDemo.ts"
click node_userservice "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/services/usersDemo.service.ts"
click node_userfixtures "https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/usersDemo.mock.ts"
click node_datatable "https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/DataTable.tsx"
click node_tableprocessing "https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/dataTable.process.ts"
click node_expansion "https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/useRowExpansion.ts"
click node_transport "https://github.com/justadigit/rezerv-data-table/blob/main/src/core/api/mockTransport.ts"
click node_design "https://github.com/justadigit/rezerv-data-table/blob/main/src/design/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_layout,node_user toneBlue
class node_classpage,node_classview,node_classhook,node_classservice,node_classfixtures,node_userpage,node_usersview,node_userhook,node_userservice,node_userfixtures toneAmber
class node_datatable,node_tableprocessing,node_expansion toneMint
class node_transport,node_design toneRose
```

## Components

### Application shell

- [Routes](https://github.com/justadigit/rezerv-data-table/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [App layout](https://github.com/justadigit/rezerv-data-table/blob/main/src/app/layouts/AppLayout.tsx): `src/app/layouts/AppLayout.tsx`

### Feature views

- [Class page](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/pages/ClassTimetablePage.tsx): `src/features/class-timetable/pages/ClassTimetablePage.tsx`
- [Class timetable](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/components/ClassTimetable.tsx): `src/features/class-timetable/components/ClassTimetable.tsx`
- [Class loading](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/hooks/useClassTimetable.ts): `src/features/class-timetable/hooks/useClassTimetable.ts`
- [Class service](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/services/classTimetable.service.ts): `src/features/class-timetable/services/classTimetable.service.ts`
- [Class fixtures](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/class-timetable/classTimetable.mock.ts): `src/features/class-timetable/classTimetable.mock.ts`
- [User directory page](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/pages/UsersDemoPage.tsx): `src/features/users-demo/pages/UsersDemoPage.tsx`
- [Users table view](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/components/UsersTable.tsx): `src/features/users-demo/components/UsersTable.tsx`
- [User query state](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/hooks/useUsersDemo.ts): `src/features/users-demo/hooks/useUsersDemo.ts`
- [User service](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/services/usersDemo.service.ts): `src/features/users-demo/services/usersDemo.service.ts`
- [User fixtures](https://github.com/justadigit/rezerv-data-table/blob/main/src/features/users-demo/usersDemo.mock.ts): `src/features/users-demo/usersDemo.mock.ts`

### Data table

- [Generic DataTable](https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/DataTable.tsx): `src/components/data-table/DataTable.tsx`
- [Sort and pagination](https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/dataTable.process.ts): `src/components/data-table/dataTable.process.ts`
- [Row expansion](https://github.com/justadigit/rezerv-data-table/blob/main/src/components/data-table/useRowExpansion.ts): `src/components/data-table/useRowExpansion.ts`

### Mock data and design

- [Mock transport](https://github.com/justadigit/rezerv-data-table/blob/main/src/core/api/mockTransport.ts): `src/core/api/mockTransport.ts`
- [Design system](https://github.com/justadigit/rezerv-data-table/blob/main/src/design/index.ts): `src/design/index.ts`

### Other components

- **Dashboard user**

## Connections

- 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