### Tables

Documentation and examples for opt-in styling of tables with Falcon.

Tables on Bootstrap

##### Basic Table

Using the most basic table markup, here’s how `.table` based tables look in Bootstrap.

Name | Email | Actions
--- | --- | ---
Ricky Antony | ricky@example.com |
Emma Watson | emma@example.com |
Rowen Atkinson | rown@example.com |
Antony Hopkins | antony@example.com |
Jennifer Schramm | jennifer@example.com |

    <div class="table-responsive scrollbar">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th class="text-end" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ricky Antony</td>
            <td>ricky@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Emma Watson</td>
            <td>emma@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Rowen Atkinson</td>
            <td>rown@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Antony Hopkins</td>
            <td>antony@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Jennifer Schramm</td>
            <td>jennifer@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

##### Striped

Use `.table-striped` to add zebra-striping to any table row within the `tbody`.

Name | Email | Actions
--- | --- | ---
Ricky Antony | ricky@example.com |
Emma Watson | emma@example.com |
Rowen Atkinson | rown@example.com |
Antony Hopkins | antony@example.com |
Jennifer Schramm | jennifer@example.com |

    <div class="table-responsive scrollbar">
      <table class="table table-striped overflow-hidden">
        <thead>
          <tr class="btn-reveal-trigger">
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th class="text-end" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="btn-reveal-trigger">
            <td>Ricky Antony</td>
            <td>ricky@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Emma Watson</td>
            <td>emma@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Rowen Atkinson</td>
            <td>rown@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Antony Hopkins</td>
            <td>antony@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Jennifer Schramm</td>
            <td>jennifer@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

##### Dark

Using the most basic table markup, here’s how `.table-dark` based tables look in Bootstrap.

Name | Email
--- | ---
Ricky Antony | ricky@example.com
Emma Watson | emma@example.com
Rowen Atkinson | rown@example.com
Antony Hopkins | antony@example.com
Jennifer Schramm | jennifer@example.com

    <table class="table table-dark">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ricky Antony</td>
          <td>ricky@example.com</td>
        </tr>
        <tr>
          <td>Emma Watson</td>
          <td>emma@example.com</td>
        </tr>
        <tr>
          <td>Rowen Atkinson</td>
          <td>rown@example.com</td>
        </tr>
        <tr>
          <td>Antony Hopkins</td>
          <td>antony@example.com</td>
        </tr>
        <tr>
          <td>Jennifer Schramm</td>
          <td>jennifer@example.com</td>
        </tr>
      </tbody>
    </table>

##### Hoverable Rows

Name | Email |  | joined
--- | --- | --- | ---
Ricky Antony | ricky@example.com |  | 30/03/2018
Emma Watson | emma@example.com |  | 11/07/2017
RA Rowen Atkinson | rown@example.com |  | 05/04/2016
Antony Hopkins | antony@example.com |  | 05/04/2018
Jennifer Schramm | jennifer@example.com |  | 17/03/2016

    <div class="table-responsive scrollbar">
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col"> </th>
            <th scope="col">joined</th>
          </tr>
        </thead>
        <tbody>
          <tr class="hover-actions-trigger">
            <td class="align-middle text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
                </div>
                <div class="ms-2">Ricky Antony</div>
              </div>
            </td>
            <td class="align-middle text-nowrap">ricky@example.com</td>
            <td class="w-auto">
              <div class="btn-group btn-group hover-actions end-0 me-4">
                <button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
                <button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
              </div>
            </td>
            <td class="align-middle text-nowrap">30/03/2018</td>
          </tr>
          <tr class="hover-actions-trigger">
            <td class="align-middle text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
                </div>
                <div class="ms-2">Emma Watson</div>
              </div>
            </td>
            <td class="align-middle text-nowrap">emma@example.com</td>
            <td class="w-auto">
              <div class="btn-group btn-group hover-actions end-0 me-4">
                <button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
                <button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
              </div>
            </td>
            <td class="align-middle text-nowrap">11/07/2017</td>
          </tr>
          <tr class="hover-actions-trigger">
            <td class="align-middle text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <div class="avatar-name rounded-circle"><span>RA</span></div>
                </div>
                <div class="ms-2">Rowen Atkinson</div>
              </div>
            </td>
            <td class="align-middle text-nowrap">rown@example.com</td>
            <td class="w-auto">
              <div class="btn-group btn-group hover-actions end-0 me-4">
                <button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
                <button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
              </div>
            </td>
            <td class="align-middle text-nowrap">05/04/2016</td>
          </tr>
          <tr class="hover-actions-trigger">
            <td class="align-middle text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
                </div>
                <div class="ms-2">Antony Hopkins</div>
              </div>
            </td>
            <td class="align-middle text-nowrap">antony@example.com</td>
            <td class="w-auto">
              <div class="btn-group btn-group hover-actions end-0 me-4">
                <button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
                <button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
              </div>
            </td>
            <td class="align-middle text-nowrap">05/04/2018</td>
          </tr>
          <tr class="hover-actions-trigger">
            <td class="align-middle text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
                </div>
                <div class="ms-2">Jennifer Schramm</div>
              </div>
            </td>
            <td class="align-middle text-nowrap">jennifer@example.com</td>
            <td class="w-auto">
              <div class="btn-group btn-group hover-actions end-0 me-4">
                <button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button>
                <button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button>
              </div>
            </td>
            <td class="align-middle text-nowrap">17/03/2016</td>
          </tr>
        </tbody>
      </table>
    </div>

