DataTable Fixed Column with Bootstrap's dropdown

Published on Jan 3, 2024

Now, let’s see an example of a laravel datatables fixed column with bootstrap dropdown example. We will use laravel datatables fixed column with bootstrap dropdown. I would like to show you the laravel datatables fixed column bootstrap dropdown example. You just need to do some steps to do the datatable fixed column with bootstrap dropdown with laravel.

You can easily add datatable fixed column with datatable fixed column CDN link in laravel 6, laravel 7, laravel 8, and laravel 9.You can link different version of datatables fixed column needed of your laravel version.

https://cdnjs.cloudflare.com/ajax/libs/datatables.net-fixedcolumns-bs5/4.3.0/fixedColumns.bootstrap5.min.js

In this tutorial, I will show you how to fix column with fixedColumns in a bootstrap dropdown with laravel yajra datatable.

@section('script')
<script>
    $(document).ready(function() {
        var table= $('#surveys-table').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            mark: true,
            scrollX: true,
            fixedColumns:{
                left: 1,
                right: 1,
            },
            ajax: {
              // code ..
            },
            columns: [
               // code ...
            ],
        });
      
    });
</script>
@endsection

So let’s follow this tutorial and you will get the layout as like below:

Preview:

In this preview,some issues bootstrap dropdown button is under DataTable Fixed Colums.So, we should solve this issue.

The issue here is that each column in the fixed column has a position: sticky assigned to it in CSS (so it does the "fixed" thing). That creates its own z-index structure and since your popovers are inside each of those elements, they will always be overlapped by the other elements.

In this table ,each row has bootstrap dropdown class and .link-focus class in our bootstrap dorpdown button or href.

Solution:

So, We could set the z-index for the cell that the popover is in to be higher than the others - i.e. use a counter an just increase it each time a button is clicked, setting the z-index for the host cell.

First,we add some code in our laravel blade file.We use .link-focus class name to click action.You can other class name as you like,you can choice.

Laravel Blade File index.blade.php

// on your css ..
<style>
    td.z-index-3 {
        z-index: 3!important;
    }
</style>
//...
@section('script')
<script>
    $(document).ready(function() {
        var table= $('#examples-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            fixedColumns:{
                left: 1,
                right: 1,
            },
            ajax: {
              // code ..
            },
            columns: [
               // code ...
            ],
        });
       
        $(document).on('click', '.link-focus', function(e){
            $(this).closest("td").addClass("z-index-3");
        });
    });
</script>
@endsection

Now, the datatable fiexd columns is woking with bootstrap dropdown buttons.

But,if next bootstrap dropdown button on click ,the early clicked bootstrop dropdown button added class need to remove z-index-3 .

Remove z-index-3 class:

Added code $('.z-index-3').removeClass("z-index-3"); in jquery.

@section('script')
<script>
    $(document).ready(function() {
        var table= $('#surveys-table').DataTable({
           // code ...
        });
       
        $(document).on('click', '.dropdown-ellipsis-v', function(e){
            $('.z-index-3').removeClass("z-index-3");
            $(this).closest("td").addClass("z-index-3");
        });
    });
</script>
@endsection

Finally,We get datatable fixed column with brootstrap's dropdown.

#we hope to help you.

Created by laravelstaff.com