Как подогнать таблицу табулятора к элементу фиксированной высоты и ширины?

Question

Я пытаюсь создать таблицу Tabulator внутри div, который имеет фиксированную высоту и ширину.

Однако, если столбцов / строк данных недостаточно для заполнения всей ширины или высоты элемента div, таблица Tabulator по-прежнему будет занимать всю высоту / ширину, заполняя только серый цвет в свободном пространстве.

Как я могу избавиться от этой серой области? Обратите внимание, что я не хочу изменять размер строк, а не столбцов.

 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

4

barciewicz 22 Окт 2019 в 14:27

Answer 1

На данный момент у вас есть один из двух вариантов отображения таблицы:

Если вы укажете высоту в таблице, она будет занимать эту высоту, и любое переполнение будет корректно управляться и разрешать прокрутку; если строк недостаточно для заполнения таблицы, она все равно занимает тот же объем пространства, и вы видите фон таблицы.
Если вы не указываете высоту в таблице, это предполагает, что вы хотите, чтобы она занимала столько же высоты, сколько имеется строк, и что внешний div таблицы будет обрабатывать прокрутку

Таким образом, в вашем сценарии вы можете посмотреть на изменение цвета фона, чтобы сделать его более подходящим, но нет способа скрыть дополнительное пространство.

В следующей версии 4.6 (в начале 2020 г.) появится новый режим отображения, представляющий собой гибрид между этими двумя режимами, который позволит таблице расширяться до тех пор, пока она не переполнится, а затем обрабатывать прокрутку внутри таблицы.

1

Oli Folkerd 24 Дек 2019 в 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 Окт 2019 в 13:37

Answer 3

Я изменил height на max-height. Решает ли это вашу проблему? Независимо от того, сколько строк, таблица не будет занимать более 200px высоты.

Также добавили display: inline-block и max-width: 200px для настройки ширины вмещающего div. Вы можете сделать таблицу прокручиваемой в любом или обоих направлениях, как только ширина и / или высота таблицы достигнет максимального значения, определенного в нем, 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 Окт 2019 в 12:57

Как подогнать таблицу табулятора к элементу фиксированной высоты и ширины?

3 ответа

Похожие вопросы

Новые вопросы

javascript