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 | Bank Transfer | $967.07 |
| INV002 | Pending | Credit Card | $420.47 |
| INV003 | Pending | PayPal | $746.52 |
| INV004 | Unpaid | PayPal | $971.32 |
| INV005 | Paid | PayPal | $383.10 |
| INV006 | Paid | Credit Card | $316.62 |
| INV007 | Unpaid | Credit Card | $828.52 |
| Total | $4,633.62 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Garfield Adams | Product Division Director | garfield.adams@hotmail.com | Viewer | |
| Greg Lebsack | Central Paradigm Technician | greg.lebsack@gmail.com | Admin | |
| June Rowe | Dynamic Accounts Analyst | june.rowe@hotmail.com | Admin | |
| Maximillian Ruecker | National Creative Specialist | maximillian_ruecker@hotmail.com | Member | |
| Andrea Abbott | Lead Communications Supervisor | andrea.abbott9@yahoo.com | Viewer | |
| Jeremy Ullrich | Senior Accounts Consultant | jeremy_ullrich45@gmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Tess Weber Senior Metrics Officer tess_weber51@gmail.com | Viewer | |
Kaia DuBuque Human Usability Developer kaia_dubuque26@yahoo.com | Viewer | |
Martina Pacocha District Factors Producer martina_pacocha@yahoo.com | Member | |
Helga Rice Internal Factors Orchestrator helga_rice25@gmail.com | Admin | |
Peggy Hessel Future Applications Technician peggy_hessel40@hotmail.com | Admin | |
Harold Treutel Direct Functionality Specialist harold.treutel@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Marta McClure Dynamic Marketing Planner marta_mcclure64@hotmail.com | Viewer | |
Danny Littel Internal Research Officer danny.littel@hotmail.com | Viewer | |
Sherman Bradtke Principal Paradigm Manager sherman_bradtke@gmail.com | Member | |
Marc Marquardt Dynamic Assurance Strategist marc.marquardt66@hotmail.com | Admin | |
Jaydon Beahan-Johns Chief Creative Associate jaydon.beahan-johns@gmail.com | Admin | |
Sadye Koch Senior Applications Consultant sadye_koch@gmail.com | Member | |
Gilberto Boehm Senior Functionality Officer gilberto_boehm4@hotmail.com | Admin | |
Terrance Kohler Forward Infrastructure Administrator terrance_kohler97@yahoo.com | Viewer | |
Malika Kerluke Internal Operations Executive malika_kerluke@gmail.com | Admin | |
Eriberto Windler Dynamic Metrics Director eriberto.windler@gmail.com | Member | |
Stephen Morar District Creative Liaison stephen.morar@gmail.com | Viewer | |
Jayden Dach Forward Directives Facilitator jayden.dach@yahoo.com | Member | |
Jessie Brakus Lead Operations Engineer jessie.brakus@gmail.com | Admin | |
Gordon Jacobson Regional Infrastructure Designer gordon.jacobson@gmail.com | Admin | |
Amya Fisher Principal Metrics Officer amya.fisher4@yahoo.com | Admin | |
Roy Hirthe Product Metrics Developer roy_hirthe63@gmail.com | Viewer | |
Clyde Wisozk District Identity Liaison clyde_wisozk@gmail.com | Viewer | |
Alexandro Tromp Customer Accountability Manager alexandro.tromp@gmail.com | Member | |
Janae Weber National Accountability Technician janae.weber46@yahoo.com | Member | |
Greg Skiles Dynamic Group Producer greg.skiles73@yahoo.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 | |
|---|---|---|---|---|
| Orrin Fay | adrienne_kerluke63@hotmail.com | Janetshire | Inactive | $574.11 |
| Angelica Medhurst | dominique_bosco@hotmail.com | Clarenceberg | Active | $536.32 |
| Hannah Hegmann | collin_gislason85@gmail.com | Fort Marta | Active | $191.65 |
| Cheyanne Gottlieb | wendy.schaden71@gmail.com | Schuliststead | Active | $1,103.57 |
| Celia Jacobi | lula_schowalter@hotmail.com | Port Stephon | Inactive | $84.17 |
| Total | $2,489.82 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mafalda Boehm @jeanette.larson35 | sheri94@gmail.com | West Carlcester | Inactive | $1,062.35 |
Jose Braun @belinda_erdman | tomasa_kiehn@hotmail.com | New Angelina | Inactive | $289.28 |
Becky McLaughlin @shari.heidenreich3 | chaz.ward@yahoo.com | East Fritzville | Inactive | $507.62 |
Enrique Koss @ila81 | dennis21@gmail.com | East Stephonworth | Active | $962.29 |
Myriam Hills Sr. @becky.torphy | kip_blanda@gmail.com | Tamarac | Inactive | $12.48 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Phillip Kuhlman | dameon.wuckert2@yahoo.com | Phyllisstad | Active | $144.26 |
| Carley Abshire | freeman.carter@hotmail.com | Fort Justin | Inactive | $599.14 |
| Brody Bashirian | charlie_koss@hotmail.com | North Carl | Inactive | $245.53 |
| Jermaine Funk | desiree.volkman@gmail.com | Lake Vestaport | Active | $1,124.49 |
| Georgiana Schaden | gage_satterfield-cronin77@gmail.com | Port Elysebury | Active | $209.76 |
| Total | $2,323.18 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Casey Purdy | ethelyn78@gmail.com | Wilmington | Active | $809.06 |
| Cecelia Bednar | kaylie_steuber1@gmail.com | North Brandyn | Inactive | $138.93 |
| Marques Barrows | tabitha.brakus@hotmail.com | West Keith | Active | $283.40 |
| Amos Green | paula2@gmail.com | Borerview | Active | $792.15 |
| Zackery Grady | jayce_kuhn@gmail.com | New Bessiemouth | Active | $437.01 |
| Total | $2,460.55 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeffrey McClure | evelyn.vonrueden@hotmail.com | South Elaine | Active | $260.63 |
| Kristine Bogisich | lauren.bahringer@yahoo.com | Placentia | Active | $491.53 |
| Mr. Chad Schuppe | pearl8@hotmail.com | New Bedford | Inactive | $732.73 |
| Benny Willms | valerie_romaguera@hotmail.com | South Alexie | Inactive | $600.47 |
| Eliseo Jacobson | hector_mayert@gmail.com | Ratke-Stromanside | Inactive | $865.21 |
| Total | $2,950.57 | |||
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 | ||
|---|---|---|---|---|---|
| Darren Grant | angelo_cassin36@yahoo.com | Abernathyborough | Active | $185.00 | |
| Mack Bartell-Schamberger MD | lane72@gmail.com | Lake Harriet | Active | $902.04 | |
| General Gulgowski | alfred99@gmail.com | Port Reaganport | Active | $983.31 | |
| Lora Collier | gabriel51@gmail.com | Haneberg | Inactive | $638.41 | |
| Mitchell Rau | lamar.hettinger-lindgren@gmail.com | Traciboro | Inactive | $473.26 | |
| Total | $3,182.02 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dameon Steuber I | latoya69@yahoo.com | South Marie | Active | $334.87 | |
| Dale Kiehn | brandt45@yahoo.com | North Sylviafort | Active | $235.82 | |
| Hester Hodkiewicz | desmond94@gmail.com | Fredastad | Active | $206.51 | |
| Myra Gorczany | susie.schuppe93@hotmail.com | North Elviraburgh | Inactive | $1,053.61 | |
| Hiram Spinka | santos_white@yahoo.com | Kylachester | Inactive | $1,088.84 | |
| Total | $2,919.65 | ||||
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 | |
|---|---|---|---|---|
| Ayden Swaniawski | kaya20@yahoo.com | Peterville | Inactive | $1,052.67 |
| Joe Fay | marianne.ullrich72@yahoo.com | Dickensfield | Inactive | $814.59 |
| Alice Goyette | bryan.armstrong77@gmail.com | Kennachester | Inactive | $456.77 |
| Mr. Nelda Hintz | arnoldo_casper23@yahoo.com | Port Genevieve | Inactive | $694.08 |
| Suzanne Hane | austyn_leannon18@hotmail.com | Deloresburgh | Inactive | $1,080.91 |
| Wayne Jenkins-Connelly DVM | holden41@yahoo.com | Woodland | Inactive | $973.93 |
| Myrtice Little | audie.waters@hotmail.com | Port Meganehaven | Inactive | $32.87 |
| Meghan Zieme | maria28@yahoo.com | Lanceberg | Active | $654.43 |
| Stuart King | laverne.thiel5@gmail.com | South Carrie | Active | $146.95 |
| Thomas Tillman | gaston.tremblay@hotmail.com | San Marcos | Active | $945.72 |
| Levi Koepp-Conn | julio.ullrich@yahoo.com | Kuhlman-Bartellfield | Inactive | $810.73 |
| Daisha Torp | kenna_kuvalis47@hotmail.com | West Gayleburgh | Inactive | $777.79 |
| Hugh Spinka II | martina_corkery20@gmail.com | East Mariloubury | Inactive | $851.48 |
| Dario Miller | maudie_davis@yahoo.com | Hermistonview | Inactive | $475.51 |
| Duane Cronin | shane64@gmail.com | South Doris | Active | $579.52 |
| Total | $10,347.95 | |||
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 |