[Feature Idea] Datatable UX

[bastien70]

Hey, do you planed to create a UX component to integrate Datatable ?

A component like Datatable could be very useful for tables.

With automatic pagination and ajax calls. We could imagine various options like search fields under each column. Or checkboxes on each line allowing you to launch grouped actions (via LiveAction) on the checked lines. What do you think ?

[weaverryan]

This is something we should either create as a component or just show an example of creating it on ux.symfony.com. With a small bit of stimulus + Turbo, you can create a really nice, AJAX-powered "data tables" like thing. An example from the Ruby community is here - https://twitter.com/ilrock__/status/1629517063571279872

Also, someone pointed me at a new, but interesting looking library - https://github.com/Kreyu/data-table-bundle /cc the author @Kreyu in case they have something to add about this bundle (disclaimer: I haven't tried it yet!)

[Kreyu]

This is something we should either create as a component or just show an example of creating it on ux.symfony.com. With a small bit of stimulus + Turbo, you can create a really nice, AJAX-powered "data tables" like thing. An example from the Ruby community is here - https://twitter.com/ilrock__/status/1629517063571279872

Also, someone pointed me at a new, but interesting looking library - https://github.com/Kreyu/data-table-bundle /cc the author @Kreyu in case they have something to add about this bundle (disclaimer: I haven't tried it yet!)

Hey! It is true, my library should cover most of the stuff mentioned in the issue, and even more. The data tables work asynchronously by default, as whole data table component is wrapped in turbo frame. It is still in development and has no tests yet, therefore I cannot proudly say it's production ready 😞. Thanks for mentioning!

[tacman]

I have 2 bundles that are not production ready, but work great with stimulus.

One is a basic grid bundle that wraps the datatables.net library, the other incorporates api-platform to make ajax calls.

Neither is well documented nor tested, but I use them in all my projects.

I'm a bit embarrassed to post the github links, because of the poor documentation. It also depends on webpack, which I can't wait to get rid of!

I'll work on getting a demo repo working.

[bastien70]

This is awesomes guys! :D
So there are a lot of projects being created that could ultimately give us something perfect for integrating DataTable as a UX component

Looking forward to testing this and getting back to you

[tacman]

I made some pretty good progress on creating a stimulus component that calls simple-datatables, and it works great for the simple cases.

In fact, you just add the stimulus component to the table, set some options (like perPage, searchable and fixedHeight), and it works, without writing a single line of javascript!

    {% set _sc = '@survos/simple-datatables-bundle/table' %}
    <table class="table" {{ stimulus_controller(_sc, {perPage: perPage}) }}>

Unfortunately, the simple-datatables appears to remove all the attributes in the TR, so you can't add data or a stimulus target. I've opened a feature request to preserve them:

fiduswriter/simple-datatables#336

I'm also working on one for datatables.net, but the importmap is complicated because of the 100+ plugins that datatables.net has.

[tacman]

I've got a simple dynamic datatable bundle working, based on simple-datatables: https://github.com/survos/SurvosSimpleDatatablesBundle

See it in action by cutting and pasting below. No build step! And not a single line of javascript.

symfony new simple-datatables-demo --webapp && cd simple-datatables-demo
composer req symfony/asset-mapper
composer req symfony/stimulus-bundle:2.x-dev
composer req survos/simple-datatables-bundle
bin/console importmap:require bootstrap
bin/console make:controller AppController
sed -i "s|Route('/app'|Route('/'|" src/Controller/AppController.php

cat > templates/app/index.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

Alas, the CSS isn't loading right. I imagine that the bundle package.json (https://github.com/survos/SurvosSimpleDatatablesBundle/blob/main/assets/package.json) is missing something, or maybe it has something to do with the recipe? Why does creating a new project set "allow-contrib": false? Doesn't that interfere with installing recipes? Can anyone (@weaverryan?) point me to what to do to include the simple-datatables stylesheet?

[weaverryan]

Check out autoimport -

ux/src/Autocomplete/assets/package.json

Lines 15 to 18 in 614cca9

	"autoimport": {
	"tom-select/dist/css/tom-select.default.css": true,
	"tom-select/dist/css/tom-select.bootstrap5.css": false
	}

Thanks to Flex, those lines ultimately get added to the controllers.json file in your app. If activated, they should be included.

[tacman]

Thanks, @weaverryan . I'm still having trouble with it, I've opened an issue at #1201

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Could I get a reply or should I close this?

[MehdiBenbahri]

I used Turbo to make an almost JS less DataTable in Symfony.
I was about to implement the column treatment for filtering, but you got normally a working pagination in this project :
https://github.com/MehdiBenbahri/admin-dashboard

It was my first Turbo Project, not the best code, but it works, and it works very easily.

If you want to test it, you can install the project like any Symfony project and then use the dataFixture inside to bring data.

[peteracombina]

This is something we should either create as a component or just show an example of creating it on ux.symfony.com. With a small bit of stimulus + Turbo, you can create a really nice, AJAX-powered "data tables" like thing. An example from the Ruby community is here - https://twitter.com/ilrock__/status/1629517063571279872
Also, someone pointed me at a new, but interesting looking library - https://github.com/Kreyu/data-table-bundle /cc the author @Kreyu in case they have something to add about this bundle (disclaimer: I haven't tried it yet!)

Hey! It is true, my library should cover most of the stuff mentioned in the issue, and even more. The data tables work asynchronously by default, as whole data table component is wrapped in turbo frame. It is still in development and has no tests yet, therefore I cannot proudly say it's production ready 😞. Thanks for mentioning!

Hi.. I downloaded your bundle and I have been trying to see if it will take array of objects, and it seems to work with ORM only. Can you point me a way to go about this ?

[Kreyu]

Hi.. I downloaded your bundle and I have been trying to see if it will take array of objects, and it seems to work with ORM only. Can you point me a way to go about this ?

Hey @peteracombina, currently, only the Doctrine ORM is "officially" supported, but you can implement your own "adapter" (proxy query) and filters to handle simple arrays. See docs or this feature request - if you have more questions or issues, please create an issue or start a discussion thread inside the repository, instead of this thread we're currently in.

Cheers!