Download the PHP package deviantlab/tabulator-bundle without Composer

Ux Tabulator Bundle

A Symfony bundle that integrates Tabulator (a JavaScript table/datagrid library) into Symfony applications via Stimulus. Tables are declared as PHP classes, rendered with a single Twig function, and — for server-side pagination/sorting/filtering — backed by an auto-registered controller that queries Doctrine ORM entities or native DBAL connections on your behalf.

Installation

Before you start, make sure you have StimulusBundle configured in your app.

Install the bundle using Composer and Symfony Flex:

If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper):

Usage

1. Define a table type

A table is described by a class implementing TableInterface. The bundle ships two abstract base classes depending on your data source:

• AbstractOrmTableType — builds a Doctrine ORM QueryBuilder against an entity.
• AbstractNativeTableType — builds a Doctrine\DBAL\Query\QueryBuilder against a raw DBAL connection (no entity mapping required).

Any service tagged (auto-configured) with TableInterface is automatically registered as a deviantlab.tabulator.table_type, so as long as autowiring/autoconfiguration is enabled for your services, no extra wiring is needed.

The getName() value must be unique across all table types — it identifies the table in the auto-generated data endpoint (/{_tableName}, route deviantlab_tabulatorbundle_get_data) and is used to resolve the type from the container.

For a native/DBAL-backed table, extend AbstractNativeTableType instead and implement getConnectionName() and getQueryBuilder(Connection $connection, array $params).

2. Build and render the table

Use TableFactory to turn a table type into a Table instance (this also wires up the Ajax endpoint automatically), then render it with the render_table() Twig function:

This renders a single <div> with Stimulus controller attributes; the deviantlab--tabulator-bundle--tabulator Stimulus controller (bundled in assets/dist/tabulator_controller.js) reads the serialized options and boots the Tabulator instance in the browser.

3. Configuring columns

Column maps closely to Tabulator's own column definition options (title, field, width, widthGrow, widthShrink, resizable, minWidth, maxWidth, frozen, headerSort, headerHozAlign, hozAlign, vertAlign, print, etc.) plus a set of strategy objects:

• formatter / topCalcFormatter / bottomCalcFormatter — any FormatterInterface (e.g. HtmlFormatter, LinkFormatter, MoneyFormatter, DateTimeFormatter, TickCrossFormatter, RowNumFormatter, RowSelectionFormatter, TextAreaFormatter).
• editor — any EditorInterface (e.g. InputEditor, TextareaEditor, NumberEditor, SelectEditor, CheckboxEditor, DateEditor, DateTimeEditor, TimeEditor, RangeEditor, StarRatingEditor, ProgressBarEditor).
• mutator / accessor — any MutatorInterface / AccessorInterface.
• sorter — any SorterInterface (e.g. AlphanumericSorter, NumberSorter, StringSorter, DateSorter, DateTimeSorter, TimeSorter, BooleanSorter, ArraySorter, ExistsSorter).
• validator — a single ValidatorInterface or array of them (e.g. Required, MinLength, MaxLength).
• topCalc / bottomCalc — a ColumnCalculationInterface (Sum, Average, Count, Minimum, Maximum, Unique, Concatenate).
• headerFilter — a HeaderFilter combining an editor, a FilterFunction (=, !=, starts, ends, >, <, >=, <=, in, keywords, like, regex) and an optional initial value/placeholder.

4. Table-level options

Table exposes fluent setters for the most common Tabulator options: layout, height/minHeight/maxHeight, rowHeight, autoResize, resizableColumnFit, selectableRows, locale, placeholder, printHeader, dataTree (and its dataTreeStartExpanded/dataTreeFilter/dataTreeSort flags), columnCalcs / groupClosedShowCalcs / dataTreeChildColumnCalcs, rowHeader (a RowHeader for row selection/handle columns), editTriggerEvent, columnHeaderSortMulti, headerSortClickElement / headerSortElement, popupContainer, initialSort / initialFilter, and the dataLoader/dataLoaderLoading/dataLoaderError/ dataLoaderErrorTimeout options.

Ajax configures the request Tabulator makes for remote data: url, params, method, contentType and arbitrary headers (addHeader()).

Pagination configures mode (PaginationMode::LOCAL/REMOTE), size, initialPage, the query parameter names sent to the server (pageParamName, sizeParamName), sizeSelector and counter. Remote pagination requires the table to already have an Ajax configured, otherwise a LogicException is thrown.

5. Server-side pagination, sorting and filtering

When SortMode::REMOTE, FilterMode::REMOTE or PaginationMode::REMOTE are used, Tabulator sends the current page/sort/filter state to the Ajax URL, and the bundle's TableController (mounted on /{_tableName}) resolves the matching OrmTableHandler or NativeTableHandler to build the query, apply pagination/sorting/filtering, and serialize the result as JSON.

You can customize how a specific field is sorted or filtered by returning a SortOverride / FilterOverride from your table type:

Use configureQuery(Query $query) (ORM tables) to tweak the built Doctrine Query (e.g. hints, result cache), and doTransform(array $items, array $params): array to post-process the fetched rows before they're serialized to the client.

Testing