jQuery DataTables: Card view

Example for article at https://www.gyrocode.com/articles/jquery-datatables-card-view/

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sc-2.0.0/sl-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
<head>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
</head>

<div class="container">

    <h4>
       <a href="https://www.gyrocode.com/articles/">jQuery DataTables: Card view</a>
    </h4>
    <hr>

   <div class="alert alert-primary" role="alert">
   Row data: <span id="row-data"></span>
   </div>

   <table id="example" class="table table-sm table-hover" cellspacing="0" width="100%">
      <thead>
         <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Start</th>
            <th>Office</th>
            <th>Extn</th>
         </tr>
      </thead>
   </table>

   <hr><a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a>
</div>

CSS

.cards tbody tr {
   float: left;
   width: 19rem;
   margin: 0.5rem;
   border: 0.0625rem solid rgba(0, 0, 0, .125);
   border-radius: .25rem;
   box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.cards tbody td {
   display: block;
}

.cards thead {
   display: none;
}

.cards td:before {
   content: attr(data-label);
   position: relative;
   float: left;
   color: #808080;
   min-width: 4rem;
   margin-left: 0;
   margin-right: 1rem;
   text-align: left;   
}

tr.selected td:before {
   color: #CCC;
}

.table .avatar {
   width: 50px;
}

.cards .avatar {
   width: 150px;
   margin: 15px;
}

JavaScript

$(document).ready(function () {

   var table = $('#example').DataTable({
         'dom':
            "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'<'float-md-right ml-2'B>f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
         'ajax': 'https://api.myjson.com/bins/u3rp4',
         

  columnDefs: [
        { targets: [1], visible: false}
    ],


         'buttons': [ 
         
                  {
         extend: 'copy',
         exportOptions: { rows: [':visible'] }, //copy works on both normal view and card, but copies all columns, even those hidden with colvis.
				//exportOptions: { columns: [':visible'], rows: [':visible'] } //copies columns as expected with colvis, but only on normal view, not card view.
         },
         'colvis',
         'csv', {
            'text': '<i class="fa fa-id-badge fa-fw" aria-hidden="true"></i>',
            'action': function (e, dt, node) {

               $(dt.table().node()).toggleClass('cards');
               $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);

               dt.draw('page');
            },
            'className': 'btn-sm',
            'attr': {
               'title': 'Change views',
            }
         }],
         'select': 'single',
         'columns': [
            {
               'orderable': false,
               'data': null,
               'className': 'text-center',
               'render': function(data, type, full, meta){
                  if (type === 'display'){
                     data = '<i class="fa fa-user fa-fw"></i>';
                     data = '<img src="https://i.pravatar.cc/150?name=' + encodeURIComponent(full['name']) + '" class="avatar border rounded-circle">';
                  }
                  
                  return data;
               }
            },
            {
               'data': 'name'
            },
            {
               'data': 'position'
            },
          ...