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 | Bank Transfer | $129.85 |
| INV002 | Paid | PayPal | $460.34 |
| INV003 | Paid | Bank Transfer | $526.78 |
| INV004 | Unpaid | Bank Transfer | $593.92 |
| INV005 | Paid | Bank Transfer | $235.71 |
| INV006 | Paid | PayPal | $701.12 |
| INV007 | Pending | Bank Transfer | $578.29 |
| Total | $3,226.01 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Queenie Langosh | Direct Brand Associate | queenie_langosh@yahoo.com | Viewer | |
| Sidney Parker | Future Creative Engineer | sidney.parker51@gmail.com | Viewer | |
| Helen Predovic | Regional Configuration Assistant | helen_predovic79@gmail.com | Member | |
| Art Kerluke | Internal Program Assistant | art_kerluke@yahoo.com | Member | |
| Jimmie Wiza | Senior Optimization Specialist | jimmie_wiza38@hotmail.com | Admin | |
| Gladys Turcotte | Legacy Factors Designer | gladys_turcotte@gmail.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 |
|---|---|---|
Maryann Legros Corporate Marketing Supervisor maryann_legros@hotmail.com | Viewer | |
Teri Heller Lead Solutions Facilitator teri.heller@yahoo.com | Member | |
Victoria Marks Principal Assurance Producer victoria.marks62@hotmail.com | Member | |
Alice Wilderman Direct Configuration Analyst alice.wilderman41@hotmail.com | Admin | |
Marlen Moen International Implementation Planner marlen.moen@gmail.com | Admin | |
Noel Kunze Customer Identity Agent noel_kunze1@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 |
|---|---|---|
Mark Blick Forward Branding Developer mark.blick@yahoo.com | Member | |
Jordon Gutmann Chief Branding Executive jordon_gutmann@yahoo.com | Admin | |
Cora Hudson Global Marketing Planner cora_hudson0@gmail.com | Member | |
Bethany Hilpert Legacy Marketing Orchestrator bethany_hilpert@gmail.com | Viewer | |
Olga Sawayn Corporate Interactions Consultant olga.sawayn63@gmail.com | Viewer | |
Deondre Skiles Lead Operations Architect deondre_skiles76@hotmail.com | Viewer | |
Belinda Mueller Product Operations Liaison belinda_mueller32@hotmail.com | Member | |
Tamara Greenfelder International Research Representative tamara.greenfelder27@yahoo.com | Viewer | |
Dock Conn Internal Integration Associate dock_conn@gmail.com | Member | |
Damon Dicki Central Identity Strategist damon.dicki@gmail.com | Member | |
William Tillman Dynamic Metrics Coordinator william_tillman56@gmail.com | Admin | |
Madie Leannon Direct Metrics Producer madie_leannon@hotmail.com | Viewer | |
Myles Tremblay Central Group Assistant myles_tremblay@yahoo.com | Viewer | |
Emelia Larkin Principal Optimization Orchestrator emelia_larkin99@yahoo.com | Member | |
Travon Hirthe Investor Accountability Designer travon_hirthe4@gmail.com | Member | |
Jeremiah Legros Principal Directives Associate jeremiah_legros28@hotmail.com | Member | |
Rhonda Botsford Global Response Director rhonda.botsford55@yahoo.com | Viewer | |
Marcelina Ruecker Dynamic Paradigm Executive marcelina_ruecker@hotmail.com | Admin | |
Britney Green Investor Interactions Developer britney_green@gmail.com | Admin | |
Casimir Tremblay Central Accounts Analyst casimir.tremblay@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 | |
|---|---|---|---|---|
| Sandra Hintz | watson25@yahoo.com | Heidistad | Inactive | $574.39 |
| Buck Dickens | daisy_dicki-farrell@hotmail.com | Lake Charlenecester | Active | $1,121.97 |
| Omari Hilll | renee_padberg86@gmail.com | Port Jonathan | Active | $433.25 |
| Gregg Skiles | rollin.stokes94@gmail.com | Schowalterworth | Active | $1,064.94 |
| Nya Hills | telly.cole27@yahoo.com | East Kenneth | Inactive | $1,058.53 |
| Total | $4,253.08 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Paul Smitham MD @derek64 | estel.yundt@yahoo.com | Las Cruces | Inactive | $783.94 |
Dan O'Kon @gwen_zboncak33 | warren.monahan@hotmail.com | Scotthaven | Inactive | $342.63 |
Jeramy Morar @chance_rutherford | leonard_hills86@yahoo.com | Mandyside | Inactive | $902.91 |
Ardella Koss @blake93 | marc.rolfson@gmail.com | Morar-Walshbury | Active | $73.03 |
Jose Harris @melvin_brakus | lavonne.zulauf@yahoo.com | Winston-Salem | Active | $893.61 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gennaro Spinka | shaun67@hotmail.com | Port Afton | Active | $147.76 |
| Jena Schmitt | hassie.parker78@gmail.com | North Brianview | Inactive | $900.28 |
| Novella Cremin | scarlett60@yahoo.com | Evieburgh | Inactive | $300.45 |
| Jeremiah Windler | jewel84@hotmail.com | Coeur d'Alene | Inactive | $408.02 |
| Mrs. Jailyn Kertzmann | maureen.thompson40@gmail.com | South Tristonview | Inactive | $30.93 |
| Total | $1,787.44 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Aubrey Steuber | alfonso_robel82@hotmail.com | Merleland | Inactive | $1,030.76 |
| Milton Howe | annetta32@yahoo.com | Maybellland | Active | $552.98 |
| Hattie Schuppe | evert22@gmail.com | East Marcel | Inactive | $823.49 |
| Randy Lueilwitz | rupert.douglas43@hotmail.com | Mesa | Inactive | $1,197.81 |
| Gregory Bahringer DDS | lamar_brown93@gmail.com | Wayneborough | Inactive | $422.72 |
| Total | $4,027.76 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Norman Keebler | natasha15@yahoo.com | Riverside | Active | $344.13 |
| Mr. Grayson Kulas | jennyfer43@hotmail.com | New Alfonsoboro | Inactive | $748.04 |
| Marian Beahan | vida_jacobson@gmail.com | Fort Alfredoport | Inactive | $638.90 |
| Doreen Cronin | cleveland.schoen0@yahoo.com | Larkinhaven | Inactive | $488.76 |
| Damaris Predovic III | sonja.waters@yahoo.com | Port Lupe | Inactive | $830.61 |
| Total | $3,050.44 | |||
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 | ||
|---|---|---|---|---|---|
| Darla Beahan DVM | jesus.torp@yahoo.com | Aurora | Inactive | $759.65 | |
| Eula Bartoletti | winifred_lesch32@hotmail.com | Kreigerland | Active | $136.10 | |
| Mr. Otis Kreiger | renee70@yahoo.com | Ponce | Inactive | $215.47 | |
| Ms. Nancy Hoeger | josue.wiza71@yahoo.com | Wylie | Active | $1,198.19 | |
| Allen Zboncak Sr. | hazel27@gmail.com | Beckershire | Inactive | $826.47 | |
| Total | $3,135.88 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mason Kozey | lucius_walker@gmail.com | Guadalupeport | Active | $825.44 | |
| Aylin Walsh | darrin.pollich@gmail.com | North Stephanyland | Active | $284.67 | |
| Ines Dooley | janie61@gmail.com | Port Eduardo | Active | $976.39 | |
| Veronica Kerluke | reuben.kirlin@yahoo.com | Romaguerafield | Active | $370.46 | |
| Issac Conn | eva60@hotmail.com | North Raheem | Inactive | $964.87 | |
| Total | $3,421.83 | ||||
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 | |
|---|---|---|---|---|
| Julie Feil | delores.renner69@gmail.com | North Dustinberg | Inactive | $670.09 |
| Retha Sawayn | jaron.ruecker33@hotmail.com | Krisfield | Active | $254.11 |
| Deven Breitenberg Sr. | marlon.rempel@hotmail.com | Binsshire | Active | $916.15 |
| Miss Lamont Kuphal | dianna.king0@hotmail.com | Damonside | Inactive | $403.02 |
| Tad Legros | erick_welch58@hotmail.com | Shawnstead | Inactive | $406.71 |
| Loyal Dare | miriam_mertz52@yahoo.com | Memphis | Active | $421.21 |
| Jarod Ferry | hermina52@hotmail.com | South Elton | Inactive | $1,015.14 |
| Quinten Heidenreich | renee_kuphal@gmail.com | Leesburg | Active | $661.25 |
| Catherine Frami | salma.graham@yahoo.com | Vernaburgh | Inactive | $194.22 |
| Gertrude Williamson | ivah23@yahoo.com | Fisherfield | Inactive | $948.13 |
| Daija Hudson | august_rice49@hotmail.com | Prohaska-Franeckifurt | Inactive | $991.92 |
| Dr. Keagan Bradtke | katrina_bednar@yahoo.com | West Lorine | Inactive | $2.11 |
| Kiera Witting | damon.fritsch@hotmail.com | Haydenfort | Active | $391.78 |
| Iris Roob | nels2@hotmail.com | East Jarred | Inactive | $983.19 |
| Maryjane Mosciski | isabel_stehr92@gmail.com | Elwinton | Active | $657.25 |
| Total | $8,916.28 | |||
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 |