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
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.
This is the adjusted header fragment with a new parameter
hideOnMobile to add the extra CSS classes: