Components
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 | $652.49 |
| INV002 | Paid | Bank Transfer | $165.46 |
| INV003 | Pending | Credit Card | $825.27 |
| INV004 | Paid | Credit Card | $826.55 |
| INV005 | Unpaid | Credit Card | $848.66 |
| INV006 | Unpaid | Bank Transfer | $249.75 |
| INV007 | Pending | PayPal | $116.06 |
| Total | $3,684.24 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Clay Dickinson | Corporate Optimization Agent | clay.dickinson@gmail.com | Admin | |
| Earlene Labadie | Internal Usability Executive | earlene_labadie@yahoo.com | Admin | |
| Spencer Cummerata | Central Applications Developer | spencer_cummerata80@hotmail.com | Member | |
| Neal Reichel | Internal Usability Associate | neal.reichel@yahoo.com | Viewer | |
| Desiree Schmeler | Future Communications Analyst | desiree.schmeler1@hotmail.com | Admin | |
| Modesto Lowe | Central Group Architect | modesto.lowe@gmail.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 |
|---|---|---|
Chance Kertzmann Regional Data Executive chance_kertzmann@gmail.com | Admin | |
Darion Jaskolski Product Directives Designer darion.jaskolski97@yahoo.com | Admin | |
Woodrow Cummings District Factors Consultant woodrow.cummings51@gmail.com | Viewer | |
Cory Brakus Human Program Specialist cory_brakus5@yahoo.com | Viewer | |
Marty Botsford Dynamic Research Director marty.botsford52@gmail.com | Member | |
Dario Kautzer Principal Tactics Facilitator dario.kautzer@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Albina Green District Group Executive albina_green@yahoo.com | Viewer | |
Jeanne Legros Corporate Program Planner jeanne.legros@gmail.com | Admin | |
Jedidiah Harvey Product Web Orchestrator jedidiah.harvey28@gmail.com | Member | |
Judge Ritchie Human Implementation Representative judge.ritchie72@yahoo.com | Admin | |
Bill Klocko Human Mobility Consultant bill_klocko42@hotmail.com | Admin | |
Reina Kulas Central Factors Architect reina_kulas@hotmail.com | Viewer | |
Tanya O'Connell Customer Assurance Executive tanya_oconnell89@gmail.com | Viewer | |
Major Quigley Dynamic Division Representative major_quigley@hotmail.com | Admin | |
Maritza Cremin Corporate Directives Engineer maritza_cremin@gmail.com | Member | |
Linda Denesik Dynamic Data Liaison linda.denesik69@yahoo.com | Viewer | |
Jermaine Herzog Dynamic Program Administrator jermaine.herzog16@hotmail.com | Admin | |
Lana Considine Internal Identity Engineer lana.considine85@gmail.com | Member | |
Theresia Heaney Product Accountability Engineer theresia_heaney@gmail.com | Member | |
Estelle Dickens Dynamic Tactics Executive estelle_dickens@hotmail.com | Viewer | |
Terrance Tromp Internal Data Strategist terrance.tromp48@yahoo.com | Member | |
Audie Shields Investor Group Strategist audie_shields57@gmail.com | Admin | |
Derek Mertz Product Communications Executive derek.mertz34@yahoo.com | Member | |
Florence Bednar District Data Manager florence.bednar@yahoo.com | Viewer | |
Jane Pollich Dynamic Solutions Liaison jane.pollich@yahoo.com | Viewer | |
Jorge Walter Chief Implementation Assistant jorge_walter62@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 | |
|---|---|---|---|---|
| Mr. Edgardo Harber | kasey_okon5@yahoo.com | New Irafurt | Active | $280.02 |
| Dominick O'Conner | jo_runolfsdottir11@gmail.com | Strosinburgh | Active | $335.28 |
| Allan O'Reilly | dedric.wehner6@yahoo.com | Sandyfort | Active | $594.35 |
| Debbie Donnelly | gretchen_morissette42@gmail.com | East Jerald | Inactive | $83.28 |
| Cedrick Rippin | ira53@yahoo.com | Lake Marianmouth | Inactive | $191.05 |
| Total | $1,483.98 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Noel Hand @fredrick.hegmann | angelina.reilly78@gmail.com | Streichberg | Active | $763.84 |
Patsy Spencer @rylee.witting | mervin1@gmail.com | Aracelistead | Inactive | $601.93 |
Ed Ortiz @nathanael49 | jaden_kub@yahoo.com | Little Rock | Inactive | $990.68 |
Randi Purdy @annie0 | tom71@yahoo.com | Fort Julien | Inactive | $110.50 |
Ella Huels @frances_kemmer79 | lillie62@yahoo.com | Alexandraland | Inactive | $742.37 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cortney Lehner | yoshiko5@gmail.com | Hauckcester | Active | $338.24 |
| Stephen McClure | narciso.jones@hotmail.com | Samantaboro | Active | $756.40 |
| Ollie Crist | edyth.welch-zboncak@yahoo.com | Rennerfort | Active | $789.83 |
| Amara Heaney | zoey_labadie@gmail.com | Summerville | Inactive | $704.17 |
| Johnnie Miller | bethany_maggio83@yahoo.com | Port Forrest | Active | $570.83 |
| Total | $3,159.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marta Kertzmann | hazel.von-thompson67@gmail.com | New Dessiestad | Inactive | $438.41 |
| Gail Bashirian | neil.hermiston@hotmail.com | Faithmouth | Active | $1,199.66 |
| Theodore Schroeder | malinda_stamm-reilly2@hotmail.com | Lindtown | Inactive | $943.32 |
| Kellie Heller | myron32@gmail.com | Ratkeburgh | Inactive | $1,103.64 |
| Axel Hintz DVM | gwendolyn83@hotmail.com | New Samuel | Active | $1,129.95 |
| Total | $4,814.98 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Linwood Pfannerstill | tressie_kihn@yahoo.com | Port Hazle | Inactive | $993.66 |
| Mr. Trever Walker | lillian_toy@hotmail.com | Woodbury | Inactive | $182.28 |
| Leonard Schimmel DDS | roy_jakubowski13@yahoo.com | Tracy | Active | $174.40 |
| Leon Waters | adrienne_ritchie@yahoo.com | Reyeshaven | Inactive | $182.01 |
| Kyle Kirlin IV | myrtle_ratke@gmail.com | Lake Zacharychester | Active | $238.80 |
| Total | $1,771.15 | |||
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 | ||
|---|---|---|---|---|---|
| Elwin Towne | norman_streich22@yahoo.com | Fort Vanessaport | Active | $785.82 | |
| Brittany Rogahn | wava90@yahoo.com | Lake Shirleyboro | Inactive | $947.05 | |
| Lynda Ferry | mike_kshlerin50@hotmail.com | Rathboro | Inactive | $1,101.62 | |
| Valentin Farrell | elmer_stanton59@hotmail.com | Mayerfort | Active | $620.23 | |
| Magdalen Yundt | gregg_mohr73@yahoo.com | Mesa | Active | $539.10 | |
| Total | $3,993.82 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Minnie Mueller | toy.huel@hotmail.com | Reinholdcester | Active | $1,161.57 | |
| Boyd Kirlin | leon70@yahoo.com | Ronnieworth | Active | $510.49 | |
| Gunnar Abshire | leatha91@hotmail.com | South Alysonhaven | Active | $331.01 | |
| Byron Considine | angela36@yahoo.com | Manteca | Inactive | $374.48 | |
| Erik Cole | garrett3@yahoo.com | Stehrside | Inactive | $759.83 | |
| Total | $3,137.38 | ||||
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 | |
|---|---|---|---|---|
| Carroll Ratke | adam93@yahoo.com | New Eudorabury | Inactive | $491.00 |
| Ulises Collins | rachel47@yahoo.com | Fort Dahliaton | Inactive | $949.89 |
| Blake Denesik | alycia.jacobson@hotmail.com | New Kurtisfurt | Active | $306.59 |
| Maude Schulist | melody_tillman64@yahoo.com | Ratkefort | Active | $526.12 |
| Ana Bosco | dayton.rohan2@hotmail.com | New Hector | Active | $865.15 |
| Lucille Turcotte | jennifer.weissnat48@yahoo.com | North Jeffreycester | Active | $744.01 |
| George Green | dustin.sporer70@hotmail.com | Lake Hillary | Active | $253.37 |
| Darrell Keeling | ryleigh72@yahoo.com | Port Eriberto | Active | $199.69 |
| Stewart Stracke | jayda.morar@gmail.com | Port Traceyville | Active | $402.83 |
| Jerald Frami | marley_grimes@gmail.com | New Bonniefort | Active | $414.88 |
| Odie Towne V | terrell70@yahoo.com | Lueilwitzfort | Active | $368.75 |
| Malcolm Lynch | katheryn.schumm@gmail.com | Hyattville | Active | $525.14 |
| Modesto Dickinson | madelynn57@hotmail.com | Conroe | Inactive | $180.52 |
| Lauriane Nolan | adam_cole@hotmail.com | West Arleneton | Inactive | $312.91 |
| Gustave Kassulke | cynthia_beier48@yahoo.com | Turnercester | Inactive | $630.30 |
| Total | $7,171.15 | |||
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 |