Download the PHP package survos/simple-datatables-bundle without Composer

Survos Simple Datatables Bundle

Integrates the Simple Datatables library (https://github.com/fiduswriter/simple-datatables/) as a Symfony UX Stimulus controller, and provides Twig components for common rendering.

Stimulus Controller (Tables)

To turn any HTML <table> into a datatable, simply add the stimulus controller to the tag:

Twig Component: simple_datatables

This component renders a <table> and wires up the datatable stimulus controller.

Notes:

• columns can be strings ('price') or arrays passed to Survos\SimpleDatatables\Model\Column (e.g. { name: 'price', title: 'Price' }).
• Inside a column block you typically get row, column, idx.

Twig Component: simple_item_grid

simple_item_grid renders a single item/record as a definition list (<dl>), which is handy for a “show” page.

Component: Survos\SimpleDatatables\Components\ItemGridComponent. Template: templates/components/item.html.twig.

Basic usage

simple_item_grid renders the fields you list in columns for a single associative array or object passed as data:

Columns

Columns can be strings or Column-style arrays. For the item grid template, name and title are the relevant fields.

Excluding fields

The exclude option is used when the component auto-generates columns. Auto-generation currently only kicks in when data is a list of rows and columns is omitted.

Custom rendering with blocks

For custom rendering, define a block named after the column’s name. The block receives data.

Stimulus

The wrapper <div> can be wired to a stimulus controller via stimulusController. By default it uses @survos/grid/item_grid.

Complete Project

Cut and paste to create a new Symfony project with a dynamic, searchable datatable, without writing a single line of JavaScript. No webpack or build step either.

Or even easier, use the Twig component. To simplify the example we're going to add the fetch and json_decode functions to Twig; normally that would be done in the controller, but the copy/paste is faster this way.