JSFiddle - React, Tailwind, and code Playground

by BakBaka7a

HTML

<!doctype html>


<html lang="ar" dir="rtl">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>DataTable</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">

    </head>

<body class="app">
    <div id="loader">
        <div class="spinner">
        </div>
    </div>
    <div>


            <main class="main-content bgc-grey-100">
                <div id="mainContent">

                    <div class="container-fluid">


                        <div class="row">

                            <div class="col-md-12">
                                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                                    <h4 class="c-grey-900 mB-20">Datatable</h4>



                                    <br />


                                    
                                        <table id="dataTable" class="table table-striped table-bordered" cellspacing="0"
                                            width="100%">
                                            <thead...

CSS

body {
            font-family: 'Cairo', sans-serif;
        }
		
                            div.dt-top-container {
                                display: grid;
                                grid-template-columns: auto auto auto;
                            }

                            div.dt-center-in-div {
                                margin: 0 auto;
                            }

                            div.dt-filter-spacer {
                                margin: 10px 0;
                            }

                            .dataTables_filter input {
                                width: 250px;
                                /* Change the value to the desired width */
                            }

JavaScript

$(document).ready(function () {
                                // Initialize DataTable
                                var table = $('#dataTable').DataTable({
                                    // Enable searching
                                    searching: true,
                                    // // Enable horizontal scrolling
                                     //scrollX: true,
                                    // fixedHeader: true,
                                    // Enable export buttons
                                    dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<ip>',
                                    //dom: 'Blfrtip',
                                    // dom: '<"dt-top-container"<"dt-left"<l>><"dt-center-in-div"B><"dt-right"f>>t<ip>',
                                    buttons: [{
                                        extend: 'excelHtml5',
                                        text: 'XLSX',
                                        title: $('title').text() + ' - ' + (new Date()).toLocaleString('en-US', {
                                            day: '2-digit',
                                            month: '2-digit',
                                            year: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }).replace(/[\/\,\:]/g, '-'),
                                        filename: $('title').text() + '-' + (new Date()).toLocaleString('en-US', {
                                            day: '2-digit',
                                            month: '2-digit',
                                            year: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }).replace(/[\/\,\:]/g, '-') + '.xlsx',
                                        exportOptions: {
...