JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-body">
          <table id="reporte" class="table table-striped table-bordered nowrap" style="width: 100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Identificación</th>
                        <th>Credencial</th>
                        <th>Nombres</th>
                        <th>Apellido Paterno</th>
                        <th>Apellido Materno</th>
                        <th>Other 1</th>
                        <th>Other 2</th>
                        <th>Other 3</th>
                    </tr>
                </thead>
                <tbody>
                  <tr>
                    <td></td> 
                    <td>111111111</td>
                    <td></td>
                    <td>Juan</td>
                    <td>Pérez</td>
                   ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$(document).ready(function () {
            $.fn.dataTable.ext.errMode = 'none';

            var tabla = $('#reporte')
            .DataTable({
                dom: "<'row'<'col-sm-12 col-md-4'<\"gridToolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'<\"customSearch\">>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                
                columns: [
                    {
                        data: null,
                        className: "text-center",
                        orderable: false,
                        width: 30,
                        defaultContent: '<div class="tooltip_commands"><i class="fa fa-cog" aria-hidden="true"></i></div>'
                    },
                    { data: "Identificacion", width: 150 },
                    { data: "Credencial", width: 150 },
                    { data: "Nombres", width: 150 },
                    { data: "ApellidoPaterno", width: '100%' },
                    { data: "ApellidoMaterno", width: 150 },
                    { data: "Otro1", width: 150 },
                    { data: "Otro2", width: 150 },
                    { data: "Otro3", width: 150 }
                ],
                processing: true,
                serverSide: false,
                colReorder: false,
                orderMulti: false,
                responsive: false,
                rowId: "Id",
                order: [1, "asc"],
                scrollX: true,
                fixedColumns:   {
                    leftColumns: 1
                }
            });
            
            tabla.on('draw', function () {
                	$("div.gridToolbar").html('<div class="button-group"><button id="btnExportar" type="button" class="btn btn-info" data-container="body" title="Exportar" data-toggle="tooltip" data-placement="top" data-content="Exporta a Excel el contenido de toda la grilla, luego de realizada alguna búsqueda."><i class="far...