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 | $121.68 |
| INV002 | Pending | PayPal | $538.45 |
| INV003 | Pending | Bank Transfer | $209.86 |
| INV004 | Unpaid | PayPal | $569.93 |
| INV005 | Unpaid | Bank Transfer | $613.49 |
| INV006 | Unpaid | PayPal | $758.32 |
| INV007 | Unpaid | Bank Transfer | $506.38 |
| Total | $3,318.11 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rubie Oberbrunner-Bosco | Internal Intranet Associate | rubie.oberbrunner-bosco68@yahoo.com | Viewer | |
| Rosemarie Hagenes | National Infrastructure Coordinator | rosemarie_hagenes25@yahoo.com | Member | |
| Kurtis Homenick | Dynamic Metrics Assistant | kurtis_homenick@yahoo.com | Viewer | |
| Roosevelt Murray | National Creative Director | roosevelt_murray@yahoo.com | Admin | |
| Nancy Runolfsdottir | Forward Configuration Technician | nancy.runolfsdottir@yahoo.com | Member | |
| Janick Mitchell | Future Operations Consultant | janick.mitchell50@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 |
|---|---|---|
Stewart Beahan Investor Web Analyst stewart.beahan@gmail.com | Member | |
Talon Herman Regional Quality Strategist talon_herman39@gmail.com | Viewer | |
Lynn Upton Global Paradigm Consultant lynn.upton@gmail.com | Member | |
Chesley Lakin Product Usability Officer chesley_lakin@hotmail.com | Member | |
Elisa Connelly Dynamic Solutions Specialist elisa_connelly@yahoo.com | Viewer | |
Adolf Kessler International Factors Engineer adolf.kessler@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 |
|---|---|---|
Saul Kris Investor Mobility Associate saul_kris@hotmail.com | Admin | |
Domenico Dooley-Hodkiewicz Global Data Coordinator domenico.dooley-hodkiewicz@gmail.com | Admin | |
Kristie Hansen Regional Quality Producer kristie.hansen45@gmail.com | Viewer | |
Demarco Stokes-Beatty Senior Creative Assistant demarco.stokes-beatty@hotmail.com | Admin | |
Nikita Wolff Internal Communications Officer nikita.wolff56@gmail.com | Member | |
Opal Gottlieb Legacy Markets Officer opal.gottlieb@yahoo.com | Admin | |
Alma Bergnaum Corporate Tactics Developer alma.bergnaum90@gmail.com | Viewer | |
Ivory Doyle Central Infrastructure Representative ivory_doyle71@yahoo.com | Member | |
Kellie Abbott Central Markets Specialist kellie.abbott76@yahoo.com | Member | |
Camille Tremblay Chief Communications Supervisor camille.tremblay66@hotmail.com | Admin | |
Rodger Herzog Lead Division Specialist rodger.herzog@yahoo.com | Member | |
Charlie Ryan Future Interactions Associate charlie.ryan94@yahoo.com | Member | |
Chanel Green Regional Marketing Developer chanel_green56@hotmail.com | Admin | |
Raquel Ankunding Principal Solutions Consultant raquel.ankunding18@yahoo.com | Viewer | |
Angelita Jenkins Direct Mobility Liaison angelita.jenkins94@gmail.com | Admin | |
Wellington Kuhn Forward Accountability Supervisor wellington_kuhn@hotmail.com | Member | |
Terrence Auer Chief Markets Consultant terrence_auer@yahoo.com | Admin | |
Michele Abbott Senior Response Consultant michele_abbott@hotmail.com | Admin | |
Joel Bogan Internal Markets Director joel.bogan@gmail.com | Viewer | |
Bert Fritsch Direct Usability Developer bert.fritsch12@yahoo.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 | |
|---|---|---|---|---|
| Joseph Wolf | wanda71@hotmail.com | North Jo | Inactive | $779.48 |
| Dewey Daugherty | danny_ratke43@gmail.com | Estellberg | Inactive | $306.15 |
| Kari Hoppe | abraham76@gmail.com | Jacksonville | Active | $808.99 |
| Sidney Mertz | larry.langosh@gmail.com | Port Glenboro | Active | $73.80 |
| Brandyn Glover | jarrell.brekke@gmail.com | Darenboro | Inactive | $1,024.73 |
| Total | $2,993.15 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Howard Windler @victoria.abshire97 | jared.schaefer@gmail.com | Benjaminshire | Active | $533.56 |
Mrs. Maryam Monahan @lila_hackett30 | naomi_davis@gmail.com | North Isaiah | Inactive | $172.96 |
Nathan Heaney @sarai.schaefer-nitzsche81 | troy82@yahoo.com | Stephonfort | Active | $652.39 |
Dustin Simonis DDS @lisette.ebert | christine99@yahoo.com | South Masonside | Active | $1,182.44 |
Traci Turcotte @ezekiel9 | ross.leffler50@hotmail.com | Lake Sheilamouth | Inactive | $792.52 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Alejandro Larson | ryleigh_lowe13@hotmail.com | West Claudeside | Inactive | $410.36 |
| Brennan Nicolas | dax64@gmail.com | Severn | Inactive | $734.05 |
| Maxine Bergstrom Sr. | claudia21@hotmail.com | Maxieberg | Active | $948.57 |
| Edmond Weber | sophie_hamill9@gmail.com | Port Adrienne | Active | $763.62 |
| Jody Hessel | brittany85@yahoo.com | West Lafayette | Active | $450.87 |
| Total | $3,307.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Cristian Zemlak | orland.romaguera@gmail.com | Connellystead | Inactive | $140.88 |
| Dr. Shannon Hickle | daisy41@yahoo.com | Daronfurt | Active | $613.35 |
| Reuben Hayes Jr. | kim.thiel@gmail.com | New Marta | Active | $1,098.73 |
| Brice Howe | belinda40@gmail.com | West Ellenville | Inactive | $981.32 |
| Krista Muller | ana89@gmail.com | New Javonte | Inactive | $1,186.64 |
| Total | $4,020.92 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Xzavier Borer | maud_rolfson66@yahoo.com | Fort Dimitriberg | Inactive | $261.77 |
| Alena Medhurst | reuben68@gmail.com | San Leandro | Active | $646.22 |
| Sally Bayer | beverly.rath3@hotmail.com | Sybleburgh | Inactive | $382.87 |
| Tomas Koch II | tricia.wintheiser@gmail.com | Lake Wymanport | Inactive | $346.30 |
| Mr. Noah Hermiston | orville32@yahoo.com | Townestead | Inactive | $367.18 |
| Total | $2,004.34 | |||
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 | ||
|---|---|---|---|---|---|
| Lorenzo Sporer | palma97@hotmail.com | Santa Clarita | Active | $922.10 | |
| Claude Mayert | una.funk18@gmail.com | Largo | Active | $1,096.18 | |
| Savannah Wuckert V | ramon.zboncak@yahoo.com | East Geovanni | Active | $57.82 | |
| Wanda Oberbrunner | pam5@gmail.com | Aidanfurt | Active | $645.45 | |
| Marion Kshlerin DDS | brandon.frami@gmail.com | Port Skyla | Inactive | $795.06 | |
| Total | $3,516.61 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Keshawn Schiller | sylvester_cruickshank@yahoo.com | Port Danyka | Active | $187.03 | |
| Estell Marquardt MD | al99@gmail.com | South Angelineworth | Active | $852.97 | |
| Camden Howell | vaughn_rempel@gmail.com | Fort Julieville | Inactive | $725.39 | |
| Jaeden Dicki | darrel_mayert@yahoo.com | Decatur | Active | $552.59 | |
| Anastasia Pacocha | reanna2@gmail.com | New Kathryne | Active | $491.10 | |
| Total | $2,809.08 | ||||
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 | |
|---|---|---|---|---|
| Cloyd Keeling | mayra.goyette@yahoo.com | South Altheaside | Active | $597.15 |
| Faith Schumm | kolby35@yahoo.com | Framingham | Active | $846.55 |
| Latoya Lockman | john_kirlin26@yahoo.com | East Kaiaport | Inactive | $355.95 |
| Rogelio Crooks | catalina59@gmail.com | East Kathleenview | Inactive | $1,017.43 |
| Mitchell Orn-Kuphal | gene.goyette@hotmail.com | Morgan Hill | Inactive | $195.46 |
| Quinn Kassulke | freddie_schowalter@hotmail.com | Cassinboro | Inactive | $882.46 |
| Estevan Romaguera | rafael.corkery@yahoo.com | Myahhaven | Active | $8.28 |
| Crystal Krajcik | london_carroll84@hotmail.com | South Maya | Active | $941.48 |
| Shane Ortiz-Lowe | tyler50@yahoo.com | Chaimmouth | Inactive | $516.00 |
| Clemens Cronin I | ivy63@yahoo.com | East Nico | Active | $371.01 |
| Everett Weissnat | kathleen_dooley63@gmail.com | Schulistfurt | Inactive | $447.24 |
| Vita Yost | jonathan_murphy35@gmail.com | Marquisestead | Inactive | $108.93 |
| Lynda Cartwright | jon_watsica@yahoo.com | Luigitown | Active | $930.38 |
| Kyle Auer | leo4@hotmail.com | Ondrickamouth | Active | $1,197.49 |
| Johnathan Bernhard | nestor.hodkiewicz87@yahoo.com | Jonescester | Active | $746.00 |
| Total | $9,161.81 | |||
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 |