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 | $292.99 |
| INV002 | Unpaid | Bank Transfer | $420.46 |
| INV003 | Pending | PayPal | $530.17 |
| INV004 | Unpaid | Credit Card | $268.03 |
| INV005 | Pending | Bank Transfer | $321.38 |
| INV006 | Unpaid | PayPal | $732.68 |
| INV007 | Paid | Bank Transfer | $648.49 |
| Total | $3,214.20 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Andreane Ratke | Internal Identity Consultant | andreane.ratke@hotmail.com | Viewer | |
| Joannie Braun | Senior Intranet Facilitator | joannie.braun67@yahoo.com | Viewer | |
| Chasity Lemke | Corporate Metrics Facilitator | chasity.lemke@gmail.com | Viewer | |
| Johan McDermott | Lead Solutions Orchestrator | johan.mcdermott@yahoo.com | Member | |
| Syble Gutkowski-Prosacco | Forward Directives Specialist | syble.gutkowski-prosacco@yahoo.com | Admin | |
| Riley Cummerata | Human Metrics Administrator | riley_cummerata23@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 |
|---|---|---|
Idell Watsica Forward Creative Designer idell.watsica@hotmail.com | Viewer | |
Trace Waelchi Global Assurance Supervisor trace_waelchi36@hotmail.com | Admin | |
Dave Paucek Product Data Engineer dave_paucek75@yahoo.com | Viewer | |
Timothy Cassin Principal Mobility Representative timothy.cassin@hotmail.com | Viewer | |
Hannah Maggio Regional Solutions Strategist hannah_maggio@gmail.com | Viewer | |
Marcelino Buckridge Lead Interactions Consultant marcelino_buckridge50@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 |
|---|---|---|
Mafalda Emard Lead Brand Executive mafalda.emard59@hotmail.com | Admin | |
Norwood Franecki Internal Solutions Designer norwood_franecki@yahoo.com | Viewer | |
Adolphus Schmitt Principal Response Manager adolphus_schmitt51@hotmail.com | Viewer | |
Ezra Jacobs Human Functionality Analyst ezra.jacobs8@yahoo.com | Member | |
Dudley Bode Chief Interactions Administrator dudley_bode@gmail.com | Viewer | |
Mikel Reichel Customer Optimization Liaison mikel.reichel@gmail.com | Admin | |
Roman King National Identity Architect roman.king45@hotmail.com | Admin | |
Moises Denesik Forward Assurance Associate moises.denesik51@yahoo.com | Member | |
Abbigail Miller Regional Metrics Officer abbigail_miller54@hotmail.com | Viewer | |
Anais Watsica Direct Identity Agent anais.watsica@gmail.com | Viewer | |
Lorna Harvey Product Program Associate lorna_harvey@hotmail.com | Admin | |
Avery Huel Dynamic Solutions Developer avery.huel99@yahoo.com | Member | |
Berta Shields District Brand Supervisor berta.shields@gmail.com | Admin | |
Javier Cartwright Product Communications Liaison javier.cartwright@yahoo.com | Member | |
Meda Pfeffer Human Quality Coordinator meda.pfeffer34@yahoo.com | Viewer | |
Patience Mayert Lead Directives Strategist patience_mayert56@yahoo.com | Member | |
Carmine Lemke Global Brand Assistant carmine_lemke@yahoo.com | Member | |
Edgardo Schowalter-Ziemann International Functionality Specialist edgardo.schowalter-ziemann20@gmail.com | Viewer | |
Arturo Hills Internal Implementation Associate arturo.hills51@hotmail.com | Member | |
Dale Streich Customer Paradigm Orchestrator dale_streich1@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 | |
|---|---|---|---|---|
| Antoinette Bergnaum | loy_keeling@yahoo.com | West Amelymouth | Active | $498.49 |
| Dr. Kyle Jerde III | mable29@yahoo.com | Cary | Inactive | $334.48 |
| Mitchell Mills | ebony72@gmail.com | Lake Conniefort | Active | $435.80 |
| Perry Johnson | chester14@gmail.com | Wisozkville | Active | $755.85 |
| Dr. Justin Bailey | erin.torp19@hotmail.com | Smyrna | Inactive | $946.48 |
| Total | $2,971.10 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ms. Myra Schulist @gilda_schaden92 | rozella48@yahoo.com | Smithamport | Inactive | $612.33 |
Herbert Lubowitz @dorian_conroy | lucienne_carter@hotmail.com | Wildermanmouth | Inactive | $794.61 |
Douglas Bode @lilian11 | joana_hahn@yahoo.com | Alvastad | Inactive | $761.71 |
Everett Bashirian @milo30 | sherwood.kilback@gmail.com | Karlberg | Inactive | $501.47 |
Teri Fahey MD @johnpaul_gutkowski38 | silas.pfeffer83@yahoo.com | Port Williamshire | Inactive | $82.04 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hector Nienow | oda_nienow54@yahoo.com | Elisaboro | Inactive | $272.87 |
| Mrs. Misty Jaskolski | lue21@hotmail.com | Shawnaside | Active | $294.26 |
| Brandon Mohr | kaia.schultz58@yahoo.com | East Thomas | Inactive | $853.88 |
| William Ebert | raegan92@gmail.com | Kulasport | Inactive | $875.19 |
| Glenn Rosenbaum | hulda.hoppe16@yahoo.com | Bridgeport | Active | $78.08 |
| Total | $2,374.28 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gordon Hayes-Hane | glenda_reinger@gmail.com | Asheville | Active | $181.96 |
| Ann Ratke | juwan.kemmer88@hotmail.com | Kovacekton | Inactive | $494.87 |
| Daryl Kovacek-Schulist | florencio.koelpin14@gmail.com | West Michele | Inactive | $377.97 |
| Doug Legros | rowan47@gmail.com | Carlottabury | Active | $324.98 |
| Tasha Witting | mauricio_macejkovic@gmail.com | Conroystead | Active | $205.33 |
| Total | $1,585.11 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eric Oberbrunner | odessa_altenwerth17@hotmail.com | North Crystal | Active | $488.19 |
| Constance Hermann | helga.upton@hotmail.com | North Salvador | Inactive | $827.09 |
| Mildred Reichel | serena_weimann30@gmail.com | West Gino | Inactive | $94.90 |
| Mr. Brent Kunze | robb.larkin11@hotmail.com | Roobcester | Inactive | $1,082.84 |
| Abel Murazik-Runolfsson | cecilia77@hotmail.com | Stiedemannmouth | Active | $775.17 |
| Total | $3,268.19 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Max Bruen | lexi76@yahoo.com | Danielview | Inactive | $535.39 | |
| Molly Koepp | francisco0@gmail.com | West Krystinamouth | Active | $871.60 | |
| Marc Rolfson | jeanette42@hotmail.com | North Tracy | Inactive | $154.16 | |
| Rudy Emard | hilma.zemlak@gmail.com | Sparks | Active | $972.83 | |
| Benny Schulist | daron_hoeger@yahoo.com | Fort Melissa | Active | $62.41 | |
| Total | $2,596.39 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ira Carroll | kelly78@hotmail.com | South Howellview | Active | $157.93 | |
| Theodore Will | martin_rohan@hotmail.com | New Jaylancester | Inactive | $686.35 | |
| Cornelius Beier | pauline_reinger@hotmail.com | Fisherberg | Active | $62.29 | |
| Marie Muller | tom30@gmail.com | The Hammocks | Inactive | $452.99 | |
| Rose Johns | cordia93@hotmail.com | Jacobston | Inactive | $46.39 | |
| Total | $1,405.95 | ||||
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 | |
|---|---|---|---|---|
| Hugo Leffler | hilbert.franecki@gmail.com | Upland | Inactive | $0.09 |
| Jessica Feest | lorenzo.sporer45@gmail.com | Fort Johnathonton | Active | $92.70 |
| Mrs. Della Ortiz | bennie.bartell@yahoo.com | Sabinaside | Inactive | $1,068.50 |
| Lawrence Muller | piper_stoltenberg67@yahoo.com | Wisokyburgh | Inactive | $274.66 |
| Larry Kling II | beulah61@yahoo.com | Josefinaland | Inactive | $868.24 |
| Esther Jaskolski | althea_hamill-mayer56@gmail.com | Fort Jayme | Active | $440.83 |
| Ricardo Stracke | brody45@yahoo.com | Fort Berneicehaven | Active | $933.05 |
| Minnie Grimes | annetta_stroman31@hotmail.com | East Estefania | Inactive | $1,053.49 |
| Mr. Alfonso Pfannerstill | mabel15@yahoo.com | West Alanismouth | Active | $299.84 |
| Kerry Kertzmann | pietro_kiehn@gmail.com | Fort Dewitt | Active | $88.95 |
| Silvia Hane | breana_hirthe@hotmail.com | Hermanhaven | Active | $1,183.92 |
| Cynthia Daugherty | mekhi_barrows42@yahoo.com | Port Hazleside | Inactive | $165.64 |
| Debra Harris | sydney.bartell3@gmail.com | Port Karli | Active | $588.86 |
| Doyle Greenfelder | earline_lang85@yahoo.com | Lindberg | Active | $461.42 |
| Ellen Rutherford DVM | carmelo_cormier0@yahoo.com | Tianaboro | Active | $531.32 |
| Total | $8,051.51 | |||
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 |