Hide Columns on Mobile

The menu on the left collapses into a hamburger menu on mobile, but our table keeps showing the four columns (+1 for the edit links).

If we only want to keep the Name and Edit columns, we should hide the other columns using Tailwind. If we follow the recommendation on targeting mobile screens, we should add the hidden sm:table-cell styles to the columns we want to hide. This will ensure they are hidden on the small screen and become visible as soon as the screen is bigger. This is called a responsive web design.

The hideOnMobile parameter

This is the adjusted header fragment with a new parameter hideOnMobile to add the extra CSS classes: