/*============================================================== REGAL HMS FRAMEWORK datatable.css Version : 1.0 ==============================================================*/ /*============================================================== DATATABLE WRAPPER ==============================================================*/ .dataTables_wrapper{ width:100%; font-size:14px; } /*============================================================== TABLE ==============================================================*/ .table{ margin-bottom:0; vertical-align:middle; } .table thead th{ background:#0d6efd; color:#ffffff; font-weight:600; white-space:nowrap; vertical-align:middle; } .table tbody td{ vertical-align:middle; } .table-hover tbody tr:hover{ background:#f8f9fa; } /*============================================================== BORDER ==============================================================*/ .table-bordered{ border-color:#dee2e6; } /*============================================================== STRIPED ==============================================================*/ .table-striped tbody tr:nth-of-type(odd){ background:#fcfcfc; } /*============================================================== RESPONSIVE ==============================================================*/ .table-responsive{ overflow-x:auto; } /*============================================================== SEARCH ==============================================================*/ .dataTables_filter{ text-align:right; } .dataTables_filter input{ border:1px solid #ced4da; border-radius:8px; padding:8px 12px; min-width:250px; } /*============================================================== LENGTH ==============================================================*/ .dataTables_length select{ border-radius:8px; padding:5px 30px 5px 10px; } /*============================================================== INFO ==============================================================*/ .dataTables_info{ padding-top:12px; color:#6c757d; } /*============================================================== PAGINATION ==============================================================*/ .dataTables_paginate{ padding-top:10px; } /*============================================================== BUTTONS ==============================================================*/ .dt-buttons{ margin-bottom:10px; } .dt-buttons .btn{ margin-right:5px; } /*============================================================== PROCESSING ==============================================================*/ .dataTables_processing{ background:#ffffff; border:1px solid #dee2e6; border-radius:8px; padding:15px; font-weight:600; } /*============================================================== SORT ICON ==============================================================*/ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{ cursor:pointer; } /*============================================================== EMPTY TABLE ==============================================================*/ .dataTables_empty{ text-align:center; color:#6c757d; padding:20px; } /*============================================================== PART-1 END ==============================================================*/ /*============================================================== SELECTED ROW ==============================================================*/ table.dataTable tbody tr.selected{ background:#dbeafe !important; color:#000; } /*============================================================== ACTIVE ROW ==============================================================*/ .table-active{ background:#e7f1ff !important; } /*============================================================== ACTION BUTTONS ==============================================================*/ .table-action{ white-space:nowrap; text-align:center; } .table-action .btn{ width:32px; height:32px; padding:0; line-height:30px; margin:0 2px; } /*============================================================== STATUS BADGE ==============================================================*/ .status-active{ background:#198754; color:#fff; padding:5px 10px; border-radius:20px; font-size:12px; } .status-inactive{ background:#dc3545; color:#fff; padding:5px 10px; border-radius:20px; font-size:12px; } /*============================================================== CHILD ROW ==============================================================*/ table.dataTable tbody td.child{ background:#f8f9fa; } /*============================================================== FOOTER ==============================================================*/ table.dataTable tfoot th{ background:#f8f9fa; font-weight:600; } /*============================================================== FIXED HEADER ==============================================================*/ table.dataTable.fixedHeader-floating{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); } /*============================================================== SCROLL BODY ==============================================================*/ .dataTables_scrollBody{ border-bottom:1px solid #dee2e6; } /*============================================================== LOADING OVERLAY ==============================================================*/ .dt-loading{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.70); display:flex; align-items:center; justify-content:center; z-index:100; } /*============================================================== EXPORT BUTTONS ==============================================================*/ .buttons-copy{ background:#6c757d !important; color:#fff !important; } .buttons-csv{ background:#198754 !important; color:#fff !important; } .buttons-excel{ background:#198754 !important; color:#fff !important; } .buttons-pdf{ background:#dc3545 !important; color:#fff !important; } .buttons-print{ background:#0dcaf0 !important; color:#fff !important; } .buttons-colvis{ background:#ffc107 !important; color:#000 !important; } /*============================================================== PAGINATION ==============================================================*/ .dataTables_paginate .paginate_button{ padding:.35rem .75rem !important; margin:2px; border-radius:6px !important; } .dataTables_paginate .paginate_button.current{ background:#0d6efd !important; color:#fff !important; border:none !important; } /*============================================================== SEARCH ICON ==============================================================*/ .dataTables_filter{ position:relative; } .dataTables_filter::before{ content:"\F52A"; font-family:"bootstrap-icons"; position:absolute; left:12px; top:10px; color:#6c757d; } .dataTables_filter input{ padding-left:35px; } /*============================================================== LENGTH SELECT ==============================================================*/ .dataTables_length label{ font-weight:600; } /*============================================================== TABLE CAPTION ==============================================================*/ .table-caption{ font-size:18px; font-weight:600; margin-bottom:15px; } /*============================================================== BORDER RADIUS ==============================================================*/ .table-radius{ overflow:hidden; border-radius:10px; } /*============================================================== HOVER BUTTONS ==============================================================*/ .table-action .btn:hover{ transform:scale(1.05); transition:.2s; } /*============================================================== PART-2 END ==============================================================*/ /*============================================================== RESPONSIVE TABLE ==============================================================*/ @media(max-width:768px){ .dataTables_wrapper{ overflow-x:auto; } .table{ min-width:900px; } .dataTables_filter{ text-align:left; margin-top:10px; } .dataTables_filter input{ width:100%; min-width:100%; } .dataTables_length, .dataTables_info, .dataTables_paginate{ text-align:center; margin-top:10px; } .dt-buttons{ display:flex; flex-wrap:wrap; gap:5px; } .dt-buttons .btn{ flex:1 1 auto; } } /*============================================================== STICKY HEADER ==============================================================*/ .table-sticky thead th{ position:sticky; top:0; z-index:20; } /*============================================================== STICKY FIRST COLUMN ==============================================================*/ .table-sticky td:first-child, .table-sticky th:first-child{ position:sticky; left:0; background:#fff; z-index:10; } /*============================================================== STICKY LAST COLUMN ==============================================================*/ .table-sticky td:last-child, .table-sticky th:last-child{ position:sticky; right:0; background:#fff; z-index:10; } /*============================================================== ROW ANIMATION ==============================================================*/ table.dataTable tbody tr{ transition:.20s ease; } table.dataTable tbody tr:hover{ transform:scale(1.002); } /*============================================================== NO DATA ==============================================================*/ .dataTables_empty{ padding:40px; font-size:16px; color:#6c757d; } /*============================================================== LOADING SPINNER ==============================================================*/ .dt-spinner{ display:flex; justify-content:center; align-items:center; padding:25px; } /*============================================================== FILTER ROW ==============================================================*/ .filter-row input, .filter-row select{ width:100%; border:1px solid #ced4da; border-radius:6px; padding:6px 10px; } /*============================================================== TABLE TOOLBAR ==============================================================*/ .table-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; gap:10px; flex-wrap:wrap; } /*============================================================== TABLE TITLE ==============================================================*/ .table-title{ font-size:20px; font-weight:600; } /*============================================================== RECORD COUNT ==============================================================*/ .record-count{ color:#6c757d; font-size:14px; } /*============================================================== ACTION ICONS ==============================================================*/ .table-action .btn i{ font-size:14px; } /*============================================================== HIGHLIGHT ==============================================================*/ .row-success{ background:#d1e7dd !important; } .row-warning{ background:#fff3cd !important; } .row-danger{ background:#f8d7da !important; } /*============================================================== CURSOR ==============================================================*/ table.dataTable tbody tr{ cursor:pointer; } /*============================================================== DARK MODE ==============================================================*/ body.dark-mode table{ color:#fff; } body.dark-mode .table thead th{ background:#343a40; } body.dark-mode .table tbody td{ background:#2c2c2c; } body.dark-mode .dataTables_filter input, body.dark-mode .dataTables_length select{ background:#3b3b3b; color:#fff; border-color:#555; } /*============================================================== PRINT ==============================================================*/ @media print{ .dt-buttons, .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info{ display:none !important; } .table{ border-collapse:collapse; } .table th, .table td{ border:1px solid #000; } } /*============================================================== UTILITY ==============================================================*/ .text-nowrap{ white-space:nowrap; } .cursor-pointer{ cursor:pointer; } .table-shadow{ box-shadow:0 2px 10px rgba(0,0,0,.10); } .table-rounded{ border-radius:10px; overflow:hidden; } /*============================================================== DATATABLE.CSS COMPLETED VERSION : 1.0 ==============================================================*/