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 | $158.91 |
| INV002 | Paid | Bank Transfer | $759.33 |
| INV003 | Pending | Bank Transfer | $764.74 |
| INV004 | Unpaid | Credit Card | $898.09 |
| INV005 | Paid | Bank Transfer | $419.27 |
| INV006 | Pending | Bank Transfer | $473.28 |
| INV007 | Unpaid | Credit Card | $206.95 |
| Total | $3,680.57 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Marianne O'Kon | Human Data Analyst | marianne_okon28@hotmail.com | Member | |
| Tevin Maggio | Chief Division Administrator | tevin_maggio91@gmail.com | Member | |
| Nikki Kassulke | Human Security Planner | nikki_kassulke@yahoo.com | Admin | |
| Pam Dickinson | Global Marketing Analyst | pam_dickinson61@yahoo.com | Viewer | |
| Ewell Reilly | National Branding Consultant | ewell.reilly21@gmail.com | Admin | |
| Reba Gutkowski | Internal Infrastructure Agent | reba_gutkowski66@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 |
|---|---|---|
Maudie Bogan Product Data Director maudie.bogan@gmail.com | Viewer | |
Mireille Trantow Customer Data Technician mireille.trantow@hotmail.com | Member | |
Ryan Pagac Dynamic Accountability Administrator ryan_pagac91@yahoo.com | Admin | |
Rebecca Jast Human Division Facilitator rebecca.jast24@hotmail.com | Member | |
Frances Roob Senior Infrastructure Manager frances_roob51@hotmail.com | Member | |
Bessie Beatty Principal Integration Developer bessie_beatty57@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 |
|---|---|---|
Erin Daugherty Future Branding Administrator erin_daugherty61@gmail.com | Member | |
Wyatt Jaskolski Legacy Operations Representative wyatt_jaskolski90@gmail.com | Member | |
Josiane Shanahan Corporate Communications Administrator josiane.shanahan@gmail.com | Viewer | |
Fatima Gibson Regional Operations Manager fatima.gibson@hotmail.com | Viewer | |
Drew Morissette Central Configuration Executive drew.morissette84@hotmail.com | Member | |
Jacob Williamson Investor Configuration Representative jacob_williamson@yahoo.com | Member | |
Antonetta Torp Forward Communications Orchestrator antonetta.torp@gmail.com | Admin | |
Rossie Leuschke Future Configuration Assistant rossie_leuschke@gmail.com | Admin | |
Demarco Schimmel International Solutions Developer demarco_schimmel79@hotmail.com | Admin | |
Gregorio Dickinson Human Branding Agent gregorio.dickinson@hotmail.com | Member | |
Edgar Effertz Direct Optimization Assistant edgar_effertz56@gmail.com | Viewer | |
Bobbie Schimmel Regional Implementation Architect bobbie.schimmel@hotmail.com | Viewer | |
Deborah Barrows Global Integration Analyst deborah_barrows@hotmail.com | Admin | |
Norma Gulgowski Lead Security Liaison norma.gulgowski77@gmail.com | Admin | |
Hollie Ullrich Future Directives Planner hollie_ullrich4@gmail.com | Member | |
Marian Thompson International Brand Coordinator marian.thompson@gmail.com | Admin | |
Mary Abernathy Principal Accounts Representative mary_abernathy@hotmail.com | Viewer | |
Joseph Beer Future Metrics Officer joseph.beer@hotmail.com | Viewer | |
Orin Murray Central Implementation Facilitator orin.murray75@hotmail.com | Member | |
Al Predovic Internal Group Specialist al_predovic@yahoo.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 | |
|---|---|---|---|---|
| Sylvester Luettgen | laury_hegmann@gmail.com | South Bradworth | Inactive | $859.34 |
| Hershel Waters | blanche.gleichner83@gmail.com | Huntington | Inactive | $780.84 |
| Jodi Franecki | melisa72@yahoo.com | Crystalbury | Active | $1,095.53 |
| Lily Corkery | nola.renner24@hotmail.com | New Keira | Active | $490.93 |
| Roslyn Larkin | monty_ondricka@hotmail.com | South Lynette | Active | $1,112.09 |
| Total | $4,338.73 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Beverly Zulauf @lia.boyer89 | torrey.gorczany-runolfsdottir3@hotmail.com | Weissnatbury | Active | $406.58 |
Mrs. Eldora Little @gerald_lueilwitz55 | mabel19@hotmail.com | Lake Kamryn | Active | $1,166.81 |
Lyle Windler @valerie_murray97 | gisselle.dare95@gmail.com | Morrisside | Active | $1,039.79 |
Abel Herman @lola.haley38 | luz82@gmail.com | Darinhaven | Inactive | $118.89 |
Russell Kihn @dudley63 | paulette.schulist44@yahoo.com | Kunzeview | Inactive | $508.24 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Julius Shields | kent_kozey76@yahoo.com | East Chazland | Active | $975.35 |
| Earl Hermann | maureen.armstrong@gmail.com | Port Stephen | Inactive | $1,108.05 |
| Ezekiel Beahan I | icie.gibson12@hotmail.com | Fort Amelia | Inactive | $369.43 |
| Alexie Lang | baylee87@gmail.com | West Sheila | Active | $292.32 |
| Irma Jerde | roger.predovic57@yahoo.com | Faustoland | Active | $694.35 |
| Total | $3,439.50 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| April Powlowski II | eleanora44@gmail.com | East Alejandro | Active | $157.71 |
| Jenna Brekke | eulalia.lesch@hotmail.com | Berthafield | Inactive | $59.71 |
| Napoleon Gutkowski | camden98@yahoo.com | Millsside | Active | $97.35 |
| Sheldon Little | ezra78@hotmail.com | South Josephinechester | Inactive | $408.98 |
| Ms. Debbie Bergstrom-Bartoletti | regina_greenholt4@hotmail.com | New Malcolm | Active | $1,009.85 |
| Total | $1,733.60 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alfred Borer | elvira90@yahoo.com | Danastead | Active | $807.47 |
| Marcia Bauch III | anne69@hotmail.com | Franeytown | Active | $1,041.46 |
| Orville Heller | nikki7@gmail.com | South Flavio | Inactive | $1,121.72 |
| Anna Ward Jr. | santos.waters42@gmail.com | McClureboro | Active | $57.05 |
| Wallace Hessel | krista_steuber62@hotmail.com | Randolphstad | Active | $562.67 |
| Total | $3,590.37 | |||
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 | ||
|---|---|---|---|---|---|
| Lori Reilly | edward_herzog@hotmail.com | South Johan | Inactive | $986.25 | |
| Olivia Prohaska | peter_lemke84@gmail.com | Port Edith | Inactive | $528.81 | |
| Violette Reynolds | wilma27@yahoo.com | Lebsackworth | Active | $564.27 | |
| Janelle Williamson | marjorie_kub@yahoo.com | East Niaville | Active | $778.50 | |
| Efrain Fahey | ettie99@yahoo.com | Caldwell | Inactive | $123.02 | |
| Total | $2,980.85 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lily Sipes | jeremiah89@gmail.com | West Arlie | Active | $260.51 | |
| Geo Rodriguez | oswald.marks75@hotmail.com | Maximilliaside | Inactive | $91.19 | |
| Zachary Nitzsche | eloise.sawayn@yahoo.com | Ondrickafurt | Inactive | $842.66 | |
| Kane Keeling | kristian_volkman15@hotmail.com | Reichertchester | Active | $522.93 | |
| Hazle Nitzsche | gilbert64@gmail.com | Ruthville | Inactive | $851.68 | |
| Total | $2,568.97 | ||||
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 | |
|---|---|---|---|---|
| Hugo Champlin | mario9@hotmail.com | Zemlakport | Active | $650.59 |
| Amos Lueilwitz-Kreiger | skylar65@yahoo.com | Lewisville | Inactive | $352.77 |
| Brent Spinka Jr. | demarco28@yahoo.com | Estherworth | Active | $41.70 |
| Joanne Kemmer | dedrick98@yahoo.com | West Ollieboro | Active | $617.46 |
| Miss Rashad Cummings | darrell.gerhold9@gmail.com | Port Jettiestead | Inactive | $646.38 |
| Dave Wilderman | ashlee80@gmail.com | North Verdiestad | Inactive | $879.79 |
| Leila Lowe | hettie_doyle79@gmail.com | Lexington-Fayette | Active | $524.49 |
| Ayana Weimann | alycia_gerhold@hotmail.com | Fort Vernonton | Active | $158.68 |
| Karli Sporer | jeannette_mayert@gmail.com | West Latoyafield | Inactive | $1,099.93 |
| Verna Fritsch | rodrigo44@hotmail.com | Port Susietown | Inactive | $438.89 |
| Osvaldo Grant | alexis_heller@yahoo.com | Farmington | Active | $927.69 |
| Hope Rohan | moshe_nicolas@gmail.com | New Lynne | Active | $391.53 |
| Sigmund Padberg | dylan32@hotmail.com | Lake Feliciaport | Inactive | $936.91 |
| Rodolfo Bauch | isidro40@gmail.com | O'Fallon | Inactive | $1,074.31 |
| Ella Hudson | camille.herzog87@yahoo.com | Wauwatosa | Active | $726.01 |
| Total | $9,467.13 | |||
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 |