nhance/app/Views/digit_motor/list_table.php

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="digit-motor-datatable">
                    <thead class="bg-light">
                        <tr>
                            <th>Enquiry ID&nbsp;</th>
                            <th>Reg. No.&nbsp;</th>
                            <th>Quote No.&nbsp;</th>
                            <th>Premium&nbsp;</th>
                            <th>IDV&nbsp;</th>
                            <th>Status&nbsp;</th>
                            <th>Created&nbsp;</th>
                            <th>Action&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($quotes)): foreach ($quotes as $q): ?>
                            <tr data-id="<?= (int) $q['id'] ?>" data-href="<?= base_url('digit-motor/journey/' . $q['id']) ?>">
                                <td><?= esc($q['enquiry_id'] ?? '-') ?></td>
                                <td><?= esc($q['license_plate_number'] ?? '-') ?></td>
                                <td><?= esc($q['quote_number'] ?? '-') ?></td>
                                <td><?= isset($q['premium']) && $q['premium'] !== null ? '₹' . number_format((float) $q['premium'], 2) : '-' ?></td>
                                <td><?= isset($q['idv']) && $q['idv'] !== null ? '₹' . number_format((float) $q['idv'], 0) : '-' ?></td>
                                <td>
                                    <?php $st = $q['status'] ?? 'DRAFT'; ?>
                                    <span class="status-pill st-<?= esc($st) ?>"><?= esc($st) ?></span>
                                </td>
                                <td><?= !empty($q['created_at']) ? date('d M Y H:i', strtotime($q['created_at'])) : '-' ?></td>
                                <td>
                                    <div class="btn-group dropdown">
                                        <a href="javascript:void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown">
                                            <i class="mdi mdi-dots-horizontal"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a class="dropdown-item" href="<?= base_url('digit-motor/journey/' . $q['id']) ?>">
                                                <i class="mdi mdi-eye-outline mr-2 text-muted font-18 vertical-middle"></i>Open journey
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    var table = $('#digit-motor-datatable');
    if (!table.length || !$.fn.DataTable) return;
    if ($.fn.DataTable.isDataTable(table)) {
        table.DataTable().destroy();
    }

    table.DataTable({
        scrollX: true,
        dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        buttons: [
            {
                text: '<i class="mdi mdi-filter"></i><span class="btn-custom"> Filter </span>',
                className: 'btn app-btn-primary mr-2',
                action: function() { openFilterNav(); }
            },
            {
                text: '<i class="mdi mdi-plus"></i><span class="btn-custom"> Add </span>',
                className: 'btn app-btn-primary mr-2',
                action: function() { window.location.href = '<?= base_url('digit-motor/journey') ?>'; }
            },
            {
                extend: 'collection',
                text: '<span class="btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
                className: 'btn app-btn-secondary',
                buttons: [
                    {
                        extend: 'csv',
                        text: '<i class="mdi mdi-file-delimited"></i> CSV',
                        className: 'app-btn-primary',
                        title: 'Digit-Motor-Quotes'
                    },
                    {
                        extend: 'excel',
                        text: '<i class="mdi mdi-file-excel"></i> EXCEL',
                        title: 'Digit-Motor-Quotes',
                        sheetName: 'Quotes',
                        exportOptions: { orthogonal: 'sort' },
                        className: 'app-btn-primary'
                    }
                ]
            }
        ],
        language: {
            search: '<div class="datatable-search-wrapper" style="position:relative;display:inline-block;">_INPUT_<i class="mdi mdi-magnify datatable-search-icon" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;"></i></div>',
            searchPlaceholder: 'Search',
            emptyTable: '<div class="text-center text-muted">No Data found</div>'
        },
        paging: true,
        pageLength: 10,
        ordering: true,
        order: [[6, 'desc']],
        columnDefs: [
            { orderable: false, targets: [7] }
        ]
    });
});

$(document).off('click.digitMotorRow').on('click.digitMotorRow', '#digit-motor-datatable tbody tr', function(e) {
    if ($(e.target).closest('td').index() === $(this).children('td').length - 1) return;
    if ($(e.target).closest('a,button,.dropdown-menu').length) return;
    var href = $(this).data('href');
    if (href) window.location.href = href;
});
</script>