Get started with a collection of advanced table components based on multiple layouts and styles to show a complex set of data using rows and columns built with Tailwind CSS.
Use this free example of a table component with a search bar, filter dropdown, and a dataset of rows and columns to show complex data in your application.
Product name | Category | Brand | Description | Price | Actions |
---|---|---|---|---|---|
Apple iMac 27" | PC | Apple | 300 | $2999 | |
Apple iMac 20" | PC | Apple | 200 | $1499 | |
Apple iPhone 14" | PC | Apple | 1237 | $2999 | |
Apple iPad Air | PC | Apple | 4578 | $1199 | |
Xbox Series S | Gaming/Console | Microsoft | 256 | $299 | |
PlayStation 5 | Gaming/Console | Sony | 78 | $799 | |
Xbox Series X | Gaming/Console | Microsoft | 200 | $699 | |
Apple Watch SE | Watch | Apple | 657 | $399 | |
NIKON D850 | Camera | Nikon | 465 | $599 | |
Monitor BenQ EX2710Q | TV/Monitor | BenQ | 354 | $499 |
This responsive table component can be used to show a list of products with images, categories, sales generated, and ratings in your e-commerce platform.
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 | Just now | |
Apple iMac 20" | Desktop PC | 108 | 1.15 | 0.32 | 5.0 | 6M | $785K | This week | |
Apple iPhone 14 | Phone | 24 | 1.00 | 0.99 | 4.0 | 1.2M | $3.2M | Just now | |
Apple iPad Air | Tablet | 287 | 0.47 | 1.00 | 4.0 | 298K | $425K | Just now | |
Xbox Series S | Gaming/Console | 450 | 1.61 | 0.30 | 5.0 | 99 | $345K | This week | |
PlayStation 5 | Gaming/Console | 2435 | 1.41 | 0.11 | 4.0 | 2.1M | $4.2M | This week | |
Xbox Series X | Gaming/Console | 235 | 7.09 | 3.32 | 5.0 | 989K | $2.27M | Just now | |
Apple Watch SE | Watch | 433 | 4.96 | 0.74 | 5.0 | 102 | $45K | 2 weeks ago | |
NIKON D850 | Photo/Video | 351 | 0.20 | 0.74 | 3.0 | 1.2M | $1.52M | 3 weeks ago | |
Monitor BenQ EX2710Q | TV/Monitor | 1242 | 4.12 | 0.30 | 4.0 | 211K | $1.2M | Just now |
Use this example to expand a table row when clicking on it and show more details about a given data entry such as images, descriptions, and more.
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 | ||
Apple Watch SE | Watch | Apple | $399 | 657 | 5067 | Active | ||
NIKON D850 | Photo | Nikon | $599 | 465 | 1870 | Active | ||
Monitor BenQ EX2710Q | TV/Monitor | BenQ | $499 | 354 | 76 | Active |
Use this example to show a list of tasks (to-do items) with checkboxes, filter elements and user avatars inside a responsive table component.
Task | Status | Users | Progress | Preview | Time Tracking | Due Date | Actions | |
---|---|---|---|---|---|---|---|---|
Upload feed and Reels in Instagram | In progress | 75% | Website | 6:47/8:00 | 23 Nov 2022 | |||
Crossplatform analysis | Completed | 100% | Website | 7:00 | 03 Nov 2022 | |||
Product features analysis | In progress | 50% | Website | 3:25/8:00 | Yesterday | |||
Create use story | Completed | 100% | Website | 8:00 | 23 Nov 2022 | |||
Users profile update | In progress | 20% | Website | 4:21/8:00 | Yesterday | |||
User flow update | Completed | 100% | Website | 7:00 | 23 Oct 2022 | |||
Update design system | In review | 100% | Website | 7:00 | 02 Nov 2022 | |||
Create a new logo | Completed | 100% | Website | 5:00 | 30 Oct 2022 | |||
Screen structure | In review | 100% | Website | 2:00 | 23 Nov 2022 | |||
Implement GPT 3 | In progress | 25% | Website | 3:11/8:00 | Today |
Use this example to show all the users from an application inside a row where you can show the avatar, role, status, social profiles, and CRUD actions.
User | User Role | Status | Social profile | Promote | Rating | Last Login | Actions | |
---|---|---|---|---|---|---|---|---|
Jese Leos | Administrator | Active | 4.7 | 20 Nov 2022 | ||||
Bonnie Green | Viewer | Active | 3.9 | 23 Nov 2022 | ||||
Leslie Livingston | Moderator | Inactive | 4.8 | 19 Nov 2022 | ||||
Michael Gough | Moderator | Active | 5 | 27 Nov 2022 | ||||
Joseph McFall | Viewer | Active | 4.2 | 20 Nov 2022 | ||||
Robert Brown | Viewer | Inactive | 4.5 | 20 Nov 2022 | ||||
Karen Nelson | Viewer | Inactive | 4.1 | 18 Nov 2022 | ||||
Helene Engels | Moderator | Active | 3.8 | 27 Nov 2022 | ||||
Lana Byrd | Viewer | Active | 4.8 | 20 Nov 2022 | ||||
Neil Sims | Moderator | Inactive | 5 | 20 Nov 2022 |
This example can be used to compare multiple data sets such as products inside a table showing the differences in specifications based on rows and columns.
Xbox Series S | PlayStation 5 | Xbox Series X | |
---|---|---|---|
General Information | |||
Brand | Microsoft | Sony | Microsoft |
Product Name | Xbox Series S | PlayStation 5 | Xbox Series X |
Colors | White | White/Black | Black |
Category | Gaming/Console | Gaming/Console | Gaming/Console |
Price | $499 | $599 | $299 |
Technical Information | |||
Platform | Xbox Series S | PlayStation 5 Digital Edition | Xbox Series X |
RAM | 16GB GDDR6 | 16GB GDDR6 | 16GB GDDR |
CPU | 8-core, 3.6 GHz AMD Zen 2 | 8-core 3.5 GHz AMD Zen 2 | 8-core 3.8 GHz AMD Zen 2 |
GPU | 4 teraflop AMD RDNA 2 | 10.3 teraflop AMD RDNA 2 | 12 teraflop AMD RDNA 2 |
Storage | 512 GB custom NVMe SSD | 825 GB custom SSD | 1 TB custom SSD |
Resolution | Up to 2K | Up to 8K | Up to 8K |
Frame Rate | Up to 120 fps | Up to 120 fps | Up to 120 fps |
Optical Drive | |||
ConTable.Rowoller | 1 | 1 | 1 |
Web Connection | Ethernet/Wi-Fi | Ethernet/Wi-Fi | Ethernet/Wi-Fi |
Delivery | |||
CounTable.Rowy | Worldwide | Worldwide | Worldwide |
Duration | 5-10 Days | 30 Days | 30 Days |
Tax | 2.5% | 2.5% | 2.5% |
Tax | 2.5% | 2.5% | 2.5% |
Use this example of a responsive table to show sortable rows and a lift of products with details such as category, price, sales, and status.
Product | Category | Brand | Price | Stock | Total Sales | Status | Actions | |
---|---|---|---|---|---|---|---|---|
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 | Inactive | ||
Apple iPad Air | Tablet | Apple | $1199 | 4576 | 90 | Active | ||
Xbox Series S | Gaming/Console | Microsoft | $299 | 56 | 3087 | Pending | ||
PlayStation 5 | Gaming/Console | Sony | $799 | 78 | 2999 | Active | ||
Xbox Series X | Gaming/Console | Microsoft | $699 | 200 | 1870 | Active | ||
Apple Watch SE | Watch | Apple | $399 | 657 | 5067 | Inactive | ||
NIKON 2850 | Photo | Nikon | $599 | 465 | 1870 | Pending | ||
BenQ EX2710Q | TV/Monitor | BenQ | $499 | 354 | 76 | Active |