Symfony 5 + Webpack Encore + Bootstrap Table not exporting

I am trying to add an exportable Bootstrap Table for each entity. But the export button is being displayed but still, it has no action while clicking over it.

I thought this could be some library issue but I guess the error is in my code.

Since its installation documentation is not "big" I will write the steps I followed:

1. Ran yarn add bootstrap-table

2. Added jQuery and other table export libraries inside /assets/app.js:

   import '../css/app.scss';
   import $ from 'jquery';
   global.$ = global.jQuery = $;
   
   import 'bootstrap';
   import './tableExport.min.js';
   import 'bootstrap-table';
   import './bootstrap-table-export.min.js';
   import './bootstrap-table-locale-es.js';
   
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '@fortawesome/fontawesome-free/js/all.js';
   
   
   console.log('Webpack compilado');
   

3. To avoid some errors, this might be redundant with the previous step, I added jquery as a global variable to webpack.config.js:

   .autoProvidejQuery()
   .autoProvideVariables({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery',
   })
   

4. Added the HTML to the template: <table class="table"></table>

5. Added the JavaScript to the template:

   $('.table').bootstrapTable({
            columns: [
                {% block jsTableColumns %}{% endblock %},
                {
                    field: 'show',
                    title: 'Acciones',
                    formatter,
                    align: 'center'
                }
            ],
            showExport: true,
            search: true,
            url: '/api/{% block jsApi %}{% endblock %}.json',
            pagination: true,
            {% block jsTableOptions %}{% endblock %}
        })
   

What am I missing?

Source: Symfony Questions

Was this helpful?

YesNo

0 / 0