extends ../../layouts/LayoutComponent
include ../../mixins/tables/Tables

append variables
  -
    var pageHeader = {
      title: 'Tables',
      description: 'Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/content/tables/`,
      linkText: 'Tables on Bootstrap',
    }
    var rightNav = [
      {
        name: 'Overview',
        id: '#overview',
      },
      {
        name: 'Variants',
        id: '#variants',
      },
      {
        name: 'Accented tables',
        id: '#accented-tables',
        subItem: [
          {
            name: 'Striped rows',
            id: '#striped-rows',
          },
          {
            name: 'Hoverable rows',
            id: '#hoverable-rows',
          },
          {
            name: 'Active tables',
            id: '#active-tables',
          },
        ]
      },
      {
        name: 'Table Borders',
        id: '#table-borders',
        subItem: [
          {
            name: 'Bordered tables',
            id: '#bordered-tables',
          },
          {
            name: 'Table without borders',
            id: '#table-without-borders'
          }
        ]
      },
      {
        name: 'Small Tables',
        id: '#small-tables'
      },
      {
        name: 'Responsive Tables',
        id: '#responsive-tables',
        subItem: [
          {
            name: 'Always responsive',
            id: '#always-responsive',
          },
          {
            name: 'Breakpoint specific',
            id: '#breakpoint-specific'
          }
        ]
      }
    ]

block component
  .mb-9
    +ComponentCard({
      title: 'Overview',
      anchor: true,
      description: 'Due to the widespread use of <code>&lt;table&gt;</code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code>&lt;table&gt;</code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.'
    }).my-5
      +TableOverview

    +ComponentCard({
      title: 'Variants',
      anchor: true,
      description: 'Use contextual classes to color tables, table rows or individual cells.',
    }).my-5
      +TableVariants

    h2.mt-6(data-anchor) Accented tables

    +ComponentCard({
      title: 'Striped rows',
      anchor: true,
      description: 'Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>. <code>.table-striped</code> also works in table variants',
    }).my-5
      +Table.table-striped

      h4.mt-4.mb-3.text-body-secondary Table Dark
      +Table.table-striped.table-dark

      h4.mt-4.mb-3.text-body-secondary Table Success
      +Table.table-striped.table-success

    +ComponentCard({
      title: 'Hoverable rows',
      anchor: true,
      description: 'Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>. These hoverable rows can also be worked with <code>.table-dark</code> and combined with the striped variant.',
    }).my-5
      +Table.table-hover
      h4.mt-4.mb-3.text-body-secondary Table Dark
      +Table.table-hover.table-dark
      h4.mt-4.mb-3.text-body-secondary Table striped
      +Table.table-hover.table-striped

    +ComponentCard({
      title: 'Active tables',
      anchor: true,
      description: 'Highlight a table row or cell by adding a <code>.table-active</code> class.',
    }).my-5
      +TableActive

    h2.mt-6(data-anchor) Table Borders

    +ComponentCard({
      title: 'Bordered tables',
      anchor: true,
      description: 'Add <code>.table-bordered</code> for borders on all sides of the table and cells. <a href="/modules/utilities/borders.html#border-color">Border color utilities</a> can be added to change colors.',
    }).my-5
      +Table.table-bordered
      h4.mt-4.mb-3.text-body-secondary Border utility class
      +Table.table-bordered.border-primary

    +ComponentCard({
      title: 'Table without borders',
      anchor: true,
      description: 'Add <code>.table-borderless</code> for a table without borders.',
    }).my-5
      +Table.table-borderless

      h4.mt-4.mb-3.text-body-secondary Table Dark
      +Table.table.table-dark.table-borderless

    +ComponentCard({
      title: 'Small Tables',
      anchor: true,
      description: 'Add <code>.table-sm</code> to make any <code>.table</code> more compact by cutting all cell <code>padding</code> in half.',
    }).my-5
      +Table.table-sm

    h2(data-anchor) Responsive Tables 
    p Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a 
      code .table
      |  with 
      code .table-responsive
      | . Or, pick a maximum breakpoint with which to have a responsive table up to by using 
      code .table-responsive{-sm|-md|-lg|-xl|-xxl}
      |.


    +ComponentCard({
      title: 'Always responsive',
      anchor: true,
      description: 'Across every breakpoint, use <code>.table-responsive</code> for horizontally scrolling tables.',
    }).my-5
      .table-responsive.scrollbar
        +Table

    +ComponentCard({
      title: 'Breakpoint specific',
      anchor: true,
      description: 'Use <code>.table-responsive{-sm|-md|-lg|-xl|-xxl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.',
    }).my-5
      .table-responsive.table-reponsive-sm.scrollbar
        +Table