Admin dashboard – lesson 6


Step 1 - table filters

The main panel is finished. Now we'll take care of table component. We'll start from top table UI, dedicated for data filtering.

It won't be anything new this time. We use a simple panel, with the grid inside and few selects for a different option of filtering.

Place the following code within <!--Section: Table-->


<!--Section: Table-->
<section class="mb-5">

  <!--Top Table UI-->
  <div class="card p-2 mb-5">

      <!--Grid row-->
      <div class="row">

          <!--Grid column-->
          <div class="col-lg-3 col-md-12">

              <!--Name-->
              <select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Bulk actions</option>
                  <option value="1">Delate</option>
                  <option value="2">Export</option>
                  <option value="3">Change segment</option>
              </select>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6">

              <!--Blue select-->
              <select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Show only</option>
                  <option value="1">All
                      <span> (2000)</span>
                  </option>
                  <option value="2">Never opened
                      <span> (200)</span>
                  </option>
                  <option value="3">Opened but unanswered
                      <span> (1800)</span>
                  </option>
                  <option value="4">Answered
                      <span> (200)</span>
                  </option>
                  <option value="5">Unsunscribed
                      <span> (50)</span>
                  </option>
              </select>
              <!--/Blue select-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6">

              <!--Blue select-->
              <select class="mdb-select colorful-select dropdown-primary mx-2">
                  <option value="" disabled selected>Filter segments</option>
                  <option value="1">Contacts in no segments
                      <span> (100)</span>
                  </option>
                  <option value="1">Segment 1
                      <span> (2000)</span>
                  </option>
                  <option value="2">Segment 2
                      <span> (1000)</span>
                  </option>
                  <option value="3">Segment 3
                      <span> (4000)</span>
                  </option>
              </select>
              <!--/Blue select-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-3 col-md-6">

              <form class="form-inline mt-2 ml-2">
                  <input class="form-control my-0 py-0" type="text" placeholder="Search" style="max-width: 150px;">
                  <button class="btn btn-sm btn-info ml-2 px-2">
                      <i class="fa fa-search"></i>
                  </button>
              </form>

          </div>
          <!--Grid column-->

      </div>
      <!--Grid row-->

  </div>
  <!--Top Table UI-->

</section>
<!--Section: Table-->

We did it all in the previous lessons so I leave it without further explanation. Let's proceed to the next step.

Step 2 - additional table UI

We are going to create a quite advanced table. And because of its complexity, it requires an additional UI.

At the beginning, we'll prepare a wrapper. We'll use a cascading card for this purpose.

Below Top Table UI paste that code:


<!--Card-->
<div class="card card-cascade narrower">

    <!--Card header-->
    <div class="view view-cascade py-3 gradient-card-header info-color-dark mx-4">

        

    </div>
    <!--/Card header-->

    <!--Card content-->
    <div class="card-body card-body-cascade">

    </div>
    <!--/.Card content-->

</div>
<!--/.Card-->

Now, within view element, place that code with buttons and table name:


<!--Card header-->
<div class="view py-3 gradient-card-header info-color-dark mx-4">

  <div>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
          <i class="fa fa-th-large mt-0"></i>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
          <i class="fa fa-columns mt-0"></i>
      </button>
  </div>

  <a href="" class="white-text mx-3">Table name</a>

  <div>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
          <i class="fa fa-pencil mt-0"></i>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
          <i class="fa fa-remove mt-0"></i>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
          <i class="fa fa-info-circle mt-0"></i>
      </button>
  </div>

</div>
<!--/Card header-->

After saving the file and refreshing the browser you will notice buttons aren't displayed properly. We'll use a flexbox utility to set it correct.

To the .view element add the following classes:


<!--Card header-->
<div class="view py-3 gradient-card-header info-color-dark mx-4 d-flex justify-content-between align-items-center">

We've already used it many times in the previous tutorial, but if you need a refreshment take a look at Flexbox documentation.


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits