Cartzilla Docs

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: 18rem;">
    <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>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla

Tables

Basic example

Search and sort

Dark table

Striped rows

Striped columns

Bordered table

Table without borders

Hoverable rows

Contextual colors

Color borders