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 | Credit Card | $973.83 |
| INV002 | Unpaid | PayPal | $220.07 |
| INV003 | Pending | Bank Transfer | $773.40 |
| INV004 | Paid | Credit Card | $688.15 |
| INV005 | Paid | Credit Card | $862.61 |
| INV006 | Pending | Bank Transfer | $935.38 |
| INV007 | Unpaid | Bank Transfer | $668.50 |
| Total | $5,121.94 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Damien Heathcote | Human Division Administrator | damien.heathcote@yahoo.com | Viewer | |
| Candido King | Corporate Data Supervisor | candido.king@hotmail.com | Member | |
| Michele Kihn | Internal Mobility Associate | michele.kihn@hotmail.com | Viewer | |
| Carl Doyle | Global Division Associate | carl_doyle@gmail.com | Member | |
| Emmalee Okuneva | Senior Operations Agent | emmalee_okuneva84@hotmail.com | Member | |
| Tomas Hackett | Senior Directives Representative | tomas.hackett@yahoo.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 |
|---|---|---|
Zelma Ruecker Human Optimization Planner zelma.ruecker@yahoo.com | Viewer | |
Arlene Kemmer Investor Paradigm Associate arlene.kemmer@yahoo.com | Admin | |
Irving Marvin Regional Group Producer irving.marvin@yahoo.com | Admin | |
Traci Predovic Senior Group Analyst traci.predovic19@yahoo.com | Viewer | |
Raquel Kirlin Central Mobility Supervisor raquel.kirlin26@yahoo.com | Admin | |
Kristina Conn Legacy Paradigm Analyst kristina_conn@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 |
|---|---|---|
Cole Connelly National Response Strategist cole_connelly79@hotmail.com | Viewer | |
Hester Keeling Lead Group Representative hester_keeling@gmail.com | Admin | |
Hugh Hand National Markets Specialist hugh_hand45@gmail.com | Admin | |
Darrel Kiehn Global Implementation Executive darrel_kiehn@yahoo.com | Viewer | |
Patrick Gibson District Integration Agent patrick_gibson@gmail.com | Admin | |
Dwayne Bauch Product Applications Technician dwayne.bauch50@hotmail.com | Member | |
Stephany Kshlerin Senior Accounts Associate stephany.kshlerin@hotmail.com | Admin | |
Newton Medhurst Customer Solutions Executive newton.medhurst39@gmail.com | Member | |
Bailee Mueller Product Interactions Facilitator bailee.mueller5@gmail.com | Viewer | |
Camylle Barrows Legacy Creative Engineer camylle.barrows87@gmail.com | Member | |
Georgia Schaden Senior Integration Executive georgia_schaden19@hotmail.com | Member | |
Kieran Roberts Human Brand Engineer kieran.roberts@yahoo.com | Viewer | |
Garrick Heller Principal Program Designer garrick_heller@hotmail.com | Admin | |
Clara Kris Forward Web Consultant clara_kris@hotmail.com | Member | |
Blake Bergnaum Legacy Applications Specialist blake_bergnaum@hotmail.com | Admin | |
Kaleb Rolfson Forward Implementation Architect kaleb_rolfson94@yahoo.com | Admin | |
Shanie Berge-Maggio Senior Branding Director shanie_berge-maggio@hotmail.com | Member | |
Dallas Farrell International Division Facilitator dallas.farrell@gmail.com | Admin | |
Bryan Koepp Product Usability Orchestrator bryan.koepp66@yahoo.com | Member | |
Lynne Wolf Central Program Coordinator lynne_wolf93@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 | |
|---|---|---|---|---|
| Rudy Anderson | bessie.watsica95@yahoo.com | St. Louis | Active | $483.06 |
| Felix Reichert | dave.stoltenberg@gmail.com | South Mauricioburgh | Inactive | $35.57 |
| Micheal Grant-Homenick | adrian16@hotmail.com | Iraview | Inactive | $1,136.16 |
| Simeon Kovacek | nancy.towne@yahoo.com | East Adamport | Inactive | $696.81 |
| Gaston Batz | daisy_denesik@yahoo.com | Laurashire | Active | $498.22 |
| Total | $2,849.82 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Marcos Conn @okey30 | al.lockman@hotmail.com | New Hilbert | Active | $495.43 |
Aniya Zemlak @horacio.thiel56 | madeline_damore42@hotmail.com | Port Jamilberg | Active | $1,191.22 |
Jasmine Grady @anastacio.feest | shyanne.murphy58@hotmail.com | New Kaciehaven | Active | $489.70 |
Peggy Wiza I @melanie97 | kimberly39@hotmail.com | West Sadie | Active | $884.64 |
Roberta Greenfelder @lila52 | sonia36@gmail.com | St. George | Inactive | $80.50 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Noemi Brown | ryann_treutel62@gmail.com | East Rodney | Inactive | $622.86 |
| Zita Gibson | austin52@yahoo.com | Fort Westonworth | Inactive | $198.75 |
| Delores Hilll | denise_koelpin-huel@hotmail.com | Norbertostead | Active | $844.61 |
| Cindy Ebert IV | miriam34@hotmail.com | Passaic | Active | $896.93 |
| Whitney Schumm | eula84@hotmail.com | Lake Carole | Active | $1,031.94 |
| Total | $3,595.09 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Stuart Pfeffer | allene_dickinson@hotmail.com | Terrybury | Inactive | $698.28 |
| Karelle Boyle | tanya.schoen80@hotmail.com | Jastborough | Inactive | $1,035.24 |
| Franz Fisher | cesar_heidenreich@hotmail.com | Gayleshire | Active | $239.99 |
| Alden Dibbert | annamarie27@hotmail.com | North Christian | Inactive | $1,088.59 |
| Dr. Bennie Goldner | gussie60@gmail.com | West Billy | Active | $108.76 |
| Total | $3,170.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bill Kilback PhD | kiara.pollich50@hotmail.com | Port Anthony | Active | $231.40 |
| Mr. Leon Abshire | ova_schumm@yahoo.com | Jermaineshire | Active | $125.25 |
| Alan Considine | charles.parisian37@gmail.com | Town 'n' Country | Inactive | $460.59 |
| Althea Wolff | jazlyn_daugherty4@hotmail.com | Braunton | Active | $58.79 |
| Cali Boyer | ella.conn@yahoo.com | East Helmerberg | Active | $232.03 |
| Total | $1,108.06 | |||
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 | ||
|---|---|---|---|---|---|
| Dennis VonRueden | bettie55@gmail.com | Marcotown | Inactive | $218.55 | |
| Leonardo MacGyver | kennedi_morissette79@hotmail.com | Olympia | Active | $162.97 | |
| Demetrius Bergnaum | bryan_runolfsdottir50@hotmail.com | North Odiehaven | Inactive | $906.78 | |
| Domenico Lueilwitz | alexane.rath37@hotmail.com | Harryton | Active | $1,157.13 | |
| Alvena Hilll | keon.nicolas64@hotmail.com | Chesapeake | Inactive | $468.71 | |
| Total | $2,914.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Margarita Ortiz | myron_howe6@hotmail.com | Bauchcester | Active | $1,032.46 | |
| Monroe Kris | earnest.abshire45@yahoo.com | South Shawna | Inactive | $746.70 | |
| Karl Green | teagan35@hotmail.com | South Patrickborough | Active | $285.89 | |
| Angela Rowe | consuelo_keeling@hotmail.com | Sawaynberg | Active | $754.60 | |
| Mr. Cole Quigley | kariane30@yahoo.com | Lysanneport | Active | $795.91 | |
| Total | $3,615.56 | ||||
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 | |
|---|---|---|---|---|
| Van Ratke | colleen4@yahoo.com | Orvilleshire | Active | $674.12 |
| Mr. Shawn Hirthe-Carter | felipe.lind@yahoo.com | New Denise | Inactive | $39.35 |
| Jerel Cummerata | connie65@hotmail.com | Spring Valley | Inactive | $482.80 |
| Edith Littel | jill.gulgowski35@gmail.com | Charlotte | Active | $113.07 |
| Johnathan Blanda III | ashley15@yahoo.com | Ernserland | Active | $641.76 |
| Bert Schaden | maggie_wuckert@yahoo.com | Torrance | Active | $90.69 |
| Ada Kirlin | maxine83@gmail.com | Kulascester | Active | $996.07 |
| Andreane Boyle | sonny18@yahoo.com | Gardena | Active | $213.73 |
| Joanna Wuckert | freida_moen@yahoo.com | Weston | Inactive | $958.70 |
| Felix Walsh III | nella_rowe@yahoo.com | Brownsville | Inactive | $536.54 |
| London Kub II | oren46@gmail.com | Las Cruces | Active | $228.12 |
| Sandra Jacobson | deanna.zulauf65@hotmail.com | South Sheldonborough | Active | $94.88 |
| Robyn Dietrich | wade_auer91@yahoo.com | North Mathewfurt | Inactive | $850.59 |
| Jimmie Willms V | chris43@yahoo.com | Tobychester | Inactive | $1,169.43 |
| Erik Senger | trever.ziemann@hotmail.com | Robertscester | Active | $99.72 |
| Total | $7,189.57 | |||
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 |