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 | $801.18 |
| INV002 | Pending | Bank Transfer | $580.10 |
| INV003 | Unpaid | Bank Transfer | $423.95 |
| INV004 | Pending | PayPal | $313.04 |
| INV005 | Unpaid | Credit Card | $794.36 |
| INV006 | Paid | PayPal | $323.70 |
| INV007 | Pending | Bank Transfer | $663.10 |
| Total | $3,899.43 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nigel Hermann | Dynamic Solutions Orchestrator | nigel_hermann41@gmail.com | Member | |
| Rosalie Runte | Global Research Officer | rosalie_runte@hotmail.com | Member | |
| Peter Hamill | District Group Strategist | peter.hamill@yahoo.com | Viewer | |
| Shaina Wunsch-Wunsch | Future Optimization Producer | shaina.wunsch-wunsch10@yahoo.com | Admin | |
| Rashawn Thiel | Customer Program Administrator | rashawn.thiel30@yahoo.com | Member | |
| Celine Runolfsdottir | Corporate Group Manager | celine_runolfsdottir@yahoo.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 |
|---|---|---|
Leigh Turcotte Forward Solutions Orchestrator leigh.turcotte58@hotmail.com | Admin | |
Roberto Harber Customer Operations Assistant roberto.harber@hotmail.com | Viewer | |
Angelina Walter-Kris Customer Program Architect angelina.walter-kris38@yahoo.com | Viewer | |
Eric Rempel Product Applications Liaison eric_rempel@hotmail.com | Member | |
Verner Littel Chief Branding Designer verner_littel@yahoo.com | Viewer | |
Rodger Torphy-Windler Chief Implementation Producer rodger.torphy-windler@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 |
|---|---|---|
Julie Mann Direct Creative Supervisor julie_mann@yahoo.com | Viewer | |
Henriette Batz Lead Metrics Producer henriette.batz@yahoo.com | Member | |
Raymond McCullough Dynamic Branding Producer raymond_mccullough@gmail.com | Member | |
Lena Kshlerin Principal Division Engineer lena.kshlerin@gmail.com | Admin | |
Brittany Kub Central Division Officer brittany.kub@gmail.com | Admin | |
Alf Leuschke National Implementation Facilitator alf_leuschke59@hotmail.com | Member | |
Natasha Klocko Future Metrics Architect natasha.klocko@hotmail.com | Viewer | |
Rebecca Lubowitz District Directives Executive rebecca.lubowitz@hotmail.com | Viewer | |
Abel Dibbert Central Group Consultant abel.dibbert53@hotmail.com | Viewer | |
Curtis Spencer Investor Brand Designer curtis.spencer@gmail.com | Viewer | |
Jeanette Bashirian Human Group Associate jeanette_bashirian@gmail.com | Member | |
Jonas Medhurst Future Identity Coordinator jonas_medhurst@gmail.com | Viewer | |
Brett Howe Human Data Associate brett.howe20@gmail.com | Member | |
Madilyn Sporer Internal Accounts Technician madilyn.sporer31@hotmail.com | Viewer | |
Wesley Bins Internal Tactics Executive wesley.bins8@gmail.com | Viewer | |
Casimir Hyatt Future Optimization Liaison casimir_hyatt32@hotmail.com | Member | |
Jennifer McKenzie Chief Usability Manager jennifer.mckenzie75@hotmail.com | Viewer | |
Dianne Abbott International Accounts Facilitator dianne_abbott@yahoo.com | Admin | |
Gerald Krajcik Customer Intranet Planner gerald.krajcik@gmail.com | Member | |
Consuelo Ledner Principal Assurance Liaison consuelo_ledner@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 | |
|---|---|---|---|---|
| Mr. Willard Robel | morris7@gmail.com | Arlenefurt | Inactive | $533.92 |
| Hershel Wehner | clifford_rath85@gmail.com | South Kobyton | Active | $1,144.08 |
| Brenna Armstrong I | barry96@gmail.com | North Cristobal | Active | $547.11 |
| Mrs. Kelley Johnson | onie_bosco41@hotmail.com | Clintonberg | Inactive | $1,004.64 |
| Iva Witting | marta_bosco@gmail.com | North Meagan | Inactive | $138.04 |
| Total | $3,367.79 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rita Lemke @mandy4 | karla.lynch63@yahoo.com | Elgin | Active | $955.07 |
Celestine Heathcote @alyssa.tillman28 | emerald90@gmail.com | New Minniefurt | Inactive | $741.00 |
Tommy Bartell MD @roberto.mraz | carter97@hotmail.com | West Edna | Active | $615.95 |
Delmer Schuppe @tyrese89 | ed.gutkowski@hotmail.com | Marianneton | Active | $574.20 |
Shanon Dach-Leuschke @tiana.heidenreich | israel_zieme@hotmail.com | Bernadetteberg | Active | $108.90 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erick Hegmann-Christiansen | karli_schroeder@yahoo.com | South Martina | Active | $1,057.91 |
| Ms. Lola Friesen-Schulist | deion.senger34@yahoo.com | Hemet | Inactive | $368.53 |
| Gary Corkery | jazmin_wuckert@yahoo.com | North Katherinetown | Active | $975.57 |
| Prudence Will | omar_zieme75@hotmail.com | West Shannon | Active | $67.68 |
| Clifford Kuhn-Ebert | inez_boehm46@hotmail.com | South Geovannyton | Inactive | $280.18 |
| Total | $2,749.87 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eula Wisoky | elisha_pacocha46@gmail.com | Daniellestad | Active | $533.06 |
| Dr. Kailey Sawayn | jedediah5@yahoo.com | Woodland | Inactive | $992.18 |
| Aubrey Stokes | eric_schmidt@hotmail.com | Port Clifford | Active | $612.46 |
| Suzanne Emmerich | arjun.emard@yahoo.com | Herzogberg | Inactive | $205.75 |
| Pearlie Breitenberg | joel_hansen@yahoo.com | Fort Annabellland | Active | $306.48 |
| Total | $2,649.93 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erwin Collins I | erick.gerhold79@gmail.com | Keelingmouth | Active | $15.28 |
| Wilbert Dicki | boris_sauer5@yahoo.com | Schummtown | Inactive | $83.34 |
| Patricia Grimes III | oliver62@yahoo.com | Swaniawskifurt | Inactive | $184.13 |
| Ena Cremin | aaron.bechtelar@yahoo.com | Minneapolis | Active | $645.89 |
| Vicky Considine | sydni.cronin12@yahoo.com | Denver | Active | $106.05 |
| Total | $1,034.69 | |||
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 | ||
|---|---|---|---|---|---|
| Blanche Price | sherman_stokes@gmail.com | Jonshire | Active | $984.15 | |
| Elza Zboncak | gayle.ohara@gmail.com | Clementinastead | Inactive | $884.62 | |
| Ms. Earline Hahn | miriam_gleason29@hotmail.com | Schmidttown | Inactive | $376.52 | |
| Ms. Luz Franecki | jennie46@hotmail.com | Morissetteport | Inactive | $713.41 | |
| Ms. Robyn Romaguera II | deborah_quigley@hotmail.com | Huntington Beach | Inactive | $484.29 | |
| Total | $3,442.99 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Corene Feeney | kenyon63@yahoo.com | Rempelland | Inactive | $217.30 | |
| Helen Rau | lyda77@gmail.com | East Roderickville | Inactive | $0.65 | |
| Davonte Will | kyleigh.wunsch93@gmail.com | Glen Burnie | Active | $1,034.86 | |
| Lucienne Roob | ed_corwin@yahoo.com | Otistown | Inactive | $1,014.44 | |
| Abraham Harris | macey_collins@hotmail.com | South Ryanside | Active | $448.47 | |
| Total | $2,715.72 | ||||
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 | |
|---|---|---|---|---|
| Ansel Torp | bonnie58@gmail.com | New Loyal | Inactive | $583.75 |
| Kay Larkin III | lonnie.sanford@gmail.com | South Melissatown | Inactive | $70.88 |
| Barbara Goyette I | josue22@yahoo.com | Wylie | Inactive | $199.86 |
| Meredith Rosenbaum | trevor50@gmail.com | Nicolasborough | Inactive | $31.04 |
| Jada Bashirian | sergio12@hotmail.com | Bernieside | Active | $532.01 |
| Noah Hyatt | favian.considine-lowe11@gmail.com | Ceciliastead | Active | $60.19 |
| Stephen Lang V | deanna1@yahoo.com | Overland Park | Inactive | $799.71 |
| Antone O'Kon | seamus.cormier33@yahoo.com | Osinskiview | Active | $15.48 |
| Orpha Morar | ramiro17@hotmail.com | Port Gianniland | Active | $364.67 |
| Freddy Reilly | kale.krajcik75@yahoo.com | West Ellisburgh | Active | $254.08 |
| Brittany Lynch | buford_zboncak@gmail.com | New Maybellhaven | Active | $1,101.92 |
| Robbie Ferry | arlene.gorczany98@hotmail.com | South Tanyaworth | Active | $840.50 |
| Marlon Larkin | lola_farrell8@hotmail.com | Cliffordport | Active | $233.81 |
| Joan MacGyver | madison.dare@hotmail.com | East Jordanstead | Active | $121.22 |
| Rosie Will | emilio_hilpert@hotmail.com | New Bobborough | Inactive | $1,182.52 |
| Total | $6,391.64 | |||
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 |