Add "Tabs" to your app

In this article, we'll be going over how to create tabs for your web application using a front-end framework called Materializecss (


This is how our end result will look.




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

Copy and paste the following in the Custom Header Code Section
    .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 {
        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 {
        background-color: rgba(246, 178, 181, 0.2);
        outline: none;

    .tabs .tab a:hover,
    .tabs .tab {
        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;
<link href="" rel="stylesheet">

Copy and paste the following into the Custom Footer Code section

<script src=""></script>

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



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

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