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
}