Ngx-datatable: how can i apply bootstrap table theme to ngx-datatable ??

[kfaiad]

i using ngx-datatable but i need to using bootstrap theme ( classes ) and i searched a lot and cant find the way to apply bootstrap classes to ngx-datatable could you help me please ??

[adammedford]

Taken literally, what you're asking for isn't possible. What you (or someone else) can do, however, is write a stylesheet using excerpts from bootstrap around ngx-datatable's themeing framework. I've done it; its pretty simple since all you really care about is padding, backgrounds and font weights.

https://swimlane.gitbooks.io/ngx-datatable/content/introduction/themes.html

FYI: I'm not affiliated with this project.

[adammedford]

To give you an example. A bootstrap 3 header cell might look like

.datatable-header-cell {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
padding: 8px;
line-height: 1.42857143;
font-weight: bold;
color: rgb(51, 51, 51);
}

[amcdnl]

Please fill out the form in the future.

In order to apply bootstrap styles, you just need to create a new theme for bootstrap. Checkout material theme for direction.

[kfaiad]

@adammedford Thanks for your help that is what i will done in the project create a bootstrap style sheet for the table :+1:

@amcdnl could you be more clear i don't understand what you mean in your reply

[borislitvak]

@kfaiad Could you please share it with us?

[agil-NUBBA]

there goes my aproach, about 20 minutes (took dark as start point), hope you find usefull and keep improving it.

```css
.ngx-datatable.bootstrap {
box-shadow: none;
font-size: 13px;
}
.ngx-datatable.bootstrap .datatable-header {
height: unset !important;
}
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
vertical-align: bottom;
padding: 0.75rem;
border-bottom: 1px solid #d1d4d7;
}
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
line-height: 24px;
}
.ngx-datatable.bootstrap .datatable-body {

}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #d1d4d7;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
background-color: rgba(0, 0, 0, 0.05);
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
vertical-align: top;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
background-color: #1483ff;
color: #FFF;
}
.ngx-datatable.bootstrap .datatable-footer {
background: #424242;
color: #ededed;
margin-top: -1px;
}
.ngx-datatable.bootstrap .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager {
margin: 0 10px;
vertical-align: top;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
margin: 10px 0px;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #545454;
font-weight: bold;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0;
border-radius: 3px;
margin: 0 3px;
text-align: center;
vertical-align: top;
text-decoration: none;
vertical-align: bottom;
color: #ededed;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 18px;
line-height: 27px;
padding: 0 3px;
}
```

[Adondriel]

I shrunk the above style down into an SCSS format

/*
bootstrap table theme
*/

.ngx-datatable.bootstrap {
  box-shadow: none;
  font-size: 13px;
  .datatable-header {
    height: unset !important;
    .datatable-header-cell {
      vertical-align: bottom;
      padding: 0.75rem;
      border-bottom: 1px solid #d1d4d7;
      .datatable-header-cell-label {
        line-height: 24px;
      }
    }
  }
  .datatable-body {
    .datatable-body-row {
      padding: 0.75rem;
      vertical-align: top;
      border-top: 1px solid #d1d4d7;
      &.datatable-row-even {
        background-color: rgba(0, 0, 0, 0.05);
      }
      &.active {
        background-color: #1483ff;
        color: #FFF;
      }
      .datatable-body-cell {
        text-align: left;
        vertical-align: top;
      }
    }
  }
  .datatable-footer {
    background: #424242;
    color: #ededed;
    margin-top: -1px;
    .page-count {
      line-height: 50px;
      height: 50px;
      padding: 0 1.2rem;
    }
    .datatable-pager {
      margin: 0 10px;
      vertical-align: top;
      ul {
        li {
          margin: 10px 0px;
          &:not(.disabled) {
            &.active,
            &:hover {
              a {
                background-color: #545454;
                font-weight: bold;
              }
            }
          }
        }
      }
      a {
        height: 22px;
        min-width: 24px;
        line-height: 22px;
        padding: 0;
        border-radius: 3px;
        margin: 0 3px;
        text-align: center;
        vertical-align: top;
        text-decoration: none;
        vertical-align: bottom;
        color: #ededed;
      }
      .datatable-icon-left,
      .datatable-icon-skip,
      .datatable-icon-right,
      .datatable-icon-prev {
        font-size: 18px;
        line-height: 27px;
        padding: 0 3px;
      }
    }
  }
}

