kaunter/resources/views/components/datatable.blade.php

@props([
    'id',
    'columns' => [],
    'exportable' => true,
    'filename' => '',
    'skipExport' => ['Bil', 'Cetak'],
])

<style>
    .erahn-datatable {
        width: 100%;
        max-width: 100%;
    }
    .erahn-datatable .dataTables_wrapper {
        width: 100%;
        overflow-x: auto;
    }
    .erahn-datatable table {
        width: 100% !important;
        margin: 0;
    }
    .erahn-datatable table th,
    .erahn-datatable table td {
        white-space: nowrap;
        vertical-align: middle;
    }
    .erahn-datatable .dt-buttons {
        margin: 0 0 8px 8px;
    }
    .erahn-datatable .dt-button {
        border: 0;
        border-radius: 4px;
        padding: 6px 12px;
        margin-left: 4px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        background: #17a2b8;
        color: #fff;
    }
    .erahn-datatable .dt-button:hover {
        opacity: 0.9;
    }
    .erahn-datatable .buttons-excel {
        background: #28a745;
    }
    .erahn-datatable .buttons-csv {
        background: #6c757d;
    }
</style>

<script>
    if (typeof window.initErahnDatatable !== 'function') {
        window.initErahnDatatable = function (selector, options) {
            var $table = $(selector);
            var exportable = $table.data('exportable');
            var filename = $table.data('export-filename') || $table.attr('id') || 'export';
            var defaults = {
                scrollX: true,
                autoWidth: false,
                language: {
                    emptyTable: 'Tiada rekod'
                }
            };

            if ((exportable === undefined || exportable === 1 || exportable === true) &&
                $.fn.dataTable && $.fn.dataTable.Buttons) {
                defaults.dom = 'lBfrtip';
                defaults.buttons = [
                    {
                        extend: 'excelHtml5',
                        text: 'Excel',
                        className: 'buttons-excel',
                        title: filename,
                        filename: filename,
                        exportOptions: {
                            columns: ':not(.no-export)',
                            format: {
                                body: function (data) {
                                    return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
                                }
                            }
                        }
                    },
                    {
                        extend: 'csvHtml5',
                        text: 'CSV',
                        className: 'buttons-csv',
                        bom: true,
                        title: filename,
                        filename: filename,
                        exportOptions: {
                            columns: ':not(.no-export)',
                            format: {
                                body: function (data) {
                                    return $('<div>').html(data).text().replace(/\s+/g, ' ').trim();
                                }
                            }
                        }
                    }
                ];
            }

            return $table.DataTable($.extend(true, {}, defaults, options || {}));
        };
    }
    if (typeof window.adjustErahnDatatables !== 'function') {
        window.adjustErahnDatatables = function () {
            if (!$.fn.dataTable) {
                return;
            }
            setTimeout(function () {
                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
            }, 50);
        };
    }
</script>

<div class="erahn-datatable">
    <table
        id="{{ $id }}"
        {{ $attributes->merge(['class' => 'table table-striped table-hover nowrap']) }}
        style="width:100%"
        data-exportable="{{ $exportable ? 1 : 0 }}"
        data-export-filename="{{ $filename !== '' ? $filename : $id }}"
    >
        <thead class="thead-dark">
            <tr>
                @foreach ($columns as $column)
                    <th @if(in_array($column, $skipExport, true)) class="no-export" @endif>{{ $column }}</th>
                @endforeach
            </tr>
        </thead>
        <tbody></tbody>
        {{ $slot }}
    </table>
</div>