ManagementSystem/BACKEND/resources/views/components/datatable.blade.php

@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css" />
    <style>
        .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr:last-child > td{
            border-bottom: solid 1px #e5e5e5;
        }
        .dataTables_wrapper .dataTables_filter input {
            border: rgb(225, 225, 225) 1px solid;
            padding: 2px;
            border-radius: 0;
            font-weight: normal
        }

        /* Custom styles for page length dropdown */
        .dataTables_length {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .dataTables_length label {
            margin-right: 10px;
            color: #4a5568;
            font-weight: bold;
        }

        .dataTables_length select {
            /* appearance: none; */
            background-color: #ffffff;
            border: 1px solid #cbd5e0;
            padding: 8px;
            outline: none;
            cursor: pointer;
            font-size: 14px;
            color: #4a5568;
        }

        .dataTables_length select:focus {
            border-color: #667eea;
        }

        .dataTables_filter label {
            color: #4a5568;
            font-weight: bold;

        }

        .dataTables_wrapper .dataTables_paginate {
            display: flex !important;
            justify-content: center !important;
            align-items: center;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        .dataTables_paginate .paginate_button {
            padding: 3px 10px !important;
            font-weight: 600;
            border: solid 1px white !important;
            border-radius: 5px !important;
            cursor: pointer !important;
            transition: background-color 0.3s !important;
            margin-right: 5px !important;
        }


        .dataTables_paginate .paginate_button.current {
            background-color: #64749a69 !important;
            color: #ffffff !important;
        }

        /* Background color for even rows */
        #table-data tbody tr:nth-child(even) {
            background-color: #f2f2f2 !important;
        }

        #table-data tbody tr:hover {
            background-color: #d3e0e08a !important;
            /* Background color for even rows */
        }

        .dt-hasChild .ri-arrow-right-line:before {
            content: "\ea4c";
        }
    </style>
@endsection

@section('script')
    <script defer src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
    <script defer src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
    <script>
        const DEFAULT_CONFIG_DT = {
            searchDelay: 1200,
            processing: true,
            serverSide: true,
            ordering: false,
            fixedHeader: true,
            footer: false,
            scrollY: '40vh',
            scroller: true,
        }

        const DT_TYPE_RENDER = {
            DATETIME: 'datetime',
            STRING: 'string',
            NUMBER: 'number',
            OBJECT: 'object',
            ARRAY: 'array',
            CHILD: 'child',
            STATUS: 'status',
            ACTION: 'action',
            DETAIL_CONTROL: 'detail_control'
        }

        const DT_DATETIME_FORMAT = 'YYYY/MM/DD HH:mm:ss'

        const DT_COLUMN_DEF_RENDERER = function({
                column = '',
                index = 0
            }) {
                const colRender = {
                    visible: column['visible'],
                    name: column['name'],
                    targets: index
                }

                if (column['className'] ?? '') {
                    colRender['className'] = column['className']
                }

                if (column['orderable'] ?? '') {
                    colRender['orderable'] = true
                } else {
                    colRender['orderable'] = false
                }

                if (column['type'] == DT_TYPE_RENDER.STRING) {
                    colRender['render'] = function(data, type, row) {
                        return STATUS[data]
                    }
                }

                if (column['type'] == DT_TYPE_RENDER.STATUS) {
                    colRender['render'] = function(data, type, row) {
                        return STATUS[data]
                    }
                }

                if (column['type'] == DT_TYPE_RENDER.ARRAY) {
                    colRender['render'] = function(data, type, row) {
                        return `
                        <ul>
                            ${data.map((item, i) => `<li style="max-width: 20rem"> ${i + 1}. ${item}</li>`).join('')}
                        </ul>
                    `
                    }
                }

                if (column['type'] == DT_TYPE_RENDER.DATETIME) {
                    colRender['render'] = function(data, type, row) {
                        return moment(data).format(DT_DATETIME_FORMAT);
                    }
                }

                if (column['type'] == DT_TYPE_RENDER.DETAIL_CONTROL) {
                    colRender['render'] = function(data, type, row) {
                        if (data) return '<button class="dt-control pointer w-full h-full"><i class=" ri-arrow-right-line"></i></button>';
                        else return null;
                    }
                }
                return colRender
            }
    </script>
@endsection