Make table 100% with fixed header with smart table angular

angularjs css flexbox smart-table

10,819

The solution I found was to create another table which contains only the header, so when I clic on the fake header throw a JS than fires clic event on the smart-table header. In this way you can use de st-sort directive. It's a dirty solution but works. My example has width at 100% and hasn't 100% height but I hope this helps you with the header.

 <table id="tableHeader" class="table-condensed">
            <thead>
                <tr role="rowheader">
                    <!--<i class="fa fa-sort"></i>-->
                    <th class="sorting" st-ratio="10" onclick="fire_clic(1)">IdCustomer<i class="icon-sort icon-small"></i></th>
                    <th class="sorting" st-ratio="35" onclick="fire_clic(2)">Name<i class="icon-sort icon-small"></i></th>
                    <th st-ratio="15">Nif</th>
                    <th class="sorting" st-ratio="15" onclick="fire_clic(4)">Phone<i class="icon-sort icon-small"></i></th>
                    <th class="sorting" st-ratio="25" onclick="fire_clic(5)">Email <i class="icon-sort icon-small"></i></th>
                </tr>
            </thead>
        </table>

        <div class="table-container">

            <table st-persist="tableLS" st-table="customers" st-safe-src="rowCustomerCollection" st-pagination-scroll st-pipe="callServer"
                   class="table table-striped table-hover table-condensed">

                <thead data-ng-hide="true">
                    <tr>
                        <th id="col1" st-ratio="10" st-sort="IdCustomer">ID</th>
                        <th id="col2" st-ratio="35" st-sort="nom">Name</th>
                        <th st-ratio="15">Nif</th>
                        <th id="col4" st-ratio="15" st-sort="tel">Phone</th>
                        <th id="col5" st-ratio="25" st-sort="dPer3">Email</th>
                    </tr>
                </thead>

                <tbody>
                    <tr data-ng-repeat="c in customer">
                        <td st-ratio="10" title="Go to customer" class="irA" data-ng-click="open(c.idCustomer)">
                            {{c.idCustomer}}
                        </td>
                        <td st-ratio="35">{{c.nom}}</td>
                        <td st-ratio="15">{{c.nif}}</td>
                        <td st-ratio="15">{{c.phone}}</td>
                        <td st-ratio="25">{{c.dPer3}}</td>
                    </tr>
                </tbody>

            </table>

        </div>

<script>
        function fire_clic(id, elem) {
        var idControl = 'th[id=col' + id + ']';

        //Fire the clic event in smart-table
        $(idControl).trigger('click');
    }
</script>

CSS:

#tableHeader {
    width: 100%;
}

.table-container {
    height: 500px;
    width: 100%;
    overflow-y: scroll;
    white-space: nowrap;
    font-size: small;
    align-items: stretch;
}

.table-condensed > tbody > tr > td {
    padding: 2px;
}

10,819

Author by

Elisabeth

I am a develoBee summ summ :P

Updated on June 22, 2022

Comments

Elisabeth almost 2 years

http://plnkr.co/edit/GIeXoF?p=preview

How can I make this table with a height of 100% height but the header must still remain fixed?

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src=smart-table.debug.js></script>
  </head>

  <body ng-controller="mainCtrl">
    <table  class="table table-striped">
    <thead>
    <tr>
        <th st-ratio="20" st-sort="firstName">first name</th>
        <th st-ratio="20" st-sort="lastName">last name</th>
        <th st-ratio="10" st-sort="age">age</th>
        <th st-ratio="30" st-sort="email">email</th>
        <th st-ratio="20" st-sort="balance">balance</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="row in displayed">
        <td st-ratio="20">{{row.firstName}}</td>
        <td st-ratio="20">{{row.lastName | uppercase}}</td>
        <td st-ratio="10">{{row.age}}</td>
        <td st-ratio="30">{{row.email}}</td>
        <td st-ratio="20">{{row.balance | currency}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" class="text-center">
            <div  st-items-by-page="20" st-pagination=""></div>
        </td>
    </tr>
    </tfoot>
</table>

  </body>

</html>

table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* this can vary */
}

table * {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
}

thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

tbody {
    overflow-y: scroll;
    display: inline-block;
}

thead > tr, tbody > tr, tfoot > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

thead, tfoot {
    flex-shrink: 0;
}

th, tbody td {
    width: 20%; /* this can vary */
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

tfoot {
    display: inline-block;
}

tfoot td {
    width: 100%;
    display: inline-block;
}