Exzeitable v0.1.1 Exzeitable.HTML View Source

You will need to add styling for the form, I attempted to make the classes as unopiniated as possible.

Below is a SASS example for Bootstrap 4

// #############################
// ########### TABLE ###########
// #############################

// div around the table
.lt-table-wrapper {
  @extend .table-responsive;
}

// the table
.lt-table {
  @extend .table;
  thead {
    @extend .thead-dark;
  }
}

// div around lt-pagination-div and lt-search-div
.lt-row {
  @extend .row;
}

// #############################
// ########### SEARCH ##########
// #############################

// div around the search box
.lt-search-wrapper {
  @extend .col-xl-6;
}

//The search form (I don't need this)
// .lt-search-form {

// }

.lt-search-field {
  @extend .form-control;
  @extend .mb-1;
}

.lt-search-field-wrapper {
  @extend .input-group-append;
}

.lt-counter-field {
  @extend .input-group-text;
}

.lt-counter-field-wrapper {
  @extend .input-group-append;
  @extend .mb-1;
}

// #############################
// ######## PAGINATION #########
// #############################

// div around the pagination nav
.lt-pagination-wrapper {
  @extend .col-xl-6;
}
// nav around pagination ul
.lt-pagination-nav {
  @extend .mt-1;
  @extend .mt-xl-0;
}

// ul around pagination li
.lt-pagination-ul {
  @extend .pagination;
  @extend .pagination-sm;
}

// li around pagination links
.lt-pagination-li {
  @extend .page-item;
}

// li around pagination links when active
.lt-pagination-li-active {
  @extend .page-item;
  @extend .active;
  color: white;
}

// li around pagination links when disabled
.lt-pagination-li-disabled {
  @extend .page-item;
  @extend .disabled;
}

// Base class for pagination link
.lt-pagination-a {
  @extend .page-link;
  @extend .text-center;
  @extend .mt-1;
}

// Fixed width for pagination link with number
.lt-pagination-width {
  width: 50px;
}

// #############################
// ####### Header Links ########
// #############################


// Hide link
.lt-hide-link {
  @extend .mx-1;
  @extend .small;
  cursor: pointer;
}

// Sort link
.lt-sort-link {
  @extend .mx-1;
  @extend .small;
  cursor: pointer;
}

// Buttons for showing hidden columns
.lt-show-button {
  @extend .btn;
  @extend .btn-sm;
  @extend .btn-outline-secondary;
  @extend .m-1;
  cursor: pointer;
}
  // #############################
  // ###### Action Buttons #######
  // #############################

.lt-action-delete {
  @extend .btn;
  @extend .btn-sm;
  @extend .my-1;
  @extend .mr-1;
  @extend .btn-outline-danger;
}

.lt-action-new {
  @extend .btn;
  @extend .btn-sm;
  @extend .my-1;
  @extend .mr-1;
  @extend .btn-outline-primary;
}

.lt-action-show {
  @extend .btn;
  @extend .btn-sm;
  @extend .my-1;
  @extend .mr-1;
  @extend .btn-outline-primary;
}

.lt-action-edit {
  @extend .btn;
  @extend .btn-sm;
  @extend .my-1;
  @extend .mr-1;
  @extend .btn-outline-info;
}

Link to this section Summary

Link to this section Functions

Link to this function

build_table(assigns)

View Source
build_table(map()) :: {:safe, iolist()}