CODEWITHSUNDEEP
csscss-gridtabulator
Chris Farmer
Chris Farmer

Reputation: 25386

Tabulator table width problem using css grid

I've got a Tabulator table inside a page that uses css grid for layout. When I resize the browser, I want the table to grow and shrink with the view. This works fine when outside of css grid, but fails when inside my css grid. When using css grid, the Tabulator table expands correctly when the browser is resized wider, but never shrinks when the browser view gets narrower. Instead, scrollbars appear and the table remains wide.

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', width: '20%', widthGrow: 1, widthShrink: 1  },
    { field: 'description', title: 'Description', width: '30%', widthGrow: 1, widthShrink: 1    },
    { field: 'location', title: 'Location', width: '50%', widthGrow: 1, widthShrink: 1   },
];

var config = {
    columns: cols,
    data: data,
    layout: 'fitColumns'
};
var mytable = new Tabulator("#mytable", config);
.main-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
}


/* If I use the below css instead, the table shrinking works correctly. */
/*
.main-body {
    width: 100%;
}
*/
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.js"></script>


When the view is made wider, the table expands correctly.
When it's made narrower, the table does not shrink correctly.
In the snippet view, it's easiest to use "full page" mode to see the issue.

<div class="main-body">
  <div class="main-content">
    <div id="mytable"></div>
  </div>
</div>

If I instead change the main-body css to remove the grid, the table resizes correctly.

.main-body {
    width: 100%;
}

The grid here is contrived for the purpose of creating a simplified example. My actual grid is more complicated, so I'd prefer to keep using the grid here.

How can I get my tabulator table to both expand and contract with the browser width here?

enter image description here

Here's a fiddle which uses css grid and shows the table resize problem: https://jsfiddle.net/cfarmerga/wtqo65uc/26/

Here's a fiddle which does not use css grid, and shows the table resizing correctly: https://jsfiddle.net/cfarmerga/wtqo65uc/29/

Upvotes: 1

Views: 841

Answers (1)

Chris Farmer
Chris Farmer

Reputation: 25386

Not unexpectedly, this is an issue with my use of CSS grid rather than tabulator itself. This post on CSS grid blowout was helpful: https://css-tricks.com/preventing-a-grid-blowout/

Changing my css to provide an explicit minimum size for the grid was all it took.

.main-body {
    ...
    grid-template-columns: minmax(0, 1fr);
    ...
}

Upvotes: 5

Related Questions