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 | $935.78 |
| INV002 | Paid | Bank Transfer | $927.23 |
| INV003 | Unpaid | Credit Card | $369.12 |
| INV004 | Unpaid | PayPal | $477.83 |
| INV005 | Unpaid | Bank Transfer | $270.52 |
| INV006 | Pending | Credit Card | $706.15 |
| INV007 | Paid | Credit Card | $150.14 |
| Total | $3,836.77 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Vincenza Erdman | Principal Response Supervisor | vincenza_erdman@hotmail.com | Viewer | |
| Claudine Herman | Investor Mobility Assistant | claudine.herman@yahoo.com | Member | |
| Bruce Predovic | Corporate Creative Representative | bruce.predovic@yahoo.com | Viewer | |
| Ricky Keeling | Product Research Planner | ricky_keeling@yahoo.com | Admin | |
| Kayden Klocko | International Accountability Administrator | kayden.klocko54@gmail.com | Admin | |
| Camille Kub | Future Directives Facilitator | camille.kub@hotmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Leland Stiedemann Central Program Architect leland_stiedemann3@hotmail.com | Viewer | |
Alvera Barton Central Integration Associate alvera_barton35@yahoo.com | Viewer | |
Abagail Wintheiser International Metrics Manager abagail.wintheiser@gmail.com | Member | |
Vance Turner District Operations Designer vance_turner92@hotmail.com | Viewer | |
Wilbur Hammes Chief Accountability Facilitator wilbur.hammes36@hotmail.com | Member | |
Holly Gerhold National Accounts Representative holly.gerhold@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Beulah Morissette Corporate Research Representative beulah.morissette34@yahoo.com | Viewer | |
Salvador Pfannerstill-Schroeder Dynamic Brand Facilitator salvador_pfannerstill-schroeder@gmail.com | Admin | |
Willy Doyle Dynamic Integration Director willy.doyle@gmail.com | Admin | |
Frances Howe Forward Division Coordinator frances.howe@yahoo.com | Viewer | |
Tammy Willms Forward Response Liaison tammy.willms@gmail.com | Member | |
Mariano Langworth Internal Identity Executive mariano_langworth@hotmail.com | Viewer | |
Laverne Becker District Paradigm Administrator laverne_becker6@gmail.com | Member | |
Rochelle Koss Lead Mobility Facilitator rochelle.koss@hotmail.com | Admin | |
Mariah Hansen Legacy Research Analyst mariah.hansen@yahoo.com | Viewer | |
Lyle Sanford National Optimization Developer lyle_sanford@yahoo.com | Member | |
Seth Koch Direct Interactions Producer seth.koch@hotmail.com | Viewer | |
Tamara Herman Corporate Infrastructure Designer tamara_herman@hotmail.com | Admin | |
Lexi Reilly Legacy Infrastructure Director lexi.reilly51@gmail.com | Admin | |
Yolanda Metz-Walsh Senior Accounts Specialist yolanda.metz-walsh@hotmail.com | Member | |
Colton Bosco Internal Marketing Orchestrator colton.bosco@hotmail.com | Viewer | |
Frances Brown Customer Creative Liaison frances.brown@gmail.com | Admin | |
Ben O'Reilly Internal Usability Designer ben_oreilly73@yahoo.com | Viewer | |
Veda Erdman Central Group Strategist veda.erdman99@hotmail.com | Admin | |
Chris Legros Dynamic Quality Agent chris_legros@yahoo.com | Admin | |
Lauren Bogisich National Program Planner lauren.bogisich@hotmail.com | Member |
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 | |
|---|---|---|---|---|
| Alvena Bins | amy_harber32@hotmail.com | Bell Gardens | Active | $652.09 |
| Colin Kuhlman | tyrese78@yahoo.com | Lindburgh | Active | $569.08 |
| Frederick Fritsch | todd_cronin@gmail.com | Fort Jazlyntown | Inactive | $554.08 |
| Carroll Welch | annalise.kessler@hotmail.com | South Lauretta | Inactive | $234.32 |
| Edna Rempel | alyson68@hotmail.com | Lake Jason | Inactive | $1,094.73 |
| Total | $3,104.30 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Noble Beahan @josiane.grant | jorge_durgan@hotmail.com | North Nicolasworth | Inactive | $764.16 |
Cesar Hermiston DDS @vera9 | felipe_muller@hotmail.com | Rathville | Inactive | $889.67 |
Mrs. Charlene Johnson @lenny21 | zoila.breitenberg90@gmail.com | Port Phyllis | Active | $115.44 |
Dr. Ivan Rice @tara52 | eula.littel@hotmail.com | Hagenesville | Active | $291.22 |
Ms. Bria Lockman @jaydon33 | enrique74@gmail.com | Surprise | Inactive | $8.20 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lillie Rath DDS | elmore14@hotmail.com | Lorenzton | Active | $543.78 |
| Lexus Bosco | maximus_kuhlman5@yahoo.com | Brownview | Active | $110.58 |
| Dr. Jennyfer Kiehn | sue99@yahoo.com | New Emanuelton | Active | $175.29 |
| Kellen Bergnaum | debra5@gmail.com | El Dorado Hills | Inactive | $327.69 |
| Fernando Koss Jr. | tami_labadie@yahoo.com | Tillmanborough | Inactive | $178.18 |
| Total | $1,335.52 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shelley Green | emerald4@gmail.com | Ziemeburgh | Inactive | $803.88 |
| Eino Lowe | mike.goodwin56@hotmail.com | West Ova | Active | $1,009.28 |
| Benny Grant | alonzo_jenkins@yahoo.com | Lacyshire | Inactive | $719.56 |
| Julio Satterfield | candice_vandervort18@yahoo.com | Baileyfurt | Active | $503.32 |
| Ruth Grimes MD | vicente_graham34@gmail.com | Moore | Active | $190.36 |
| Total | $3,226.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Benton Tillman | ethelyn.anderson@gmail.com | Wintheiserville | Inactive | $835.44 |
| Vladimir Durgan-Gleason | cole.cole52@gmail.com | South San Francisco | Active | $229.76 |
| Cindy Yost-Olson | byron_king@gmail.com | Margareteburgh | Inactive | $490.43 |
| Orville Schiller | russel90@yahoo.com | West Sandrastead | Inactive | $391.73 |
| Marshall Russel-Schuster | rosalia1@yahoo.com | South Travis | Active | $669.85 |
| Total | $2,617.21 | |||
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 | ||
|---|---|---|---|---|---|
| Marcia Harris | brian.harber50@hotmail.com | Fort Silvia | Active | $860.66 | |
| Jennie Koelpin | clark45@hotmail.com | Beier-Russelhaven | Active | $1,097.74 | |
| Jill Wisoky | eloise.ryan35@hotmail.com | Alexieborough | Active | $1,022.18 | |
| Dr. Dixie McCullough | jacinthe_kilback60@gmail.com | Maryannworth | Active | $846.44 | |
| Marques Herman MD | elouise_donnelly76@yahoo.com | Lake Sandyside | Active | $29.29 | |
| Total | $3,856.31 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Alexandre Walker | wendy98@hotmail.com | Uptonberg | Active | $42.35 | |
| Adrienne Renner V | karla_kub48@yahoo.com | Lake Rahul | Inactive | $901.99 | |
| Lyric Schiller | devin_schmidt@gmail.com | Domingostead | Active | $427.24 | |
| Ms. Dixie Grady Jr. | alvin73@hotmail.com | Bergnaumboro | Active | $997.30 | |
| Jesse Hermiston V | dovie_schmitt@yahoo.com | Kerlukeboro | Inactive | $917.64 | |
| Total | $3,286.52 | ||||
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 | |
|---|---|---|---|---|
| Lorraine Homenick | rico59@yahoo.com | Ursulabury | Inactive | $322.03 |
| Mr. Maurice Pollich IV | sage20@yahoo.com | San Bruno | Active | $1,073.10 |
| Joe Borer | alva_klein@gmail.com | Webershire | Inactive | $507.36 |
| Eloisa Emard-Rutherford | rufus46@hotmail.com | Lompoc | Inactive | $1,045.96 |
| Mr. Caden Parisian-Armstrong | edith_wisozk13@gmail.com | Port Nealborough | Inactive | $339.22 |
| Horace Klein | annalise.upton@gmail.com | Minot | Active | $506.88 |
| Alyce Donnelly | herminio_jones@gmail.com | Centennial | Inactive | $887.89 |
| Hoyt Rath | teresa_stehr11@gmail.com | South Elizabethworth | Inactive | $147.37 |
| Otho Gottlieb | wilson_ohara22@hotmail.com | Fort Aliciaton | Inactive | $988.65 |
| Mr. Cameron D'Amore | lorena_heller0@hotmail.com | North Jessie | Active | $1,038.69 |
| Zachariah Strosin | antonetta_kuphal@yahoo.com | New Tony | Inactive | $212.96 |
| Araceli Gusikowski | armani_jenkins@hotmail.com | Fort Alessandra | Inactive | $417.56 |
| Dr. Rickey Cassin | alfonzo.funk@hotmail.com | East Deancester | Inactive | $935.67 |
| Mr. Darin Hirthe | martine.bauch87@yahoo.com | New Matt | Active | $876.39 |
| Orville Beer | seth_runolfsson@gmail.com | North Marthatown | Active | $1,004.05 |
| Total | $10,303.78 | |||
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 |