Bootstrap docs

# Tables

Examples for opt-in styling of tables, alongside searching and sorting features.

The table search and sorting feature is enabled through the List.js plugin. To use this functionality, make sure to include the required reference to the plugin's `.js` file before the closing `</body>` tag and above `theme.min.js` reference in your document:

    <script src="assets/vendor/list.js/dist/list.min.js"></script>

#### Basic example

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88
4 | Jane | Birkins | Support | +3 774 28 50

    <!-- Basic responsive table -->
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Jane</td>
            <td>Birkins</td>
            <td>Support</td>
            <td class="text-nowrap">+3 774 28 50</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Search and sort

|  |  |  | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88
4 | Jane | Birkins | Support | +3 774 28 50
5 | Robert | Smith | Marketing | +3 623 87 19
6 | Emily | Johnson | Sales | +3 911 50 62
7 | Matthew | Brown | Analyst | +3 329 49 75
8 | Olivia | Davis | Finance | +3 146 91 27
9 | William | Garcia | Project Manager | +3 509 76 39
10 | Sophia | Adams | HR | +3 687 25 81

    <!-- Table with integrated search and sortable columns -->
    <div data-filter-list='{"searchClass": "table-search", "listClass": "table-list", "sortClass": "table-sort", "valueNames": ["order", "first-name", "last-name", "position", "phone"]}'>

      <!-- Search field -->
      <div class="position-relative mb-2" style="max-width: 280px">
        <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
        <input type="search" class="table-search form-control form-icon-start" placeholder="Search table">
      </div>

      <!-- Table with sticky header and sortable columns -->
      <div class="table-responsive overflow-auto" style="height: 300px;">
        <table class="table">
          <thead class="position-sticky top-0">
            <tr>
              <th scope="col">
                <button type="button" class="btn fs-base fw-semibold text-dark-emphasis table-sort p-0" data-sort="order">#</button>
              </th>
              <th scope="col">
                <button type="button" class="btn fs-base fw-semibold text-dark-emphasis table-sort p-0" data-sort="first-name">First</button>
              </th>
              <th scope="col">
                <button type="button" class="btn fs-base fw-semibold text-dark-emphasis table-sort p-0" data-sort="last-name">Last</button>
              </th>
              <th scope="col">
                <button type="button" class="btn fs-base fw-semibold text-dark-emphasis table-sort p-0" data-sort="position">Position</button>
              </th>
              <th scope="col">Phone</th>
            </tr>
          </thead>
          <tbody class="table-list">
            <tr>
              <th class="order" scope="row">1</th>
              <td class="first-name">John</td>
              <td class="last-name">Doe</td>
              <td class="position">CEO, Founder</td>
              <td class="phone text-nowrap">+3 555 68 70</td>
            </tr>
            <tr>
              <th class="order" scope="row">2</th>
              <td class="first-name">Anna</td>
              <td class="last-name">Cabana</td>
              <td class="position">Designer</td>
              <td class="phone text-nowrap">+3 434 65 93</td>
            </tr>
            <tr>
              <th class="order" scope="row">3</th>
              <td class="first-name">Kale</td>
              <td class="last-name">Thornton</td>
              <td class="position">Developer</td>
              <td class="phone text-nowrap">+3 285 42 88</td>
            </tr>
            <tr>
              <th class="order" scope="row">4</th>
              <td class="first-name">Jane</td>
              <td class="last-name">Birkins</td>
              <td class="position">Support</td>
              <td class="phone text-nowrap">+3 774 28 50</td>
            </tr>
            <tr>
              <th class="order" scope="row">5</th>
              <td class="first-name">Robert</td>
              <td class="last-name">Smith</td>
              <td class="position">Marketing</td>
              <td class="phone text-nowrap">+3 623 87 19</td>
            </tr>
            <tr>
              <th class="order" scope="row">6</th>
              <td class="first-name">Emily</td>
              <td class="last-name">Johnson</td>
              <td class="position">Sales</td>
              <td class="phone text-nowrap">+3 911 50 62</td>
            </tr>
            <tr>
              <th class="order" scope="row">7</th>
              <td class="first-name">Matthew</td>
              <td class="last-name">Brown</td>
              <td class="position">Analyst</td>
              <td class="phone text-nowrap">+3 329 49 75</td>
            </tr>
            <tr>
              <th class="order" scope="row">8</th>
              <td class="first-name">Olivia</td>
              <td class="last-name">Davis</td>
              <td class="position">Finance</td>
              <td class="phone text-nowrap">+3 146 91 27</td>
            </tr>
            <tr>
              <th class="order" scope="row">9</th>
              <td class="first-name">William</td>
              <td class="last-name">Garcia</td>
              <td class="position">Project Manager</td>
              <td class="phone text-nowrap">+3 509 76 39</td>
            </tr>
            <tr>
              <th class="order" scope="row">10</th>
              <td class="first-name">Sophia</td>
              <td class="last-name">Adams</td>
              <td class="position">HR</td>
              <td class="phone text-nowrap">+3 687 25 81</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

