AngularJS ng-table fixe en-têtes

Je suis en utilisant ng-le tableau d'affichage de certaines informations. Je tiens à l'en-tête et pied de page de la ng-table fixe et de la force de la ng-table à dessiner les barres de défilement à l'intérieur des lignes.

La ng-table site de documentation n'a pas de documentation sur la façon de faire que cela se produise.

Des idées?

OriginalL'auteur alessandro ferrucci | 2014-05-17

  1. 21

    cette CSS seule solution a fonctionné pour moi. Il suffit d'ajouter la classe table-scroll à l'élément de la table et le code 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
}
    Wow!...Merci beaucoup pour l'upload c'est..c'est génial!
    la largeur de la barre de défilement est ajouté à tbody largeur de sorte que les lignes de thead et tr ne sont pas sous les uns des autres
    Après avoir cherché autour de 20 solutions, trouvé ce travail pour mon cas. merci beaucoup @Yaron
    avez-vous trouvé de solution pour la largeur de la question? autres que l'aide d'un script?
    Étonnamment code utile et vous deux!! Merci!!!!!

    OriginalL'auteur Yaron

  2. 15

    Qui est de loin la solution la plus fiable que j'ai trouvé. 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 nous en tenir à la tête d'un défilement de conteneur.
    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;
}
    Le plnkr ne fonctionne plus en raison d'un ancien lien ng-table.js. Essayer de la remplacer par cette https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js
    Il n'est pas de travailler avec d'accordéon au-dessus de ng-table.. s'il vous Plaît voir plunker pour la question.. plnkr.co/modifier/FGjU46cCMuhIdyacffHl?p=preview
    J'ai remarqué que dans la démo il y a un bug où lorsque vous réduisez la largeur de la fenêtre d'affichage de sorte que le défilement horizontal est déclenchée sur la table, lorsque vous faites ensuite défiler la page vers le bas, fixe les en-têtes apparaissent à droite de l'arête de la table. Serait-ce un problème pour horizontalement les grandes tables.

    OriginalL'auteur Noël Rimbert

  3. 5

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

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

    J'ai fait ma propre mise en œuvre à l'aide d'un plugin jquery (https://github.com/jmosbech/StickyTableHeaders).

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

    Fondamentalement, il suffit d'appeler le plugin dans la directive data-fixed-table-headers
    lorsque les données ont été rendus.

    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);
        }
    }
    Cela a l'air de coller la table des en-têtes vers le haut de l'écran, mais n'est pas le cas où la table est un élément déroulant: plnkr.co/modifier/5wvfzNzWQfH4NNpgYdB9?p=preview
    Oui mais cela semble être une limitation de la stickyTableHeaders plugin jquery. Voir la question et la solution possible ici: github.com/jmosbech/StickyTableHeaders/issues/1
    Il n'est pas de travailler avec d'accordéon au-dessus de ng-table.. s'il vous Plaît voir plunker pour la question.. plnkr.co/modifier/FGjU46cCMuhIdyacffHl?p=preview
    on dirait que vous aurez besoin de recalculer l'en-tête de la position alors que l'animation se passe. Mon intention était uniquement pour avoir travailler dans un scénario simple...
    Donc, il y a une alternative à travailler ensemble.. Si possible pouvez-vous partager la même plunker code? Merci d'avance

    OriginalL'auteur emp