Tabulator table columns not resizing correctly

Question

I'm trying to use tabulator (4.4.3) to generate tables, and I am having trouble when the tables have percentage-based widths and are initially hidden (in a bootstrap tab). When I try to redraw the initially hidden table, the non-percentage column gets resized correctly, but the percentage-based columns stay small and never become their correct size.

I want to use the fitColumns layout mode, because I want the columns to take the full width. I don't see this problem in the fitData mode, but then I don't get the column expansion that I really want.

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);

I believe I'm calling table.redraw() at the correct time, but it looks like the tabulator layout code never adjusts the columns with set widths. How can I get my table to redraw these columns correctly?

I created a fiddle to demo this issue.

Answer 1

or you could remove the explicit widths you have defined, since you are using 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 current workaround is to manually size the percentage-width columns after I redraw.

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));
    }
  }
});

This seems to work fine, but it'd be nice for the framework to do this directly during the redraw process.