Estoy tratando de crear una tabla Tabulator dentro de un div que tenga altura y ancho fijos.
Sin embargo, si no hay suficientes columnas / filas de datos para llenar todo el ancho o alto del div, la tabla Tabulador seguirá ocupando todo el alto / ancho, solo llenando el color gris en el espacio libre.
¿Cómo puedo deshacerme de esta área gris? Tenga en cuenta que no quiero cambiar el tamaño de las filas ni las columnas.
function create_table() {
let table = new Tabulator("#table", {
data: [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
],
columns:[
{title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'},
]
})
}
create_table()
#table {
height: 200px;
width: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
<!-- Tabulator -->
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>
3 respuestas
En este momento tiene una de las dos opciones de visualización para la tabla:
- Si especifica una altura en la tabla, ocupará esa altura y cualquier desbordamiento se gestionará correctamente y permitirá el desplazamiento, si no hay suficientes filas para llenar la tabla, todavía ocupa la misma cantidad de espacio y verá el fondo de la tabla
- Si no especifica una altura en la tabla, se supone que desea que ocupe tanta altura como filas y que el div externo de la tabla manejará el desplazamiento
Por lo tanto, en su escenario, podría considerar cambiar el color de fondo para que encaje más, pero no hay forma de ocultar el espacio adicional.
En la próxima versión 4.6 (a principios de 2020) habrá un nuevo modo de visualización que es un híbrido entre los dos, que permitirá que la tabla se expanda hasta que se desborde y luego maneje el desplazamiento dentro de la tabla
ar selectedCount = function() {
var selectedRows = $("#example-table").tabulator("getSelectedRows").length;
$('#rowCount').text(selectedRows);
}
$("#example-table").tabulator({
height: 205,
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ {title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'}
],
});
var tabledata = [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
];
//load sample data into the table
$("#example-table").tabulator("setData", tabledata);
selectedCount();
<div id="example-table"></div>
<p>
Number of selected rows = <span id="rowCount"></span>
</p>
As per my understanding, Please check the documentation provided to make the
columns to fit for the parent container http://tabulator.info/examples/4.4?#fittowidth
Please check the working example in the following https://jsfiddle.net/gzx72ukh/
He cambiado height
a max-height
. ¿Esto resuelve tu problema? No importa cuántas filas, la tabla no ocupará más de 200px
de altura.
También agregué display: inline-block
y max-width: 200px
para ajustar el ancho de div
que contiene. Puede hacer que la tabla se pueda desplazar en una o ambas direcciones una vez que el ancho y / o la altura de la tabla alcancen el máximo definido en su contenido div
.
function create_table() {
let table = new Tabulator("#table", {
data: [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
],
columns:[
{title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'},
]
})
}
create_table()
#table {
display: inline-block;
max-height: 200px;
max-width: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
<!-- Tabulator -->
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.