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 | $423.96 |
| INV002 | Pending | Credit Card | $361.17 |
| INV003 | Unpaid | Credit Card | $935.37 |
| INV004 | Paid | PayPal | $204.55 |
| INV005 | Paid | Credit Card | $256.58 |
| INV006 | Paid | Bank Transfer | $627.37 |
| INV007 | Pending | PayPal | $829.67 |
| Total | $3,638.67 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Gary Hauck | Senior Tactics Liaison | gary.hauck@hotmail.com | Member | |
| Tristin Yost | Global Interactions Liaison | tristin.yost59@yahoo.com | Viewer | |
| Lennie Sipes | Dynamic Usability Designer | lennie.sipes65@hotmail.com | Viewer | |
| Michael Sawayn | Customer Group Technician | michael_sawayn@hotmail.com | Admin | |
| Cindy Mraz | Global Mobility Strategist | cindy.mraz20@gmail.com | Admin | |
| Alton Roberts | District Data Specialist | alton.roberts@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 |
|---|---|---|
Toni Kassulke National Mobility Consultant toni_kassulke@yahoo.com | Member | |
Domingo Carter Future Integration Designer domingo_carter@gmail.com | Member | |
Golden Kreiger Central Infrastructure Assistant golden_kreiger@gmail.com | Member | |
Duncan Ritchie International Quality Coordinator duncan.ritchie@gmail.com | Viewer | |
Alphonso Feil Principal Communications Analyst alphonso.feil@gmail.com | Member | |
Viola Hintz Product Integration Developer viola.hintz@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Delpha Bernier Investor Usability Coordinator delpha_bernier63@yahoo.com | Viewer | |
Luther Stracke Chief Marketing Supervisor luther.stracke53@yahoo.com | Viewer | |
Stephen VonRueden International Identity Technician stephen_vonrueden82@yahoo.com | Admin | |
Dusty Skiles District Brand Executive dusty_skiles@hotmail.com | Admin | |
Lauren Blick Forward Response Manager lauren_blick80@yahoo.com | Admin | |
Robin Hilpert Investor Integration Executive robin.hilpert70@gmail.com | Admin | |
Marianne Murray Dynamic Intranet Facilitator marianne_murray@gmail.com | Member | |
Michael Harris Chief Infrastructure Facilitator michael.harris64@gmail.com | Member | |
Nash Willms Lead Mobility Representative nash_willms52@hotmail.com | Admin | |
Cortez Zboncak Product Research Coordinator cortez.zboncak94@hotmail.com | Member | |
George Connelly Legacy Web Officer george_connelly20@yahoo.com | Member | |
Maybelle Bechtelar-Larson Customer Functionality Consultant maybelle_bechtelar-larson@yahoo.com | Member | |
Jeanette Waelchi Customer Interactions Officer jeanette_waelchi53@gmail.com | Viewer | |
Brennan Deckow Future Identity Administrator brennan.deckow87@yahoo.com | Member | |
Jim Fritsch National Brand Agent jim_fritsch@gmail.com | Viewer | |
Claud Bogisich District Optimization Coordinator claud.bogisich0@gmail.com | Admin | |
Caleb Cole Human Usability Developer caleb_cole@yahoo.com | Member | |
Etha Kerluke Lead Branding Assistant etha.kerluke89@gmail.com | Viewer | |
Veronica Dicki Global Division Architect veronica_dicki@hotmail.com | Admin | |
Marty Farrell Investor Implementation Associate marty_farrell@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 | |
|---|---|---|---|---|
| Mrs. Melyssa Rempel | ferne_fahey64@hotmail.com | North Karlee | Active | $14.71 |
| Beverly Bergnaum Jr. | derek.marvin@yahoo.com | Camrenchester | Inactive | $182.00 |
| Jack Hills | tanya19@gmail.com | South Ledachester | Inactive | $509.41 |
| Clarabelle Cummerata | joann_jerde84@yahoo.com | East Fred | Active | $548.35 |
| Dr. Melissa Bradtke Jr. | cristopher_skiles@hotmail.com | South Keon | Active | $212.68 |
| Total | $1,467.15 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Peyton Schoen @frederick82 | nora.reichert56@yahoo.com | Wittington | Active | $651.96 |
Vito McCullough II @randal85 | kaelyn_hirthe43@yahoo.com | Landenshire | Active | $548.57 |
Olivia Rolfson-Dibbert @jess_gerlach99 | magdalen21@hotmail.com | West Covina | Inactive | $14.46 |
Adrien Shanahan I @latoya44 | andreane_dubuque@yahoo.com | Howellfort | Inactive | $101.89 |
Cody Haley-Lesch DDS @miguel_kovacek73 | alan0@yahoo.com | Lenoratown | Active | $1,036.20 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Emily Marquardt | alba81@yahoo.com | Fort Sierratown | Active | $1,115.21 |
| Phil Runolfsdottir | alejandro.veum55@hotmail.com | Kobyland | Inactive | $763.45 |
| Freda Wunsch | johanna.corkery@hotmail.com | Bergeworth | Active | $41.14 |
| Gerardo Moore | kara6@hotmail.com | East Los Angeles | Inactive | $541.32 |
| Imogene Bins IV | kendrick80@hotmail.com | Mitchellside | Inactive | $699.54 |
| Total | $3,160.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yazmin O'Hara | shane.hilll9@hotmail.com | East Adrianna | Active | $756.40 |
| Alicia Mraz | theresa67@gmail.com | North Taylorfield | Inactive | $938.32 |
| Davon Rippin | vladimir85@gmail.com | Hartmannville | Inactive | $664.79 |
| Dr. Lenora Swaniawski | octavia_wintheiser87@hotmail.com | Ricemouth | Active | $378.31 |
| Mindy Crooks | van_sipes18@hotmail.com | North Joancester | Active | $546.04 |
| Total | $3,283.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Nash Greenholt | mathilde_schaefer@yahoo.com | Mylesshire | Active | $702.46 |
| Janie Goyette | fernando.christiansen@hotmail.com | Runolfsdottirborough | Active | $625.21 |
| Marco Heathcote | ted_beer11@hotmail.com | Baltimore | Inactive | $1,011.84 |
| Mr. Savannah Legros | alessandra89@hotmail.com | Port Nathanial | Inactive | $443.37 |
| Kristin Runolfsson | orville.bartoletti34@gmail.com | Bodeberg | Active | $457.59 |
| Total | $3,240.47 | |||
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 | ||
|---|---|---|---|---|---|
| Lemuel Kling | zackary_ohara@hotmail.com | Port Donavonside | Inactive | $767.87 | |
| Angel Hyatt | fredrick.spencer7@hotmail.com | McAllen | Inactive | $22.49 | |
| Meaghan Botsford-Mohr | jovani.windler93@gmail.com | East Brendonville | Inactive | $414.39 | |
| Gene Green | bert_stehr@yahoo.com | East Gabriellemouth | Inactive | $464.33 | |
| Rufus McGlynn | travis_hauck@hotmail.com | Fort Lottie | Inactive | $1,191.63 | |
| Total | $2,860.71 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Kraig Kulas III | kristin23@gmail.com | Asheville | Inactive | $995.41 | |
| Laurel Kihn | haleigh.heller@hotmail.com | Deerfield Beach | Inactive | $916.83 | |
| Candace Jerde | becky_nikolaus55@hotmail.com | East Colemancester | Inactive | $950.02 | |
| Mrs. Hunter Reilly | ines.wintheiser41@yahoo.com | Gabeburgh | Inactive | $914.17 | |
| Wilfred Friesen | alma88@yahoo.com | West Idella | Inactive | $364.31 | |
| Total | $4,140.74 | ||||
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 | |
|---|---|---|---|---|
| Gerardo Jenkins | geoffrey_jerde@yahoo.com | Bruenbury | Inactive | $372.43 |
| Kaylee Mills DDS | lydia.abernathy@gmail.com | Port Winifredburgh | Active | $1,112.87 |
| Percy Schoen | madeline.goyette@gmail.com | Reading | Active | $547.52 |
| Miss Dortha Willms | mateo_jakubowski@yahoo.com | Kenosha | Inactive | $480.13 |
| Cleo Krajcik | traci17@gmail.com | Lake Randistead | Active | $1,055.06 |
| Keara Roberts | mya_mcclure50@hotmail.com | Chesleyport | Inactive | $635.30 |
| Eunice Anderson | ernest_johnston23@gmail.com | Kirstinville | Inactive | $1,182.94 |
| Miss Marta Friesen | eveline.towne@hotmail.com | Kearacester | Inactive | $344.27 |
| Traci Stracke | jaime97@hotmail.com | Novato | Active | $144.57 |
| Else Murazik | estelle.schroeder@yahoo.com | East Asaview | Inactive | $923.63 |
| Mr. Tobin Trantow | vena_glover81@hotmail.com | South Leopoldo | Active | $306.44 |
| Louise Bode | malcolm17@gmail.com | Caldwell | Inactive | $219.89 |
| Efren Herzog | lauretta_swift@yahoo.com | Lake Elinor | Active | $1,102.46 |
| Earnest Kling | brooks_quitzon@gmail.com | Shanahanmouth | Active | $1,129.45 |
| Eusebio Zemlak-Stehr | myles_smith@gmail.com | Port Karson | Inactive | $552.93 |
| Total | $10,109.89 | |||
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 |