Integrate the Simple Datatables library from https://github.com/fiduswriter/simple-datatables/ as a stimulus component.
composer req survos/simple-datatables-bundle
To change any html table into a datatable, simple add the stimulus controller to the tag
<table class="table" {{ stimulus_controller('@survos/simple-datatables-bundle/table', {perPage: 5, sortable: true}) }}>
Cut and paste to create an 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 --version=next --php=8.2 && cd simple-datatables-demo
rm .git -rf
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper:^6.4 symfony/stimulus-bundle:^2.x-dev
composer req survos/simple-datatables-bundle survos/bootstrap-bundle
echo "import 'bootstrap/dist/css/bootstrap.min.css'" >> assets/app.js
bin/console make:controller Simple -i
cat > templates/simple.html.twig <<END
{% extends 'base.html.twig' %}
{% block body %}
<table class="table" {{ stimulus_controller('@survos/simple-datatables-bundle/table', {perPage: 5, sortable: true}) }}>
<thead>
<tr>
<th>abbr</th>
<th>name</th>
<th>number</th>
</thead>
<tbody>
{% for j in 1..12 %}
<tr>
<td>{{ j |date('2023-' ~ j ~ '-01') |date('M') }}</td>
<td>{{ j |date('2023-' ~ j ~ '-01') |date('F') }}</td>
<td>{{ j }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
END
symfony server:start -d
symfony open:local --path=/simple