Table


Step 1 - table filters

The main panel is finished. Now we'll take care of the table component. We'll start with the top table UI, dedicated to 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 here without further explanation. Let's proceed to the next step.

Step 2 - additional table UI elements

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

To begin, we'll prepare a wrapper. We'll use a cascading card for this purpose.

Below the Top Table UI paste this 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 the view element, place that code with buttons and table name:



<!--Card header-->
<div class="view view-cascade 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 that the buttons aren't displayed properly. We'll use a flexbox utility to set it correctly.

To the .view element add the following classes:



<!--Card header-->
<div class="view view-cascade 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 refresher then take a look at our Flexbox documentation.


Rate this lesson

Previous lesson Live preview Next lesson

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

About the 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