Hiding columns after a media breakpoint doesn't resize the table properls

arminus

Debugger code (debug.datatables.net): ixumop
Description of problem: I have some code which removes a table column for mobile screens:

@media screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}

and

  columnDefs: [
    {
      targets: [2],
      visible: true,
      className: "hide-on-mobile",
    },
  ]

The problem is that up to that breakpoint, the table is sized properly, like so:

but once the column is removed by CSS, it isn't anymore:

i.e. the row group headers scale to the full width, the column headers don't.

Any idea how this could be solved?

rf1234

You could either use the "responsive" extension which automatically puts columns in child rows on smaller screens.

Or you use the api to hide columns and not CSS because Data Tables won't "know" about your CSS manipulations.
You could programmatically get the screen width
https://www.w3schools.com/js/js_window_screen.asp
and then hide or show the column using an event handler, e.g. "init" or "draw"

https://datatables.net/reference/api/column().visible()
https://datatables.net/reference/event/draw
https://datatables.net/reference/event/init

arminus

Thanks for the quick response!