- var theme_customizer      = true;
- var jsgrid                = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h3
                    | JS Grid Tables

                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Tables
                    li.breadcrumb-item.active  JS Grid Tables
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header.pb-0
                    h3.mb-3 Basic Scenario
                    span
                      | Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
                  .card-body
                    #basicScenario.basic_table
              .col-sm-12
                .card
                  .card-header.pb-0
                    h3.mb-3 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-md.pe-5
                          option Id
                          option Product
                          option Order Id
                          option Price
                          option Quantity
                          option Shipped
                          option Total
                      .d-inline
                        button#sort.btn.btn-md.btn-secondary(type='button') Sort
                    #sorting-table.js-shorting
              .col-sm-12
                .card
                  .card-header.pb-0
                    h3.mb-3 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