Responsive Tables

Tables are one of the hardest components to show properly on a smaller screen, Simplify Admin provides css utilties to make this task easier.

Responsive Table
Using Responsive Table

To create a responsive table start by adding .rt-[[breakpoint]] to your table (where breakpoint is one of xs, sm, md, lg ). This adds a display flex on table rows below the used breakpoint
Remember that responsive tables use downward breakpoints, so the responsive utitlity classes would affect table for screen sizes lower than used breakpoint.

The following table turns flex at sm (screen size smaller than 992px) . Go ahead reduce ur screen size or browse on your phone to test

Project Lead Progress
Project
Alexa Space AI
Lead
Peter Stacy
Project
Research and Dev
Lead
Kenny Sewalk
Project
Quality Control
Lead
Joseph Dory
Demo

The same table as above turning flex for all screens

Project Lead Progress
Project
Alexa Space AI
Lead
Peter Stacy
Project
Research and Dev
Lead
Kenny Sewalk
Project
Quality Control
Lead
Joseph Dory
Utilites
Element Class Use
table .rt-[[breakpoint]] Use to turn table rows to display:flex for screens smaller than used breakpoint
td .rt-full Use to turn table rows to display:flex for screens smaller than used breakpoint
td .rt-header Turn element to a bold heading style on smaller screens
Any .rt-table-hide Hide an element on smaller screens
Any .d-none.rt-table-block Show as element as block only on smaller screens
Any .d-none.rt-table-inline Show an element as inline only on smaller screens