Home Exentriq App Bar
Tool Bar
Exentriq logo

© Exentriq

Free & Open Source (MIT)
Notifications
View All

Table

Basic

Basic table for organize data

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table z-depth-1">
    <thead>
    <tr>
        <th class="eq-ui-data-table-cell-non-numeric">Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
    </tr>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
    </tr>
    <tr>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
    </tbody>
</table>

Sortable Table

Sortable Table by clicking on column head

Materialsort Quantity Unit pricesort
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35
Red (Velvet) 15 $3.46
Pink (Rose) 44 $6.31 

    <table class="table eq-ui-data-table z-depth-1 eq-ui-table-sort">
        <thead>
        <tr>
            <th class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-sort-column">Material<i class="material-icons">sort</i></th>
            <th class="">Quantity</th>
            <th class="eq-ui-data-table-sort-column">Unit price<i class="material-icons">sort</i></th>
        </tr>
        </thead>
    
        <tbody>
        <tr>
            <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
            <td>25</td>
            <td>$2.90</td>
        </tr>
        <tr>
            <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Plywood (Birch)</td>
            <td>50</td>
            <td>$1.25</td>
        </tr>
        <tr>
            <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Laminate (Gold on Blue)</td>
            <td>10</td>
            <td>$2.35</td>
        </tr>
        </tbody>
    </table>

With Checkbox

For checkbox table mode. We have than add eq-ui-data-table-js eq-ui-with-checkbox

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table eq-ui-with-checkbox z-depth-1">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-all" />
            <label for="checkbox-all"></label>
        </th>
        <th class="eq-ui-data-table-cell-non-numeric">Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-1" />
            <label for="checkbox-1"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-2" />
            <label for="checkbox-2"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-3" />
            <label for="checkbox-3"></label>
        </td>
        <td class="eq-ui-data-table-cell-non-numeric eq-ui-data-table-cell-truncate">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
    </tbody>
</table>

Striped

For striped table mode. We have than add .eq-ui-striped

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table eq-ui-striped z-depth-1">
    ...
</table>

Hoverable

For hoverable table mode. We have than add .eq-ui-hoverable

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table eq-ui-hoverable z-depth-1">
    ...
</table>

Centered

For centered table mode. We have than add .eq-ui-centered

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table eq-ui-centered z-depth-1">
    ...
</table>

Header Fixed

For fixed header mode. We have than add .eq-ui-header-fixed

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 

<table class="table eq-ui-data-table eq-ui-header-fixed z-depth-1">
    ...
</table>

Lazy Load

For Lazy Load mode. We have than add .eq-ui-data-table-lazy-load

ID Model Quantity Unit price
Loading...

Example of implementation (HTML):


<table id="table-lazy-load-sample1" class="table eq-ui-data-table eq-ui-data-table-lazy-load z-depth-1">
<thead>
<tr>
    <th class="eq-ui-data-table-cell-non-numeric table-fixed-col-100 eq-ui-hidden-xs">ID</th>
    <th class="eq-ui-data-table-cell-non-numeric">Model</th>
    <th>Quantity</th>
    <th>Unit price</th>
</tr>
</thead>
<tbody style="height: 480px;">
<tr>
    <td class="eq-ui-data-table-cell-non-numeric" style="text-align: center;" >Loading...</td>
</tr>
</tbody>
</table>

Example of implementation (JS):


var fakeJsonData = "http://192.168.1.20:3500/posts";
var fakeDataTable = [];
var EqUILazyLoad_Sample1 = null;
var EqUILazyLoad_Sample1_Scroll_Content_ID = $('#table-lazy-load-sample1 tbody')[0];

// Load json data
$.getJSON( fakeJsonData, {
    _page: 1,
    _limit: 300000
})
.done(function( data ) {

    // Transform data
    $.each( data, function( i, item ) {
        fakeDataTable.push(
        '<tr>\n' +
        '<td class="eq-ui-data-table-cell-non-numeric table-fixed-col-100 eq-ui-hidden-xs">'+(i+1)+'</td>\n' +
        '<td class="eq-ui-data-table-cell-non-numeric"><span class="truncate">'+item.model+'</span></td>\n' +
        '<td>'+item.quantity+'</td>\n' +
        '<td>'+item.price+'</td>\n' +
        '</tr>'
        );
    });

    // Run Lazy Load
    if(EqUILazyLoad_Sample1 === null){
        EqUILazyLoad_Sample1 = new EqUILazyLoad({
            rows: fakeDataTable,
            scrollId: EqUILazyLoad_Sample1_Scroll_Content_ID,
            contentId: EqUILazyLoad_Sample1_Scroll_Content_ID,
            callbacks: {
                clusterWillChange: function(){
                    console.log('[Table -> Lazy load] clusterWillChange');
                },
                clusterChanged: function(){
                    console.log('[Table -> Lazy load] clusterChanged');
                },
                scrollingProgress: function(progress){
                    // console.log('[Table -> Lazy load] scrollingProgress', progress);
                }
            }
        });
    }
});