PHPackages                             survos/simple-datatables-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. survos/simple-datatables-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

survos/simple-datatables-bundle
===============================

incorporate simple datatables, using twig and stimulus

2.10.19(2w ago)96.3k↓26.7%[1 issues](https://github.com/survos/simple-datatables-bundle/issues)4MITPHPPHP ^8.5CI passing

Since Oct 7Pushed 1w ago2 watchersCompare

[ Source](https://github.com/survos/simple-datatables-bundle)[ Packagist](https://packagist.org/packages/survos/simple-datatables-bundle)[ GitHub Sponsors](https://github.com/kbond)[ RSS](/packages/survos-simple-datatables-bundle/feed)WikiDiscussions main Synced 2d ago

READMEChangelogDependencies (152)Versions (808)Used By (4)

Survos Simple Datatables Bundle
===============================

[](#survos-simple-datatables-bundle)

Integrates the Simple Datatables library () as a Symfony UX Stimulus controller, and provides Twig components for common rendering.

```
composer req survos/simple-datatables-bundle
```

Stimulus Controller (Tables)
----------------------------

[](#stimulus-controller-tables)

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

```

```

Twig Component: `simple_datatables`
-----------------------------------

[](#twig-component-simple_datatables)

This component renders a `` and wires up the datatable stimulus controller.

```
{% set columns = [
    { name: 'id' },
    { name: 'title', title: 'name' },
    'brand',
    'price',
] %}

        ${{ row.price|number_format(2) }}

```

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`
----------------------------------

[](#twig-component-simple_item_grid)

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

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

### Basic usage

[](#basic-usage)

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

```

```

### Columns

[](#columns)

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

```
{% set columns = [
    { name: 'title', title: 'Name' },
    { name: 'price', title: 'Price' },
    'brand',
] %}

```

### Excluding 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

[](#custom-rendering-with-blocks)

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

```

        ${{ data.price|number_format(2) }}

```

### Stimulus

[](#stimulus)

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

Complete Project
----------------

[](#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.

```
symfony new simple-datatables-demo --webapp  && cd simple-datatables-demo
rm .git -rf
composer config extra.symfony.allow-contrib true
composer req survos/simple-datatables-bundle

bin/console make:controller Simple -i
cat > templates/simple.html.twig