Saya mencoba membuat tabel Tabulator di dalam div yang memiliki tinggi dan lebar tetap.

Namun, jika kolom/baris data tidak cukup untuk mengisi seluruh lebar atau tinggi div, tabel Tabulator akan tetap menempati seluruh tinggi/lebar, hanya mengisi warna abu-abu di ruang kosong.

Bagaimana saya bisa menyingkirkan area abu-abu ini? Perhatikan bahwa saya tidak ingin mengubah ukuran baris atau kolom.

 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>
4
barciewicz 22 Oktober 2019, 14:27

3 jawaban

Jawaban Terbaik

Saat ini Anda memiliki salah satu dari dua opsi tampilan untuk tabel:

  • Jika Anda menentukan ketinggian di atas meja, itu akan mengambil ketinggian itu dan luapan apa pun akan dikelola dengan benar dan memungkinkan pengguliran, jika tidak ada cukup baris untuk mengisi tabel, itu masih membutuhkan jumlah ruang yang sama dan Anda melihat latar belakang tabel
  • Jika Anda tidak menentukan ketinggian pada tabel, itu mengasumsikan bahwa Anda ingin mengambil ketinggian sebanyak baris dan div eksternal ke tabel akan menangani pengguliran

Jadi dalam skenario Anda, Anda bisa melihat mengubah warna latar belakang agar lebih pas, tetapi tidak ada cara untuk menyembunyikan ruang ekstra.

Di versi 4.6 mendatang (datang awal 2020) akan ada mode tampilan baru yang merupakan hibrida antara keduanya, yang akan memungkinkan tabel untuk berkembang hingga meluap dan kemudian menangani pengguliran di dalam tabel

3
Oli Folkerd 24 Desember 2019, 11:56

Saya telah mengubah height menjadi max-height. Apakah ini menyelesaikan masalah Anda? Tidak peduli berapa banyak baris, tabel tidak akan menempati lebih dari 200px tingginya.

Juga telah menambahkan display: inline-block dan max-width: 200px untuk menyesuaikan lebar div yang berisi. Anda dapat membuat tabel dapat digulir ke salah satu atau kedua arah setelah lebar dan/atau tinggi tabel mencapai maksimum yang ditentukan di dalamnya berisi 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 Oktober 2019, 12:57
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 Oktober 2019, 13:37