# Boomerang UI Kit

## Tables

Documentation and examples for opt-in styling of tables.

Open Bootstrap Docs

### Example

| Name | Email | Location
--- | --- | --- | ---
| ###### Nabiha Armstrong Web Developer | nabiha.armstrong@example.com | Cluj Napoca, RO
| ###### Dan Holding Product Designer | dan.holding@example.com | New York, USA
| WS ###### Will Smith Sales Manager | will.smith@example.com | Los Angeles, USA
| CT ###### Charlize Theron UI/UX Designer | charlize.theron@example.com | Bucharest, RO

    <table class="table table-hover align-items-center">
        <thead>
            <tr>
                <th scope="col">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="th_checkbox">
                        <label class="custom-control-label" for="th_checkbox"></label>
                    </div>
                </th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Location</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white" scope="row">
                <td>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                        <label class="custom-control-label" for="td_checkbox_1"></label>
                    </div>
                </td>
                <td>
                    <div class="media align-items-center">
                        <img src="../assets/images/prv/thumb-1.jpg" class="avatar avatar-lg mr-3">
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                            <span class="font-weight-normal text-muted">Web Developer</span>
                        </div>
                    </div>
                </td>
                <td>nabiha.armstrong@example.com</td>
                <td>Cluj Napoca, RO</td>
            </tr>
            <tr class="bg-white" scope="row">
                <td>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="td_checkbox_2">
                        <label class="custom-control-label" for="td_checkbox_2"></label>
                    </div>
                </td>
                <td>
                    <div class="media align-items-center">
                        <img src="../assets/images/prv/thumb-2.jpg" class="avatar avatar-lg mr-3">
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                            <span class="font-weight-normal text-muted">Product Designer</span>
                        </div>
                    </div>
                </td>
                <td>dan.holding@example.com</td>
                <td>New York, USA</td>
            </tr>
            <tr class="bg-white" scope="row">
                <td>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                        <label class="custom-control-label" for="td_checkbox_1"></label>
                    </div>
                </td>
                <td>
                    <div class="media align-items-center">
                        <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                            <span class="font-weight-normal text-muted">Sales Manager</span>
                        </div>
                    </div>
                </td>
                <td>will.smith@example.com</td>
                <td>Los Angeles, USA</td>
            </tr>
            <tr class="bg-white" scope="row">
                <td>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                        <label class="custom-control-label" for="td_checkbox_1"></label>
                    </div>
                </td>
                <td>
                    <div class="media align-items-center">
                        <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                            <span class="font-weight-normal text-muted">UI/UX Designer</span>
                        </div>
                    </div>
                </td>
                <td>charlize.theron@example.com</td>
                <td>Bucharest, RO</td>
            </tr>
        </tbody>
    </table>

### Card rows

Name | Email | Location
--- | --- | ---
###### Nabiha Armstrong Web Developer | nabiha.armstrong@example.com | Cluj Napoca, RO
###### Dan Holding Product Designer | dan.holding@example.com | New York, USA
WS ###### Will Smith Sales Manager | will.smith@example.com | Los Angeles, USA
CT ###### Charlize Theron UI/UX Designer | charlize.theron@example.com | Bucharest, RO

    <table class="table table-hover table-cards align-items-center">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Location</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white">
                <th scope="row">
                    <div class="media align-items-center">
                        <img src="../assets/images/prv/thumb-1.jpg" class="avatar avatar-lg mr-3">
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                            <span class="font-weight-normal text-muted">Web Developer</span>
                        </div>
                    </div>
                </th>
                <td>nabiha.armstrong@example.com</td>
                <td>Cluj Napoca, RO</td>
            </tr>
            <tr class="table-divider"></tr>
            <tr class="bg-white">
                <th scope="row">
                    <div class="media align-items-center">
                        <img src="../assets/images/prv/thumb-2.jpg" class="avatar avatar-lg mr-3">
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                            <span class="font-weight-normal text-muted">Product Designer</span>
                        </div>
                    </div>
                </th>
                <td>dan.holding@example.com</td>
                <td>New York, USA</td>
            </tr>
            <tr class="table-divider"></tr>
            <tr class="bg-white">
                <th scope="row">
                    <div class="media align-items-center">
                        <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                            <span class="font-weight-normal text-muted">Sales Manager</span>
                        </div>
                    </div>
                </th>
                <td>will.smith@example.com</td>
                <td>Los Angeles, USA</td>
            </tr>
            <tr class="table-divider"></tr>
            <tr class="bg-white">
                <th scope="row">
                    <div class="media align-items-center">
                        <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                        <div class="media-body">
                            <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                            <span class="font-weight-normal text-muted">UI/UX Designer</span>
                        </div>
                    </div>
                </th>
                <td>charlize.theron@example.com</td>
                <td>Bucharest, RO</td>
            </tr>
            <tr class="table-divider"></tr>
        </tbody>
    </table>

###### Additional Class Reference

You can see all the background options in the dedicated page which can be found here.

`.table-cards`
  Apply to `.table` for a card style table

`.align-items-center`
  Apply to `.table` in order to center vertically the elements