Angular Material Table, on screen resize hide column dynamically and add to detail row

Question

I need to replicate Datatable Jquery behavior to Angular Material Table, when screen is zoomed out the exceeded column need to be hidden and go to detail row like this.

Datatable jquery

Thanks

Tried to use Viewport without success

Answer 1

I guess you're using Angular so you can try using HostListener on resize and inside it using

var elementRect = element.getBoundingClientRect()

and checking the position of the single element. Something like that:

elementRect.top >= 0 &&
        elementRect.left >= 0 &&
        elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        elementRect.right <= (window.innerWidth || document.documentElement.clientWidth)

When the element is outside the viewport you can hide it and put your data in a sub table as DataTable does.