- var page_Title = 'Js Grid Table';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var jsgrid                = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | JS Grid Tables

                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    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
            .grid.grid-cols-12.card-gap
              .col-span-12
                .card
                  .card-header
                    h5 Basic Scenario
                    p.f-m-light.mt-1
                      | Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
                  .card-body
                    #basicScenario.basic_table
              .col-span-12
                .card.custom-sort-penal
                  .card-header
                    h5 Sorting Scenario
                    p.f-m-light.mt-1
                      | 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.b-r-0
                          option Id
                          option Product
                          option Order Id
                          option Price
                          option Quantity
                          option Shipped
                          option Total
                      .d-inline
                        button#sort.btn.btn-md.btn-secondary.b-r-0(type='button') Sort
                    #sorting-table.js-shorting
              .col-span-12
                .card
                  .card-header
                    h5 Batch Delete
                    p.f-m-light.mt-1 
                      | 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