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 | Bank Transfer | $254.36 |
| INV002 | Pending | PayPal | $158.02 |
| INV003 | Pending | Bank Transfer | $968.18 |
| INV004 | Unpaid | Credit Card | $689.04 |
| INV005 | Paid | Bank Transfer | $721.79 |
| INV006 | Paid | PayPal | $678.60 |
| INV007 | Pending | Credit Card | $722.27 |
| Total | $4,192.26 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Roel Harris-Jakubowski | Product Intranet Orchestrator | roel_harris-jakubowski@hotmail.com | Member | |
| Valentina Schinner | District Brand Executive | valentina_schinner11@yahoo.com | Member | |
| Sasha Cassin | Legacy Identity Producer | sasha_cassin76@yahoo.com | Admin | |
| Bruce Becker | Investor Directives Strategist | bruce.becker35@yahoo.com | Member | |
| Deontae Cummerata-Bode | Global Operations Technician | deontae_cummerata-bode@yahoo.com | Viewer | |
| Milford Stroman | Regional Implementation Architect | milford_stroman98@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 |
|---|---|---|
Toby McLaughlin Lead Research Orchestrator toby.mclaughlin50@yahoo.com | Admin | |
Adell Friesen National Division Officer adell_friesen4@gmail.com | Admin | |
Maximo Strosin Customer Branding Developer maximo.strosin@hotmail.com | Admin | |
Kamryn O'Conner-Waters Internal Tactics Facilitator kamryn.oconner-waters22@gmail.com | Member | |
Kristin Greenfelder Global Web Specialist kristin.greenfelder93@gmail.com | Admin | |
Savion Lindgren District Accountability Developer savion_lindgren10@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Tillman Schaden Chief Web Engineer tillman_schaden@gmail.com | Admin | |
Nash Ledner Global Applications Orchestrator nash_ledner41@hotmail.com | Admin | |
Katlyn Emard Principal Infrastructure Planner katlyn_emard46@yahoo.com | Admin | |
Chandler Schroeder International Infrastructure Director chandler.schroeder5@hotmail.com | Viewer | |
Carmel Pouros Senior Program Director carmel.pouros@yahoo.com | Viewer | |
Colton Lindgren Dynamic Web Orchestrator colton_lindgren28@hotmail.com | Member | |
Vella Kovacek Corporate Research Officer vella.kovacek80@yahoo.com | Admin | |
Millie Koch Dynamic Security Administrator millie.koch90@gmail.com | Viewer | |
Elwyn Hegmann Future Data Director elwyn.hegmann75@yahoo.com | Viewer | |
Kade Lang Customer Assurance Specialist kade.lang6@yahoo.com | Admin | |
Madaline Gutkowski District Response Technician madaline_gutkowski48@hotmail.com | Viewer | |
Cristobal McLaughlin Lead Directives Developer cristobal.mclaughlin1@hotmail.com | Admin | |
Alek Glover Investor Intranet Planner alek_glover40@gmail.com | Viewer | |
Filiberto O'Keefe National Operations Technician filiberto_okeefe@hotmail.com | Member | |
Orland Upton Forward Tactics Consultant orland_upton99@gmail.com | Admin | |
Unique Labadie Investor Quality Developer unique.labadie77@yahoo.com | Admin | |
Myles Hudson Product Assurance Associate myles_hudson@gmail.com | Viewer | |
Sidney Raynor Lead Accountability Analyst sidney.raynor32@yahoo.com | Member | |
Brant Schuppe Legacy Factors Associate brant_schuppe37@yahoo.com | Member | |
Jayson Dach Lead Identity Strategist jayson.dach74@gmail.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 | |
|---|---|---|---|---|
| Garrett Sipes | eulalia_anderson83@hotmail.com | Parma | Inactive | $477.63 |
| Dave Klein | arvid90@gmail.com | Richland | Inactive | $277.15 |
| Marvin King | wilmer.wisoky66@yahoo.com | Lake Hilario | Inactive | $629.22 |
| Ada Altenwerth | tania_walsh12@yahoo.com | East Felipebury | Active | $122.74 |
| Dr. Barry Moen | amber_fisher@gmail.com | Weimanncester | Active | $825.51 |
| Total | $2,332.25 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Judy Halvorson @geoffrey.kihn21 | magali55@hotmail.com | South Ricoport | Active | $678.37 |
Raquel Runolfsdottir @hope26 | davion_langworth@hotmail.com | New Alexismouth | Inactive | $34.67 |
Mr. Oscar McClure @lawrence5 | franco_larkin@hotmail.com | Fort Willis | Active | $577.66 |
Derek Ruecker @alayna.kutch6 | patricia_daniel32@gmail.com | Schoenworth | Inactive | $1,122.68 |
Kristie Kling @schuyler.huel69 | cassidy.ferry@yahoo.com | St. Joseph | Inactive | $1,029.16 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bob Leffler | cassidy.jacobs@hotmail.com | East Missouriville | Active | $1,053.03 |
| Mr. Nick Murazik | bella.wisoky83@gmail.com | Woodrowton | Active | $476.81 |
| Robin Daniel | rosie99@hotmail.com | Patsyland | Active | $438.86 |
| Kari Witting | izaiah.hintz@yahoo.com | Port Tateburgh | Inactive | $835.63 |
| Mr. Rickey Beahan DVM | demarcus_wuckert@yahoo.com | Windlerboro | Active | $12.53 |
| Total | $2,816.86 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Homer Conn | ben.oberbrunner@yahoo.com | West Ilianashire | Inactive | $1,076.40 |
| Cynthia Bartell | davin27@yahoo.com | West Kentonchester | Inactive | $208.09 |
| Iris Stoltenberg | nayeli.conn@hotmail.com | Boscoview | Active | $1,105.99 |
| Monica Becker | arvel18@hotmail.com | The Villages | Active | $993.72 |
| Jennie Crooks | richie_grimes94@hotmail.com | Attleboro | Inactive | $449.23 |
| Total | $3,833.43 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Stacy Carter | yolanda_greenfelder@hotmail.com | New Braunfels | Active | $336.19 |
| Diana Hills | sister.willms-dooley13@gmail.com | Bartboro | Inactive | $1,033.21 |
| Dr. Harry Rempel | colin.heathcote52@gmail.com | Mesa | Inactive | $1,006.22 |
| Eula Hegmann | shaun.tremblay@gmail.com | East Kobe | Active | $714.15 |
| Owen Ernser | ferne98@yahoo.com | Port Myleneborough | Inactive | $807.64 |
| Total | $3,897.41 | |||
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 | ||
|---|---|---|---|---|---|
| Austin Stamm DDS | liza41@yahoo.com | Romaguerashire | Active | $525.44 | |
| Dr. Alex Waters-Mohr | maddison.ryan89@yahoo.com | Garrisonfurt | Active | $864.76 | |
| Paula Rau | eulalia_becker91@hotmail.com | North Vickystead | Inactive | $482.63 | |
| Karen Franecki | kenneth.pollich@yahoo.com | Shieldsburgh | Active | $352.77 | |
| Dr. Theresa Auer | brionna.mcglynn13@gmail.com | Layton | Inactive | $1,191.22 | |
| Total | $3,416.82 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ruth Kunze | royal.spencer@hotmail.com | Grand Prairie | Inactive | $370.30 | |
| Lora Ryan | reba.rutherford90@hotmail.com | Treutelmouth | Active | $1,002.77 | |
| Jim White | hal.anderson@yahoo.com | Lake Vilma | Active | $866.61 | |
| Pauline Towne | santa_durgan@yahoo.com | Collierborough | Inactive | $630.68 | |
| Evelyn Bergnaum | tyson90@yahoo.com | Apex | Inactive | $1,005.68 | |
| Total | $3,876.04 | ||||
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 | |
|---|---|---|---|---|
| Phyllis Emard-Tromp Jr. | benedict_windler82@hotmail.com | New Keatonstad | Inactive | $353.45 |
| Gayle O'Reilly MD | jordon.beer36@hotmail.com | Warwick | Active | $1,136.18 |
| Dr. Devin Lehner | antwon_schiller55@gmail.com | Amirport | Active | $575.71 |
| Miss Tammy Ebert | lafayette83@gmail.com | Lamontboro | Inactive | $818.34 |
| Ms. Becky Douglas | luciano68@hotmail.com | Wisokyhaven | Inactive | $693.84 |
| Dr. Elmer Schamberger | judy.bradtke@hotmail.com | New Monique | Active | $534.13 |
| Henrietta Carroll-Kunze | adriana44@yahoo.com | McLean | Active | $1,074.37 |
| Jacqueline Fritsch | jedediah_macgyver72@hotmail.com | West Cleta | Inactive | $700.25 |
| Blanca Lowe | lia_bartoletti@hotmail.com | North Helmercester | Active | $7.38 |
| Miss Wendy Windler | kaylah_konopelski@yahoo.com | Miami Beach | Inactive | $1,049.31 |
| Miss Gail Lebsack | howard36@gmail.com | Port Orphabury | Inactive | $389.83 |
| Judith Gleichner | kole.glover55@yahoo.com | West Athenaside | Active | $349.27 |
| Eleanor Bahringer | stuart_dickens@hotmail.com | League City | Inactive | $373.80 |
| Stacey Cummerata | aiyana55@hotmail.com | West Madysonville | Inactive | $836.46 |
| Marlene Reinger | germaine_koch52@gmail.com | Kristinmouth | Active | $473.96 |
| Total | $9,366.28 | |||
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 |