plugin - Cabeceras fijas AngularJS ng-table

ngtable download

Question

Estoy usando ng-table para mostrar algo de información. Me gustaría corregir el encabezado y el pie de página de la tabla ng y forzar a la tabla ng a dibujar barras de desplazamiento dentro de las filas.

El sitio de documentación de ng-table no tiene documentación sobre cómo hacer que eso suceda.

¿Algunas ideas?

Answer 1

Esa es, con mucho, la solución más confiable que encontré. Y he buscado durante horas antes de decidir utilizar un complemento de jQuery. En la versión del complemento que estoy usando, podemos pegar el encabezado en un contenedor desplazable. Eche un vistazo a este plunker para ver un caso de uso con 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;
}

Answer 2

No sé sobre el pie de página, pero tenía un requisito similar para los encabezados.

Esto se solicitó antes de @ Github: https://github.com/esvit/ng-table/issues/41

Hice mi propia implementación utilizando un complemento jquery ( https://github.com/jmosbech/StickyTableHeaders ).

Hay un plunkr aquí: http://plnkr.co/edit/KyilXo?p=preview

Básicamente, solo llamamos al complemento en la directiva data-fixed-table-headers cuando los datos han sido renderizados.

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);
        }
    }

Answer 3

Esta solución solo para CSS funcionó para mí. Solo agregue la clase table-scroll de tabla al elemento de tabla y el siguiente CSS:

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