Table
A responsive table component.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic example
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Pending | Credit Card | $817.13 |
| INV002 | Unpaid | Bank Transfer | $439.04 |
| INV003 | Pending | PayPal | $997.28 |
| INV004 | Paid | PayPal | $283.55 |
| INV005 | Paid | Credit Card | $714.22 |
| INV006 | Pending | PayPal | $346.11 |
| INV007 | Pending | Credit Card | $500.93 |
| Total | $4,098.26 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Carlos Streich | Senior Solutions Facilitator | carlos_streich7@yahoo.com | Viewer | |
| Frederick Casper | Senior Operations Specialist | frederick_casper@gmail.com | Admin | |
| Benny O'Connell | Product Data Producer | benny.oconnell83@hotmail.com | Admin | |
| Darrel Heller | Product Functionality Supervisor | darrel_heller71@hotmail.com | Admin | |
| Ann McDermott | Principal Markets Strategist | ann_mcdermott27@yahoo.com | Viewer | |
| Clementina Schaden | Investor Integration Manager | clementina.schaden69@hotmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Fred Monahan Lead Applications Facilitator fred.monahan49@gmail.com | Admin | |
Noah Kunze Investor Usability Director noah.kunze21@yahoo.com | Admin | |
Tre Stamm Lead Branding Director tre_stamm38@yahoo.com | Viewer | |
Telly Thiel Corporate Integration Specialist telly_thiel@gmail.com | Viewer | |
Teri Lebsack Legacy Paradigm Supervisor teri_lebsack12@hotmail.com | Admin | |
Ollie Conroy Internal Division Engineer ollie.conroy@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Angelo Hessel Internal Functionality Technician angelo_hessel@hotmail.com | Viewer | |
Leon Cummings-Moore Legacy Quality Executive leon.cummings-moore@gmail.com | Admin | |
Garrett Wyman Future Research Liaison garrett.wyman42@gmail.com | Viewer | |
Alex Ebert Senior Assurance Liaison alex_ebert@yahoo.com | Member | |
Rosalie Feeney Direct Usability Agent rosalie.feeney58@yahoo.com | Member | |
Carla Maggio Central Infrastructure Specialist carla_maggio@hotmail.com | Admin | |
Betsy Ledner Legacy Factors Representative betsy_ledner@gmail.com | Member | |
Lynn Koch District Optimization Technician lynn.koch93@gmail.com | Admin | |
Erin Konopelski Corporate Identity Technician erin_konopelski48@hotmail.com | Viewer | |
May Hessel Central Creative Manager may_hessel@hotmail.com | Viewer | |
Lance Schaefer Forward Division Supervisor lance_schaefer3@gmail.com | Viewer | |
Doris Romaguera Future Optimization Planner doris.romaguera80@gmail.com | Admin | |
Zoe Roob Principal Accounts Planner zoe_roob@hotmail.com | Member | |
Margarett Effertz Forward Configuration Agent margarett_effertz@yahoo.com | Admin | |
Penny Wiza Product Operations Executive penny.wiza@yahoo.com | Admin | |
Eloise Sauer Chief Metrics Analyst eloise.sauer67@yahoo.com | Member | |
Katherine Boyer Dynamic Operations Orchestrator katherine_boyer@hotmail.com | Member | |
Genevieve Wilkinson Future Marketing Consultant genevieve_wilkinson68@yahoo.com | Admin | |
Isabelle Weimann Investor Program Producer isabelle.weimann@hotmail.com | Viewer | |
Johathan Runolfsdottir Principal Interactions Officer johathan.runolfsdottir@gmail.com | Admin |
Origin UI Examples
These are some examples that I found today over here Origin UI ❤️. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
Basic Table
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Felix Pfeffer | johnathan.legros@gmail.com | Patriciaton | Active | $829.42 |
| Nannie Nicolas | elmo80@hotmail.com | West Rosalindhaven | Inactive | $351.38 |
| Naomi Senger PhD | grace86@yahoo.com | Connhaven | Active | $325.90 |
| Jesus O'Kon | alice19@yahoo.com | Madison | Active | $630.78 |
| Jaida Kreiger | peter.labadie73@yahoo.com | Rileymouth | Active | $278.31 |
| Total | $2,415.79 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mason Powlowski @marguerite.wuckert | ciara_walker71@yahoo.com | DuBuqueworth | Active | $16.23 |
Alex Collins @santina49 | caden_cruickshank56@hotmail.com | Chattanooga | Inactive | $538.12 |
Rochelle Lehner @sean96 | salvatore64@yahoo.com | South Megan | Inactive | $10.05 |
Alison Kohler @erin.mcglynn | luis.cremin@yahoo.com | Normaborough | Active | $76.32 |
Cornelius Bradtke @asha.kassulke97 | benny79@gmail.com | Hyatthaven | Active | $399.09 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dean Collins | hortense_bruen@gmail.com | Samland | Active | $734.85 |
| Ralph Larkin IV | lea_stehr31@yahoo.com | Irving | Active | $87.14 |
| Estelle Weimann Jr. | carlton_cruickshank@gmail.com | Ritchiefort | Active | $724.20 |
| Muriel Weimann | tommy.turner5@yahoo.com | Hampton | Inactive | $457.82 |
| Miss Michele Jacobi-Beier | joanne29@yahoo.com | West Cotyborough | Active | $642.33 |
| Total | $2,646.34 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Anabelle Stracke | yvette.cronin17@yahoo.com | East Sarinaside | Inactive | $1,197.80 |
| Marcelino Batz | emil98@hotmail.com | Port Delbert | Inactive | $921.12 |
| Rosie Olson I | elsa73@hotmail.com | West Austin | Inactive | $400.62 |
| Karlie Toy | rosalie_kiehn@yahoo.com | Brandonstead | Active | $1,125.78 |
| Israel Rau | donna97@gmail.com | East Devon | Active | $271.13 |
| Total | $3,916.45 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Margarita Fritsch | lauryn.hilpert58@gmail.com | Drewfort | Active | $371.87 |
| Sylvester Leuschke | bria49@gmail.com | New Martyside | Inactive | $865.95 |
| Georgiana Thompson | danyka.larkin35@gmail.com | Ritchiemouth | Active | $853.86 |
| Providenci Boyer | kathryn50@yahoo.com | Grimesland | Inactive | $1,140.18 |
| Will Wisozk | sonja.langworth@yahoo.com | North Rhonda | Active | $841.52 |
| Total | $4,073.38 | |||
Table with vertical lines
Dense Table
| Name | Release Year | Developer | Typing | Paradigm | Extension | Latest Version | Popularity |
|---|---|---|---|---|---|---|---|
| JavaScript | 1995 | Brendan Eich | Dynamic | Multi-paradigm | .js | ES2021 | High |
| Python | 1991 | Guido van Rossum | Dynamic | Multi-paradigm | .py | 3.10 | High |
| Java | 1995 | James Gosling | Static | Object-oriented | .java | 17 | High |
| C++ | 1985 | Bjarne Stroustrup | Static | Multi-paradigm | .cpp | C++20 | High |
| Ruby | 1995 | Yukihiro Matsumoto | Dynamic | Multi-paradigm | .rb | 3.0 | Low |
Dense table
Row Selection
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Douglas Huel | luther.kub@yahoo.com | Ashleyhaven | Inactive | $190.32 | |
| Muhammad Lebsack | pedro.russel@yahoo.com | Roderickhaven | Inactive | $975.30 | |
| Laurie Bergnaum | charles.ankunding61@gmail.com | Lavadaside | Active | $954.75 | |
| Catharine Romaguera | jill26@hotmail.com | Port Aprilfurt | Active | $818.38 | |
| Edwin Hilll | sydnie93@yahoo.com | Goldnerboro | Active | $301.41 | |
| Total | $3,240.16 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Amber Quitzon DDS | jordon94@gmail.com | West Linda | Inactive | $169.07 | |
| Jazmyn Jacobs | mona72@hotmail.com | Lake Bradley | Active | $892.08 | |
| Mr. Allan Pagac | joshua_kertzmann@yahoo.com | Lennaland | Inactive | $291.43 | |
| Dr. Kyra Runolfsson | olen_ruecker8@yahoo.com | Gottliebfurt | Inactive | $1,141.03 | |
| Mae Lang | geovanny76@hotmail.com | Lake Rodneyshire | Inactive | $203.16 | |
| Total | $2,696.77 | ||||
Table with row selection
Vertical Table
| Name | David Kim |
| d.kim@company.com | |
| Location | Seoul, KR |
| Status | Active |
| Balance | $1,000.00 |
Vertical table
Sticky Header 2
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Camille Okuneva | kaya7@gmail.com | Pearland | Active | $1,007.89 |
| Zander Reynolds | eddie55@hotmail.com | Herzogborough | Inactive | $140.15 |
| Griffin Oberbrunner | stanley.stiedemann@yahoo.com | Wolffburgh | Active | $732.65 |
| Hattie Stoltenberg | vickie21@yahoo.com | Wisokyfield | Active | $249.90 |
| Kristin Sipes | dexter66@yahoo.com | Port Preston | Inactive | $770.57 |
| Clarabelle Wolf | naomie.volkman@yahoo.com | Bayercester | Active | $804.91 |
| Ima Flatley | cora_wisozk75@yahoo.com | Jeffersonville | Inactive | $857.70 |
| Lillie Rath | nella.padberg@hotmail.com | Reneside | Inactive | $245.71 |
| Chanel Wintheiser | jaron.glover26@gmail.com | New Harriet | Active | $1.07 |
| Mae Hoppe | macey_fisher@hotmail.com | Rennerfurt | Active | $254.35 |
| Thomas Borer | gerald_hickle16@yahoo.com | Rogers | Active | $307.87 |
| Glenda Weimann | herbert50@gmail.com | East Lukaschester | Active | $418.19 |
| Susan Witting | lena93@gmail.com | Brendanchester | Inactive | $309.71 |
| Alonzo Kuhlman | cynthia43@gmail.com | Sipeshaven | Inactive | $427.06 |
| Clifton Jerde | casey.bogan-rosenbaum@yahoo.com | Howefurt | Active | $741.70 |
| Total | $7,269.43 | |||
Table with sticky header
Browser Support
| Desktop browsers | Mobile browsers | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox Android | Opera Android | Safari iOS | Samsung Internet | |
| scroll-timeline | Supported 115 | Supported 115 | Not supported 111 | Supported 101 | Not supported No | Supported 115 | Not supported No | Supported 77 | Not supported No | Supported 23 |
| view-timeline | Supported 115 | Supported 115 | Not supported 114 | Supported 101 | Not supported No | Supported 115 | Not supported No | Supported 77 | Not supported No | Supported 23 |
| font-size-adjust | Supported 127 | Supported 127 | Not supported 3 | Supported 113 | Supported 16.4 | Supported 127 | Supported 4 | Supported 84 | Supported 16.4 | Not supported No |