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 | Unpaid | PayPal | $792.51 |
| INV002 | Unpaid | Credit Card | $247.41 |
| INV003 | Pending | Credit Card | $675.16 |
| INV004 | Paid | PayPal | $284.01 |
| INV005 | Pending | Credit Card | $507.34 |
| INV006 | Pending | PayPal | $374.57 |
| INV007 | Pending | PayPal | $470.30 |
| Total | $3,351.30 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Oral Yost | Human Communications Technician | oral.yost59@hotmail.com | Admin | |
| Christina Hoeger | Senior Functionality Representative | christina.hoeger@gmail.com | Member | |
| Tara Sporer | National Program Manager | tara_sporer@hotmail.com | Admin | |
| Dominick Jaskolski | Forward Implementation Supervisor | dominick.jaskolski99@hotmail.com | Viewer | |
| Otis Padberg | Senior Metrics Architect | otis_padberg@yahoo.com | Viewer | |
| Heather Graham | Regional Functionality Executive | heather_graham20@gmail.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 |
|---|---|---|
Daron Russel International Solutions Officer daron_russel@gmail.com | Admin | |
Jovany Lubowitz Chief Quality Officer jovany.lubowitz@hotmail.com | Viewer | |
Karla Kutch Forward Research Analyst karla_kutch@gmail.com | Member | |
Jensen Gottlieb Senior Identity Engineer jensen.gottlieb55@yahoo.com | Admin | |
Rick Balistreri Direct Creative Assistant rick_balistreri@gmail.com | Admin | |
Doris Streich Product Paradigm Developer doris_streich@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 |
|---|---|---|
Theodore Pollich International Accountability Technician theodore_pollich79@hotmail.com | Admin | |
Lavon Ward Investor Configuration Supervisor lavon_ward4@gmail.com | Member | |
Michele Donnelly Customer Integration Developer michele.donnelly@yahoo.com | Admin | |
Robert Roberts Customer Infrastructure Consultant robert.roberts@hotmail.com | Member | |
Mckayla McCullough Customer Paradigm Director mckayla_mccullough@hotmail.com | Member | |
Wallace Erdman Corporate Research Agent wallace.erdman@hotmail.com | Viewer | |
Sammy Douglas National Configuration Planner sammy_douglas71@hotmail.com | Admin | |
Major Mante Regional Data Administrator major_mante77@gmail.com | Admin | |
Abel Romaguera Future Quality Specialist abel_romaguera@gmail.com | Admin | |
Fae Bradtke Lead Interactions Manager fae.bradtke24@hotmail.com | Member | |
Percy Herman Principal Group Engineer percy.herman31@hotmail.com | Member | |
Yasmeen Feest National Branding Director yasmeen.feest@hotmail.com | Member | |
Fatima Gorczany Product Web Specialist fatima.gorczany58@gmail.com | Viewer | |
Gene Ferry Global Integration Designer gene_ferry69@yahoo.com | Viewer | |
Marina Bauch Future Marketing Technician marina.bauch@gmail.com | Member | |
Rasheed Rowe Senior Security Executive rasheed.rowe@yahoo.com | Member | |
Andrea Macejkovic Central Intranet Producer andrea_macejkovic13@gmail.com | Viewer | |
Violette Erdman Chief Markets Facilitator violette.erdman89@gmail.com | Admin | |
Gertrude Feest Corporate Branding Coordinator gertrude.feest87@yahoo.com | Admin | |
Vera Batz Direct Brand Designer vera.batz@hotmail.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 | |
|---|---|---|---|---|
| Curt Ullrich | darrin.dach@gmail.com | South Dejon | Inactive | $1,184.80 |
| Annette Dooley | destini.price-kutch71@hotmail.com | Devinside | Active | $999.90 |
| Doris Bednar | willard98@gmail.com | Zboncakstead | Inactive | $948.16 |
| Benjamin Lockman Jr. | camille35@yahoo.com | Rohnert Park | Active | $713.83 |
| Mrs. Angela Spencer | arlo92@hotmail.com | New Alfonso | Active | $1,173.99 |
| Total | $5,020.68 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lawrence Kunde @dan_wisozk | nadine_rolfson0@yahoo.com | Terencefurt | Inactive | $1,072.91 |
Juliet Botsford @jared72 | beatrice_barton@gmail.com | West Darinmouth | Active | $715.33 |
Ashlynn Little DDS @kurtis_kemmer93 | joanna18@gmail.com | Fort Leticia | Active | $832.86 |
Ida Bruen IV @vaughn.kovacek | suzanne86@hotmail.com | East Hartford | Active | $394.10 |
Alek Bode @lorraine8 | pinkie.runolfsson@yahoo.com | Johnathanburgh | Inactive | $625.60 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Richard Thiel | annamarie.gusikowski49@yahoo.com | Fort Johan | Inactive | $1,148.58 |
| Cecilia Morar | delores_nader70@hotmail.com | Lake Lawrenceville | Inactive | $551.86 |
| Raegan Schumm | jaydon_mcclure37@hotmail.com | Fort Rossland | Inactive | $383.58 |
| Noe Monahan | sherry.skiles@gmail.com | Lake Angelitafort | Active | $152.89 |
| Marvin Medhurst | eleanore.murphy-kuhic@gmail.com | Pearlboro | Inactive | $33.49 |
| Total | $2,270.40 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kiana Nienow | krista_nitzsche-kub88@gmail.com | Port Donport | Active | $515.70 |
| Katelynn Koss | loyal_gleason@hotmail.com | Johnathanfurt | Inactive | $593.63 |
| Axel Hamill | rasheed.adams76@gmail.com | Ninaboro | Inactive | $830.98 |
| Irvin Goodwin DDS | terrence.nader46@gmail.com | Port Madisynside | Inactive | $698.51 |
| Leonardo Gutkowski | jerry10@yahoo.com | Sadieworth | Inactive | $534.33 |
| Total | $3,173.15 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erin Wilderman | kian90@gmail.com | West Steveton | Inactive | $1,157.25 |
| Reanna Rohan | dominique62@hotmail.com | Huntington Park | Inactive | $1,188.74 |
| Devante Ernser | amelia_ruecker@yahoo.com | South Tyler | Active | $1,059.53 |
| Carol Zboncak | dan_vandervort16@hotmail.com | Justinetown | Active | $728.86 |
| Marilyn Hintz DVM | eryn89@gmail.com | Fort Peterstead | Active | $289.80 |
| Total | $4,424.18 | |||
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. Norval Morar | orville.corkery84@yahoo.com | Cristborough | Active | $1,042.06 | |
| Mae Maggio | robert49@hotmail.com | Sanford | Inactive | $75.58 | |
| Delfina Mills | cleo_lowe49@gmail.com | Lake Janet | Inactive | $413.20 | |
| Miss Marjorie Gottlieb | ted_langworth36@gmail.com | Halvorsonworth | Inactive | $1,111.71 | |
| Mr. Jonathan Goyette | nathanael70@gmail.com | Gerholdville | Inactive | $804.12 | |
| Total | $3,446.67 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Zackary Erdman | sherman_lynch63@hotmail.com | Cranston | Inactive | $600.10 | |
| Kristopher Dibbert | jeffery30@yahoo.com | Lucyberg | Active | $1,142.16 | |
| Jeannette Hammes | kiarra.huel@hotmail.com | Wintheiserboro | Active | $1,065.41 | |
| Vella Beier | duncan_price41@gmail.com | Kraigburgh | Inactive | $7.09 | |
| Mr. Stephen Gerlach | raymond.wilkinson@gmail.com | New Johann | Inactive | $686.68 | |
| Total | $3,501.44 | ||||
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 | |
|---|---|---|---|---|
| Kristen Kling | kylie_waters@hotmail.com | Wisokyfurt | Active | $728.20 |
| Catalina Bogisich | dennis98@gmail.com | Lake Simonemouth | Inactive | $241.69 |
| Rudy Gibson | erik74@gmail.com | Lombard | Inactive | $912.14 |
| Jena Mayert | julius64@yahoo.com | Montebello | Active | $1,105.66 |
| Sammy Bechtelar | kobe60@hotmail.com | Stewarttown | Inactive | $259.01 |
| Shari Stroman | jeffrey_erdman91@hotmail.com | Fort Rickie | Active | $872.92 |
| Emanuel Klein II | rachael_stokes@gmail.com | Glendabury | Active | $322.49 |
| Jeanette Kunde | bret.ruecker4@gmail.com | Lake Elnora | Active | $307.55 |
| Lexus Mitchell | samantha_thiel@yahoo.com | Tampa | Inactive | $498.31 |
| Gerald Roob | jerald48@gmail.com | North Dontown | Inactive | $747.73 |
| Cody Boehm | pete12@yahoo.com | South Dockberg | Inactive | $367.38 |
| Christy Keeling-Labadie | blake76@hotmail.com | Bashirianmouth | Inactive | $95.02 |
| Pink Cole | darrin.tromp@yahoo.com | East Carmellafurt | Active | $999.41 |
| Mr. Damon Rath Jr. | james_welch21@gmail.com | Farrellcester | Inactive | $326.51 |
| Stacy Gutmann V | patience_bashirian71@gmail.com | Port Joana | Inactive | $1,000.99 |
| Total | $8,785.01 | |||
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 |