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 | $648.30 |
| INV002 | Paid | Bank Transfer | $208.85 |
| INV003 | Unpaid | PayPal | $155.55 |
| INV004 | Pending | Credit Card | $751.55 |
| INV005 | Paid | Bank Transfer | $178.17 |
| INV006 | Unpaid | Credit Card | $588.39 |
| INV007 | Pending | PayPal | $421.85 |
| Total | $2,952.66 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Stewart Bins | Human Usability Analyst | stewart_bins@gmail.com | Admin | |
| Christian Swaniawski | International Branding Specialist | christian_swaniawski@yahoo.com | Member | |
| Stefanie Lebsack | Global Mobility Administrator | stefanie_lebsack@gmail.com | Viewer | |
| Sonya Macejkovic | Principal Accounts Facilitator | sonya_macejkovic@hotmail.com | Member | |
| Hilda VonRueden | Customer Implementation Agent | hilda_vonrueden96@hotmail.com | Member | |
| Julia Kautzer | International Security Administrator | julia.kautzer@gmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Cynthia Jerde Product Brand Strategist cynthia.jerde@gmail.com | Member | |
Ezequiel Bailey Legacy Research Liaison ezequiel.bailey19@hotmail.com | Viewer | |
Gregg Jerde Direct Data Associate gregg.jerde@yahoo.com | Viewer | |
Krystal Anderson-Franey Legacy Mobility Facilitator krystal.anderson-franey@hotmail.com | Admin | |
Ava Bins Chief Accounts Strategist ava.bins87@yahoo.com | Viewer | |
Annie Johnson-Hoeger Central Applications Facilitator annie.johnson-hoeger@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Stacey Okuneva Product Marketing Developer stacey_okuneva76@yahoo.com | Member | |
Terrell Von Legacy Security Orchestrator terrell_von@gmail.com | Member | |
Wilford Beer Investor Research Agent wilford.beer@gmail.com | Admin | |
Dusty Simonis Investor Group Assistant dusty_simonis49@gmail.com | Member | |
Judah Osinski International Data Representative judah.osinski33@yahoo.com | Member | |
Jett Dicki International Applications Strategist jett.dicki@gmail.com | Viewer | |
Duane Gorczany Product Program Specialist duane_gorczany@gmail.com | Member | |
Alexanne White Forward Quality Officer alexanne.white@yahoo.com | Viewer | |
Cynthia Koepp Chief Response Consultant cynthia.koepp29@yahoo.com | Viewer | |
Floyd Auer Principal Data Strategist floyd_auer8@hotmail.com | Member | |
Crawford Stehr Senior Implementation Facilitator crawford_stehr47@gmail.com | Member | |
Darlene Torphy Senior Optimization Strategist darlene.torphy@hotmail.com | Viewer | |
Marcel Erdman Human Group Executive marcel_erdman53@yahoo.com | Viewer | |
Jeanne Cronin Legacy Mobility Engineer jeanne_cronin@yahoo.com | Viewer | |
Elmo Kovacek Human Operations Agent elmo.kovacek@yahoo.com | Member | |
Sidney Conroy Customer Functionality Executive sidney.conroy@gmail.com | Member | |
Eda Morissette Chief Interactions Orchestrator eda_morissette59@gmail.com | Member | |
Edmund Ryan Chief Optimization Liaison edmund.ryan@yahoo.com | Member | |
Faith Parisian District Operations Manager faith.parisian9@gmail.com | Viewer | |
Ernestina Price Customer Interactions Planner ernestina.price5@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 | |
|---|---|---|---|---|
| Elsie Romaguera | minnie_mertz3@gmail.com | North Kathystead | Active | $504.97 |
| Camilla Collins | vickie95@gmail.com | North Ariane | Inactive | $489.49 |
| Lauryn Gislason | viola_leffler58@gmail.com | Abshireworth | Active | $1,092.34 |
| Kraig Bosco | ray.farrell56@yahoo.com | Guidoberg | Inactive | $312.97 |
| Chadrick Predovic-Grady | marta61@yahoo.com | Lake Bennyberg | Active | $185.52 |
| Total | $2,585.29 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ray Ebert @russ22 | angelica34@gmail.com | Port Rettaland | Inactive | $829.85 |
Mrs. Novella Ullrich @neal75 | may81@yahoo.com | South Sandraland | Active | $1,104.06 |
Hobart Kunde @al.blanda8 | susan.schroeder34@hotmail.com | South Kathrynburgh | Inactive | $301.17 |
Heaven DuBuque @winston.schaden24 | percy56@yahoo.com | Josefinafurt | Active | $135.34 |
Sally Jacobi @waino_okeefe17 | nelda.marvin14@yahoo.com | Port Molly | Active | $1,075.88 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Dwayne Yost | roy_zboncak@hotmail.com | Runolfsdottir-Durganville | Inactive | $994.79 |
| Iva Fahey | terri58@yahoo.com | Bowie | Inactive | $951.17 |
| Mr. Tyree Harris Sr. | dimitri.upton38@gmail.com | Terrifield | Active | $191.65 |
| Colby Olson | sammie.erdman@hotmail.com | Clarksville | Inactive | $640.54 |
| Dahlia Schulist | edwin.sporer@yahoo.com | Shaniyamouth | Active | $45.35 |
| Total | $2,823.50 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gonzalo Beer | mae_stokes@hotmail.com | Commerce City | Inactive | $1,177.65 |
| Zander Larkin Sr. | joan.kuhn@gmail.com | Palo Alto | Inactive | $999.65 |
| Miss Ulises Reichert | mittie_senger@gmail.com | New Todside | Active | $761.85 |
| Mrs. Buster Casper | shaina.daugherty@hotmail.com | Tampa | Active | $691.51 |
| Mrs. Ezequiel Kuhlman | yvette_powlowski84@hotmail.com | East Raheemview | Active | $590.84 |
| Total | $4,221.50 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yasmin Morissette DVM | carroll28@gmail.com | Littelfield | Active | $519.09 |
| Aliya Wuckert | lawson.reilly@yahoo.com | South Troyside | Inactive | $729.82 |
| Loren Kassulke | alyssa4@hotmail.com | Thompson-Cormierborough | Active | $736.03 |
| Guiseppe Anderson | ruby67@gmail.com | South Rickychester | Inactive | $148.52 |
| Hadley Feil | wendell.gusikowski32@hotmail.com | Stephenview | Inactive | $1,199.81 |
| Total | $3,333.27 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Willard Luettgen | chase.cremin@hotmail.com | Fort Randall | Active | $152.77 | |
| Kathryn Collins DDS | glenn_funk45@gmail.com | Russellborough | Active | $862.94 | |
| Erin Jacobson | kathryn84@gmail.com | North Joyfurt | Active | $1,148.67 | |
| Jason Wehner | clementina6@yahoo.com | Cheyenne | Active | $1,080.59 | |
| Yoshiko Heller | ronald4@gmail.com | Beattybury | Inactive | $272.75 | |
| Total | $3,517.72 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Paul McGlynn | ellis_berge43@gmail.com | Jerrodworth | Inactive | $417.27 | |
| Robyn VonRueden III | ira51@hotmail.com | Port Kenneth | Active | $779.41 | |
| Natasha Stroman | mitchel79@hotmail.com | North Tommiebury | Active | $584.83 | |
| Pedro O'Hara | tanya_streich@yahoo.com | Walshfurt | Active | $678.99 | |
| Greg Gleason | breanne71@hotmail.com | Fort Gladys | Active | $96.81 | |
| Total | $2,557.31 | ||||
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 | |
|---|---|---|---|---|
| Geneva Hackett | lorene_bosco@yahoo.com | Schinnertown | Inactive | $882.52 |
| Merle Schiller | kyle_swaniawski62@yahoo.com | Abelardoton | Active | $861.68 |
| Reuben Flatley III | byron7@hotmail.com | Amanibury | Active | $1,198.66 |
| Myrtice Johnston V | abbey.padberg98@gmail.com | Lynchburg | Inactive | $393.00 |
| Dr. Phil Borer | vivian17@gmail.com | Lake Ariellechester | Active | $812.00 |
| Bobby Considine | albina_renner@yahoo.com | Rafaelaside | Inactive | $965.18 |
| Clarence Hahn-Lowe | joel_abernathy33@gmail.com | South Marcusstad | Active | $328.99 |
| Stacey Fritsch-Schiller | maya.kemmer5@gmail.com | Texas City | Active | $946.88 |
| Gerardo Williamson | bennett40@yahoo.com | Kirlinmouth | Inactive | $334.89 |
| Dena Goodwin | trey.oreilly36@gmail.com | Johnsonburgh | Inactive | $516.83 |
| Jenny Corwin | leticia_macejkovic@yahoo.com | Koeppton | Inactive | $711.55 |
| Ollie Mann | irvin74@gmail.com | Jamelview | Active | $913.74 |
| Isabell Batz | katie.vandervort7@yahoo.com | Daletown | Inactive | $1,001.60 |
| Ursula Jenkins | oceane.harvey@gmail.com | Wiegandburgh | Inactive | $706.04 |
| Clayton Pacocha IV | christy.doyle60@gmail.com | Wellington | Active | $148.61 |
| Total | $10,722.17 | |||
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 |