JSFiddle - React, Tailwind, and code Playground

by hakuna_matata

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
  </head>

  <body>
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>
            Ledger Entries
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <table id="insidetable1" width="100%">
              <thead>
                <tr>
                  <th colspan="2">B/C Acc</th>
                  <th colspan="2">Notes</th>
                  <th colspan="2">OB On date</th>
                  <th colspan="2">CL on date</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="2">NO</td>
                  <td colspan="2">-</td>
                  <td colspan="2">23000 Cr</td>
                  <td colspan="2">567777 Cr</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table id="insidetable2" width="100%">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Number</th>
                  <th>Ledger</th>
         ...

CSS

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  text-align: right;
}

JavaScript

$(document).ready(function() {
    $('#example').DataTable({
    dom: 'Bftip',
    buttons: [
            {
            extend: 'pdf',
            text: 'PDF',
            exportOptions: {
 
            }
        }       ]
    });
} );