##### Bordered tables

Add `.table-bordered` for borders on all sides of the table and cells.

Name | Email
--- | ---
Ricky Antony | ricky@example.com
Emma Watson | emma@example.com
Rowen Atkinson | rown@example.com
Antony Hopkins | antony@example.com
Jennifer Schramm | jennifer@example.com

    <table class="table table-bordered">
      <thead class="table-dark">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ricky Antony</td>
          <td>ricky@example.com</td>
        </tr>
        <tr>
          <td>Emma Watson</td>
          <td>emma@example.com</td>
        </tr>
        <tr>
          <td>Rowen Atkinson</td>
          <td>rown@example.com</td>
        </tr>
        <tr>
          <td>Antony Hopkins</td>
          <td>antony@example.com</td>
        </tr>
        <tr>
          <td>Jennifer Schramm</td>
          <td>jennifer@example.com</td>
        </tr>
      </tbody>
    </table>

##### Captions

List of Users
Name | Email
--- | ---
Ricky Antony | ricky@example.com
Emma Watson | emma@example.com
Rowen Atkinson | rown@example.com
Antony Hopkins | antony@example.com
Jennifer Schramm | jennifer@example.com

    <table class="table">
      <caption>List of Users</caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ricky Antony</td>
          <td>ricky@example.com</td>
        </tr>
        <tr>
          <td>Emma Watson</td>
          <td>emma@example.com</td>
        </tr>
        <tr>
          <td>Rowen Atkinson</td>
          <td>rown@example.com</td>
        </tr>
        <tr>
          <td>Antony Hopkins</td>
          <td>antony@example.com</td>
        </tr>
        <tr>
          <td>Jennifer Schramm</td>
          <td>jennifer@example.com</td>
        </tr>
      </tbody>
    </table>

##### Small Tables

Add `.table-sm` to make any `.table` more compact by cutting all cell padding in half.

Name | Email
--- | ---
Ricky Antony | ricky@example.com
Emma Watson | emma@example.com
Rowen Atkinson | rown@example.com
Antony Hopkins | antony@example.com
Jennifer Schramm | jennifer@example.com
Mizan Rifat | mizan@example.com
Tony Robbins | tony@example.com

    <table class="table table-sm">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ricky Antony</td>
          <td>ricky@example.com</td>
        </tr>
        <tr>
          <td>Emma Watson</td>
          <td>emma@example.com</td>
        </tr>
        <tr>
          <td>Rowen Atkinson</td>
          <td>rown@example.com</td>
        </tr>
        <tr>
          <td>Antony Hopkins</td>
          <td>antony@example.com</td>
        </tr>
        <tr>
          <td>Jennifer Schramm</td>
          <td>jennifer@example.com</td>
        </tr>
        <tr>
          <td>Mizan Rifat</td>
          <td>mizan@example.com</td>
        </tr>
        <tr>
          <td>Tony Robbins</td>
          <td>tony@example.com</td>
        </tr>
      </tbody>
    </table>

##### Highlight Column

Name | Email | Actions
--- | --- | ---
Ricky Antony | ricky@example.com |
Emma Watson | emma@example.com |
Rowen Atkinson | rown@example.com |
Antony Hopkins | antony@example.com |
Jennifer Schramm | jennifer@example.com |

    <div class="table-responsive scrollbar">
      <table class="table table-bordered overflow-hidden">
        <colgroup>
          <col class="bg-primary-subtle" />
          <col />
          <col />
        </colgroup>
        <thead>
          <tr class="btn-reveal-trigger">
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th class="text-end" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="btn-reveal-trigger">
            <td>Ricky Antony</td>
            <td>ricky@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Emma Watson</td>
            <td>emma@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Rowen Atkinson</td>
            <td>rown@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Antony Hopkins</td>
            <td>antony@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="btn-reveal-trigger">
            <td>Jennifer Schramm</td>
            <td>jennifer@example.com</td>
            <td class="text-end">
              <div class="dropdown font-sans-serif position-static">
                <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
                <div class="dropdown-menu dropdown-menu-end border py-0">
                  <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

##### Active Table

Highlight a table row or cell by adding a `.table-active` class.

