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 | $692.67 |
| INV002 | Paid | Credit Card | $279.05 |
| INV003 | Paid | Bank Transfer | $946.37 |
| INV004 | Paid | Credit Card | $151.82 |
| INV005 | Unpaid | Bank Transfer | $382.40 |
| INV006 | Pending | Credit Card | $630.67 |
| INV007 | Paid | PayPal | $551.40 |
| Total | $3,634.38 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lucile Zboncak | Regional Security Liaison | lucile.zboncak20@hotmail.com | Member | |
| Florence Hirthe | International Security Engineer | florence_hirthe21@hotmail.com | Admin | |
| Marcelo O'Kon-Mann | Lead Creative Manager | marcelo_okon-mann28@hotmail.com | Member | |
| Maggie Mitchell | Global Directives Coordinator | maggie_mitchell@yahoo.com | Viewer | |
| Cecil Gislason | Global Implementation Officer | cecil.gislason@gmail.com | Member | |
| Cindy Schneider | Customer Intranet Designer | cindy.schneider88@hotmail.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 |
|---|---|---|
Vella Nader Internal Creative Orchestrator vella_nader37@hotmail.com | Admin | |
Easter Yost Lead Implementation Engineer easter.yost12@gmail.com | Viewer | |
Jason Donnelly Central Group Director jason.donnelly3@yahoo.com | Admin | |
Horacio Langworth District Solutions Producer horacio_langworth@yahoo.com | Admin | |
Lillie Ryan-Blanda Internal Directives Architect lillie.ryan-blanda@hotmail.com | Member | |
Sheldon Hansen Direct Group Associate sheldon.hansen1@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Christina White Senior Quality Designer christina_white24@yahoo.com | Admin | |
Dane Gutkowski Regional Markets Supervisor dane_gutkowski87@gmail.com | Viewer | |
Bianka Lueilwitz Internal Marketing Officer bianka.lueilwitz90@yahoo.com | Member | |
Rocio Corwin National Marketing Supervisor rocio_corwin@gmail.com | Member | |
Raoul McKenzie Future Research Specialist raoul.mckenzie23@hotmail.com | Viewer | |
Jettie Brakus Global Intranet Executive jettie.brakus@gmail.com | Viewer | |
Ray Schmeler Global Mobility Technician ray_schmeler45@yahoo.com | Viewer | |
Terence Corwin Chief Quality Manager terence.corwin1@gmail.com | Viewer | |
Rocky Huels Corporate Data Administrator rocky_huels@yahoo.com | Admin | |
Katharina Kuphal Chief Web Officer katharina_kuphal33@gmail.com | Admin | |
Torrey Nienow Internal Response Director torrey.nienow6@yahoo.com | Admin | |
Cloyd Hettinger Future Integration Coordinator cloyd_hettinger@gmail.com | Admin | |
Mara Schneider Central Security Associate mara_schneider@hotmail.com | Viewer | |
Cecilia Haag Product Research Strategist cecilia_haag@gmail.com | Viewer | |
Eusebio Ankunding Lead Markets Architect eusebio_ankunding82@yahoo.com | Viewer | |
Suzanne Schumm Human Markets Specialist suzanne.schumm66@gmail.com | Viewer | |
Nakia Fay Central Usability Analyst nakia.fay@gmail.com | Member | |
Peyton Bahringer Internal Optimization Coordinator peyton.bahringer16@gmail.com | Admin | |
Josiane Franey Forward Functionality Consultant josiane.franey@gmail.com | Member | |
Emile Hilpert Chief Solutions Supervisor emile.hilpert@gmail.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 | |
|---|---|---|---|---|
| Dr. Ismael Kilback | justus.smith73@hotmail.com | Manhattan | Inactive | $666.74 |
| Sergio Glover | john_walsh28@gmail.com | Kendrickville | Active | $758.94 |
| Janet Connelly | felicity88@hotmail.com | West Bertram | Inactive | $814.45 |
| Misty Walsh | gerhard_cremin85@gmail.com | Zitafurt | Active | $791.46 |
| Ashley Weimann | raymundo_hintz-pacocha12@yahoo.com | Fremont | Inactive | $763.74 |
| Total | $3,795.33 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Robert Purdy @christophe_ernser | rickey_purdy@gmail.com | Littleton | Active | $471.96 |
Miss Jackie Quitzon @nyah.terry | joey_predovic79@gmail.com | West Loyal | Inactive | $359.65 |
Dr. Gregory Gusikowski @anabelle63 | ramiro57@yahoo.com | Waltonton | Active | $491.65 |
Fred Jakubowski @murphy24 | edmond_runolfsson81@gmail.com | Bolingbrook | Active | $1,179.32 |
Mr. Jaime Crist @ettie.koss | josephine.von@yahoo.com | New Zackstead | Active | $702.74 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marjorie King | alessandra68@yahoo.com | West Weldon | Inactive | $1,079.17 |
| Diana Larkin | reina6@hotmail.com | Kleinview | Inactive | $392.90 |
| Muriel Dooley I | florence_rippin-hartmann16@yahoo.com | North Gerrychester | Active | $868.11 |
| Shelly Baumbach | jay_damore@hotmail.com | Fort Sarah | Inactive | $633.28 |
| Woodrow Greenholt | roberta54@gmail.com | McCulloughberg | Inactive | $979.50 |
| Total | $3,952.96 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bryant Weber | susan.steuber-hauck61@hotmail.com | Anderson | Active | $863.68 |
| Sophia Mohr | dexter.cummerata@gmail.com | New Muhammad | Inactive | $532.06 |
| Mable Mueller | mozell91@gmail.com | West Eribertotown | Inactive | $862.56 |
| Rick Kozey | dangelo.dickens@yahoo.com | Santa Monica | Active | $1,097.21 |
| Terry Morissette | ayden_kuvalis57@gmail.com | West Daishaland | Active | $745.09 |
| Total | $4,100.60 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Karl Runte | marco.leffler15@yahoo.com | Rathboro | Inactive | $1,121.63 |
| Salvador Keebler | murray_schoen49@hotmail.com | Burdetteberg | Active | $961.87 |
| Fernando Kub | juwan66@hotmail.com | Fort Rachel | Inactive | $1,045.39 |
| Randy Spencer | emory_orn@yahoo.com | Sunnyvale | Active | $1,014.07 |
| Tasha Considine | selena.ruecker87@gmail.com | Jonesshire | Active | $519.54 |
| Total | $4,662.50 | |||
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 | ||
|---|---|---|---|---|---|
| Elsie Stehr | rhoda59@yahoo.com | South Dahlia | Active | $389.98 | |
| Dr. Jared Denesik | precious64@yahoo.com | West Dallinview | Active | $128.41 | |
| Phil Keeling V | bernardo70@hotmail.com | Chanelboro | Active | $288.11 | |
| Marcella Hayes | dena.heller38@hotmail.com | Fort Gladycehaven | Inactive | $557.45 | |
| Julian Hilpert | dion61@hotmail.com | Feltonborough | Inactive | $392.87 | |
| Total | $1,756.82 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dominic Goldner | chelsie.murphy-adams69@gmail.com | Schmittport | Active | $872.92 | |
| Mattie Ziemann | abbie17@yahoo.com | Lake Norwood | Active | $925.01 | |
| Erin Collins | michaela_mueller@gmail.com | Fort Priceboro | Inactive | $631.33 | |
| Marion Boehm | marcos_walker71@hotmail.com | East Dianna | Active | $505.58 | |
| Emma Abernathy | herminio_lebsack@gmail.com | Fort Roxaneville | Inactive | $537.97 | |
| Total | $3,472.81 | ||||
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 | |
|---|---|---|---|---|
| Joshua Koss | celine_nitzsche70@yahoo.com | Kaylinmouth | Inactive | $893.23 |
| Cameron Hickle | daren_bednar-kerluke18@gmail.com | Bergestad | Inactive | $92.60 |
| Elsie Volkman V | griffin.lehner@yahoo.com | Lake Mathew | Inactive | $162.12 |
| Gerald Senger PhD | delfina94@hotmail.com | East Kameron | Active | $79.79 |
| Mr. Simon Gorczany | ed2@yahoo.com | DeSoto | Active | $43.01 |
| Patty Aufderhar | luciano_powlowski-blick@hotmail.com | Leschberg | Active | $1,058.75 |
| Blanca Cormier | kailee_powlowski@hotmail.com | Wauwatosa | Active | $979.10 |
| David Shields | randi_mueller@gmail.com | Suffolk | Active | $770.68 |
| Delia Trantow | cortney_mitchell64@gmail.com | West Emelia | Active | $233.86 |
| Katrina Huels | lenny82@yahoo.com | West Edmundbury | Active | $551.39 |
| Jake Robel | ernestine15@hotmail.com | Stephonboro | Inactive | $609.86 |
| Beverly Stoltenberg | agnes_crooks54@yahoo.com | Los Angeles | Inactive | $392.87 |
| Sylvia Dare-Rowe | rhianna_rempel14@hotmail.com | East Name | Inactive | $1,177.02 |
| Horace Klein-Hoppe | albertha48@yahoo.com | Humbertoland | Active | $1,121.39 |
| Mrs. Shelia Kertzmann | adonis.king@gmail.com | Greensboro | Inactive | $416.61 |
| Total | $8,582.28 | |||
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 |