#### Dark table

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88
4 | Jane | Birkins | Support | +3 774 28 50

    <!-- Dark table example -->
    <div class="table-responsive">
      <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Jane</td>
            <td>Birkins</td>
            <td>Support</td>
            <td class="text-nowrap">+3 774 28 50</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Striped rows

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

    <!-- Table with striped rows -->
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dark table with striped rows -->
    <div class="table-responsive">
      <table class="table table-striped table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Striped columns

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

    <!-- Table with striped columns -->
    <div class="table-responsive">
      <table class="table table-striped-columns">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dark table with striped columns -->
    <div class="table-responsive">
      <table class="table table-striped-columns table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Bordered table

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

    <!-- Bordered table -->
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dark bordered table -->
    <div class="table-responsive">
      <table class="table table-bordered table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Table without borders

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

    <!-- Table without borders -->
    <div class="table-responsive">
      <table class="table table-borderless">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dark table without borders -->
    <div class="table-responsive">
      <table class="table table-borderless table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Hoverable rows

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93
3 | Kale | Thornton | Developer | +3 285 42 88

    <!-- Table with hoverable rows -->
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dark table with hoverable rows -->
    <div class="table-responsive">
      <table class="table table-hover table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Position</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td class="text-nowrap">+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td class="text-nowrap">+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td class="text-nowrap">+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Contextual colors

# | Class | Heading | Heading
--- | --- | --- | ---
1 | Primary | Column content | Column content
2 | Secondary | Column content | Column content
3 | Success | Column content | Column content
4 | Info | Column content | Column content
5 | Warning | Column content | Column content
6 | Danger | Column content | Column content
7 | Light | Column content | Column content
8 | Dark | Column content | Column content

    <!-- Use bg-{color}-subtle classes to color tables. Make sure to disable default table backdound color first -->
    <div class="table-responsive">
      <table class="table" style="--cz-table-bg: transparent;">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Class</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-primary-subtle">
            <th scope="row">1</th>
            <td>Primary</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-secondary-subtle">
            <th scope="row">2</th>
            <td>Secondary</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-success-subtle">
            <th scope="row">3</th>
            <td>Success</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-info-subtle">
            <th scope="row">4</th>
            <td>Info</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-warning-subtle">
            <th scope="row">5</th>
            <td>Warning</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-danger-subtle">
            <th scope="row">6</th>
            <td>Danger</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-light-subtle">
            <th scope="row">7</th>
            <td>Light</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="bg-dark-subtle">
            <th scope="row">8</th>
            <td>Dark</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Color borders

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93

# | First | Last | Position | Phone
--- | --- | --- | --- | ---
1 | John | Doe | CEO, Founder | +3 555 68 70
2 | Anna | Cabana | Designer | +3 434 65 93

    <!-- Color borders on tables -->
    <table class="table table-bordered border-info">
      ...
    </table>
    <table class="table table-bordered border-primary">
      ...
    </table>

Top