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 | Unpaid | Bank Transfer | $248.70 |
| INV002 | Pending | Credit Card | $650.01 |
| INV003 | Pending | Bank Transfer | $712.33 |
| INV004 | Unpaid | Bank Transfer | $254.01 |
| INV005 | Pending | Credit Card | $989.41 |
| INV006 | Unpaid | Credit Card | $891.21 |
| INV007 | Paid | Bank Transfer | $760.62 |
| Total | $4,506.29 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ova Weimann | Investor Operations Liaison | ova_weimann74@hotmail.com | Admin | |
| Rose Maggio-Becker | Chief Implementation Planner | rose.maggio-becker@gmail.com | Viewer | |
| Ward Schoen | Product Mobility Designer | ward.schoen55@gmail.com | Member | |
| Tod Rau | Senior Factors Representative | tod.rau69@hotmail.com | Viewer | |
| Jasmin Nolan-Wisozk | Regional Data Assistant | jasmin_nolan-wisozk78@gmail.com | Viewer | |
| Naomi Sporer | Legacy Infrastructure Designer | naomi_sporer@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 |
|---|---|---|
Pat Lueilwitz Future Assurance Developer pat_lueilwitz17@yahoo.com | Member | |
Andrea Bernier Regional Implementation Specialist andrea_bernier92@yahoo.com | Viewer | |
Cathryn Hegmann Chief Directives Developer cathryn_hegmann85@gmail.com | Viewer | |
Edmond Cruickshank Future Creative Supervisor edmond.cruickshank@yahoo.com | Admin | |
Louis Tremblay Direct Factors Technician louis_tremblay29@gmail.com | Viewer | |
Willard Bogan Principal Metrics Director willard.bogan34@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 |
|---|---|---|
Emilio Block Product Program Planner emilio_block59@yahoo.com | Member | |
Roxanne Effertz International Integration Orchestrator roxanne.effertz@hotmail.com | Member | |
Laurence Casper District Program Strategist laurence_casper94@gmail.com | Admin | |
Bridget Runolfsdottir Chief Accounts Liaison bridget_runolfsdottir37@hotmail.com | Viewer | |
Dale Tremblay Central Web Executive dale.tremblay@hotmail.com | Member | |
Ewell O'Connell Future Factors Architect ewell.oconnell@hotmail.com | Viewer | |
Bobby Hettinger Internal Branding Consultant bobby_hettinger@gmail.com | Viewer | |
Dwight VonRueden Internal Functionality Liaison dwight.vonrueden98@yahoo.com | Viewer | |
Margarita Erdman Direct Implementation Liaison margarita.erdman@hotmail.com | Viewer | |
Noemy Bahringer Chief Directives Associate noemy.bahringer76@yahoo.com | Member | |
Michelle Batz Dynamic Solutions Executive michelle_batz33@yahoo.com | Admin | |
Julian King Internal Communications Executive julian.king@hotmail.com | Admin | |
Clifton Wunsch Global Operations Executive clifton_wunsch@hotmail.com | Admin | |
Eduardo Muller Central Group Manager eduardo.muller46@hotmail.com | Viewer | |
Horace Hills District Assurance Liaison horace_hills58@gmail.com | Admin | |
Timmothy Parker Internal Functionality Consultant timmothy_parker@hotmail.com | Viewer | |
Adalberto Maggio Corporate Functionality Director adalberto_maggio@hotmail.com | Viewer | |
Chesley Schaden Central Assurance Architect chesley_schaden38@hotmail.com | Member | |
Annette Rau Dynamic Mobility Producer annette.rau85@gmail.com | Viewer | |
Jared Harris Direct Intranet Coordinator jared.harris73@yahoo.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 | |
|---|---|---|---|---|
| Roderick Runolfsdottir | estefania.farrell@hotmail.com | Dannymouth | Active | $291.43 |
| Neha Bartell | allan_cronin@yahoo.com | East Jermainton | Active | $501.89 |
| Angela Haag | colt.kerluke@gmail.com | Lake Robertaview | Active | $733.60 |
| Norma Dibbert IV | mercedes_mraz88@hotmail.com | Hartmannchester | Inactive | $483.61 |
| Jennie Wunsch | leta.wisozk@gmail.com | Sacramento | Inactive | $851.62 |
| Total | $2,862.15 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lucius Kihn I @edwina.hills-dietrich13 | kira.simonis89@hotmail.com | North Camryn | Inactive | $102.30 |
Ms. Fanny Bernhard-Greenholt @june.hodkiewicz88 | stanley2@yahoo.com | West Aimeecester | Inactive | $974.86 |
Joy McKenzie DVM @adela.gerlach | kara11@hotmail.com | Raynorfield | Active | $324.80 |
Dixie Koss @dorthy.brown79 | jeff67@hotmail.com | Jersey City | Active | $246.29 |
Elias Friesen @eleanor.harris | angelo3@gmail.com | Normal | Inactive | $748.49 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dewayne Pacocha MD | ila.lemke35@yahoo.com | Spinkafurt | Inactive | $1,116.25 |
| Deven Lesch | sammy48@gmail.com | East Carlo | Active | $552.99 |
| Dominic Howe | nick.mitchell@hotmail.com | Johnsport | Inactive | $851.31 |
| Dr. Roland Maggio | latoya.kuvalis76@gmail.com | South Milesmouth | Active | $1,198.55 |
| Cecilia Yundt-Kautzer II | derrick49@yahoo.com | Labadiehaven | Inactive | $490.99 |
| Total | $4,210.09 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marge McKenzie | janick.sipes@hotmail.com | Bel Air South | Active | $1,104.51 |
| Mrs. Bob Vandervort | mitchell_hand7@yahoo.com | West Leo | Inactive | $249.82 |
| Dominique Conroy | dan_berge@hotmail.com | Lake Sadyefurt | Inactive | $424.31 |
| Joshua Terry | frederick60@gmail.com | Brandonshire | Inactive | $803.06 |
| Lynne Bednar | jeffrey_batz@hotmail.com | Port Patrick | Inactive | $332.71 |
| Total | $2,914.41 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keven Will | paula.moen@gmail.com | Tucson | Active | $811.85 |
| Miss Kristofer Feeney | haley.bosco@gmail.com | Ankundingtown | Active | $1,048.52 |
| Efrain Senger | pinkie.beier@gmail.com | Plantation | Active | $960.53 |
| Mrs. Aaron Ebert | julie_blick3@yahoo.com | Vivianstead | Inactive | $1,021.24 |
| Destany Marvin | caleb_dare87@yahoo.com | Connburgh | Active | $614.44 |
| Total | $4,456.58 | |||
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 | ||
|---|---|---|---|---|---|
| Santa Farrell | jovanny.murphy79@yahoo.com | Nayelichester | Inactive | $141.34 | |
| Lynda Davis | elaine_gleichner35@gmail.com | Spencerstead | Inactive | $445.85 | |
| Terry Ryan | willis_dietrich-mcclure7@yahoo.com | Klingtown | Inactive | $136.67 | |
| Naomi Carroll DDS | dock.okon46@yahoo.com | Robbieburgh | Inactive | $1,185.16 | |
| Dr. Rory McDermott IV | samantha10@gmail.com | Marjorieboro | Inactive | $933.77 | |
| Total | $2,842.79 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bennett Nitzsche | antonia30@yahoo.com | Port Norwoodstead | Inactive | $610.27 | |
| Miss Andres Labadie | maximillia73@hotmail.com | New Curtfurt | Inactive | $967.38 | |
| Sydney Brakus | jerald60@yahoo.com | South Ezekielland | Active | $143.81 | |
| Dr. Asia Marvin | calvin_schimmel2@hotmail.com | Kovacekchester | Inactive | $1,139.92 | |
| Alvin VonRueden MD | hudson_quigley17@yahoo.com | Lake Thad | Inactive | $1,147.25 | |
| Total | $4,008.63 | ||||
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 | |
|---|---|---|---|---|
| Kathlyn Hickle V | bret_zulauf22@gmail.com | New Roslyn | Inactive | $222.64 |
| Jeanette Emard | pete_sauer@yahoo.com | Bergeshire | Inactive | $1,061.14 |
| Miss Marion Nolan PhD | yasmeen_jast@hotmail.com | Lindmouth | Inactive | $917.83 |
| Silvia Fay | lloyd.conroy9@gmail.com | Lake Ridge | Active | $430.22 |
| Tina Oberbrunner | gunnar51@yahoo.com | West Jennyfer | Active | $870.04 |
| Dianne Von | rebeka16@gmail.com | North Ruby | Active | $278.46 |
| Terrence Osinski | duane_ferry98@hotmail.com | Glen Burnie | Inactive | $516.80 |
| Ms. Eleanor Kshlerin | nichole.hills25@yahoo.com | Starkchester | Inactive | $369.25 |
| Foster Goldner Sr. | claire.miller12@gmail.com | North Abbigail | Inactive | $711.51 |
| Mrs. Vern Rath | dwayne.ortiz-crist@hotmail.com | Eugene | Inactive | $1,083.15 |
| Shelia Krajcik | anika1@yahoo.com | Dessieworth | Inactive | $217.99 |
| Colin Harvey | jay89@yahoo.com | New Corycester | Active | $1,009.79 |
| Elisa Mraz | ludie_olson15@hotmail.com | The Woodlands | Inactive | $478.54 |
| Ada Heaney | everardo_stiedemann@yahoo.com | Juliantown | Inactive | $955.81 |
| Leann Conroy | allison17@gmail.com | Lewstad | Inactive | $942.32 |
| Total | $10,065.49 | |||
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 |