Table
Tables are an enhanced version of the Bootstrap table and are used to display tabular data.
Apps Table
draft
Tables consist of a toolbar and a table component and pagination where applicable. Optionally multiple items can be selected via checkboxes to apply contextual actions like `delete`, which appear only when applicable.

    <div class="card mx-1 mt-1 mb-5">
      <div class="btn-toolbar justify-content-between">
          <div>
              <div role="group" aria-label="Third group" class="btn-group mb-2 mb-sm-0 mr-1">
                  <button data-backdrop="static" data-keyboard="false" id="btnNewApp" type="button" class="btn btn-primary">
                      <i class="material-icons material-icons-outlined mr-2">add</i>New Application
                  </button>
              </div>
              <div role="group" class="btn-group mb-2 mb-sm-0 d-none">
                  <button data-backdrop="static" data-keyboard="false" id="btnImportUsers" type="button" class="btn btn-outline-primary">
                      <i class="material-icons material-icons-outlined mr-2">delete</i>Delete
                  </button>
              </div>
          </div>
          <div class="input-group input-group-search">
              <div class="input-group-prepend">
                <span class="input-group-text" id="search-addon1"><i class="material-icons material-icons-outlined">search</i></span>
              </div>
              <input type="text" class="form-control" id="searchInput1" placeholder="Search" aria-label="Label" aria-describedby="basic-addon1">
              <div class="input-group-append">
                  <button class="btn btn-outline-secondary d-none" type="button"><i class="material-icons material-icons-outlined">close</i></button>
              </div>
          </div>
      </div>
      <table class="table table-hover table-responsive-sm">
        <thead>
            <tr>
                <th scope="col" class="py-2">User</th>
                <th scope="col" class="py-2">Status</th>
                <th scope="col" class="py-2"></th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                    <label class="custom-control-label" for="customCheck1"></label>
                </div>
            </th>
            <td>GoGo iOS App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck2">
                    <label class="custom-control-label" for="customCheck2"></label>
                </div>
            </th>
            <td>GoGo SPA App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck3">
                    <label class="custom-control-label" for="customCheck3"></label>
                </div>
            </th>
            <td>Gogo Web App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="card mx-1 mt-1 mb-5">
      <div class="btn-toolbar justify-content-between">
          <div>
              <div role="group" aria-label="Third group" class="btn-group mb-2 mb-sm-0 mr-1">
                  <button data-backdrop="static" data-keyboard="false" id="btnNewApp" type="button" class="btn btn-primary">
                      <i class="material-icons material-icons-outlined mr-2">add</i>New Application
                  </button>
              </div>
              <div role="group" class="btn-group mb-2 mb-sm-0">
                  <button data-backdrop="static" data-keyboard="false" id="btnDeleteUsers" type="button" class="btn btn-outline-primary">
                      <i class="material-icons material-icons-outlined mr-2">delete</i>Delete
                  </button>
              </div>
          </div>
          <div class="input-group input-group-search">
              <div class="input-group-prepend">
                <span class="input-group-text" id="search-addon1"><i class="material-icons material-icons-outlined">search</i></span>
              </div>
              <input type="text" class="form-control" id="searchInput1" placeholder="Search" aria-label="Label" aria-describedby="basic-addon1">
              <div class="input-group-append">
                  <button class="btn btn-outline-secondary d-none" type="button"><i class="material-icons material-icons-outlined">close</i></button>
              </div>
          </div>
      </div>
      <table class="table table-hover table-responsive-sm">
        <thead>
          <tr>
            <th scope="col" width="16">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck0">
                    <label class="custom-control-label" for="customCheck0"></label>
                </div>
            </th>
            <th scope="col">Name</th>
            <th scope="col">Client ID</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
                    <label class="custom-control-label" for="customCheck1"></label>
                </div>
            </th>
            <td>GoGo iOS App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck2">
                    <label class="custom-control-label" for="customCheck2"></label>
                </div>
            </th>
            <td>GoGo SPA App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
          <tr>
            <th scope="row">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck3">
                    <label class="custom-control-label" for="customCheck3"></label>
                </div>
            </th>
            <td>Gogo Web App</td>
            <td><small class="text-monospace">0oasdfasdfhalskbu854b</small></td>
            <td>
                <a href="#"><i class="material-icons material-icons-outlined text-muted float-right">more_horiz</i></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

Users Table
draft
Items can include avatars and can have individual actions attached.

    <div class="card mx-1 mt-1 mb-5">
      <div class="btn-toolbar justify-content-between">
          <div>
              <div role="group" aria-label="Third group" class="btn-group mb-2 mb-sm-0 mr-1">
                  <button data-backdrop="static" data-keyboard="false" id="btnNewUser" type="button" class="btn btn-primary">
                      <i class="material-icons material-icons-outlined mr-2">add</i>New User
                  </button>
              </div>
          </div>
          <div class="input-group input-group-search">
              <div class="input-group-prepend">
                <span class="input-group-text" id="search-addon1"><i class="material-icons material-icons-outlined">search</i></span>
              </div>
              <input type="text" class="form-control" id="searchInput1" placeholder="Search" aria-label="Label" aria-describedby="basic-addon1">
              <div class="input-group-append">
                  <button class="btn btn-outline-secondary d-none" type="button"><i class="material-icons material-icons-outlined">close</i></button>
              </div>
          </div>
      </div>
      <table class="table table-hover table-responsive-sm">
        <thead>
            <tr>
                <th scope="col" class="py-2">User</th>
                <th scope="col" class="py-2">Status</th>
                <th scope="col" class="py-2"></th>
            </tr>
        </thead>
        <tbody>
            <tr @click="handleUserClick('carl.smith@example.com', 'Carl Smith', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Carl Smith" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Carl Smith</h5>
                          carl.smith@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
            <tr @click="handleUserClick('carl.smith@example.com', 'Eloise Ballard', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Eloise Ballard" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Eloise Ballard</h5>
                          eloise.ballard@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
            <tr @click="handleUserClick('matthew.pearson@example.com', 'Matthew Pearson', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Matthew Pearson" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Matthew Pearson</h5>
                          matthew.pearson@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
            <tr @click="handleUserClick('ferne.romero@example.com', 'Ferne Romero', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Ferne Romero" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Ferne Romero</h5>
                          ferne.romero@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
            <tr @click="handleUserClick('tori.witt@example.com', 'Tori Witt', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Tori Witt" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Tori Witt</h5>
                          tori.witt@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
            <tr @click="handleUserClick('Tori Witt', true)">
                <td class="align-middle">
                  <div class="media">
                      <img class="mr-4 align-self-center rounded-circle" src="/styleguide/images/avatar.svg" alt="Tori Witt" width=44>
                      <div class="media-body">
                          <h5 class="mb-0">Konnor Valentine</h5>
                          konnor.valentine@example.com
                      </div>
                  </div>
                </td>
                <td class="align-middle"><span class="text-muted">Active</span></td>
                <td class="align-middle">
                  <div class="dropdown float-right">
                    <button class="btn btn-link text-muted" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons material-icons-outlined">more_horiz</i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>
                </td>
            </tr>
        </tbody>
      </table>
    </div>