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 | $974.38 |
| INV002 | Pending | Bank Transfer | $656.08 |
| INV003 | Pending | Credit Card | $829.50 |
| INV004 | Pending | Bank Transfer | $110.56 |
| INV005 | Paid | Credit Card | $936.15 |
| INV006 | Unpaid | Bank Transfer | $812.38 |
| INV007 | Paid | Bank Transfer | $513.47 |
| Total | $4,832.52 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Morris Predovic | Product Branding Strategist | morris_predovic98@yahoo.com | Member | |
| Howard Price | District Research Liaison | howard.price@hotmail.com | Viewer | |
| Toby Beer-Boyle | Human Optimization Strategist | toby_beer-boyle40@hotmail.com | Member | |
| Sidney Kassulke | Forward Identity Assistant | sidney.kassulke@gmail.com | Member | |
| Ellie Murray | Internal Directives Liaison | ellie_murray@yahoo.com | Admin | |
| Kiel Marquardt | Global Communications Executive | kiel.marquardt11@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 |
|---|---|---|
Candida Padberg National Mobility Developer candida.padberg76@gmail.com | Admin | |
Blake Miller Corporate Intranet Supervisor blake.miller@hotmail.com | Admin | |
Kavon Kilback Investor Branding Facilitator kavon_kilback@gmail.com | Viewer | |
Shannon Witting Dynamic Mobility Analyst shannon_witting41@yahoo.com | Member | |
Ashley Mertz Global Security Supervisor ashley_mertz17@yahoo.com | Admin | |
Hal Cummings Regional Factors Associate hal_cummings14@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 |
|---|---|---|
Janet Harvey Lead Intranet Administrator janet.harvey@yahoo.com | Member | |
Diana Waelchi Future Assurance Supervisor diana.waelchi80@hotmail.com | Admin | |
Petra Feest Chief Marketing Designer petra.feest@yahoo.com | Admin | |
Lila Shields Lead Functionality Supervisor lila_shields@gmail.com | Admin | |
Albert Bayer National Operations Liaison albert.bayer@yahoo.com | Member | |
Reggie Leuschke National Interactions Associate reggie.leuschke66@hotmail.com | Member | |
Frederick Rodriguez Senior Branding Specialist frederick_rodriguez41@yahoo.com | Admin | |
Kristi Von National Metrics Agent kristi.von@yahoo.com | Viewer | |
Otilia Hermann Principal Infrastructure Facilitator otilia.hermann@gmail.com | Admin | |
Leif Hilpert Internal Metrics Specialist leif_hilpert25@hotmail.com | Viewer | |
Jeannie Jacobs Customer Optimization Agent jeannie.jacobs6@yahoo.com | Viewer | |
Deborah Hintz National Division Associate deborah_hintz7@yahoo.com | Viewer | |
Wayne Keeling Forward Security Consultant wayne_keeling@gmail.com | Admin | |
Estella Jerde Regional Group Assistant estella_jerde41@gmail.com | Admin | |
Patty Grimes Central Identity Associate patty_grimes@yahoo.com | Admin | |
Kathleen Reynolds Dynamic Implementation Administrator kathleen.reynolds34@hotmail.com | Viewer | |
Trever Heidenreich-Jones Human Infrastructure Executive trever_heidenreich-jones38@yahoo.com | Admin | |
Latoya Watsica Lead Security Orchestrator latoya.watsica2@gmail.com | Admin | |
Anahi Schowalter Forward Infrastructure Officer anahi.schowalter@hotmail.com | Admin | |
Green Greenholt Forward Creative Coordinator green_greenholt13@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 | |
|---|---|---|---|---|
| Zola Langworth | leland40@yahoo.com | Whiteside | Inactive | $816.70 |
| Jennyfer Schumm | shelley_botsford@yahoo.com | Romagueratown | Inactive | $819.04 |
| Ms. Maggie Upton | abbie.wilderman82@gmail.com | Maidaberg | Active | $448.85 |
| Lonnie Wuckert V | adrien.tremblay63@yahoo.com | Port Marilyn | Active | $554.71 |
| Laurianne Stracke | nick_larson@gmail.com | Tamarac | Active | $1,022.45 |
| Total | $3,661.75 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Irene Maggio @ron_runte13 | birdie.brown@hotmail.com | Leilanifurt | Active | $922.95 |
Eric Dicki @remington77 | bertrand.upton17@yahoo.com | Kingport | Active | $335.54 |
Loyce Gerlach-Hartmann II @serenity36 | shany.kreiger@gmail.com | Port Rosemarie | Inactive | $583.51 |
Jerry Sipes @jenna45 | broderick_tillman@hotmail.com | East Irvingville | Active | $694.72 |
Mr. Marco Ritchie @mckenna_donnelly20 | jo75@yahoo.com | Huntington | Active | $237.53 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Kristy Collins | germaine_bogisich@gmail.com | East Zachariahside | Inactive | $239.16 |
| Miss Bethany Rippin | randolph87@gmail.com | Corkerytown | Inactive | $732.02 |
| Denise Davis | price_torp@hotmail.com | Surprise | Inactive | $790.68 |
| Ms. Faustino Hansen | molly.roob68@hotmail.com | North Mikel | Inactive | $1,040.05 |
| Lonnie Emard | kendrick.osinski19@hotmail.com | Angelahaven | Active | $560.56 |
| Total | $3,362.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jenny Tillman | landen_bechtelar35@yahoo.com | New Kelvin | Inactive | $858.96 |
| Abby Reinger | jeffrey_roob@gmail.com | Rolandoboro | Active | $632.35 |
| Martha Keebler | freda.beier@yahoo.com | East Santa | Active | $343.52 |
| Juana Gorczany I | robert37@yahoo.com | Lake Carriemouth | Active | $225.62 |
| Pam Cole-Grimes | carlton_braun56@hotmail.com | Oletaside | Active | $1,020.18 |
| Total | $3,080.63 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Dominick Kuphal | seth.runte@hotmail.com | Gulfport | Inactive | $408.15 |
| Betty Beier | genevieve62@gmail.com | Maricopa | Inactive | $97.83 |
| Christina MacGyver | clarence.ernser50@yahoo.com | East Garnetport | Active | $453.27 |
| Bernie Schmidt | nicole36@gmail.com | Rathmouth | Inactive | $971.01 |
| Carlos Hermann | hertha.kuhlman28@hotmail.com | Lake Watsonworth | Active | $377.02 |
| Total | $2,307.28 | |||
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 | ||
|---|---|---|---|---|---|
| Albert Robel Jr. | dandre_witting63@hotmail.com | Castle Rock | Inactive | $101.41 | |
| Mr. Osvaldo Durgan | carol23@gmail.com | Fort Stanfordshire | Active | $737.45 | |
| Alize Labadie | gabriel.wisozk88@gmail.com | Claraview | Active | $1,129.94 | |
| Tiffany Schroeder | antonina.romaguera13@yahoo.com | O'Konburgh | Inactive | $239.33 | |
| Sarai Bins | jacob47@gmail.com | Ebertshire | Inactive | $1,107.13 | |
| Total | $3,315.26 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Mamie Ebert | raphaelle9@gmail.com | West Feliciaborough | Inactive | $922.02 | |
| Mr. Jaron Durgan | rosalind70@yahoo.com | Titusville | Active | $440.40 | |
| Jacinto D'Amore-Prohaska Jr. | rylan.greenfelder@hotmail.com | Nevafield | Inactive | $637.53 | |
| Uriah Schamberger | garrett_rath77@yahoo.com | East Ashleestead | Inactive | $596.48 | |
| Duane Will | margie17@hotmail.com | Bristol | Active | $683.97 | |
| Total | $3,280.40 | ||||
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 | |
|---|---|---|---|---|
| Lamont Nader I | mitchell.towne@yahoo.com | Mobile | Active | $1,161.05 |
| Janie Hackett | sheri.swift80@hotmail.com | North Metafield | Active | $202.65 |
| Byron Rau | william.kuphal@gmail.com | Strongsville | Inactive | $701.55 |
| Doug Dietrich | easton_glover@hotmail.com | Honolulu | Active | $251.97 |
| James Schuppe | meghan14@gmail.com | Millercester | Inactive | $1,145.30 |
| Mark Goyette | maria.zieme@hotmail.com | Port Shaun | Active | $637.42 |
| Mrs. Delphine Haley | clarissa_turner@yahoo.com | Huntersville | Active | $939.94 |
| Dr. Elaine Nikolaus | brendan15@yahoo.com | Collierworth | Active | $223.77 |
| Mr. Leon Mante | casper47@yahoo.com | West Sydnee | Inactive | $471.41 |
| Gwendolyn Huel | kari66@yahoo.com | West Joannyside | Active | $1,073.73 |
| Olga Luettgen | felipe10@hotmail.com | Traciboro | Active | $453.23 |
| Renee Vandervort | michael.jast23@gmail.com | Merced | Active | $361.63 |
| Evans Hills | faye.emard@gmail.com | Sengerfield | Active | $800.66 |
| Mrs. Tia Dietrich | aurelio_berge4@hotmail.com | Muellertown | Active | $17.94 |
| Casimir Collins | bridget.king75@gmail.com | Mattiestad | Active | $845.83 |
| Total | $9,288.08 | |||
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 |