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 | Pending | PayPal | $773.68 |
| INV002 | Pending | Bank Transfer | $695.16 |
| INV003 | Unpaid | PayPal | $866.45 |
| INV004 | Pending | PayPal | $717.87 |
| INV005 | Paid | Credit Card | $560.19 |
| INV006 | Unpaid | Bank Transfer | $988.61 |
| INV007 | Unpaid | Bank Transfer | $291.68 |
| Total | $4,893.64 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Christie Bashirian | Internal Factors Agent | christie.bashirian93@yahoo.com | Viewer | |
| Reggie Wunsch | Product Implementation Architect | reggie_wunsch@gmail.com | Admin | |
| Florence Waters-Weber | Product Tactics Liaison | florence.waters-weber@yahoo.com | Viewer | |
| Maia Crona | Legacy Operations Administrator | maia.crona@gmail.com | Admin | |
| Rochelle Waters | Central Brand Representative | rochelle.waters20@gmail.com | Member | |
| Debbie Hintz | District Assurance Director | debbie_hintz@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 |
|---|---|---|
Louvenia Gislason Forward Applications Specialist louvenia_gislason@gmail.com | Member | |
Marjorie Koelpin Dynamic Tactics Designer marjorie_koelpin@gmail.com | Member | |
Gilbert Hermiston Lead Division Executive gilbert.hermiston53@gmail.com | Viewer | |
Shaun Treutel Chief Tactics Officer shaun.treutel81@yahoo.com | Member | |
Ivan Grady Forward Interactions Technician ivan.grady@gmail.com | Admin | |
Michale Hegmann Human Research Coordinator michale.hegmann46@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 |
|---|---|---|
Deshaun Gottlieb Principal Creative Technician deshaun_gottlieb79@yahoo.com | Viewer | |
Taylor Beer Dynamic Response Planner taylor.beer3@hotmail.com | Viewer | |
Lawrence Kilback Investor Program Specialist lawrence.kilback80@gmail.com | Member | |
Clint D'Amore Product Identity Supervisor clint_damore39@gmail.com | Member | |
Janessa Spinka Central Research Planner janessa.spinka@gmail.com | Viewer | |
Katherine Mayer Chief Metrics Analyst katherine.mayer96@hotmail.com | Viewer | |
Lyla Abbott Legacy Metrics Producer lyla.abbott@hotmail.com | Member | |
Margret Jast Investor Operations Producer margret_jast@hotmail.com | Member | |
Tom Gerlach Legacy Configuration Coordinator tom_gerlach99@hotmail.com | Admin | |
Eulalia Witting Chief Infrastructure Strategist eulalia.witting5@yahoo.com | Viewer | |
Ebony Keebler Legacy Implementation Developer ebony.keebler@hotmail.com | Member | |
Karine Emmerich Legacy Metrics Consultant karine_emmerich70@gmail.com | Admin | |
Carol Ledner Product Functionality Planner carol.ledner@hotmail.com | Member | |
Patrick Langworth Dynamic Accountability Technician patrick.langworth@gmail.com | Viewer | |
Urban Deckow Principal Response Strategist urban.deckow@gmail.com | Admin | |
Jared Cummerata Product Creative Consultant jared.cummerata10@yahoo.com | Viewer | |
Mona Abshire Central Markets Producer mona.abshire@gmail.com | Member | |
Jessyca Johnston District Directives Associate jessyca.johnston@yahoo.com | Viewer | |
Malika Runolfsdottir Legacy Communications Manager malika_runolfsdottir@yahoo.com | Admin | |
Ismael Connelly Global Division Associate ismael_connelly19@hotmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Dr. Kari Nader | randi_wuckert24@gmail.com | South Grayson | Inactive | $348.01 |
| Jamel Grant | eladio29@yahoo.com | Rapid City | Active | $549.59 |
| Emmett Schultz | betty50@gmail.com | Kennewick | Inactive | $1,070.78 |
| Kian Bauch | sonia.weissnat5@gmail.com | New Karl | Active | $398.71 |
| Yolanda Balistreri | gail.kreiger@yahoo.com | Port Trevor | Inactive | $359.51 |
| Total | $2,726.60 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Julius Dicki @latoya_champlin23 | jesus5@gmail.com | South Percival | Inactive | $28.79 |
Marjorie Miller @ollie28 | unique_batz35@yahoo.com | Ashburn | Inactive | $210.95 |
Miss Naomi Bins @marjolaine.satterfield | monte.dach51@hotmail.com | Padberg-Franeyside | Inactive | $1,182.46 |
Ardella Kilback @jared27 | colt.wilderman@hotmail.com | East Bennie | Inactive | $917.77 |
Griffin Hills @jerod_donnelly | orrin37@gmail.com | Hettieshire | Active | $479.17 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Loren Collins | steve97@yahoo.com | La Mirada | Inactive | $319.14 |
| Guillermo Abbott | mack.gleichner71@hotmail.com | West Tatehaven | Inactive | $1,133.55 |
| Jannie Abbott MD | anthony24@gmail.com | Port Agnesstad | Inactive | $24.18 |
| Iris Rice | austen.rosenbaum-will32@yahoo.com | Vaughnchester | Inactive | $245.14 |
| Fannie Hackett | dylan.collins@hotmail.com | San Francisco | Inactive | $698.87 |
| Total | $2,420.88 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Connor Murphy-Nicolas | natalie.tremblay32@yahoo.com | Lehi | Active | $358.97 |
| Carl Hahn | ellsworth.thompson@yahoo.com | Port Sandy | Active | $556.39 |
| Zena Gorczany | royal.rath@yahoo.com | West Freda | Active | $1,034.28 |
| Jeramy Bartoletti | paul44@hotmail.com | West Wesley | Inactive | $398.40 |
| Delaney Labadie | dayna.swift53@yahoo.com | Port Estelleview | Inactive | $929.51 |
| Total | $3,277.55 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Malinda Torphy | jane.abshire@hotmail.com | South Codyshire | Inactive | $1,187.83 |
| Brenna Fritsch-Leffler | ashton.schumm2@yahoo.com | Dickensfield | Active | $1,008.07 |
| Mariane Koepp | roderick.ernser@gmail.com | West Myrtice | Inactive | $1,117.77 |
| Karlee Walsh | gretchen_kertzmann3@gmail.com | Derricktown | Active | $1,060.91 |
| Damon Mann | stuart64@gmail.com | Maritzashire | Inactive | $295.64 |
| Total | $4,670.22 | |||
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 | ||
|---|---|---|---|---|---|
| Thad Hodkiewicz | brandi66@hotmail.com | Bauchtown | Inactive | $752.69 | |
| Dr. Selena Ratke | tami_predovic@gmail.com | Grand Island | Inactive | $342.80 | |
| Miranda Wehner | kacey.schmitt@hotmail.com | Webertown | Active | $919.10 | |
| Mrs. Melba Thiel DDS | delores_schultz@gmail.com | Fort Shany | Inactive | $433.78 | |
| Anna McDermott | natasha_little@gmail.com | Roycechester | Inactive | $770.37 | |
| Total | $3,218.74 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Molly Abshire | katrina_hoppe@hotmail.com | Claudiamouth | Inactive | $323.66 | |
| Jeff Kulas | sylvester27@gmail.com | Tonyaburgh | Inactive | $979.73 | |
| Eunice Pouros | megane31@hotmail.com | East Elton | Active | $1,014.68 | |
| Donald Dicki | alberto.nitzsche@yahoo.com | Moreno Valley | Active | $95.34 | |
| Kendrick Haley | adolphus27@gmail.com | Thompsonfurt | Active | $698.54 | |
| Total | $3,111.95 | ||||
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 | |
|---|---|---|---|---|
| Charlene Kerluke | michele15@yahoo.com | Millcreek | Inactive | $689.59 |
| Ms. Leticia Barton | mario25@hotmail.com | Koeppcester | Active | $1,012.54 |
| Dr. Latoya Ebert | brenda9@yahoo.com | Annamaeworth | Active | $792.18 |
| Zachery Kerluke | nicholaus.harris93@hotmail.com | Oscarcester | Inactive | $509.23 |
| Gennaro Metz | russ.simonis@hotmail.com | Kalamazoo | Active | $879.15 |
| Zackery Gibson | einar_hermiston@gmail.com | Columbia | Active | $433.21 |
| Dominick Mohr | desiree_conroy59@hotmail.com | Fort Jesusfort | Active | $203.54 |
| Jermey Welch | archie_herman@gmail.com | Bismarck | Active | $1,120.45 |
| Donnie Frami | ashton_dickens@hotmail.com | South Lisandrofurt | Inactive | $901.52 |
| Kade Dare | alta_nicolas74@hotmail.com | Fort Phoebefurt | Active | $434.37 |
| Edith Nader | grover38@yahoo.com | Schummberg | Inactive | $1,096.51 |
| Beatrice Jerde | elinor_kessler36@yahoo.com | South Jillianstead | Active | $815.63 |
| Frederick Welch | brandy_heathcote3@yahoo.com | Jacquelineside | Active | $523.46 |
| Claudine Hyatt-Crooks I | jim.hagenes@yahoo.com | East Loretta | Active | $825.91 |
| Melody Rippin | athena.cronin59@gmail.com | Kertzmannville | Active | $150.68 |
| Total | $10,387.97 | |||
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 |