JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/sl-1.3.1/datatables.min.css"/>
 
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css">

<form id="formDatatable" action="#" method="POST">

  <table id="datatable" class="table table-bordered display" style="width:100%">
    <thead>
      <tr>
        <th></th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Sexe</th>
        <th>Classe</th>
        <th>Ville</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <th></th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Sexe</th>
        <th>Classe</th>
        <th>Ville</th>
      </tr>
    </tfoot>
  </table>

  <hr>

  <p><b>Selected rows data:</b></p>
  <pre id="example-console-rows"></pre>

  <p><b>Form data as submitted to the server:</b></p>
  <pre id="example-console-form"></pre>

</form>

<!--
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
-->

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/sl-1.3.1/datatables.min.js"></script>

<script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>

JavaScript 1.7

$(document).ready(function () {
  var current = 1;
  var table = $('#datatable').DataTable({
    language: {
      url : "https://cdn.datatables.net/plug-ins/1.10.20/i18n/French.json"
    } ,
    ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    dom: "<'row'<'col-sm-12 col-md-6'<'d-inline-block'l><'d-inline-block ml-3'B>><'col-sm-12 col-md-6'f>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    buttons: {
      buttons: [
        {
          text: '<i class="fas fa-download"></i> Exporter',
          attr: {id: "btnExport"},
          action: function (e, dt, node, config) {
            var form = $('#formDatatable');

            var rows_selected = table.column(0).checkboxes.selected();

            // Iterate over all selected checkboxes
            $.each(rows_selected, function (index, rowId) {
              // Create a hidden element
              $(form).append(
                $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
              );
            });

            // FOR DEMONSTRATION ONLY
            // The code below is not needed in production

            // Output form data to a console
            $('#example-console-rows').text(rows_selected.join(","))

            // Output form data to a console
            $('#example-console-form').text($(form).serialize())

            // Remove added elements
            $('input[name="id\[\]"]', form).remove()

            // Prevent actual form submission
            e.preventDefault();
          }
        }
      ],
      dom: {
        button: {
          tag: "button",
          className: "btn btn-success"
        }
      }
    },

    columnDefs: [
      {
        targets: 0,
        checkboxes: {
          selectRow: true
        }
      }
    ],
    select: {
      style: 'multi'
    },
    order: [[1, 'asc']],
    drawCallback : function() {
     ...