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 | Paid | PayPal | $176.50 |
| INV002 | Paid | Bank Transfer | $550.94 |
| INV003 | Paid | Bank Transfer | $818.77 |
| INV004 | Pending | Bank Transfer | $397.71 |
| INV005 | Paid | Bank Transfer | $953.58 |
| INV006 | Paid | Bank Transfer | $543.76 |
| INV007 | Pending | PayPal | $857.20 |
| Total | $4,298.46 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jammie Lehner | Principal Research Strategist | jammie_lehner@hotmail.com | Viewer | |
| Emie Grant | Senior Implementation Assistant | emie.grant@gmail.com | Member | |
| Kristy Schuppe-Boehm | Regional Brand Technician | kristy_schuppe-boehm96@yahoo.com | Viewer | |
| Maudie Doyle | Legacy Interactions Facilitator | maudie_doyle@hotmail.com | Member | |
| Rhianna Rolfson | Dynamic Marketing Agent | rhianna_rolfson@gmail.com | Member | |
| Misty Braun | Human Intranet Consultant | misty.braun41@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 |
|---|---|---|
Keara Jacobi Senior Data Technician keara.jacobi21@gmail.com | Viewer | |
Mohamed Rempel International Factors Administrator mohamed.rempel@yahoo.com | Admin | |
Carmela Treutel International Division Consultant carmela_treutel@gmail.com | Member | |
Columbus Waelchi Legacy Operations Specialist columbus_waelchi48@yahoo.com | Admin | |
Elza Rowe Regional Implementation Analyst elza.rowe@gmail.com | Admin | |
Savanah Schuster Global Implementation Engineer savanah_schuster@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mariana Purdy Customer Functionality Executive mariana.purdy4@yahoo.com | Member | |
Samara Brown Lead Research Director samara_brown65@hotmail.com | Viewer | |
Claudia Champlin International Markets Planner claudia.champlin@gmail.com | Member | |
Hyman Fritsch Chief Paradigm Designer hyman.fritsch@hotmail.com | Admin | |
Triston Bode Regional Metrics Designer triston_bode@hotmail.com | Admin | |
Jacques Moen-Johns Investor Intranet Architect jacques_moen-johns81@yahoo.com | Viewer | |
Jordane Barrows National Group Executive jordane.barrows@yahoo.com | Viewer | |
Sibyl Stokes Senior Infrastructure Specialist sibyl.stokes@yahoo.com | Member | |
Trevion Macejkovic Regional Web Manager trevion.macejkovic@gmail.com | Viewer | |
Germaine Brown Legacy Data Coordinator germaine_brown@hotmail.com | Viewer | |
Tatum Kilback Internal Research Specialist tatum_kilback77@gmail.com | Member | |
Gladyce Dicki Dynamic Infrastructure Coordinator gladyce.dicki99@gmail.com | Admin | |
Henriette Considine Global Interactions Manager henriette.considine@hotmail.com | Admin | |
Zola Carroll Principal Optimization Technician zola.carroll34@gmail.com | Admin | |
Clifton Bauch Central Interactions Producer clifton.bauch@hotmail.com | Member | |
Maye Batz Product Implementation Liaison maye_batz34@hotmail.com | Viewer | |
Gerard Powlowski Investor Infrastructure Representative gerard_powlowski78@gmail.com | Member | |
Jairo Ward Central Operations Orchestrator jairo.ward@hotmail.com | Admin | |
Verla Pfeffer Lead Operations Representative verla.pfeffer10@yahoo.com | Viewer | |
Elmo Bins Legacy Data Officer elmo_bins@hotmail.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 | |
|---|---|---|---|---|
| Dr. Marion Bins | kailee.graham@hotmail.com | MacGyverborough | Active | $1,161.23 |
| Ian Treutel | jacynthe_dach74@hotmail.com | East Garrick | Active | $110.43 |
| Julian Sauer | jordi.gleason12@hotmail.com | East Leone | Inactive | $711.31 |
| Robert Stracke | collin36@gmail.com | Lake Rigoberto | Active | $979.61 |
| Darren Cronin | spencer.kohler35@yahoo.com | Heidenreichborough | Active | $614.71 |
| Total | $3,577.29 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ruben Spinka @camren_hansen | astrid71@hotmail.com | Beattyton | Active | $311.93 |
Marie Jacobson @amelie_haley | layla.marks-jacobson@yahoo.com | New Bella | Inactive | $306.96 |
Cheryl Gislason @akeem_berge19 | gerald27@yahoo.com | Caesarfort | Active | $899.00 |
Irene Rutherford Jr. @antonio75 | myrna.weber33@gmail.com | West Edgardo | Active | $338.57 |
Lorenzo Lueilwitz @breanne.gutkowski56 | heaven_green@hotmail.com | North Jaleelport | Active | $1,114.80 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Veronica Murphy | charity16@hotmail.com | Davis | Active | $775.82 |
| Neil Hirthe DVM | adelia99@gmail.com | Port Viva | Active | $529.68 |
| Alfonso Mann | howard45@hotmail.com | Alisahaven | Inactive | $513.48 |
| Saul Kilback-Huel | electa.hodkiewicz88@gmail.com | North Fletcher | Active | $11.36 |
| Andrew Cole | ellie_hand90@hotmail.com | Longmont | Inactive | $134.51 |
| Total | $1,964.85 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ernesto Roberts V | ellen35@yahoo.com | Lake Stuart | Active | $144.17 |
| Percy VonRueden | aubree.connelly31@gmail.com | Orvillestad | Active | $41.87 |
| Christina Pacocha | frances6@hotmail.com | New Patiencetown | Inactive | $215.39 |
| Blanca Mills | casimer_schulist@yahoo.com | West Caleboro | Active | $500.40 |
| Henry D'Amore | adolfo71@yahoo.com | Lake Weston | Inactive | $581.64 |
| Total | $1,483.47 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Stewart Grimes | kathleen_vonrueden61@gmail.com | Herminafield | Active | $522.47 |
| Thomas Jakubowski | camren37@hotmail.com | Noahton | Active | $465.26 |
| Lisa Labadie | alexzander37@gmail.com | Tillmanton | Active | $913.99 |
| Sylvia Satterfield | lyric_baumbach84@gmail.com | Cormierbury | Inactive | $702.82 |
| Mr. Johnathan Pfeffer | giovanna20@gmail.com | West Electa | Active | $213.46 |
| Total | $2,818.00 | |||
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 | ||
|---|---|---|---|---|---|
| Clyde Shields | name_dibbert39@yahoo.com | Scotchester | Inactive | $127.39 | |
| Earl Medhurst | samson.hayes94@yahoo.com | Faemouth | Inactive | $897.17 | |
| Ruben Goyette | janelle.morar@hotmail.com | North Myriamcester | Active | $193.65 | |
| Emmett Bergnaum | angus.flatley66@yahoo.com | North Cedrickberg | Inactive | $755.90 | |
| Marty Heaney | carolanne_lehner@yahoo.com | East Cristinaport | Inactive | $233.73 | |
| Total | $2,207.84 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ollie Breitenberg | kolby_runolfsdottir@yahoo.com | Zulaton | Inactive | $1,127.15 | |
| Myra Schowalter | emanuel.mayer26@yahoo.com | Bozeman | Active | $1,067.28 | |
| Clarence Sipes-Ratke | ethyl.mcglynn90@yahoo.com | North Mercedes | Inactive | $1,096.84 | |
| Ellis Kuphal Sr. | sid_stoltenberg68@gmail.com | Fionafort | Active | $929.85 | |
| Israel Schultz | burdette_smith90@hotmail.com | Merced | Inactive | $118.32 | |
| Total | $4,339.44 | ||||
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 | |
|---|---|---|---|---|
| Mr. Lamar Waters | krystel.cummings40@hotmail.com | Windlerfort | Active | $330.40 |
| Lance Tillman-Tremblay | cristal_stiedemann8@hotmail.com | Palm Harbor | Inactive | $535.92 |
| Pearl Prohaska | adolph23@hotmail.com | Shawnee | Active | $1,054.39 |
| Patti Bahringer DDS | lexie.mertz@gmail.com | Montgomery | Inactive | $1,021.20 |
| Matthew Bosco | brionna.king36@hotmail.com | Fort Lennyport | Inactive | $390.08 |
| Myrtle Kub | garry38@gmail.com | Orlando | Inactive | $241.28 |
| Nick Ernser | dallas.price@hotmail.com | East Maryjanefurt | Inactive | $743.07 |
| Hannah Cronin | brandi.altenwerth38@gmail.com | Plantation | Active | $446.68 |
| Wendy Hayes | selena_harber@hotmail.com | Jakaylafort | Inactive | $691.31 |
| Clint Rempel | bryon28@gmail.com | West Jordan | Inactive | $509.53 |
| Cora Smith | ethan.schuppe3@hotmail.com | New Thad | Active | $697.01 |
| Neal Smith | tabitha_schumm10@gmail.com | North Baby | Inactive | $171.05 |
| Roxanne Hagenes | serena_heller@hotmail.com | Tigard | Inactive | $1,102.93 |
| Neil Reinger | zachariah.gislason60@hotmail.com | Armstrongview | Active | $323.20 |
| Ms. Antonia Stokes-VonRueden | jamie_lueilwitz@yahoo.com | Port Lily | Inactive | $632.63 |
| Total | $8,890.68 | |||
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 |