Name | Email | Actions
--- | --- | ---
Ricky Antony | ricky@example.com |
Emma Watson | emma@example.com |
Rowen Atkinson | rown@example.com |
Antony Hopkins | antony@example.com |
Jennifer Schramm | jennifer@example.com |

    <div class="table-responsive scrollbar">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th class="text-end" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ricky Antony</td>
            <td>ricky@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr class="table-active">
            <td>Emma Watson</td>
            <td>emma@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Rowen Atkinson</td>
            <td>rown@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Antony Hopkins</td>
            <td class="table-active">antony@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
          <tr>
            <td>Jennifer Schramm</td>
            <td>jennifer@example.com</td>
            <td class="text-end">
              <div>
                <button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button>
                <button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

##### Variants

Use contextual classes to color tables, table rows or individual cells.

Name | Email
--- | ---
Ricky Antony | ricky@example.com
Emma Watson | emma@example.com
Rowen Atkinson | rown@example.com
Antony Hopkins | antony@example.com
Jennifer Schramm | jennifer@example.com

    <table class="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-primary">
          <td>Ricky Antony</td>
          <td>ricky@example.com</td>
        </tr>
        <tr class="table-secondary">
          <td>Emma Watson</td>
          <td>emma@example.com</td>
        </tr>
        <tr class="table-success">
          <td>Rowen Atkinson</td>
          <td>rown@example.com</td>
        </tr>
        <tr class="table-danger">
          <td>Antony Hopkins</td>
          <td>antony@example.com</td>
        </tr>
        <tr class="table-warning">
          <td>Jennifer Schramm</td>
          <td>jennifer@example.com</td>
        </tr>
      </tbody>
    </table>

##### Responsive Table

Use `.table-responsive` for horizontally scrolling tables.And use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint

Name | Email | Phone | Address | Status | Amount
--- | --- | --- | --- | --- | ---
Ricky Antony | ricky@example.com | (201) 200-1851 | 2392 Main Avenue, Penasauka | Completed | $99
Emma Watson | emma@example.com | (212) 228-8403 | 2289 5th Avenue, New York | Completed | $199
RA Rowen Atkinson | rown@example.com | (201) 200-1851 | 112 Bostwick Avenue, Jersey City | Processing | $755
Antony Hopkins | antony@example.com | (901) 324-3127 | 3448 Ile De France St #242 | On Hold | $50
Jennifer Schramm | jennifer@example.com | (828) 382-9631 | 659 Hannah Street, Charlotte | Pending | $150

    <div class="table-responsive scrollbar">
      <table class="table table-hover table-striped overflow-hidden">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
            <th scope="col">Address</th>
            <th scope="col">Status</th>
            <th class="text-end" scope="col">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr class="align-middle">
            <td class="text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
                </div>
                <div class="ms-2">Ricky Antony</div>
              </div>
            </td>
            <td class="text-nowrap">ricky@example.com</td>
            <td class="text-nowrap">(201) 200-1851</td>
            <td class="text-nowrap">2392 Main Avenue, Penasauka</td>
            <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span>
            </td>
            <td class="text-end">$99</td>
          </tr>
          <tr class="align-middle">
            <td class="text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
                </div>
                <div class="ms-2">Emma Watson</div>
              </div>
            </td>
            <td class="text-nowrap">emma@example.com</td>
            <td class="text-nowrap">(212) 228-8403</td>
            <td class="text-nowrap">2289 5th Avenue, New York</td>
            <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span>
            </td>
            <td class="text-end">$199</td>
          </tr>
          <tr class="align-middle">
            <td class="text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <div class="avatar-name rounded-circle"><span>RA</span></div>
                </div>
                <div class="ms-2">Rowen Atkinson</div>
              </div>
            </td>
            <td class="text-nowrap">rown@example.com</td>
            <td class="text-nowrap">(201) 200-1851</td>
            <td class="text-nowrap">112 Bostwick Avenue, Jersey City</td>
            <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-primary">Processing<span class="ms-1 fas fa-redo" data-fa-transform="shrink-2"></span></span>
            </td>
            <td class="text-end">$755</td>
          </tr>
          <tr class="align-middle">
            <td class="text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
                </div>
                <div class="ms-2">Antony Hopkins</div>
              </div>
            </td>
            <td class="text-nowrap">antony@example.com</td>
            <td class="text-nowrap">(901) 324-3127</td>
            <td class="text-nowrap">3448 Ile De France St #242</td>
            <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-secondary">On Hold<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span>
            </td>
            <td class="text-end">$50</td>
          </tr>
          <tr class="align-middle">
            <td class="text-nowrap">
              <div class="d-flex align-items-center">
                <div class="avatar avatar-xl">
                  <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
                </div>
                <div class="ms-2">Jennifer Schramm</div>
              </div>
            </td>
            <td class="text-nowrap">jennifer@example.com</td>
            <td class="text-nowrap">(828) 382-9631</td>
            <td class="text-nowrap">659 Hannah Street, Charlotte</td>
            <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span>
            </td>
            <td class="text-end">$150</td>
          </tr>
        </tbody>
      </table>
    </div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize