¿Cómo ajustar una tabla Tabulator a un div de altura y ancho fijos?

Question

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>

javascript html css tabulator

1

barciewicz 22 oct. 2019 a las 14:27

Answer 1

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

1

Oli Folkerd 24 dic. 2019 a las 11:56

Answer 2

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/

0

Venkatesh Chitluri 22 oct. 2019 a las 13:37

Answer 3

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>

0

Akshit Mehra 22 oct. 2019 a las 12:57

¿Cómo ajustar una tabla Tabulator a un div de altura y ancho fijos?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript