Individual filtering is getting hidden

[sn0opr]

I'm trying to show the individual filters but it's getting hidden. When I load the page, I can see them appearing then getting hidden in a few milliseconds and replaced by the name of the columns like this:

Symfony 4.3 Encore Webpack.

Datatable configuration:

    /**
     * Builds the datatable.
     *
     * @param array $options
     * @throws \Exception
     */
    public function buildDatatable(array $options = array())
    {
        $this->ajax->set([
            'pipeline' => 10
        ]);

        $this->language->set(array(
            'cdn_language_by_locale' => true
        ));

        $this->options->set([
            'classes' => Style::BOOTSTRAP_4_STYLE,
            'individual_filtering' => true,
            'individual_filtering_position' => 'head',
            'order' => [[7, 'DESC']]
        ]);

        $this
            ->columnBuilder
            ->add('user.username', Column::class, [
                'title' => 'Utilisateur'
            ])
            ->add('sender', Column::class, [
                'title' => "Expéditeur",
                'searchable' => true,
                'orderable' => true,
                'filter' => array(TextFilter::class, array(
                    'cancel_button' => true
                ))
            ])
            ->add('receiver', Column::class, [
                'title' => 'Déstinataire',
                'searchable' => true,
                'orderable' => true
            ])
            ->add('smscId', Column::class, [
                'title' => 'SMSC ID'
            ])
            ->add('service', Column::class, [
                'title' => 'Service'
            ])
            ->add('currentStatus', Column::class, [
                'title' => 'Status'
            ])
            ->add('lastStatusUpdate', DateTimeColumn::class, [
                'title' => 'Date de MàJ'
            ])
            ->add('createdAt', DateTimeColumn::class, [
                'title' => 'Date d\'envoi'
            ])
            ->add(null, ActionColumn::class, [
                'actions' => [
                    [
                        'route' => 'sms_show',
                        'icon' => 'icon-eye',
                        'route_parameters' => ['id' => 'id'],
                        'attributes' => [
                            'rel' => 'tooltip',
                            'title' => 'Afficher',
                            'class' => 'btn btn-outline-primary btn-xs'
                        ]
                    ]
                ]
            ])
        ;
    }

My templates:

{% extends 'layouts/dashboard.layout.html.twig' %}

{% block main %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item active">Gestion des SMS</li>
        <li class="breadcrumb-item">Liste des SMS</li>
    </ol>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <span class="cui-user"></span>
                        Liste des SMS
                    </div>
                    <div class="card-body">
                        {{ sg_datatables_render(datatable) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('datatable') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('datatable') }}
{% endblock %}

datatable.js

require('datatables.net-bs4');
global['moment'] = require('moment');
require('../../public/bundles/sgdatatables/js/pipeline.js');
require('../../assets/css/datatable.css');

[sn0opr]

Up

[camille-hdl]

If anyone has the misfortune of stumbling upon this, adding the option 'order_cells_top' => true fixed it for me.