Error sizing column datatable

andrisn

i have problem with sizing column datatable even when I activate scrollX and scrollY, the column table still error

andrisn

here my full script






<link href="https://cdn.datatables.net/fixedcolumns/5.0.0/css/fixedColumns.bootstrap4.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/2.0.6/css/dataTables.bootstrap4.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<

script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('#id_tagName').select2({
dropdownParent: $("#tambah-data-perkerjaan"),
width: '100%',
});

    var tabel;
    table = $('#tabel-pekerjaan').DataTable({
        processing: true,
        serverSide: true,
        scrollY: 560,
        scrollX: true,
        order: [
            [6, 'desc']
        ],
        lengthMenu: [
            [10, 25, 50, -1],
            [10, 25, 50, 'All']
        ],

        layout: {
            topStart: {
                buttons: [{
                        extend: 'pageLength',
                        className: 'btn-primary'
                    },
                    {
                        extend: 'pdf',
                        className: 'btn-primary',
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                        text: "<i class='bx bxs-file-pdf'></i>"
                    },
                    {
                        extend: 'excel',
                        className: 'btn-primary',

                    }
                ],
            }
        },
        ajax: {
            "url": "{{ route('dashboard-data') }}", // Replace with your API endpoint URL
            "dataSrc": "data" // JSON key where the data is located
        },
        search: {
            return: true
        },
        createdRow: function(row, data, dataIndex) {
            // Access the 'trip_item' value for the current row
            var isTripItem = data.item_trip;

            // Check if trip_item is true
            if (isTripItem == 1) {
                // Change the text color of the 'tag_name' cell to red

                $('td:eq(1)', row).css({
                    'color': 'red',
                    'font-weight': 'bold'
                });
            }
            // No need for an else condition; text color remains unchanged if trip_item is false
        },
        rowCallback: function(row, data, displayIndex, displayIndexFull) {
            if (displayIndex % 2 === 1) {
                $(row).addClass('no-odd-background-color');
            }
        },
        columns: [{
                data: 'nama_area',
                name: 'nama_area'
            },
            {
                data: 'tag_name',
                name: 'tag_name'
            },
            {
                data: 'nama_equipment',
                name: 'nama_equipment'
            },
            {
                data: 'nama_subEquipment',
                name: 'nama_subEquipment'
            },
            {
                data: 'permasalahan',
                name: 'permasalahan'
            },
            {
                data: 'penyelesaian',
                name: 'penyelesaian'
            },
            {
                data: 'tanggal', // Assuming this is your date column
                name: 'tanggal',
                render: function(data, type, row) {
                    // Format the date using moment.js
                    if (type === 'display' || type === 'filter') {
                        return moment(data).format(
                            'DD MMM YYYY'); // Adjust the format as needed
                    }
                    return data;
                }
            },
            {
                data: 'tema_pekerjaan',
                name: 'tema_pekerjaan'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'keterangan',
                name: 'keterangan',
                className: 'text-break'
            },
            {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    var userRoles = "admin"
                    if (userRoles !== "guest") {
                        return '<a href="dashboard/detail/' + data.iddata +
                            '" class="btn btn-sm btn-primary"><i class="menu-icon tf-icons bx bx-show"> </i></a>' +
                            '<a href="dashboard/edit/' + data.iddata +
                            '" class="btn btn-sm btn-warning"><i class="menu-icon tf-icons bx bx-edit"></i></a>' +
                            '<a href="#" data-id="' + data.iddata +
                            '" class="btn btn-sm btn-danger deleteData"><i class="menu-icon tf-icons bx bx-trash"></i></a>';
                    } else {
                        return '<a href="dashboard/detail/' + data.iddata +
                            '" class="btn btn-primary"><i class="fa fa-eye"> </i></a>'
                    }
                }
            },

        ],
        fixedColumns: {
            start: 2,
            end: 1
        }
    });

andrisn

i got the solution to put ( className: 'text-nowrap',) into columndeff, thanks

allan

Good to hear you've got a solution.

In future, if you link to a test case showing the issue, that really helps in getting an answer to your question.

Allan