View Source CSS
You will need to add styling for the form, I attempted to make the classes as unopinionated as possible.
Below is a SASS example for Bootstrap 4
// #############################
// ########### TABLE ###########
// #############################
// div around the table
.exz-table-wrapper {
@extend .table-responsive;
}
// the table
.exz-table {
@extend .table;
thead {
@extend .thead-dark;
}
}
// div around exz-pagination-div and exz-search-div
.exz-row {
@extend .row;
}
.exz-nothing-found {
@extend .text-center
}
// #############################
// ########### SEARCH ##########
// #############################
// div around the search box
.exz-search-wrapper {
@extend .col-xl-6;
}
//The search form (I don't need this)
// .exz-search-form {
// }
.exz-search-field {
@extend .form-control;
@extend .mb-1;
}
.exz-search-field-wrapper {
@extend .input-group;
}
.exz-counter-field {
@extend .input-group-text;
}
.exz-counter-field-wrapper {
@extend .input-group-append;
@extend .mb-1;
}
// #############################
// ######## PAGINATION #########
// #############################
// div around the pagination nav
.exz-pagination-wrapper {
@extend .col-xl-6;
}
// nav around pagination ul
.exz-pagination-nav {
@extend .mt-1;
@extend .mt-xl-0;
}
// ul around pagination li
.exz-pagination-ul {
@extend .pagination;
@extend .pagination-sm;
}
// li around pagination links
.exz-pagination-li {
@extend .page-item;
}
// li around pagination links when active
.exz-pagination-li-active {
@extend .page-item;
@extend .active;
color: white;
}
// li around pagination links when disabled
.exz-pagination-li-disabled {
@extend .page-item;
@extend .disabled;
}
// Base class for pagination link
.exz-pagination-a {
@extend .page-link;
@extend .text-center;
@extend .mt-1;
}
// Fixed width for pagination link with number
.exz-pagination-width {
width: 50px;
}
// #############################
// ####### Header Links ########
// #############################
// Hide link
.exz-hide-link {
@extend .mx-1;
@extend .small;
cursor: grabbing;
}
// Sort link
.exz-sort-link {
@extend .mx-1;
@extend .small;
cursor: grabbing;
}
// Buttons for showing hidden columns
.exz-show-button {
@extend .btn;
@extend .btn-sm;
@extend .btn-outline-secondary;
@extend .m-1;
cursor: grabbing;
}
// Buttons for showing hidden columns
.exz-info-button {
@extend .btn;
@extend .btn-sm;
@extend .btn-outline-info;
@extend .m-1;
cursor: grabbing;
}
// #############################
// ###### Action Buttons #######
// #############################
.exz-action-delete {
@extend .btn;
@extend .btn-sm;
@extend .my-1;
@extend .mr-1;
@extend .btn-outline-danger;
}
.exz-action-new {
@extend .btn;
@extend .btn-sm;
@extend .my-1;
@extend .mr-1;
@extend .btn-outline-primary;
}
.exz-action-show {
@extend .btn;
@extend .btn-sm;
@extend .my-1;
@extend .mr-1;
@extend .btn-outline-primary;
}
.exz-action-edit {
@extend .btn;
@extend .btn-sm;
@extend .my-1;
@extend .mr-1;
@extend .btn-outline-info;
}