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 | Credit Card | $607.38 |
| INV002 | Unpaid | Bank Transfer | $525.49 |
| INV003 | Pending | PayPal | $121.77 |
| INV004 | Paid | PayPal | $536.45 |
| INV005 | Pending | Bank Transfer | $504.44 |
| INV006 | Unpaid | PayPal | $213.72 |
| INV007 | Pending | PayPal | $795.01 |
| Total | $3,304.26 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Theresia Weissnat | Senior Factors Engineer | theresia_weissnat19@hotmail.com | Admin | |
| Raymundo Cronin | Corporate Creative Associate | raymundo_cronin@gmail.com | Member | |
| Irma Torphy | Principal Usability Director | irma_torphy91@yahoo.com | Admin | |
| Terence Mayer | Regional Group Engineer | terence_mayer32@hotmail.com | Viewer | |
| Jarvis Adams | Chief Mobility Architect | jarvis_adams2@hotmail.com | Viewer | |
| Laurel Gibson | National Accounts Officer | laurel_gibson1@hotmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ashton Stark Chief Quality Consultant ashton_stark32@yahoo.com | Member | |
Wallace Carroll Future Data Technician wallace.carroll@yahoo.com | Viewer | |
Kade Gleichner Dynamic Marketing Director kade_gleichner95@hotmail.com | Admin | |
Margaretta Lindgren Dynamic Interactions Manager margaretta.lindgren5@yahoo.com | Admin | |
Norbert Schulist Corporate Group Architect norbert_schulist81@gmail.com | Admin | |
Mustafa Grimes-Schoen District Communications Orchestrator mustafa_grimes-schoen75@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 |
|---|---|---|
Bridie Konopelski Regional Applications Executive bridie_konopelski52@yahoo.com | Member | |
Toney Grady Dynamic Data Producer toney_grady@yahoo.com | Member | |
Marc Ebert-Pollich Customer Web Facilitator marc.ebert-pollich@gmail.com | Admin | |
Vicenta Waters District Mobility Liaison vicenta.waters@yahoo.com | Viewer | |
Amaya Stoltenberg Dynamic Configuration Engineer amaya.stoltenberg@gmail.com | Admin | |
Layla Kautzer-Moore Internal Infrastructure Designer layla_kautzer-moore@hotmail.com | Member | |
Margarette Ward Customer Research Assistant margarette.ward@gmail.com | Admin | |
Coby Schmitt Legacy Marketing Assistant coby.schmitt19@yahoo.com | Viewer | |
Tess Spinka Senior Intranet Orchestrator tess.spinka93@hotmail.com | Member | |
Macie Gislason District Data Administrator macie.gislason27@gmail.com | Member | |
Oda Bartoletti District Quality Manager oda_bartoletti@hotmail.com | Member | |
Turner Nikolaus-Windler Internal Directives Director turner.nikolaus-windler62@yahoo.com | Admin | |
Constantin Farrell Central Branding Assistant constantin_farrell@hotmail.com | Viewer | |
Otto Strosin Corporate Accountability Administrator otto.strosin@gmail.com | Viewer | |
Uriah Krajcik Human Operations Planner uriah.krajcik36@yahoo.com | Admin | |
Afton Keeling Lead Identity Facilitator afton.keeling18@hotmail.com | Admin | |
Cierra Beier Central Branding Orchestrator cierra.beier30@yahoo.com | Member | |
Emmett Conroy International Optimization Supervisor emmett_conroy51@hotmail.com | Viewer | |
Isadore Simonis Lead Communications Orchestrator isadore.simonis7@yahoo.com | Admin | |
Thelma Labadie Chief Infrastructure Consultant thelma.labadie67@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 | |
|---|---|---|---|---|
| Roderick Medhurst PhD | judy_mitchell71@yahoo.com | Whiteview | Inactive | $547.15 |
| Cameron Rutherford | alvera63@gmail.com | Hoseahaven | Inactive | $353.19 |
| Bryant Von | sincere.turcotte47@yahoo.com | West Lilian | Inactive | $735.75 |
| Lori Schmeler | enrique_jast67@yahoo.com | West Allis | Inactive | $1,008.88 |
| Latoya Kling | hobart.bradtke@hotmail.com | Peoria | Inactive | $479.08 |
| Total | $3,124.05 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Wm Brown @jackson56 | kirsten.berge@yahoo.com | Toyland | Active | $523.27 |
Miss Silvia Hilpert @adonis_legros63 | telly_abshire@hotmail.com | Oklahoma City | Inactive | $655.69 |
Devin Botsford @xander.buckridge11 | lexie.pollich@hotmail.com | New Theodoreshire | Active | $1,083.87 |
Rafael Botsford @salma_mcglynn | ada85@hotmail.com | Lindseyburgh | Active | $170.57 |
Edgar Metz-Harvey I @alanna61 | celine38@hotmail.com | Reingerland | Active | $1,100.07 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johnnie Kuhlman | rickie_rosenbaum46@gmail.com | Southaven | Active | $1,051.04 |
| Dr. David Haley | theron.cassin67@hotmail.com | East Miaboro | Inactive | $955.81 |
| Pam Shields | corrine_kuphal@gmail.com | Chancetown | Inactive | $350.80 |
| Jeanette Maggio | daniella_maggio@hotmail.com | Casas Adobes | Inactive | $121.94 |
| Earnest Gutkowski | tanner.roob-dicki@gmail.com | Shieldston | Active | $890.52 |
| Total | $3,370.11 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Jeannie Ritchie | susana_hoppe@hotmail.com | Dothan | Active | $927.67 |
| Jessica Blanda | jeffry_spinka56@yahoo.com | Orieberg | Active | $734.25 |
| Dora Legros | terence.schiller97@hotmail.com | Wardborough | Inactive | $1,195.44 |
| Robin Ernser | lisandro68@yahoo.com | D'Amoreburgh | Active | $1,002.35 |
| Mike Romaguera | johnnie.johnson99@yahoo.com | Nicolefurt | Inactive | $1,174.68 |
| Total | $5,034.39 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lowell Smitham | evie.glover@yahoo.com | North Coleman | Inactive | $616.72 |
| Miranda Terry-Ledner IV | jameson88@hotmail.com | East Odellstead | Active | $981.14 |
| Mamie Goyette | carlotta11@hotmail.com | Fort Earnesthaven | Active | $360.56 |
| Erin Ward | sonny22@hotmail.com | Deerfield Beach | Active | $416.76 |
| Elsa Windler | stefanie_king61@hotmail.com | North Nikko | Active | $185.44 |
| Total | $2,560.62 | |||
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 | ||
|---|---|---|---|---|---|
| Chris Hyatt | taylor.hettinger16@hotmail.com | Lake Haleystead | Inactive | $516.26 | |
| Richard Ankunding | izaiah_stiedemann6@yahoo.com | New Ahmadburgh | Active | $240.78 | |
| Daryl Bogan | okey_johns54@hotmail.com | Candacecester | Inactive | $889.39 | |
| Alejandro Satterfield II | autumn71@yahoo.com | North Reyesshire | Inactive | $758.66 | |
| Valerie Stokes | alfreda.towne@yahoo.com | New Russ | Inactive | $816.68 | |
| Total | $3,221.77 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Colin Vandervort II | rosamond.berge21@yahoo.com | Metairie | Active | $828.34 | |
| Luke Hartmann MD | richard90@gmail.com | Naderbury | Inactive | $49.25 | |
| Irma Ruecker | hassie_hartmann@gmail.com | Chandler | Inactive | $79.08 | |
| Dorothy Schowalter DDS | morgan_padberg85@hotmail.com | Fort Lucienne | Inactive | $261.39 | |
| Raquel Bailey | adela_thompson80@hotmail.com | Dennisborough | Active | $154.83 | |
| Total | $1,372.89 | ||||
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 | |
|---|---|---|---|---|
| Gertrude Mayert | toney_bahringer30@hotmail.com | East Bertaville | Active | $962.49 |
| Wilma Beier | maryjane_hessel@yahoo.com | Hialeah | Inactive | $921.25 |
| Dr. Nicolas Schowalter III | keara81@hotmail.com | East Manuel | Inactive | $960.78 |
| Dominick Romaguera | benton_lemke-kunze42@yahoo.com | Bethlehem | Inactive | $412.76 |
| Conrad Cruickshank | elijah_dickinson@hotmail.com | South Richardtown | Active | $571.97 |
| Jennie Moen-Carter | kristian_ryan11@gmail.com | Cliftonville | Active | $117.61 |
| Mrs. Angie Ruecker | kaylah80@hotmail.com | New Graham | Active | $158.14 |
| Craig Wehner | kraig_brakus62@gmail.com | Paucekview | Active | $1,100.84 |
| Timmy Gottlieb | marion_raynor64@yahoo.com | Fort Kieraview | Active | $560.88 |
| Jodi Mante | wilhelm87@gmail.com | Corineside | Inactive | $275.58 |
| Nick Streich | erin.kautzer68@gmail.com | Arlington Heights | Inactive | $1,048.86 |
| Velma Smith | rico.kreiger24@gmail.com | Orlando | Inactive | $109.36 |
| Rosa Cummings | joy.buckridge@hotmail.com | South Trey | Active | $246.36 |
| Maryann Feil | sim79@hotmail.com | Gerhardbury | Inactive | $845.47 |
| Andre Upton | zoila_abernathy@yahoo.com | Tanyaville | Inactive | $470.76 |
| Total | $8,763.11 | |||
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 |