Bootstrap Table

by Michael Lajlev

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div id="toolbar">
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-plus"></i> Ny lejekontrakt
    </button>
    <button type="button" class="btn btn-default" disabled>
        <i class="glyphicon glyphicon-trash"></i> Slet
    </button>
</div>
<table id="table"
       data-striped="true"
       data-sort-name="movein-date"
       data-sort-order="desc"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-query-params="queryParams"
       data-pagination="true"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="address" 
            data-sortable="true">
           Bolig
        </th>
        <th data-field="tenant"
            data-sortable="true">
          Lejer
        </th>
        <th data-field="movein-date"
            data-sortable="true">
          Indflytningsdato
        </th>
        <th data-field="last-edit"
            data-sortable="true">
          Redigeret
        </th>
        <th data-field="action"
            data-formatter="actionFormatter"
            data-events="actionEvents">
        </th>
    </tr>
    </thead>
</table>

CSS

body {
  margin: 2em;
}

JavaScript

var data = [{
  "id": 1,
  "address": "697 Fallview Junction",
  "tenant": "Sandra Reed",
  "last-edit-date": "10/21/2015",
  "last-edit-time": "6:54",
  "last-edit": "10/21/2015 6:54 ",
  "movein-date": "8/3/2017"
}, {
  "id": 2,
  "address": "6387 Twin Pines Circle",
  "tenant": "Thomas Patterson",
  "last-edit-date": "1/8/2016",
  "last-edit-time": "15:58",
  "last-edit": "1/8/2016 15:58 ",
  "movein-date": "12/5/2016"
}, {
  "id": 3,
  "address": "809 Thackeray Place",
  "tenant": "Brandon Hernandez",
  "last-edit-date": "6/1/2016",
  "last-edit-time": "20:18",
  "last-edit": "6/1/2016 20:18 ",
  "movein-date": "3/15/2017"
}, {
  "id": 4,
  "address": "4 Randy Trail",
  "tenant": "Howard Knight",
  "last-edit-date": "9/8/2015",
  "last-edit-time": "6:58",
  "last-edit": "9/8/2015 6:58 ",
  "movein-date": "4/17/2017"
}, {
  "id": 5,
  "address": "35995 Corben Lane",
  "tenant": "Sean Owens",
  "last-edit-date": "12/2/2015",
  "last-edit-time": "23:25",
  "last-edit": "12/2/2015 23:25 ",
  "movein-date": "11/7/2016"
}, {
  "id": 6,
  "address": "2 Stephen Court",
  "tenant": "Dorothy Meyer",
  "last-edit-date": "5/12/2016",
  "last-edit-time": "3:37",
  "last-edit": "5/12/2016 3:37 ",
  "movein-date": "1/1/2017"
}, {
  "id": 7,
  "address": "70964 Brickson Park Alley",
  "tenant": "Carolyn Garrett",
  "last-edit-date": "12/25/2015",
  "last-edit-time": "1:19",
  "last-edit": "12/25/2015 1:19 ",
  "movein-date": "2/24/2017"
}, {
  "id": 8,
  "address": "8 Talisman Junction",
  "tenant": "Louis Kim",
  "last-edit-date": "1/15/2016",
  "last-edit-time": "11:48",
  "last-edit": "1/15/2016 11:48 ",
  "movein-date": "10/4/2016"
}, {
  "id": 9,
  "address": "35 Hanover Terrace",
  "tenant": "Carlos Cook",
  "last-edit-date": "6/13/2016",
  "last-edit-time": "7:13",
  "last-edit": "6/13/2016 7:13 ",
  "movein-date": "6/13/2017"
}, {
  "id": 10,
  "address": "0 Bunting Junction",
  "tenant": "Andrea Robinson",
  "last-edit-date": "10/9/2015",
  "last-edit-time":...