- var theme_customizer      = true;
- var jsgrid                = true;
- var sidebar               = true;
- var scrollbar             = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                      | JS Grid Tables
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Tables
                                      li.breadcrumb-item.active JS Grid Tables
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Basic Scenario
                              span
                                | Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
                            .card-body
                              #basicScenario
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Sorting Scenario
                              span
                                | Sorting can be done not only with column header interaction, but also with sort method.
                            .card-body
                              .sort-panel.mb-3
                                label
                                  | Sorting Field:
                                  select#sortingField.btn.btn-primary.dropdown-toggle.btn-sm
                                    option Name
                                    option Age
                                    option Address
                                    option Country
                                    option Married
                                .d-inline
                                  button#sort.btn.btn-sm.btn-secondary(type='button') Sort
                              #sorting-table.js-shorting
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Batch Delete
                              span
                                | Cell content of every column can be customized with itemTemplate, headerTemplate, filterTemplate and insertTemplate functions specified in field config. This example shows how to implement batch deleting with custom field for selecting items.
                            .card-body
                              #batchDelete
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files