Admin dashboard – lesson 8


Step 1 - bottom table UI

There are 2 small subcomponents we still miss in our table.

The first one is pagination. The second, select with the numbers of rows displayed in the table.

Below the table but within card-body place a divider and a wrapper with flexbox utilities.


        <hr class="my-0">

<!--Bottom Table UI-->
<div class="d-flex justify-content-between">



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

That will align one component to the left and the second to the right.

Then add a select with options of rows numbers:


        <!--Bottom Table UI-->
<div class="d-flex justify-content-between">

    <!--Name-->
    <select class="mdb-select colorful-select dropdown-primary mt-2 hidden-md-down">
        <option value="" disabled>Rows number</option>
        <option value="1" selected>10 rows</option>
        <option value="2">25 rows</option>
        <option value="3">50 rows</option>
        <option value="4">100 rows</option>
    </select>

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

Have you noticed .hidden-md-down class? It makes given element invisible on screen smaller than 768px.

It's a good practice to hide the elements on the small screens if they are hard to use on mobile. For example, allowing user displays 100 rows in the table may be not a good idea when using a mobile device.

To learn more about hidding element have a look at Display utilities documentation.

Step 2 - pagination

Pagination is a crucial component for any table with a huge amount of data.

Go to Components / Pagination documentation and copy the code of the first pagination. Then paste it below the select, within bottom table UI:


        <!--Pagination -->
<nav class="mt-4">
    <ul class="pagination pagination-circle pg-blue mb-0">

        <!--First-->
        <li class="page-item disabled">
            <a class="page-link">First</a>
        </li>

        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active">
            <a class="page-link">1</a>
        </li>
        <li class="page-item">
            <a class="page-link">2</a>
        </li>
        <li class="page-item">
            <a class="page-link">3</a>
        </li>
        <li class="page-item">
            <a class="page-link">4</a>
        </li>
        <li class="page-item">
            <a class="page-link">5</a>
        </li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>

        <!--First-->
        <li class="page-item">
            <a class="page-link">Last</a>
        </li>

    </ul>
</nav>
<!--/Pagination -->
                    

Step 3 - checkbox

To make possible edition of the single row, we need a component which allows to check/uncheck the given element.

The checkbox will do the work.

Within thead element of the table, replace the code within the first cell to the following code of the checkbox:


<thead>
    <tr>
        <th>
            <input type="checkbox" id="checkbox">
            <label for="checkbox" class="label-table"></label>
        </th>
        <th class="th-lg">First column</th>
        <th class="th-lg">Second column</th>
        <th class="th-lg">Third column</th>
        <th class="th-lg">Fourth column</th>
        <th class="th-lg">Fifth column</th>
        <th class="th-lg">Sixth column</th>
    </tr>
</thead>
            

As you can see input element requires an ID and label refers to this ID.

Each checkbox in your project required an individual ID value. If you forget about that, it will cause conflicts and errors.

Place the checbkox within each first cell of each row:


<table class="table">
    <thead>
        <tr>
            <th>
                <input class="form-check-input" type="checkbox" id="checkbox">
                <label for="checkbox" class="label-table form-check-label"></label>
            </th>
            <th class="th-lg">First column</th>
            <th class="th-lg">Second column</th>
            <th class="th-lg">Third column</th>
            <th class="th-lg">Fourth column</th>
            <th class="th-lg">Fifth column</th>
            <th class="th-lg">Sixth column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox1">
                <label for="checkbox1" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox2">
                <label for="checkbox2" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox3">
                <label for="checkbox3" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
    </tbody>
</table>
            

To learn more about Checkbox read Checkbox documentation.

Step 4 - modals

Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

For the purpose of this tutorial, we'll use the Modal as a confirmation pop-up of deletion.

Within the .view element (additiona table UI with buttons and table name) find button.

Then add a data-toggle and data-target attributes to it:


<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2" data-toggle="modal" data-target="#modalConfirmDelete">
    <i class="fa fa-remove mt-0"></i>
</button>
        

data-toggle="modal" defines which Bootstrap functionality we want to trigger.

data-target="#modalConfirmDelete" refers to the Modal ID that we'll create in the next step.

Go to Javascript / Modals / Templates documentation and copy the code of Modal Confirm Delete (without trigger button). Then paste it to the Section: Modals that we've created at the very beginning of this tutorial.


<!--Section: Modals-->
<section>

    <!--Modal: modalConfirmDelete-->
    <div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content text-center">
                <!--Header-->
                <div class="modal-header d-flex justify-content-center">
                    <p class="heading">Are you sure?</p>
                </div>

                <!--Body-->
                <div class="modal-body">

                    <i class="fa fa-times fa-4x animated rotateIn"></i>

                </div>

                <!--Footer-->
                <div class="modal-footer flex-center">
                    <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-danger">Yes</a>
                    <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No</a>
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!--Modal: modalConfirmDelete-->

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

Best practice: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.

Note: That modal has already proper ID (the ID which we have referred to in the trigger button) so we don't need to do anything else.

Save the file, refresh the browser and click on the button. The modal should work as expected.

To learn more about Modals have a look at Modals 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