Datatables draft1

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.foundation.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.foundation.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.foundation.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.foundation.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.foundation.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.foundation.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.foundation.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
<div class="row">

  <div class="large-12 columns">


  <table id="example" class="display nowrap table1" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Seq.</th>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
        </tr>
     ...

CSS

/* table th:nth-child(3), td:nth-child(3) {
  display: none;
}
 */
 
th, td { white-space: nowrap; 
 }
 
 table.table1 {
        width: 100%;
    }

JavaScript

var salaryTable = {
    "data": [
        {
            "Seq": "1",
            "Name": "Tiger Nixon",
            "Position": "System Architect",
            "Salary": "$1"
        },
        {
            "Seq": "1",
            "Name": "Garrett Winters",
            "Position": "Accountant",
            "Salary": "$1"
        },
        {
            "Seq": "3",
            "Name": "Ashton Cox",
            "Position": "Junior Technical Author",
            "Salary": "$3"
        },
        {
            "Seq": "4",
            "Name": "Cedric Kelly",
            "Position": "Senior Javascript Developer",
            "Salary": "$4"
        },
        {
            "Seq": "5",
            "Name": "Airi Satou",
            "Position": "Accountant",
            "Salary": "$5"
        }
    ]
}; 
 
 
 $(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: {
        selector: 'td:nth-child(2)'
      },
      data: salaryTable.data,
            columns: [
            { data: "Seq" },
            { data: "Name" },
            { data: "Position" },
            { data: "Salary" }
        ],
      responsive: true,
      scrollX: true,
      scrollY: "80vh",
  		scrollCollapse: true,
 			paging: true,
      lengthChange: false,
      lengthMenu: [ [10, 25, -1], [10, 25, "All"] ],
      "order": [[ 0, "asc" ]],
      "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            filteredTotal = api.rows().data().reduce(function (a, b) {
              // filterMe will be true or false:
              filterMe = b[2] === "System Architect" || b[2] === "Senior Javascript Developer";

    ...