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 | Paid | Credit Card | $510.43 |
| INV002 | Unpaid | Credit Card | $439.15 |
| INV003 | Pending | Bank Transfer | $889.44 |
| INV004 | Paid | Credit Card | $614.06 |
| INV005 | Paid | PayPal | $803.80 |
| INV006 | Pending | Bank Transfer | $810.79 |
| INV007 | Unpaid | Bank Transfer | $393.67 |
| Total | $4,461.34 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Erick Howell | Legacy Mobility Consultant | erick.howell99@hotmail.com | Viewer | |
| Dave Mohr | Legacy Communications Analyst | dave_mohr@gmail.com | Viewer | |
| Todd Stokes | International Configuration Strategist | todd_stokes69@hotmail.com | Member | |
| Federico Batz | Principal Group Analyst | federico.batz31@gmail.com | Viewer | |
| Sheldon Mann | Internal Marketing Associate | sheldon.mann@hotmail.com | Member | |
| Katelynn Johnston | Investor Mobility Consultant | katelynn_johnston29@hotmail.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 |
|---|---|---|
Nolan Toy Principal Solutions Manager nolan.toy@yahoo.com | Admin | |
Tommy Breitenberg Direct Interactions Facilitator tommy_breitenberg@gmail.com | Viewer | |
Daryl Cruickshank Legacy Security Facilitator daryl_cruickshank73@hotmail.com | Member | |
Dave Wisozk International Functionality Engineer dave_wisozk@hotmail.com | Viewer | |
Lorraine Metz Chief Intranet Liaison lorraine_metz39@yahoo.com | Viewer | |
Jay Weissnat Internal Marketing Architect jay.weissnat35@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kenny Padberg-Lockman Lead Configuration Consultant kenny.padberg-lockman34@yahoo.com | Member | |
Gage Langworth Global Configuration Consultant gage.langworth@gmail.com | Admin | |
Patience Robel Investor Identity Specialist patience.robel@gmail.com | Viewer | |
Cayla Labadie Investor Configuration Executive cayla.labadie52@yahoo.com | Admin | |
Kathy Murazik Central Directives Representative kathy_murazik61@hotmail.com | Viewer | |
Marvin Torp Future Division Supervisor marvin_torp@gmail.com | Viewer | |
Darla Graham Investor Functionality Engineer darla_graham92@hotmail.com | Admin | |
Kacie McKenzie Corporate Usability Technician kacie.mckenzie@hotmail.com | Admin | |
Timmothy Wyman Lead Directives Representative timmothy_wyman@gmail.com | Member | |
Damon Botsford Direct Factors Strategist damon_botsford77@yahoo.com | Admin | |
Maverick Baumbach Global Functionality Producer maverick.baumbach@gmail.com | Viewer | |
Christie Hirthe Internal Mobility Technician christie_hirthe10@yahoo.com | Member | |
Lonie Blanda Human Web Administrator lonie_blanda@yahoo.com | Viewer | |
Caroline Ernser Lead Operations Supervisor caroline_ernser@gmail.com | Admin | |
Ignacio Weissnat Lead Security Supervisor ignacio_weissnat57@yahoo.com | Admin | |
Kyle Senger Product Security Executive kyle.senger12@gmail.com | Admin | |
Talia Schumm Regional Response Coordinator talia_schumm50@yahoo.com | Viewer | |
Napoleon Reichel Human Configuration Strategist napoleon_reichel@gmail.com | Viewer | |
Jane Bruen-Quitzon Dynamic Accountability Producer jane_bruen-quitzon@gmail.com | Member | |
Leona Witting Forward Identity Liaison leona.witting26@yahoo.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 | |
|---|---|---|---|---|
| Kathryn Gulgowski | kirk46@gmail.com | Iraborough | Inactive | $53.09 |
| Loy Maggio | roman.toy16@yahoo.com | O'Fallon | Inactive | $278.38 |
| Ida Zulauf Jr. | homer_langworth@hotmail.com | Genebury | Inactive | $373.75 |
| Kimberly Schiller | rochelle_grady@gmail.com | Fort Enricoport | Active | $184.10 |
| Estelle Bechtelar-Carroll | rodney.weissnat@gmail.com | Celiabury | Active | $18.31 |
| Total | $907.63 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Archie Wisoky @cornell.gibson62 | calvin.konopelski@yahoo.com | Port Luke | Active | $717.08 |
Mrs. Kendra Kautzer @carlton.windler | michael_lueilwitz@yahoo.com | West Christieshire | Active | $1,183.64 |
Alexander Roberts @elijah.lynch | jeanne53@hotmail.com | Southaven | Inactive | $89.97 |
Alma Koch @jett.gerlach76 | grady30@hotmail.com | Fort Stephanie | Active | $702.72 |
Morgan Hauck @madge62 | pearl_kohler4@yahoo.com | Lake Brookeberg | Active | $978.55 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Allison Littel Sr. | allen9@hotmail.com | Lenoraburgh | Inactive | $533.61 |
| Sonja Gulgowski I | dianna72@hotmail.com | Krisstead | Inactive | $1,051.34 |
| Wesley Nitzsche | wendy94@gmail.com | North Darianastead | Inactive | $987.36 |
| Berta McDermott | nelson25@hotmail.com | North Oracester | Active | $4.78 |
| Nicholas Williamson | edmund_roberts47@gmail.com | East Meghanville | Inactive | $1,197.57 |
| Total | $3,774.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cali Jacobson | sylvester4@hotmail.com | Fort Darius | Inactive | $975.67 |
| Lynette Predovic Sr. | caleb15@gmail.com | Lake Adriennebury | Inactive | $503.00 |
| Dwayne Medhurst V | orin_turner@yahoo.com | Dibbertfort | Inactive | $1,129.99 |
| Ms. Maegan Legros | dominic.skiles@gmail.com | Altadena | Inactive | $666.83 |
| Joanne Skiles | wade.walter@yahoo.com | Caguas | Inactive | $537.11 |
| Total | $3,812.60 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Christian Carter | kenneth.flatley82@hotmail.com | Hauckville | Inactive | $686.28 |
| Jodie Herzog | inez_ratke@hotmail.com | Leffler-Huelfield | Inactive | $1,107.29 |
| Joel Gutkowski Jr. | jacob_medhurst72@hotmail.com | East Kobyshire | Active | $1,038.53 |
| Priscilla Koss | lillian98@hotmail.com | West Van | Active | $375.41 |
| Tricia Denesik | cristopher77@gmail.com | North Viola | Inactive | $331.58 |
| Total | $3,539.09 | |||
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 | ||
|---|---|---|---|---|---|
| Brandi Sipes | parker.roberts39@hotmail.com | Chesterboro | Active | $753.86 | |
| Agnes Pouros | gudrun.kunde41@yahoo.com | Lake Keshaun | Inactive | $577.13 | |
| Stuart Schneider | cornelius_tremblay@yahoo.com | Hudsonview | Active | $917.22 | |
| Eryn Watsica | elenor_bruen@gmail.com | Vallejo | Active | $107.00 | |
| Lila Padberg | peter.gutmann@yahoo.com | Westhaven | Inactive | $436.13 | |
| Total | $2,791.34 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Derek Gleason | miranda29@hotmail.com | Fort Lukasville | Inactive | $214.67 | |
| Sylvia Champlin | melinda72@hotmail.com | Lakewood | Inactive | $234.72 | |
| Benny Stroman | ebony.fisher20@gmail.com | Clevelandchester | Active | $646.12 | |
| Leona Dickinson | korbin4@hotmail.com | Leesburg | Active | $896.00 | |
| Anahi Stoltenberg | branson_kshlerin90@yahoo.com | East Grant | Inactive | $389.23 | |
| Total | $2,380.74 | ||||
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 | |
|---|---|---|---|---|
| Sandra Bergnaum | kaela_ullrich@hotmail.com | New Lancecester | Active | $943.50 |
| Carmel Blanda | erica_jacobi-effertz@hotmail.com | New Sybleburgh | Inactive | $745.65 |
| Clair Kris | tanner.schmidt@gmail.com | Wilmaport | Active | $315.25 |
| Melinda Orn | alfonso72@hotmail.com | Fort Queeniestad | Inactive | $865.57 |
| Colin Lynch | adrien_stokes@hotmail.com | New Rogelio | Active | $1,141.80 |
| Maggie Bosco | eliane.rath@gmail.com | O'Connerstad | Inactive | $618.28 |
| Arthur Steuber DVM | daniel_jast42@yahoo.com | Dougstead | Active | $929.38 |
| Drew Klocko | kay49@yahoo.com | New Athenaboro | Inactive | $57.58 |
| Al Leuschke | alexis49@yahoo.com | East Dominickport | Inactive | $444.82 |
| Braeden Collins | alvah21@gmail.com | Kamrenmouth | Inactive | $1,158.32 |
| Ignacio Halvorson-Wunsch | joy.larson@yahoo.com | Padberghaven | Active | $241.34 |
| Albert Yundt | elsa.langosh53@hotmail.com | Tigard | Inactive | $161.51 |
| Montana Schultz | queenie.zemlak30@yahoo.com | Pollichshire | Active | $654.73 |
| Fred Pacocha | tyrell18@gmail.com | South Darianville | Active | $1,036.21 |
| Torey Lueilwitz | mable_bernier62@gmail.com | North Sonyatown | Inactive | $317.31 |
| Total | $9,631.25 | |||
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 |