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 | PayPal | $666.98 |
| INV002 | Pending | PayPal | $656.62 |
| INV003 | Unpaid | Bank Transfer | $690.17 |
| INV004 | Unpaid | Credit Card | $651.61 |
| INV005 | Unpaid | PayPal | $628.17 |
| INV006 | Pending | Bank Transfer | $225.71 |
| INV007 | Paid | Bank Transfer | $544.60 |
| Total | $4,063.86 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Constance Konopelski | Dynamic Research Facilitator | constance.konopelski@yahoo.com | Member | |
| Kiarra Shields | Customer Metrics Executive | kiarra_shields52@gmail.com | Member | |
| Christophe Cronin | Senior Directives Orchestrator | christophe_cronin90@yahoo.com | Viewer | |
| Manuel Gulgowski | Human Applications Producer | manuel_gulgowski@gmail.com | Member | |
| Aron Kautzer | Human Marketing Architect | aron_kautzer64@yahoo.com | Viewer | |
| Destini Waelchi-Labadie | Direct Metrics Developer | destini_waelchi-labadie@yahoo.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 |
|---|---|---|
Eula Mayert Direct Communications Producer eula_mayert11@gmail.com | Admin | |
Dawn Fadel District Creative Orchestrator dawn.fadel@hotmail.com | Viewer | |
Deanna Deckow International Applications Supervisor deanna.deckow44@yahoo.com | Member | |
Kitty Hane Internal Program Producer kitty_hane@hotmail.com | Admin | |
Freeman Walker National Group Specialist freeman.walker35@yahoo.com | Admin | |
Shane Wintheiser-Lemke Future Branding Supervisor shane.wintheiser-lemke5@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Steve Rohan Global Accountability Agent steve_rohan5@yahoo.com | Viewer | |
Alberta Johnston International Functionality Manager alberta_johnston61@yahoo.com | Admin | |
Hector Carroll International Directives Liaison hector_carroll@gmail.com | Member | |
Walter Carter Future Implementation Liaison walter.carter@yahoo.com | Admin | |
Fausto Schaden International Infrastructure Orchestrator fausto_schaden@gmail.com | Member | |
Carole Rutherford Product Accountability Facilitator carole.rutherford15@hotmail.com | Member | |
Lavon Paucek Chief Brand Designer lavon.paucek11@hotmail.com | Viewer | |
Clyde Abernathy Customer Creative Planner clyde.abernathy@yahoo.com | Viewer | |
Fannie Kuhlman International Configuration Engineer fannie_kuhlman9@hotmail.com | Admin | |
Josiane Zieme Corporate Integration Supervisor josiane_zieme@yahoo.com | Viewer | |
Paul Rolfson Legacy Program Supervisor paul_rolfson99@yahoo.com | Viewer | |
Timmothy Schumm Dynamic Communications Supervisor timmothy.schumm47@yahoo.com | Member | |
Elvie Herzog Human Accounts Executive elvie_herzog@hotmail.com | Viewer | |
Cristian Robel Investor Accountability Specialist cristian_robel@gmail.com | Member | |
Jeanne Reichert International Creative Developer jeanne.reichert49@yahoo.com | Member | |
Erika Gutkowski Central Creative Associate erika.gutkowski3@yahoo.com | Member | |
Jeffry Thompson District Brand Orchestrator jeffry_thompson48@gmail.com | Member | |
Salvador Aufderhar International Brand Supervisor salvador_aufderhar@yahoo.com | Admin | |
Oscar Barrows Corporate Interactions Specialist oscar.barrows26@yahoo.com | Member | |
Ken Zemlak Principal Communications Associate ken.zemlak31@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Doris Ondricka | monty_medhurst74@gmail.com | New Annie | Active | $822.46 |
| Laurie Moore | lynda_greenholt23@hotmail.com | North Angelo | Active | $58.89 |
| Jairo Spinka I | layne.donnelly@yahoo.com | Redondo Beach | Inactive | $218.74 |
| Leona Hane | damian.mccullough@hotmail.com | Fort Haylie | Inactive | $545.59 |
| Nico Bode | jason.glover0@gmail.com | Port Edmondborough | Active | $783.25 |
| Total | $2,428.93 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Curtis Pfeffer @ricky.schultz | marianne.king@hotmail.com | Lefflerberg | Active | $1,025.10 |
Mrs. Amanda Towne @pedro.orn | jose.wilkinson@gmail.com | Calvinhaven | Inactive | $194.58 |
Javier Wintheiser @marion37 | demetrius_glover@gmail.com | Nettieville | Active | $671.95 |
Mr. Drew O'Reilly @alexandra83 | maximilian.kuphal@yahoo.com | Jasenborough | Active | $1,019.02 |
Mamie Greenholt @eve.halvorson67 | rubie.weber@hotmail.com | Parker | Inactive | $539.15 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kristopher Schmidt | kane.schmeler34@gmail.com | West Stuart | Active | $231.35 |
| Mona Blick | amani_runolfsdottir@yahoo.com | New Thomasbury | Inactive | $989.29 |
| Brandy Shanahan | darrin_kessler@yahoo.com | Henrietteburgh | Inactive | $997.98 |
| Ashlynn Kuhn | alvis.leannon@hotmail.com | Port Carroll | Inactive | $911.97 |
| Dayne Keeling DVM | ollie_satterfield99@hotmail.com | South Tammy | Inactive | $969.44 |
| Total | $4,100.03 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Emmie Schuppe | marielle.franecki80@gmail.com | Torphyland | Inactive | $88.33 |
| Woodrow Reynolds | eleanor_kling@hotmail.com | Gutmanntown | Inactive | $287.83 |
| Charlene Adams | marianna_glover13@gmail.com | Minneapolis | Inactive | $690.36 |
| Dovie McDermott | theodora52@hotmail.com | Lake Roderick | Active | $339.73 |
| Sophia Grant | isabel41@yahoo.com | West Beckyberg | Inactive | $777.96 |
| Total | $2,184.21 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gustavo Lubowitz | rosalinda.lemke38@hotmail.com | East Dawn | Inactive | $1,110.07 |
| Amanda Runte | jill89@gmail.com | New Tommyfield | Inactive | $1,123.32 |
| Janis Gottlieb V | ronald_weissnat59@gmail.com | East Anastacio | Inactive | $1,031.50 |
| Vidal Labadie | nadine_ruecker2@yahoo.com | Lake Guy | Active | $419.32 |
| Dr. Dennis Moen | jill23@hotmail.com | Alizastead | Inactive | $403.71 |
| Total | $4,087.92 | |||
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 | ||
|---|---|---|---|---|---|
| Amanda Roberts | felton.zulauf17@hotmail.com | Coltenhaven | Inactive | $1,059.90 | |
| Beaulah Steuber | gloria_kreiger54@hotmail.com | Theresaburgh | Active | $1,057.48 | |
| Angela Daugherty | essie.schroeder@hotmail.com | Carson | Inactive | $1,048.80 | |
| Claud Emard-Welch | juan.davis65@gmail.com | Jenkinsworth | Active | $835.11 | |
| Anita Stokes | woodrow_jakubowski4@gmail.com | Elkhart | Inactive | $322.19 | |
| Total | $4,323.48 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dominick Daugherty | maurice.tromp-prosacco@yahoo.com | Jeremiahfort | Inactive | $932.41 | |
| Mr. Emilio Terry | sandrine50@gmail.com | Fort Tyrell | Inactive | $555.64 | |
| Rogers Hyatt | francisco6@hotmail.com | Fort Andrewside | Inactive | $467.96 | |
| William Bins | maureen_hilll@hotmail.com | Gleichnermouth | Inactive | $29.15 | |
| Alexane Berge | christian_jones8@yahoo.com | Lake Ianside | Active | $75.54 | |
| Total | $2,060.70 | ||||
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 | |
|---|---|---|---|---|
| Jeanne Strosin | brayan83@gmail.com | State College | Active | $612.11 |
| Veronica Wuckert | lindsay_crooks@yahoo.com | Gutkowskiside | Inactive | $148.33 |
| Lula Hickle-Thiel | jack1@hotmail.com | Bertfort | Inactive | $468.05 |
| Berniece Heller PhD | aimee.jaskolski6@yahoo.com | North Trentonchester | Inactive | $990.38 |
| Nikki Kunze-Huels | sherwood_ziemann@yahoo.com | West Samir | Active | $640.22 |
| Lizzie Hand | urban_lind@hotmail.com | Gusikowskiburgh | Active | $989.61 |
| Sean Hackett | maurice.bergstrom@hotmail.com | Lake Melyna | Active | $78.86 |
| Mariam Fadel | america.ohara31@yahoo.com | Melyssaside | Active | $395.32 |
| Alene Moore | mireille30@yahoo.com | South Norma | Inactive | $631.43 |
| Nathen Lemke | creola48@gmail.com | Bodebury | Inactive | $819.57 |
| Dusty Strosin | billie85@yahoo.com | Douglasberg | Active | $622.66 |
| Dr. Abraham Romaguera-Tromp | timmy.schmitt@yahoo.com | Independence | Active | $881.07 |
| Jeremy Kilback III | kailee.hudson96@hotmail.com | Port Kristina | Active | $194.20 |
| Milford Graham | annette_oconner40@gmail.com | North Kerry | Inactive | $411.59 |
| Quinton Cummerata | fredrick_lang44@yahoo.com | Port Jamaaltown | Inactive | $501.39 |
| Total | $8,384.79 | |||
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 |