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 | $253.67 |
| INV002 | Pending | PayPal | $178.20 |
| INV003 | Pending | PayPal | $100.03 |
| INV004 | Pending | Credit Card | $646.08 |
| INV005 | Pending | Bank Transfer | $652.15 |
| INV006 | Unpaid | Credit Card | $173.21 |
| INV007 | Unpaid | Bank Transfer | $187.31 |
| Total | $2,190.65 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Wilson Parisian | National Branding Supervisor | wilson_parisian42@yahoo.com | Member | |
| Jewell Kunde | Product Response Administrator | jewell_kunde73@yahoo.com | Viewer | |
| Russ Lebsack | Global Tactics Analyst | russ.lebsack6@gmail.com | Member | |
| Terence Marks | District Marketing Associate | terence.marks@gmail.com | Viewer | |
| Anthony Streich | Forward Optimization Assistant | anthony_streich89@gmail.com | Member | |
| Sylvester Bernier | Direct Communications Facilitator | sylvester_bernier73@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 |
|---|---|---|
Dasia Ratke National Data Director dasia.ratke@hotmail.com | Viewer | |
Cory Batz National Implementation Liaison cory.batz@yahoo.com | Viewer | |
Chad Becker District Response Engineer chad_becker34@hotmail.com | Viewer | |
Amelia Stanton District Implementation Manager amelia.stanton@hotmail.com | Member | |
Nicola Emmerich Central Marketing Officer nicola.emmerich26@yahoo.com | Viewer | |
Tia Jones Legacy Applications Developer tia.jones4@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 |
|---|---|---|
Sadye Gerlach Lead Division Strategist sadye.gerlach@gmail.com | Viewer | |
Ola Kris Product Assurance Liaison ola_kris@yahoo.com | Member | |
Noah Wisoky Dynamic Quality Assistant noah_wisoky63@gmail.com | Member | |
Neal Batz Investor Marketing Developer neal.batz@hotmail.com | Viewer | |
Esther Weissnat Forward Optimization Executive esther.weissnat11@hotmail.com | Viewer | |
Ellsworth Leannon National Tactics Planner ellsworth_leannon@hotmail.com | Viewer | |
Myrtis Lemke Regional Mobility Officer myrtis_lemke59@gmail.com | Viewer | |
Janis Wunsch International Branding Executive janis_wunsch@yahoo.com | Viewer | |
Carl Welch-Sawayn Internal Security Developer carl.welch-sawayn@yahoo.com | Viewer | |
Felix Russel Dynamic Infrastructure Orchestrator felix_russel@hotmail.com | Admin | |
Felipe Kertzmann Regional Applications Director felipe.kertzmann7@gmail.com | Admin | |
Stefan Bosco National Group Designer stefan.bosco@gmail.com | Viewer | |
Henrietta Borer-Daniel Future Integration Representative henrietta.borer-daniel@gmail.com | Viewer | |
Brionna Klocko Internal Assurance Assistant brionna_klocko57@yahoo.com | Viewer | |
Rex Heidenreich Central Program Administrator rex_heidenreich@hotmail.com | Admin | |
Germaine McGlynn Investor Group Developer germaine_mcglynn49@hotmail.com | Viewer | |
Ann Flatley Customer Accountability Representative ann_flatley39@yahoo.com | Viewer | |
Paulette Williamson Customer Directives Facilitator paulette_williamson@gmail.com | Viewer | |
Dahlia Cruickshank Global Research Developer dahlia.cruickshank53@yahoo.com | Viewer | |
Faith Hackett Regional Directives Planner faith.hackett@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 | |
|---|---|---|---|---|
| Anthony Dickinson | millie.schulist@hotmail.com | Las Cruces | Active | $661.62 |
| Mr. Marlon Hintz | rudy_adams54@hotmail.com | Buffalo | Inactive | $283.84 |
| Jarod Purdy DDS | cristopher.hilll26@gmail.com | North Sergio | Active | $566.14 |
| Kacey Blick V | marcos_maggio-legros81@hotmail.com | Fort Javierside | Active | $357.75 |
| Sage Konopelski | efren.braun16@gmail.com | West Tom | Inactive | $151.30 |
| Total | $2,020.65 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Osbaldo Shanahan @patrick44 | annette66@gmail.com | Turcottefield | Active | $854.38 |
Leon Wehner @archie_satterfield68 | madelyn26@yahoo.com | Andersonstad | Active | $51.90 |
Vicky Kessler @monroe_satterfield-batz | betty96@gmail.com | Spinkastad | Inactive | $386.58 |
Aniya Bechtelar @deborah.mcglynn | carley.jakubowski66@hotmail.com | South Willmouth | Active | $326.40 |
Esperanza Jaskolski @vivien.king | krystal_weber97@gmail.com | Erickafurt | Active | $1,011.59 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jarred Bosco | wava.kautzer75@gmail.com | New Daisyshire | Inactive | $820.25 |
| Miss Ella Luettgen V | adrien_carter@gmail.com | Fort Lurlinefurt | Active | $104.44 |
| Monte Mante | ursula_tremblay28@gmail.com | Handbury | Active | $992.46 |
| Ryan Dibbert | xavier36@gmail.com | Urbana | Inactive | $480.18 |
| Guillermo Pagac Jr. | dariana_haley36@gmail.com | Newark | Inactive | $1,197.30 |
| Total | $3,594.63 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Candelario Gibson PhD | kirsten_price4@hotmail.com | West Moses | Inactive | $462.21 |
| Dora Littel | julian_kuphal11@gmail.com | Conroe | Active | $162.98 |
| Sonja Brakus | mack_dooley@yahoo.com | North Sydneyfurt | Inactive | $526.73 |
| Jeremy Murphy | elda.kuvalis60@yahoo.com | Fort Tedfort | Inactive | $714.28 |
| Ms. Billie Russel | rufus_boyer90@gmail.com | Judithfield | Active | $736.41 |
| Total | $2,602.61 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Anais Marquardt PhD | aylin_schmidt@yahoo.com | East Ervinchester | Inactive | $315.74 |
| Tracy Renner | enid44@yahoo.com | South Sibylfurt | Active | $665.57 |
| Bella Emard | mabel.ernser49@gmail.com | West Jaiden | Inactive | $605.08 |
| Douglas Powlowski MD | heath82@gmail.com | East Ciceroboro | Inactive | $5.83 |
| Elena Larkin | eric_rodriguez@gmail.com | East Myahborough | Active | $1,061.11 |
| Total | $2,653.33 | |||
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. Ashleigh Steuber | gerard.muller@yahoo.com | Bountiful | Inactive | $1,168.20 | |
| Nichole Ondricka | amari_goyette@yahoo.com | New Raegan | Inactive | $19.28 | |
| Eva Gusikowski-O'Kon | alexandra.volkman@yahoo.com | Durganview | Inactive | $597.30 | |
| Ms. Lynda Torp | silvia.emard@yahoo.com | Lake Edwin | Active | $265.74 | |
| Clemens Ankunding | verona.schmitt@hotmail.com | Gottliebfurt | Active | $362.87 | |
| Total | $2,413.39 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Sid Heaney | jacynthe_lehner48@gmail.com | Dockview | Active | $413.11 | |
| Kari Fahey | kristi12@yahoo.com | Quitzonburgh | Active | $120.29 | |
| Price Doyle | melissa_rath-kautzer11@yahoo.com | New Enriquestad | Active | $840.82 | |
| Darnell Stiedemann Jr. | salvador_mann@hotmail.com | Fort Jared | Inactive | $382.35 | |
| Christ Dicki | luke_gusikowski51@gmail.com | North Kentonmouth | Active | $1,150.41 | |
| Total | $2,906.98 | ||||
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 | |
|---|---|---|---|---|
| Krista Boehm | zachariah43@gmail.com | Elmoport | Active | $30.96 |
| Irma Champlin | roger_ebert@yahoo.com | League City | Active | $272.19 |
| Lucas Kuhn II | alton.mohr9@hotmail.com | Everett | Active | $13.26 |
| Laurie Sanford-Braun | derrick.larkin@yahoo.com | North Kimworth | Active | $405.24 |
| Elvera Ebert | fidel75@yahoo.com | Nathanielhaven | Active | $927.17 |
| Yasmine Donnelly | frances96@hotmail.com | Farmington | Active | $1,189.53 |
| Ernesto Roob | john90@yahoo.com | East Olga | Inactive | $184.26 |
| Esta Dietrich | anissa_quigley45@hotmail.com | New Rosalindaton | Inactive | $17.52 |
| Wanda Harber | winston22@hotmail.com | North Ernesthaven | Active | $532.40 |
| Mrs. Kale Swaniawski | jadyn43@gmail.com | Christinebury | Inactive | $102.30 |
| Emiliano Kreiger | myriam_koelpin80@gmail.com | Sanfordborough | Active | $542.14 |
| Fritz Batz | iris32@gmail.com | Alexandria | Active | $852.69 |
| Sylvan Pagac | rosa19@hotmail.com | Considineport | Inactive | $400.63 |
| Marshall Hartmann | aliyah.koelpin@yahoo.com | New Clemens | Active | $731.02 |
| Joan Kemmer-Stamm | gloria_muller91@yahoo.com | Hageneshaven | Inactive | $141.74 |
| Total | $6,343.05 | |||
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 |