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 | Credit Card | $845.21 |
| INV002 | Unpaid | Bank Transfer | $634.44 |
| INV003 | Paid | PayPal | $916.13 |
| INV004 | Unpaid | PayPal | $354.32 |
| INV005 | Unpaid | PayPal | $729.14 |
| INV006 | Pending | Bank Transfer | $515.63 |
| INV007 | Unpaid | Credit Card | $159.02 |
| Total | $4,153.89 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ben Kuhic | Corporate Integration Agent | ben.kuhic98@hotmail.com | Member | |
| Waylon Hartmann | International Marketing Coordinator | waylon_hartmann@gmail.com | Admin | |
| Oma Williamson | Global Factors Manager | oma_williamson@hotmail.com | Member | |
| Geraldine Trantow-Monahan | Investor Operations Coordinator | geraldine_trantow-monahan53@yahoo.com | Admin | |
| Felicia Prohaska | Chief Functionality Officer | felicia.prohaska@yahoo.com | Viewer | |
| Marcelle Zboncak | Chief Applications Associate | marcelle_zboncak89@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 |
|---|---|---|
Charity Gottlieb Future Marketing Coordinator charity_gottlieb89@hotmail.com | Member | |
Maci Goyette Forward Implementation Liaison maci_goyette@hotmail.com | Admin | |
Marie Dicki Legacy Communications Developer marie.dicki@yahoo.com | Admin | |
Alphonso Kunze Central Directives Facilitator alphonso_kunze@hotmail.com | Member | |
Taryn Zulauf Product Identity Developer taryn_zulauf@yahoo.com | Admin | |
Alexandre O'Connell Customer Research Representative alexandre.oconnell95@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mohammad Champlin District Functionality Designer mohammad.champlin24@hotmail.com | Member | |
Marie Lubowitz Dynamic Directives Director marie.lubowitz67@gmail.com | Viewer | |
Rachelle Schuster Future Integration Administrator rachelle_schuster72@yahoo.com | Viewer | |
Thalia Morar National Marketing Supervisor thalia.morar@yahoo.com | Admin | |
Brendan Gerlach National Assurance Analyst brendan.gerlach41@hotmail.com | Admin | |
Jamey Kshlerin Corporate Identity Supervisor jamey_kshlerin@gmail.com | Viewer | |
Golda Ferry Chief Accountability Coordinator golda_ferry@yahoo.com | Admin | |
Paulette Ankunding Customer Mobility Coordinator paulette_ankunding23@yahoo.com | Viewer | |
Kody Zemlak Global Usability Technician kody_zemlak64@hotmail.com | Admin | |
Aaron Collier Legacy Communications Planner aaron_collier@yahoo.com | Viewer | |
Velma Kunde Regional Metrics Liaison velma.kunde14@gmail.com | Member | |
Bernhard Mann Investor Brand Analyst bernhard_mann@hotmail.com | Admin | |
Kenneth Denesik Forward Operations Representative kenneth_denesik@yahoo.com | Viewer | |
Jennings Hansen International Quality Specialist jennings.hansen@yahoo.com | Viewer | |
Alanna Armstrong Human Accountability Designer alanna_armstrong47@gmail.com | Admin | |
Marcia Casper Chief Functionality Developer marcia_casper29@hotmail.com | Admin | |
Brisa Hills Human Infrastructure Executive brisa.hills@yahoo.com | Admin | |
Tamia Bogisich Direct Operations Strategist tamia.bogisich@gmail.com | Member | |
Reid Funk Investor Markets Agent reid.funk@yahoo.com | Member | |
Llewellyn Kshlerin International Infrastructure Manager llewellyn.kshlerin@hotmail.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 | |
|---|---|---|---|---|
| Marcos Jacobson II | ernest38@yahoo.com | South Delphiaville | Inactive | $722.01 |
| Dr. Beryl Turcotte-Collins | ruben60@gmail.com | Metzfield | Active | $774.16 |
| Dr. Brendon Sawayn DVM | marjorie7@gmail.com | Terre Haute | Active | $564.24 |
| Bernard Padberg-Tromp | kacey.nader16@gmail.com | Lynch-Danielfield | Inactive | $24.34 |
| Kennedy Fritsch | floy_kunze97@gmail.com | South Petra | Inactive | $702.33 |
| Total | $2,787.08 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kent Trantow Sr. @angie_bergnaum | daryl_towne@hotmail.com | Fort Joanna | Inactive | $990.92 |
Deontae Walsh @garland.jacobs87 | darryl_russel@hotmail.com | Fort Bertashire | Active | $1,036.35 |
Mrs. Chaya Marquardt @samuel.green11 | eddie_klein@hotmail.com | Brownboro | Inactive | $368.63 |
Quincy Blanda @hugo.sawayn5 | rosario.schneider@gmail.com | Larkinmouth | Inactive | $74.15 |
Hollie Hammes @favian_batz50 | ansel_dare84@yahoo.com | Port Jasminechester | Inactive | $779.28 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erick Kautzer | buford_stroman64@gmail.com | Lake Claytown | Active | $1,078.72 |
| Wilbur Morissette | sarina8@hotmail.com | Tallahassee | Inactive | $728.02 |
| Jeffry Zboncak | jaquelin96@hotmail.com | Lake Aureliatown | Inactive | $50.09 |
| Elliot Swift | bernard.franey66@yahoo.com | Port Arturochester | Inactive | $636.15 |
| Gilbert Lowe | yolanda_schultz33@yahoo.com | New Mattiechester | Inactive | $311.24 |
| Total | $2,804.22 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ferne Wuckert | buck74@gmail.com | College Station | Inactive | $878.94 |
| Teri Walter | kirk_schmidt@hotmail.com | Welchtown | Active | $590.68 |
| Katelin Collier | buddy_casper17@gmail.com | Joeland | Active | $627.78 |
| Lois Ernser-Swaniawski | tomas.gibson88@hotmail.com | East Brittany | Inactive | $446.02 |
| Opal Will | karelle20@hotmail.com | West Allis | Active | $589.77 |
| Total | $3,133.19 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Krista Tillman | emmet6@gmail.com | North Waylonville | Inactive | $619.16 |
| Christ Rippin | archibald_cruickshank76@yahoo.com | Theresaboro | Active | $601.61 |
| Tre Lowe | maritza_wehner13@gmail.com | Howellfurt | Inactive | $508.77 |
| Florida Fisher Jr. | rubye.senger98@gmail.com | Hershelstead | Inactive | $671.51 |
| Roderick Tremblay | mauricio_mcclure51@hotmail.com | Bernhardmouth | Inactive | $1,157.08 |
| Total | $3,558.13 | |||
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 | ||
|---|---|---|---|---|---|
| Carlotta Harber | dawson_windler@gmail.com | Normal | Inactive | $1,059.37 | |
| Mr. Alonzo Becker II | adrienne_schaden-wisoky@gmail.com | New Alvin | Active | $867.73 | |
| Donna Lubowitz V | glennie.gottlieb@yahoo.com | Concord | Inactive | $108.77 | |
| Derek Aufderhar | maurice69@hotmail.com | Riverview | Active | $578.48 | |
| Rey Streich | peter71@gmail.com | Orland Park | Active | $18.24 | |
| Total | $2,632.59 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Diane Hessel I | yvette87@gmail.com | Rippinfort | Active | $1,185.47 | |
| Jessica Skiles | elisha6@yahoo.com | Parkerville | Inactive | $869.58 | |
| Felton Kemmer | arne31@hotmail.com | Dillonton | Inactive | $1,042.31 | |
| Gilbert Toy | lizeth_connelly@yahoo.com | Fort Eddie | Inactive | $679.38 | |
| Otis Turcotte | ida15@gmail.com | East Rhonda | Active | $896.72 | |
| Total | $4,673.46 | ||||
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 | |
|---|---|---|---|---|
| Howard Frami | may_price61@hotmail.com | North Laney | Inactive | $283.25 |
| Erna Abbott Jr. | roderick10@gmail.com | East Myrticeburgh | Active | $431.82 |
| Kyra Schuppe | eloy.ebert@hotmail.com | Fort Queenieworth | Inactive | $78.06 |
| Dr. Misael Jenkins | trenton_witting19@hotmail.com | Garden Grove | Active | $515.42 |
| Roland Langosh | dan70@hotmail.com | Millcreek | Active | $104.01 |
| Damon Aufderhar | phyllis_buckridge@gmail.com | Port Sue | Inactive | $450.06 |
| Xavier Gusikowski III | devante_flatley@gmail.com | Ceceliafield | Active | $844.73 |
| Omar Bogisich | jared_cronin93@hotmail.com | Hodkiewiczstad | Active | $700.29 |
| Rosella Feeney | henrietta83@gmail.com | Rempelhaven | Active | $992.77 |
| Megan Leffler | krista_schumm97@hotmail.com | Napa | Inactive | $983.96 |
| Desiree Kiehn | lance68@yahoo.com | Greeley | Active | $955.23 |
| Emmie Schmeler | brandy_doyle@gmail.com | Burlington | Inactive | $833.91 |
| Jody Harvey | nellie84@hotmail.com | West Curtisville | Inactive | $867.67 |
| Malika Little DDS | malika_green13@gmail.com | Highland | Inactive | $80.67 |
| Ashlee Rogahn DVM | jed_lebsack@yahoo.com | North Bulahport | Active | $1,103.80 |
| Total | $9,225.65 | |||
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 |