[tokuduzcc]

@Adondriel
Thanks for you effort but i got hard time applying that theme. I put scss, compile into css and apply to ngx-datatable like this
<ngx-datatable class="bootstrap"

And nothing happened, any help appreciated.

EDIT

I got it, i didn't include it in preloader.css. Thank you for theme one more time !

[FrancescoBorzi]

@amcdnl it would be nice if we can include a bootstrap theme in the official repository

[amcdnl]

If you want to PR a theme for it, I'll be happy to add it.

[FrancescoBorzi]

@agil-NUBBA @Adondriel can you please send a PR with your theme ?

[psenechal]

Just wanted to add that you can actually map classes if you're using SASS. Here's a basic example below that maps the high level table styles so that it picks up whatever Bootstrap has styled those elements with. By doing this, you don't have to rewrite the Bootstrap styles if they change between alpha, beta, and final. Some of the styles had to be manually overwritten with styles because of how Bootstrap structures the classes, but the bulk of it can be done using @extend.

.ngx-datatable.bootstrap {
    @extend .table;
    .datatable-header {
        @extend thead;
        .datatable-header-inner {
            @extend tr;
            .datatable-header-cell {
                @extend th;
                .datatable-icon-up {
                    @extend .fa;
                    @extend .fa-angle-up;
                    @extend .align-text-top;
                }
                .datatable-icon-down {
                    @extend .fa;
                    @extend .fa-angle-down;
                    @extend .align-text-bottom;
                }
            }
        }
    }
    .datatable-body {
        @extend tbody;
        .datatable-body-row {
            @extend tr;
            .datatable-body-cell {
                @extend td;
            }
        }
    }
    .datatable-footer {
        @extend tfoot;
        .datatable-footer-inner {
            .page-count {
                @extend .col;
            }
            .datatable-pager {
                @extend .col;
                ul {
                    @extend .pagination;
                    float: right;
                    li {
                        a {
                            @extend .page-link;
                            padding: 0.5rem 1rem;
                            border-radius: 0;
                            i {
                                &.datatable-icon-prev {
                                    @extend .fa;
                                    @extend .fa-angle-double-left;
                                }
                                &.datatable-icon-left {
                                    @extend .fa;
                                    @extend .fa-angle-left;
                                }
                                &.datatable-icon-right {
                                    @extend .fa;
                                    @extend .fa-angle-right;
                                }
                                &.datatable-icon-skip {
                                    @extend .fa;
                                    @extend .fa-angle-double-right;
                                }
                            }
                        }
                        &.active {
                            a {
                                z-index: 2;
                                color: $pagination-active-color;
                                background-color: $pagination-active-bg;
                                border-color: $pagination-active-border-color;
                            }
                        }
                        &.disabled {
                            a {
                                color: $pagination-disabled-color;
                                pointer-events: none;
                                background-color: $pagination-disabled-bg;
                                border-color: $pagination-disabled-border-color;
                            }
                        }
                        &:first-child {
                            a {
                                margin-left: 0;
                                @include border-left-radius($border-radius);
                            }
                        }
                        &:last-child {
                            a {
                                @include border-right-radius($border-radius);
                            }
                        }
                    }
                }
            }
        }
    }
    &.table-striped {
        @extend .table-striped;
        .datatable-body {
            .datatable-body-row::nth-of-type(odd) {
                background-color: $table-accent-bg;
            }
        }
    }
    &.table-hover {
        @extend .table-hover;
        .datatable-body {
            .datatable-body-row {
                @include hover {
                    background-color: $table-hover-bg;
                }
            }
        }
    }
    &.table-bordered {
        @extend .table-bordered;
    }
}