In this article, we'll be going over how to create tabs for your web application using a front-end framework called Materializecss (https://materializecss.com/tabs.html)


This is how our end result will look.



To start we'll need to include the framework in custom header code of our Tadabase app.

<style>
    .tabs {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        height: 48px;
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
        white-space: nowrap;
    }

    .tabs.tabs-transparent {
        background-color: transparent;
    }

    .tabs.tabs-transparent .tab a,
    .tabs.tabs-transparent .tab.disabled a,
    .tabs.tabs-transparent .tab.disabled a:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .tabs.tabs-transparent .tab a:hover,
    .tabs.tabs-transparent .tab a.active {
        color: #fff;
    }

    .tabs.tabs-transparent .indicator {
        background-color: #fff;
    }

    .tabs.tabs-fixed-width {
        display: flex;
    }

    .tabs.tabs-fixed-width .tab {
        flex-grow: 1;
    }

    .tabs .tab {
        display: inline-block;
        text-align: center;
        line-height: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        text-transform: uppercase;
    }

    .tabs .tab a {
        color: rgba(238, 110, 115, 0.7);
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 24px;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        transition: color 0.28s ease, background-color 0.28s ease;
    }

    .tabs .tab a:focus,
    .tabs .tab a:focus.active {
        background-color: rgba(246, 178, 181, 0.2);
        outline: none;
    }

    .tabs .tab a:hover,
    .tabs .tab a.active {
        background-color: transparent;
        color: #ee6e73;
    }

    .tabs .tab.disabled a,
    .tabs .tab.disabled a:hover {
        color: rgba(238, 110, 115, 0.4);
        cursor: default;
    }

    .tabs .indicator {
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: #f6b2b5;
        will-change: left, right;
    }

    @media only screen and (max-width : 992px) {
        .tabs {
            display: flex;
        }

        .tabs .tab {
            flex-grow: 1;
        }

        .tabs .tab a {
            padding: 0 12px;
        }
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


Next, we'll need to add the following to the source code of an HTML component on the page builder

<div class="row">
    <div class="col s12">
        <ul class="tabs">
            <li class="tab col s3"><a href="#test1">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4">Test 4</a></li>
        </ul>
    </div>
    <div id="test1" class="col s12">&nbsp;</div>
    <div id="test2" class="col s12">&nbsp;</div>
    <div id="test3" class="col s12">&nbsp;</div>
    <div id="test4" class="col s12">&nbsp;</div>
</div>


For this example, we'll be placing three tables into each three of the tabs.

To do this, we'll need to find the ID of each row the tables are in.


As you can see in the image below, we have three rows that each contains a Data Table


To find the ID for each of these rows preview your page and then right-click on one of the tables and click "Inspect"


You should find a line of code that has a class of "row" or looks similar to this

<div class="row x-type-row  x-container-" id="x_element_page_4_20">

In our case the ID of this row is x_element_page_4_20 as shown in the image below



Repeat that process until you've found all the ID's for each row. Once you've taken note of each row we can add the following JavaScript to the page builder

$(document).ready(function(){
    $('.tabs').tabs();
    $('#x_element_page_4_20').appendTo('#test1');
    $('#x_element_page_4_24').appendTo('#test2');
    $('#x_element_page_4_27').appendTo('#test4');
});

Remember to replace the ID's shown in this example with your ID's