- var page_Title = 'Table Components';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Table Components
                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 Bootstrap Tables
                    li.breadcrumb-item.active Table Components
          // Container-fluid starts                    
          .container
            // Table Row Starts
            .grid.grid-cols-12.card-gap.table-components
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 UI Components
                  div
                    .carblock.grid.grid-cols-12.ui-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered
                            tbody
                              tr
                                td Button
                                td.w-50
                                  button.btn.text-white.btn-primary Default Button
                                td
                                  span
                                    | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
                              tr
                                td Round Buttons
                                td
                                  button.btn.text-white.btn-pill.btn-primary Default Button
                                td
                                  span
                                    | Use 
                                    code .btn-pill
                                    |  class to button for round buttons.
                              tr
                                td Button Dropdowns
                                td
                                  .dropdown
                                    button.btn.text-white.btn-primary.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Primary
                                    .dropdown-menu.dropdown-block
                                      h6.dropdown-header(class="p-2") Dropdown Header
                                      a.dropdown-item(href='#' class="!block") Action
                                      a.dropdown-item(href='#' class="!block") Another action
                                      a.dropdown-item(href='#' class="!block") Something else here
                                      .dropdown-divider
                                      a.dropdown-item(href='#' class="!block") Separated link
                                td
                                  span
                                    | Use 
                                    code .dropdown-toggle
                                    |  class to button for dropdown-toggle.
                              tr
                                td Basic Button Group
                                td
                                  .btn-group
                                    button.btn.text-white.btn-primary(class="!rounded-l-md !rounded-none") Primary
                                    button.btn.text-white.btn-secondary(class="!rounded-none") Secondary
                                    button.btn.text-white.btn-success(class="!rounded-r-md !rounded-none") Success
                                td
                                  span
                                    | Use 
                                    code btn-group
                                    |  class to button for 
                                    code div
                                    | .
                              tr
                                td Buttons with Icon
                                td
                                  button.btn.text-white.btn-primary
                                    i.fa-solid.fa-circle-info
                                    |  Primary
                                td
                                  span
                                    | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
                              tr
                                td Icon Button
                                td
                                  button.btn.text-white.btn-primary
                                    i.fa-solid.fa-camera
                                td
                                  span Simple icon button
                              tr
                                td Loading Buttons
                                td
                                  button.btn.text-white.btn-primary
                                    i.fa-solid.fa-spin.fa-spinner.me-2
                                    | Expand UP
                                td
                                  span Expand animation buttons
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Alerts
                  div
                    .carblock.grid.grid-cols-12.alert-card-block
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered
                            tbody
                              tr
                                td Basic Alert
                                td.w-50
                                  .alert.alert-primary
                                    p.txt-light(class="[@media(max-width:767px)]:line-clamp-[1]")
                                      strong Success!
                                      |  Indicates a successful or positive action.
                                td
                                  p
                                    span
                                      | Alerts are available for any length of text, as well as an optional dismiss button. Add 
                                      code  alert alert-primary
                                      | ,
                                      code  alert alert-secondary
                                      | ,
                                      code  alert alert-success
                                      | ,
                                      code  alert alert-info
                                      |  classes for alert with all theme colors.
                              tr
                                td Alerts with Links
                                td
                                  .alert.alert-primary
                                    p.txt-light(class="[@media(max-width:767px)]:line-clamp-[1]")
                                      strong Success!
                                      |  You should 
                                      a.alert-link.txt-light(href='#') read this message
                                      | .
                                td
                                  p
                                    span
                                      | Alerts are available for any length of text, as well as an optional dismiss button. Add 
                                      code  alert alert-primary
                                      | ,
                                      code  alert alert-secondary
                                      | ,
                                      code  alert alert-success
                                      | ,
                                      code  alert alert-info
                                      |  classes for alert with all theme colors.
                              tr
                                td Dismissible Alerts
                                td
                                  .alert.alert-secondary.alert-dismissible.fade.show(role='alert')
                                    p.txt-light(class="[@media(max-width:767px)]:line-clamp-[1]")
                                      strong Holy !
                                      |  You can check in on some of those fields below.
                                    button.btn.text-white-close(type='button', data-bs-dismiss='alert', aria-label='Close')
                                td
                                  span
                                    | Add a dismiss button and the
                                    code  alert alert-dismissable
                                    |  class, which adds extra padding to the right of the alert and positions the 
                                    code close 
                                    | a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the
                                    code a 
                                    | element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
                              tr
                                td Alerts with Icons
                                td
                                  .alert.alert-primary.alert-dismissible.fade.show(role='alert')
                                    i.icofont.icofont-heart-alt
                                    p.txt-light(class="[@media(max-width:767px)]:line-clamp-[1]")
                                      | Good Morning! Start your day with some alerts.
                                    button.btn.text-white-close(type='button', data-bs-dismiss='alert', aria-label='Close')
                                td
                                  span
                                    | Add a dismiss button and the
                                    code  alert alert-dismissable 
                                    | class, which adds extra padding to the right of the alert and positions the 
                                    code close 
                                    | a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the 
                                    code a 
                                    | element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Progressbar
                  div
                    .carblock.grid.grid-cols-12.progress-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered.checkbox-td-width
                            tbody
                              tr
                                td Default Progress
                                td.w-50
                                  .progress
                                    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                td
                                  span
                                    | Uses a progress bar with class 
                                    code progress-bar
                                    |  and background color 
                                    code bg-primary, bg-secondary 
                                    | also change
                              tr
                                td Striped Progress 
                                td
                                  .progress
                                    .progress-bar.progress-bar-striped.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                td
                                  span
                                    | Uses a gradient to create a striped effect class.
                                    code  progress-bar-striped
                              tr
                                td Progress Sizes
                                td
                                  .progress.lg-progress-bar
                                    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                td
                                  span
                                    | Different sized progress. For Default progress, class need 
                                    code lg-progress-bar 
                                    | on div.
              // CHECKBOXES Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Checkbox
                  div
                    .carblock.grid.grid-cols-12.checkbox-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered.checkbox-td-width
                            tbody
                              tr
                                td Basic Checkbox
                                td.w-50
                                  .flex.gap-2
                                    input#checkbox1(type='checkbox')
                                    label.mb-0(for='checkbox1') Default
                                td
                                  span Basic Checkbox
                              tr
                                td Default Checkbox Squar
                                td
                                  .checkbox.m-squar
                                    input#checkbox3(type='checkbox')
                                    label(for='checkbox3') Default
                                td
                                  span
                                    | Wrap with use 
                                    code .m-squar
                                    |  checkbox.
                              tr
                                td Basic Skin Check
                                td
                                  .checkbox.checkbox-dark
                                    input#checkbox-state-dark(type='checkbox')
                                    label(for='checkbox-state-dark') Brand state
                                td
                                  span
                                    | Wrap with use
                                    code  checkbox-dark
                                    |  for this style of checkbox.
                              tr
                                td Flat Skin Check
                                td
                                  .checkbox.checkbox-solid-primary
                                    input#solid6(type='checkbox', checked='')
                                    label(for='solid6') checked
                                td
                                  span
                                    | Wrap with use
                                    code  checkbox-solid-* 
                                    | ,
                                    code primary, secondary, success, info, warning, danger
                                    |  for this style of checkbox.
                              tr
                                td Disable Check
                                td
                                  .checkbox.checkbox-solid-primary
                                    input#solid2(type='checkbox', disabled='')
                                    label(for='solid2') Disabled
                                td
                                  span
                                    | Wrap with use
                                    code  disabled 
                                    | ,
                                    code primary, secondary, success, info, warning, danger
                                    |  for this style of checkbox disable.
                              tr
                                td Inline  Checkbox
                                td
                                  .form-group.m-b-0.m-checkbox-inline
                                    .checkbox.checkbox-primary
                                      input#inline-1(type='checkbox')
                                      label(for='inline-1') Option 1
                                    .checkbox.checkbox-secondary
                                      input#inline-2(type='checkbox')
                                      label(for='inline-2') Option 1
                                    .checkbox.checkbox-success
                                      input#inline-3(type='checkbox')
                                      label(for='inline-3') Option 1
                                td
                                  span
                                    | Wrap with use 
                                    code disabled 
                                    | ,
                                    code primary, secondary, success, info, warning, danger
                                    |  for this style of checkbox disable.
              // CHECKBOXES Row Ends
              // Radio Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Radio Buttons
                  div
                    .carblock.grid.grid-cols-12.radio-checkbox
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered.radio-first-col-width
                            tbody
                              tr
                                td Basic Radio Buttons
                                td.w-50
                                  .flex.gap-2
                                    input#radio(type='radio')
                                    label.mb-0(for='radio') Default radio
                                td
                                  span Basic Radio Buttons
                              tr
                                td Default Radio
                                td
                                  .radio.radio-primary
                                    input#radio1(type='radio', name='radio1', value='option1')
                                    label(for='radio1') Option 1
                                td
                                  span
                                    | Wrap with use 
                                    code .radio-*
                                    |  and color 
                                    code .radio-*
                                    code primary , secondary , success , info
                                    |  on Radio.
                              tr
                                td Checked Radio
                                td
                                  .radio.radio-primary
                                    input#radio44(type='radio', name='radio1', value='option1', checked='')
                                    label(for='radio44') Checked
                                td
                                  span
                                    | Wrap with use 
                                    code checkbox-dark 
                                    | for this style of checkbox.
                              tr
                                td Flat Skin Check
                                td
                                  .radio.radio-primary
                                    input#radio33(type='radio', name='radio1', value='option1', disabled='')
                                    label(for='radio33') Disabled
                                td
                                  span
                                    | Wrap with use 
                                    code checkbox-solid-* 
                                    | , 
                                    code primary, secondary, success, info, warning, danger
                                    | for this style of checkbox.
                              tr
                                td Inline  Checkbox
                                td
                                  .form-group.m-b-0.m-checkbox-inline
                                    .radio.radio-primary
                                      input#radioinline1(type='radio', name='radio1', value='option1')
                                      label(for='radioinline1') Option 1
                                    .radio.radio-secondary
                                      input#radioinline2(type='radio', name='radio1', value='option1')
                                      label(for='radioinline2') Option 1
                                    .radio.radio-success
                                      input#radioinline3(type='radio', name='radio1', value='option1')
                                      label(for='radioinline3') Option 1
                                td
                                  span
                                    | Wrap with use 
                                    code disabled 
                                    | , 
                                    code primary, secondary, success, info, warning, danger, light, dark 
                                    | for this style of checkbox disable.
              // Radio Row Ends
              // Select Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Select 
                  div
                    .carblock.grid.grid-cols-12.select-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered.checkbox-td-width
                            tbody
                              tr
                                td Single Select
                                td.w-50
                                  select#exampleFormControlSelect45.form-select
                                    option 1
                                    option 2
                                    option 3
                                    option 4
                                    option 5
                                td
                                  span Use for basic select control.
                              tr
                                td Disabled Select Mode
                                td
                                  select#exampleFormControlSelect4.form-select(disabled='')
                                    option 1
                                    option 2
                                    option 3
                                    option 4
                                    option 5
                                td
                                  span
                                    | Use for disabled select control add 
                                    code disabled
                                    | .
                              tr
                                td Large Select Mode
                                td
                                  select#exampleFormControlSelect1.form-select.form-control-lg.mb-10
                                    option 1
                                    option 2
                                    option 3
                                    option 4
                                    option 5
                                  select#exampleFormControlSelect3.form-select.form-control-sm.mt-5.mb-10
                                    option 1
                                    option 2
                                    option 3
                                    option 4
                                    option 5
                                td
                                  span
                                    | Use for large and small select control add class 
                                    code form-control-*
                                    code lg, sm
                                    | .
                              tr
                                td Example Multiple Select
                                td
                                  select#exampleFormControlSelect22.form-control.custom-scrollbar(multiple='')
                                    option 1
                                    option 2
                                    option 3
                                    option 4
                                    option 5
                                td
                                  span
                                    | Use for multi select control add code 
                                    code multiple 
                                    | on select.
              // Select Row Ends
              // Input Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Input
                  div
                    .carblock.grid.grid-cols-12.input-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered.checkbox-td-width
                            tbody
                              tr
                                td Default Input Text
                                td.w-50
                                  input#exampleFormControlInput1.form-control.input-primary(type='email', placeholder='Input text')
                                td
                                  span Use for basic select control.
                              tr
                                td Input Hover Color 
                                td.w-50
                                  input#exampleFormControlInput2.form-control(type='email', placeholder='Input text')
                                td
                                  span
                                    | Use for basic input color add class 
                                    code input-air-*
                                    code primary, secondary, success, info 
                                    | on input
              // Input Row Ends
              // Badges Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Badges
                  div
                    .carblock.grid.grid-cols-12.badge-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered
                            tbody
                              tr
                                td.pills-component Basic Pills
                                td.w-50
                                  span.badge.text-white.badge-primary Primary
                                td
                                  span
                                    | Use the 
                                    code .badge
                                    |  class, followed by. with badge color use class 
                                    code .badge-*
                                    code primary , secondary , success , info, warning, danger, light
                                    |   class within element to create default pill.
                              tr
                                td Label With Icon
                                td.m-5
                                  .badge.w-max.text-white.badge-primary.label-square
                                    i.fa-solid.fa-paperclip.fa-lg.me-1
                                    span.f-14 Primary Label
                                td
                                  span
                                    | Use the 
                                    code label-square
                                    |  class with 
                                    code div
              // Badges Row Ends
              // Tooltip  Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Tooltip Triggers
                  div
                    .carblock.grid.grid-cols-12.tooltip-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered
                            tbody
                              tr
                                td Hover
                                td.w-50
                                  button.btn.text-white.btn-primary(type='button', data-original-title='btn btn-link btn-lg', title='Hover') Primary
                                td
                                  span Use data-bs-toggle="tooltip" for hover trigger. This is a default trigger
                              tr
                                td Link
                                td.w-50
                                  a.btn.text-white.btn-primary(href='#', data-bs-toggle='tooltip', title='', role='button', data-original-title='Hooray!') Link
                                td
                                  span
                                    | Use  
                                    code a href="#"
                                    |  for link trigger. This is a link trigger
                              tr
                                td Outline Button
                                td.w-50
                                  button.btn.text-white.btn-outline-primary(type='button', data-original-title='btn btn-outline-danger-2x', title='') Primary
                                td
                                  span
                                    | Use  
                                    code btn btn-outline-info
                                    |  for outline trigger. and button bold Border use class 
                                    code btn btn-outline-dark-2x
              // Tooltip Row Ends
              // Switch Row Starts
              div(class="col-span-12")
                .card
                  .card-header.card-no-border
                    h5 Switch
                  div
                    .carblock.grid.grid-cols-12.switch-table
                      div(class="col-span-12")
                        .overflow-x-auto.custom-scrollbar
                          table.table.table-bordered
                            tbody
                              tr
                                td.pills-component Default Switch
                                td.w-50
                                  label.switch
                                    input(type='checkbox', checked='')
                                    span.switch-state
                                td
                                  span
                                    | Use class 
                                    code switch
                                    |  for label.
                              tr
                                td Disable Switch
                                td.w-50
                                  label.switch
                                    input(type='checkbox', disabled='')
                                    span.switch-state
                                td
                                  span
                                    | this disable switch 
                                    code disabled
                              tr
                                td Switch Color
                                td.w-50
                                  .grow.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-primary
                                td
                                  span
                                    | Use  class 
                                    code bg-*
                                    code Primary , Secondary , Success , Info , Warning , Danger 
                                    | in span with icon show switch 
                                    code icon-state 
                                    | on div.
                              tr
                                td Switch Outline
                                td.w-50
                                  .grow.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-primary
                                td
                                  span
                                    | Use  class 
                                    code switch-outline 
                                    | on div.
              // Switch Row Ends
              // Table Row Ends
              // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files   
