Use the CRUD layout components to create, read, update, and delete data from your application based on a table layout with modals and drawers coded with Tailwind CSS.
Use this free component to show data from your application inside a table with create, read, update, and delete modals.
Product name | Category | Brand | Description | Price | Actions |
---|---|---|---|---|---|
Apple iMac 27" | PC | Apple | What is a product description? | $2999 | |
Apple iMac 20" | PC | Apple | What is a product description? | $1499 | |
Apple iPhone 14" | PC | Apple | What is a product description? | $2999 | |
Apple iPad Air | PC | Apple | What is a product description? | $1199 | |
Xbox Series S | Gaming/Console | Microsoft | What is a product description? | $299 | |
PlayStation 5 | Gaming/Console | Sony | What is a product description? | $799 | |
Xbox Series X | Gaming/Console | Microsoft | What is a product description? | $699 | |
Apple Watch SE | Watch | Apple | What is a product description? | $399 | |
NIKON D850 | Camera | Nikon | What is a product description? | $599 | |
Monitor BenQ EX2710Q | TV/Monitor | BenQ | What is a product description? | $499 |
Use this component to show a list of products inside a table featuring bulk actions, images, tags, reviews, and CRUD actions using drawers.
Product | Category | Stock | Sales/Day | Sales/Month | Rating | Sales | Revenue | Last Update | |
---|---|---|---|---|---|---|---|---|---|
Apple iMac 27" | Desktop PC | 95 | 1.47 | 0.47 | 5.0 | 1.6M | $3.2M | ||
Apple iMac 20" | Desktop PC | 108 | 1.15 | 0.32 | 5.0 | 6M | $785K | ||
Apple iPhone 14 | Phone | 24 | 1.00 | 0.99 | 4.0 | 1.2M | $3.2M | ||
Apple iPad Air | Tablet | 287 | 0.47 | 1.00 | 4.0 | 298K | $425K | ||
Xbox Series S | Gaming/Console | 450 | 1.61 | 0.30 | 5.0 | 99 | $345K | ||
PlayStation 5 | Gaming/Console | 2435 | 1.41 | 0.11 | 4.0 | 2.1M | $4.2M | ||
Xbox Series X | Gaming/Console | 235 | 7.09 | 3.32 | 5.0 | 989K | $2.27M |
This table layout can be used to show expandable rows to show more information about a data entry including the CRUD actions and modals.
Expand/Collapse Row | Product | Category | Brand | Price | Stock | Total Sales | Status | |
---|---|---|---|---|---|---|---|---|
Apple iMac 27" | PC | Apple | $2999 | 200 | 245 | Active | ||
Apple iMac 20" | PC | Apple | $1499 | 1237 | 2000 | Active | ||
Apple iPhone 14 | Phone | Apple | $999 | 300 | 466 | Active | ||
Apple iPad Air | Tablet | Apple | $1199 | 4576 | 90 | Active | ||
Xbox Series S | Gaming/Console | Microsoft | $299 | 56 | 3087 | Active | ||
PlayStation 5 | Gaming/Console | Sony | $799 | 78 | 2999 | Active | ||
Xbox Series X | Gaming/Console | Microsoft | $699 | 200 | 1870 | Active |
This example can be used to manage users inside an application system using CRUD action modals and featuring table filtering options.
User | User Role | Account type | Rating | Country | Status | Actions | ||
---|---|---|---|---|---|---|---|---|
Jese Leos | Administrator AdministratorAdministrators are responsible for managing the entire system. | jese@example.com | PRO | 4.7 | United States | Active | ||
Bonnie Green | Viewer ViewerViewers are responsible for observing and consuming the content of a discussion or a debate. | bonnie@example.com | PRO | 3.9 | United States | Active | ||
Leslie Livingston | Moderator ModeratorModerators are responsible for the facilitation, review, and guidance of a discussion or a debate. | leslie@example.com | PRO | 4.8 | United States | Inactive | ||
Micheal Gough | Moderator ModeratorModerators are responsible for the facilitation, review, and guidance of a discussion or a debate. | michael@example.com | Basic | 5 | France | Active | ||
Joseph McFall | Viewer ViewerViewers are responsible for observing and consuming the content of a discussion or a debate. | joseph@example.com | Basic | 4.2 | England | Active | ||
Robert Brown | Viewer ViewerViewers are responsible for observing and consuming the content of a discussion or a debate. | robert@example.com | Basic | 4.5 | Canada | Inactive | ||
Karen Nelson | Viewer ViewerViewers are responsible for observing and consuming the content of a discussion or a debate. | karen@example.com | PRO | 4.1 | Canada | Inactive |
Use this example to show a list of items from your database inside a list of cards with CRUD actions including creating, reading, updating, and deleting data.
PC/Desktop PC
$2999
300
466
Gaming/Console
$299
56
3040
Gaming/Console
$799
78
2999
TV/Monitor
$499
354
76
Phone
$999
1237
2000