MDBootstrap datatables builder

Name Position Office Age Start date Salary
Tiger NixonSystem Architect-612011/04/25320
Garrett WintersAccountantTokyo632011/07/25170
Ashton CoxJunior Technical AuthorSan Francisco662009/01/1286
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29433
Airi SatouAccountantTokyo332008/11/28162
Brielle WilliamsonIntegration SpecialistNew York612012/12/02372
Herrod ChandlerSales AssistantSan Francisco592012/08/06137
Rhona DavidsonIntegration SpecialistTokyo552010/10/14327
Colleen HurstJavascript DeveloperSan Francisco392009/09/15205
Sonya FrostSoftware EngineerEdinburgh232008/12/13103

Rows per page:

10
1 - 10 of 57

Background color

Border color:

Loader color:

Via JavaScript

new Datatable(element, data, { })
.white {
  background-color: #FFF!important;
}

.blue-grey {
  background-color: #ECEFF1!important;
}

.light-blue {
  background-color: #E3F2FD!important;
}

.deep-purple {
  background-color: #EDE7F6!important;
}

.grey {
  background-color: #EEEEEE!important;
}

.dark {
  background-color: #212121!important;
}

.blue-grey-dark {
  background-color: #37474F!important;
}

.teal-dark {
  background-color: #004D40!important;
}

.deep-purple-dark {
  background-color: #4527A0!important;
}

.grey-dark {
  background-color: #424242!important;
}

Via data attributes

<div class="datatable" data-mdb-datatable-init></div>
.white {
  background-color: #FFF!important;
}

.blue-grey {
  background-color: #ECEFF1!important;
}

.light-blue {
  background-color: #E3F2FD!important;
}

.deep-purple {
  background-color: #EDE7F6!important;
}

.grey {
  background-color: #EEEEEE!important;
}

.dark {
  background-color: #212121!important;
}

.blue-grey-dark {
  background-color: #37474F!important;
}

.teal-dark {
  background-color: #004D40!important;
}

.deep-purple-dark {
  background-color: #4527A0!important;
}

.grey-dark {
  background-color: #424242!important;
}