制表符表列大小不正确

Question

我正在尝试使用制表符（4.4.3）生成表，当表具有基于百分比的宽度和最初被隐藏时（在引导选项卡中），我遇到了麻烦。当我尝试重新绘制最初隐藏的表时，非百分比列的大小会正确调整，但基于百分比的列会很小，并且永远不会变成正确的大小。

我想使用fitColumns布局模式，因为我希望列采用全宽。我没有在fitData模式下看到此问题，但是然后我没有真正想要的列扩展。

var cols = [
  { field: 'name', title: 'Name',  width: '20%' },
  { field: 'description', title: 'Description',  width: '30%' },
  { field: 'location', title: 'Location', widthGrow: 2 },
];
var config = {
  columns: cols,
  data: data,
  layout: 'fitColumns'
};
var always_shown_table = new Tabulator("#my-table", config);

我相信我会在正确的时间致电table.redraw()，但看来制表器布局代码从未调整过设置宽度的列。如何获得表格以正确重绘这些列？

我创建了一个fiddle来演示此问题。

Answer 1

或者您可以删除已定义的显式宽度，因为您正在使用layout: 'fitColumns'

var data = [{
    name: '1',
    description: 'Description of thing 1',
    location: 'Location 1'
  },
  {
    name: '2',
    description: 'Description of thing 2',
    location: 'Location 2'
  },
  {
    name: '3',
    description: 'Description of thing 3',
    location: 'Location 3'
  },
];
var cols = [{
    field: 'name',
    title: 'Name',
  },
  {
    field: 'description',
    title: 'Description',
  },
  {
    field: 'location',
    title: 'Location',
  },
];

var config = {
  columns: cols,
  data: data,
  layout: 'fitColumns'
};
var always_shown_table = new Tabulator("#always-shown", config);
var initially_hidden_table = new Tabulator("#initially-hidden", config);

$("a[data-toggle='tab']").on('shown.bs.tab', function(e) {
  if (e.target.id === 'tabulator-tab') {
    console.log('redrawing table');
    setTimeout(() => {
      initially_hidden_table.redraw(true);
    }, 0)
    //initially_hidden_table.redraw(true);
  }

})

.tabulator-table {
  width: 100%;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<h4>
  Always visible table:
</h4>
<div id="always-shown" class="tabulator-table"></div>


<h4 class="mt-3">
  Table initially hidden in the tabulator tab:
</h4>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tabulator-tab" data-toggle="tab" href="#tabulator" role="tab">Tabulator</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane show active" id="home" role="tabpanel">
    Bacon ipsum dolor amet leberkas prosciutto pork loin pastrami jowl strip steak shoulder. Hamburger tenderloin filet mignon kevin, biltong doner ribeye meatloaf capicola. Jerky kevin bresaola tongue jowl shankle ball tip. Corned beef bacon capicola, cupim
    strip steak beef pork belly cow spare ribs pork loin prosciutto t-bone burgdoggen chuck pig. Landjaeger burgdoggen bacon, tail kielbasa pig porchetta alcatra filet mignon shank.
  </div>
  <div class="tab-pane" id="tabulator" role="tabpanel">
    <div id="initially-hidden" class="tabulator-table"></div>
  </div>
</div>

Answer 2

我当前的解决方法是在重绘后手动调整百分比宽度列。

my_table.columnManager.columnsByIndex.forEach(function (col) {
  if (col.visible) {
    var width = col.definition.width;
    if (width && typeof width === 'string' && width.indexOf('%') > -1) {
      col.setWidth(my_table.element.clientWidth / 100 * parseInt(width));
    }
  }
});

这似乎很好用，但是对于框架在重绘过程​​中直接执行此操作会很好。