<table id="example22" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
        <thead>
        <tr>
             <th>Type</th>
             <th>Name</th>
             <th>Details</th>
             <th>Action</th>
            </tr>
        </thead>
        <tbody>
        @php $i=1;@endphp
        @foreach($data as $result)
        <tr>
             <td>{{$result->Type}}</td>
             <td>{{$result->Name}}</td>
             <td style="white-space: pre-wrap;">{{$result->Details}}</td>
             <td><a data-id="{{$result->id}}" href='javascript:void(0);' data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit" class="updatespecinst"><i class="lnr lnr-pencil mr-2"></i></a>&nbsp;&nbsp;
             <a data-id="{{$result->id}}" href='javascript:void(0);' data-toggle="tooltip" data-placement="top" title="Delete" data-original-title="Delete" class="deletespecinst"><i class="lnr lnr-trash text-danger"></i></a></td>
        </tr>
        @php $i++;@endphp
        @endforeach
        </tbody>
    </table>
    <script type="text/javascript">
      $(document).ready(function() {
      $('#example22').DataTable( {
        responsive: true
      });
      });
    </script>