Components
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 | Unpaid | PayPal | $987.19 |
| INV002 | Paid | Bank Transfer | $730.93 |
| INV003 | Unpaid | Credit Card | $429.93 |
| INV004 | Pending | PayPal | $289.27 |
| INV005 | Pending | Credit Card | $823.45 |
| INV006 | Unpaid | PayPal | $973.38 |
| INV007 | Pending | PayPal | $935.26 |
| Total | $5,169.41 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Holly Anderson | Chief Directives Officer | holly_anderson54@yahoo.com | Member | |
| Hilma Cole | Human Factors Associate | hilma.cole@hotmail.com | Viewer | |
| Yoshiko Bogisich | Lead Security Officer | yoshiko.bogisich@yahoo.com | Admin | |
| Mariano Altenwerth | Central Communications Engineer | mariano.altenwerth50@hotmail.com | Member | |
| Judy Cremin | Global Marketing Associate | judy_cremin88@hotmail.com | Admin | |
| Jim Goodwin | Central Directives Director | jim_goodwin@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 |
|---|---|---|
Laurie Kihn Central Metrics Director laurie.kihn@hotmail.com | Viewer | |
Tommie Cummings Central Applications Representative tommie_cummings58@hotmail.com | Viewer | |
Roderick Bins Product Configuration Associate roderick_bins84@yahoo.com | Member | |
Martin Homenick District Security Producer martin.homenick75@gmail.com | Admin | |
Opal Becker Dynamic Security Coordinator opal_becker88@yahoo.com | Admin | |
Krista Willms International Research Director krista.willms98@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Clarabelle O'Keefe Global Intranet Producer clarabelle.okeefe@yahoo.com | Admin | |
April Murazik Senior Branding Representative april.murazik@gmail.com | Member | |
Domingo Swaniawski Central Configuration Supervisor domingo.swaniawski91@yahoo.com | Member | |
Genevieve Mante Internal Factors Planner genevieve_mante@gmail.com | Admin | |
Viola Wintheiser Legacy Marketing Strategist viola.wintheiser@yahoo.com | Member | |
Albert Kuhlman Human Quality Associate albert.kuhlman@yahoo.com | Admin | |
Heaven Cassin Investor Research Facilitator heaven_cassin39@yahoo.com | Admin | |
Erik Tremblay Forward Integration Specialist erik_tremblay@hotmail.com | Viewer | |
Jim Hermiston Forward Communications Agent jim.hermiston@yahoo.com | Viewer | |
Travis Mante District Metrics Engineer travis_mante59@yahoo.com | Viewer | |
Josefa Harber National Research Analyst josefa_harber@gmail.com | Admin | |
Alberta Mraz Forward Security Representative alberta.mraz@gmail.com | Admin | |
Daryl Ratke National Operations Administrator daryl_ratke@hotmail.com | Admin | |
Blake Lockman International Quality Liaison blake.lockman54@yahoo.com | Admin | |
Yvette Predovic Global Research Planner yvette.predovic@gmail.com | Viewer | |
Gene Denesik Principal Operations Manager gene.denesik@gmail.com | Admin | |
Johnny Dibbert Lead Integration Liaison johnny.dibbert75@hotmail.com | Admin | |
Alvin Lemke Customer Applications Officer alvin.lemke@gmail.com | Member | |
Trenton Kassulke District Research Specialist trenton.kassulke@yahoo.com | Admin | |
Rod Welch Senior Accountability Planner rod.welch42@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 | |
|---|---|---|---|---|
| Craig Zboncak | wallace98@yahoo.com | Cambridge | Active | $1,057.54 |
| Dorian Russel | juliet_rempel@yahoo.com | Jerrellbury | Inactive | $61.99 |
| Mr. Barton O'Keefe | vilma_jacobi82@gmail.com | Earnestineworth | Inactive | $818.92 |
| Katelin Tremblay | kathleen88@hotmail.com | Lake Pierremouth | Inactive | $125.80 |
| Homer Wilderman V | hailee_raynor91@hotmail.com | New Aronfield | Active | $389.84 |
| Total | $2,454.09 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kiel Nicolas @scottie_senger | jodie_braun@yahoo.com | Port Dannyshire | Active | $287.26 |
Louise Bradtke @ansel.jones-upton | pete_schuster28@yahoo.com | Lake Jarrodfurt | Active | $1,179.82 |
Dianna Crist @irving_cummerata3 | krystel.konopelski@gmail.com | Eau Claire | Active | $24.10 |
Miss Aubree Prosacco @troy_bailey71 | william.morissette38@gmail.com | Sagetown | Active | $948.48 |
Ms. Nicholaus Dicki @steven_oconnell20 | grace.ernser@yahoo.com | Goyettehaven | Inactive | $358.82 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lionel Ernser | okey32@hotmail.com | Halvorsonfield | Active | $1,056.66 |
| Dr. Julius Dickens | lamar45@yahoo.com | Lake Candace | Active | $1,107.10 |
| Louie West | marian_schuppe70@hotmail.com | Lake Sonjaland | Inactive | $240.31 |
| Miss Morgan Fay | carole72@hotmail.com | Lake Jaclyn | Active | $1,063.92 |
| Cory King | raquel_schimmel33@gmail.com | North Curtis | Active | $1,146.11 |
| Total | $4,614.10 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Anika MacGyver | camryn.hand@hotmail.com | Bednarfort | Inactive | $9.37 |
| Sandra Kemmer | geovany.roob36@gmail.com | Altadena | Inactive | $786.91 |
| Stacey Kovacek | gloria.wintheiser@gmail.com | South Harry | Inactive | $90.84 |
| Daryl Stanton PhD | candace30@hotmail.com | Dalestad | Active | $916.01 |
| Van Tromp-Heidenreich | bennett76@gmail.com | New Ginaview | Inactive | $226.55 |
| Total | $2,029.68 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dangelo Haag | gayle34@hotmail.com | Fort Wallacestad | Inactive | $1,156.40 |
| Uriel Morissette | heidi65@gmail.com | Waterloo | Inactive | $176.51 |
| Reuben Fadel | emelie.douglas61@yahoo.com | Cypress | Inactive | $323.02 |
| Marcos Swaniawski | damion.reynolds0@yahoo.com | New Eloy | Active | $980.35 |
| Christop Hartmann | colin93@hotmail.com | Harberbury | Inactive | $855.68 |
| Total | $3,491.96 | |||
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 | ||
|---|---|---|---|---|---|
| Becky Friesen | yvonne5@yahoo.com | South Clementinafield | Active | $715.60 | |
| Estevan Waters II | junius89@yahoo.com | Port Oleta | Inactive | $314.34 | |
| Bernard Cummings | kenny.johns@gmail.com | South Manuelastead | Active | $405.02 | |
| Mr. Braxton Kuhic | rosie32@yahoo.com | South Julian | Inactive | $676.15 | |
| Jacey Hintz | jimmie.beahan58@yahoo.com | Port Charlie | Active | $1,158.56 | |
| Total | $3,269.67 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lincoln Jerde | alison_cronin@gmail.com | Mayrahaven | Inactive | $364.84 | |
| Marcella Wisozk | tomas.schneider99@gmail.com | Cedrictown | Active | $80.38 | |
| Julia Hamill | warren48@gmail.com | Port Zackaryfurt | Active | $1,080.40 | |
| Anibal Hermiston | erica_mayert45@gmail.com | Enidboro | Active | $334.51 | |
| Yvette Anderson | jonathan_stroman@yahoo.com | West Abelchester | Active | $899.62 | |
| Total | $2,759.75 | ||||
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 | |
|---|---|---|---|---|
| Irene Considine | archie_quigley@yahoo.com | Ignacioborough | Inactive | $818.85 |
| Dr. Hilario Hirthe | marisol.rogahn77@hotmail.com | Labadieboro | Active | $817.91 |
| Yessenia Mraz | christy83@hotmail.com | Port Christinachester | Inactive | $792.01 |
| Myrtis Stiedemann-Wintheiser | wesley.green@yahoo.com | Modesto | Inactive | $17.24 |
| Mr. Irwin Mayert DVM | rogelio.howell@yahoo.com | East Eugenemouth | Inactive | $906.42 |
| Lila Champlin | marilie_murphy@gmail.com | Natashachester | Active | $18.97 |
| Jason Blanda | amara59@gmail.com | Bothell | Active | $989.77 |
| Darrick Bode | warren6@hotmail.com | Howefort | Inactive | $489.08 |
| Marguerite Willms | nico_graham21@yahoo.com | Modesto | Inactive | $1,197.94 |
| Makenzie Hilll | onie30@gmail.com | Johnsville | Active | $163.98 |
| Jill Kohler | gabriel22@yahoo.com | Fort Susanna | Inactive | $803.22 |
| Johnathan Senger | erwin_cartwright-rodriguez@hotmail.com | Reidbury | Active | $394.44 |
| Ms. Jewel Wiza | lia.carter@gmail.com | Kochville | Inactive | $769.28 |
| Mitchell Herzog-Davis | linda_larson@hotmail.com | Dorthafurt | Inactive | $740.03 |
| Kellie Kunze | pearline20@hotmail.com | Whittier | Active | $42.55 |
| Total | $8,961.69 | |||
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 |