ApiTables Documentation
Frontend technical reference for the ApiTables Next.js Frontend module in bolesa-app-ui
ApiTables is a server-driven data table package used in bolesa-app-ui: the backend defines columns, filters, sorting, row actions, and bulk actions; the frontend (./ApiTables/) renders them with a dedicated Redux store per table instance.
This section covers the frontend layer — the Next.js Frontend module. For Laravel package and API endpoints, switch to Backend documentation via the sidebar layer switcher.
Source (frontend): ./ApiTables/ in bolesa-app-ui
About this documentation
Frontend reference written by Mohamed Hasan (@mhmdhasan) while at Storage IT Solutions. ApiTables is a team effort across backend and frontend; this section documents the UI module only.
Start here by experience level
| Level | Path | Time |
|---|---|---|
| New hire / junior | Key concepts → Getting started → Glossary | ~1 hour |
| Mid-level | Architecture → Providers → Filters + Row actions | ~2 hours |
| Senior | Custom controls → External state → Package map → Troubleshooting | As needed |
First week on the team?
Read Key concepts first. Backend must expose load-table before your page works — see Backend getting started or pair with a backend developer.
What you will find here
| Need | Start here |
|---|---|
| Understand the UI model | Key concepts |
| Add a table page | Getting started |
| Structure JSON fields | Table structure |
| Redux & providers | Providers overview |
| Something broken | Troubleshooting |
| Full file list | Package map |
| Backend APIs | Backend docs |
Documentation map
Key concepts
UI lifecycle, Redux, backend contract
Architecture
Layers, lifecycle, flow diagrams
Providers
ApiTablesProvider, Redux store, useUtilsProvider
External state
Read global Redux and trigger remounts
Column types
text, link, boolean, datalist, actions, …
Sorting
Server-side sort state and UI
Filters
Sheet form, operators, applied chips
Row actions
Per-row and selection actions
Bulk actions
Dropdown, selection payload, modals
Custom controls
OpenModalForm and URL routing
Getting started
Add a new table page
Troubleshooting
Common UI issues
Mental model
1. Structure
GETControl-tables endpoint returns columns, filters, and actions.
2. State
ReduxOne store per ApiTablesProvider — isolated per table instance.
3. Query
POSTquery-table with filters, sorts, and pagination.
4. Actions
POSTRow and bulk handlers refresh rows via onSuccess rules.