Key concepts overview

How the ApiTables Next.js Frontend module works and how it connects to the backend

This page is for frontend developers new to ApiTables. Read it before copying a table page from an existing feature.

What you are building

A typical ApiTables page does not hard-code columns or buttons. Instead:

You fetch table structure from the backend (load-table)
You pass that JSON into ReactApiTable
The component fetches row data (query-table) and renders filters, sort, actions automatically

Your job is wiring — not reimplementing a data grid.

Analogy

The backend sends a form template (structure). ReactApiTable is the form renderer. You do not redraw each input by hand.

Piece	Role
`ReactApiTable`	Entry component — drop on a page
`useTableStructure`	GET hook for structure JSON
`useTableFetcher`	POST hook for paginated data
`ApiTablesProvider`	Redux store per table instance
`useUtilsProvider`	Row/bulk action HTTP + toasts
`ApiTablesComponent`	Core grid UI (toolbar, body, pagination)

Import paths in app code: @/app/ApiTables/...

Page calls getTableStructure({ table: '/api-table/control-tables/load-table/orders' }).

ReactApiTable wraps children in ApiTablesProvider and dispatches structure into Redux.

Fetcher POSTs to query-table/orders with default page, sort, empty filters.

Filter apply, sort click, pagination → new query-table POST with updated payload.

Row/bulk buttons POST to URLs from structure JSON; onSuccess rules trigger refetch.

Before your page works:

Backend endpoint	You need
`load-table/{name}`	Structure with `columns`, optional `filters`, `rowActions`, `bulkActions`
`query-table/{name}`	Paginated `items` matching column `data_src` keys

See Backend documentation for how backend developers register tables.

Level	Focus
Junior	Copy working page pattern, `useTableStructure`, `ReactApiTable`, correct load path
Mid	`params`, custom toolbar slot, row action refresh behavior, filter UX
Senior	Custom controls/modals, external Redux bridge, controller overrides, performance

Misconception	Reality
“I add columns in React”	Columns come from structure JSON
“Each table needs a new Redux slice file”	`ApiTablesProvider` creates an isolated store per instance
“I call row action URLs myself”	`useUtilsProvider` handles POST + error toasts
“Structure path is always the same”	Each feature chooses its `load-table/...` segment