web-dev-qa-db-fra.com

En-têtes fixes AngularJS ng-table

J'utilise ng-table pour afficher des informations. Je voudrais fixer l'en-tête et le pied de page de la table ng et forcer la table ng à dessiner des barres de défilement dans les lignes.

Le site de documentation de ng-table ne contient aucune documentation sur la manière d'y parvenir.

Des idées?

angularjsngtable
20
alessandro ferrucci

cette solution CSS uniquement a fonctionné pour moi. Ajoutez simplement la classe table-scroll à l'élément table et au CSS suivant:

.table-scroll thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tbody {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-scroll td {
    height: 47px; // needed in order to keep rows from collapsing
}
26
Yaron

C'est de loin la solution la plus fiable que j'ai trouvée. Et j'ai cherché pendant des heures avant de décider d'utiliser un plugin jQuery. Dans la version du plugin que j'utilise, nous pouvons coller l'en-tête dans un conteneur déroulant. Jetez un oeil à ce plunker pour un cas d'utilisation avec ng-table:

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

Javascript

app.directive('fixedTableHeaders', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {
          var container = element.parentsUntil(attrs.fixedTableHeaders);
          element.stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 });
      }, 0);
    }
  }
}]);

HTML

<div id="scrollable-area">
      <table ng-table="tableParams" fixed-table-headers="scrollable-area">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
      </table>
</div>

CSS

#scrollable-area {
    height: 150px;
    overflow-y: scroll; /* <-- here is what is important*/
}
table {
  width: 100%;
}
thead {
    background: #fff;
}
15
Noël Rimbert

Je ne sais pas pour le pied de page mais j'avais une exigence similaire pour les en-têtes.

Cela a été demandé avant @ Github: https://github.com/esvit/ng-table/issues/41

J'ai fait ma propre implémentation en utilisant un plugin jquery ( https://github.com/jmosbech/StickyTableHeaders ).

Il y a un plunkr ici: http://plnkr.co/edit/KyilXo?p=preview

Fondamentalement, nous appelons simplement le plugin dans la directive data-fixed-table-headers lorsque les données ont été rendues.

angular.module('main').directive('fixedTableHeaders', ['$timeout', fixedTableHeaders]);

    function fixedTableHeaders($timeout) {
        return {
            restrict: 'A',
            link: link
        };

        function link(scope, element, attrs) {

            $timeout(function () {
              element.stickyTableHeaders();
                    }, 0);
        }
    }
5
emp