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 | Bank Transfer | $783.50 |
| INV002 | Paid | Bank Transfer | $789.01 |
| INV003 | Paid | Bank Transfer | $547.95 |
| INV004 | Pending | Credit Card | $200.50 |
| INV005 | Unpaid | Bank Transfer | $534.33 |
| INV006 | Unpaid | Bank Transfer | $951.02 |
| INV007 | Pending | PayPal | $824.96 |
| Total | $4,631.27 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Brennon Skiles-Wolff | Human Mobility Assistant | brennon_skiles-wolff@gmail.com | Viewer | |
| Lori Ward | Dynamic Infrastructure Agent | lori.ward@yahoo.com | Viewer | |
| Francesco Hickle | Legacy Assurance Director | francesco.hickle@gmail.com | Member | |
| Norris Waters | Investor Brand Planner | norris_waters97@hotmail.com | Viewer | |
| Wayne Swaniawski | Global Operations Orchestrator | wayne.swaniawski71@hotmail.com | Admin | |
| Todd Zulauf | Human Communications Agent | todd_zulauf11@hotmail.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 |
|---|---|---|
Ramon Predovic Corporate Research Representative ramon.predovic29@hotmail.com | Admin | |
Lucas Rau Investor Functionality Designer lucas.rau25@gmail.com | Member | |
Douglas DuBuque Product Interactions Facilitator douglas_dubuque@gmail.com | Viewer | |
Santiago Feest Forward Factors Manager santiago.feest@gmail.com | Viewer | |
Helen Upton Principal Response Associate helen.upton@hotmail.com | Member | |
Chyna Jast Dynamic Mobility Associate chyna_jast@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 |
|---|---|---|
Viola Stoltenberg Lead Integration Consultant viola_stoltenberg@yahoo.com | Member | |
Peggy Hilpert District Intranet Analyst peggy.hilpert37@gmail.com | Viewer | |
Kristin Cummerata International Assurance Engineer kristin.cummerata@gmail.com | Viewer | |
Tillman Larson Human Intranet Executive tillman.larson@gmail.com | Member | |
Aida Keebler Global Applications Supervisor aida.keebler72@gmail.com | Viewer | |
Nella Cronin Senior Creative Designer nella_cronin@gmail.com | Admin | |
Roosevelt Barrows Global Usability Planner roosevelt_barrows2@gmail.com | Viewer | |
Estrella Becker District Branding Director estrella.becker33@yahoo.com | Admin | |
Ila Muller International Operations Director ila_muller@hotmail.com | Admin | |
Jesse D'Amore Global Security Producer jesse.damore66@yahoo.com | Admin | |
Angel Hand Lead Directives Analyst angel.hand93@yahoo.com | Member | |
Mathias Rogahn Direct Division Strategist mathias.rogahn@hotmail.com | Member | |
Pierre Leffler-Heathcote District Mobility Developer pierre.leffler-heathcote@gmail.com | Member | |
Irma Mueller Chief Solutions Specialist irma.mueller@hotmail.com | Admin | |
Anita Rau Chief Markets Assistant anita_rau@hotmail.com | Admin | |
Jarrod Hintz Senior Program Assistant jarrod_hintz@yahoo.com | Admin | |
Amber Marks Senior Factors Facilitator amber.marks@yahoo.com | Viewer | |
Carl Kuhic Forward Identity Designer carl_kuhic3@gmail.com | Admin | |
Joe Lehner Corporate Implementation Administrator joe_lehner60@gmail.com | Admin | |
Piper Ledner Customer Usability Agent piper.ledner16@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 | |
|---|---|---|---|---|
| Megan Jacobson | hoyt23@yahoo.com | Levittown | Inactive | $40.75 |
| Ms. Trevor Hessel V | terry.schmitt@yahoo.com | Philadelphia | Inactive | $960.28 |
| Marcella Weimann | hubert.johnson@yahoo.com | Lake Jasminton | Inactive | $882.55 |
| Weston Pacocha | genesis_steuber59@yahoo.com | North Freidaview | Inactive | $1,081.34 |
| Irving Rowe | andrew.wolff78@hotmail.com | Casperfield | Active | $798.72 |
| Total | $3,763.64 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lucia Bogisich @aaron_lubowitz | lacy12@gmail.com | Deckowstad | Active | $808.05 |
Hubert Ebert @werner_okeefe28 | salvador.hansen@hotmail.com | Rickyboro | Active | $1,029.06 |
Aleen Breitenberg IV @arno_emmerich94 | kathy_mccullough0@hotmail.com | Madison | Active | $550.94 |
Kiana Medhurst @debra_wuckert3 | katlynn58@yahoo.com | Lake Charles | Active | $1,106.50 |
Gloria Lueilwitz @conrad55 | tillman.green@hotmail.com | Bernitashire | Inactive | $736.45 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Andrea Johnson | luisa_quitzon52@gmail.com | Urbandale | Active | $389.62 |
| Neha Wilkinson | homer_schneider@gmail.com | West Hadley | Inactive | $1,051.56 |
| Cedric Upton | myron96@yahoo.com | Fort Dillanchester | Active | $949.43 |
| Laurel Dach | aubrey.moen51@gmail.com | Jacobsonfield | Active | $996.55 |
| Randal Abshire | trevor_hoeger93@hotmail.com | Allancester | Inactive | $610.42 |
| Total | $3,997.58 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keshawn Murray | estrella_lubowitz@hotmail.com | Mesa | Active | $34.28 |
| Laverne Leffler | dina_ritchie@yahoo.com | Port Williamport | Active | $783.33 |
| Otho Grady | leticia.christiansen14@gmail.com | Port Daphney | Active | $442.57 |
| Jeremiah Von | manuel.haag76@yahoo.com | Lake Wilfredofurt | Inactive | $1,191.29 |
| Christie Gutkowski | nyasia_dickinson48@hotmail.com | Lake Aracely | Active | $957.62 |
| Total | $3,409.09 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tracy Harber | orville_mclaughlin@gmail.com | Jurupa Valley | Inactive | $892.20 |
| Nicola Hills | patrick_shields92@gmail.com | Powlowskicester | Active | $611.97 |
| Dr. Laurie Cummings | mitchell.frami-oconnell81@yahoo.com | Lake Lilian | Inactive | $1,097.86 |
| Mr. Roosevelt Bahringer | everardo.mcdermott84@gmail.com | New Orleans | Active | $540.49 |
| Renee Murray | mattie_pouros82@yahoo.com | Hackettworth | Inactive | $1,105.71 |
| Total | $4,248.23 | |||
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 | ||
|---|---|---|---|---|---|
| Beth Konopelski | myra.abernathy@gmail.com | Lake Russelmouth | Inactive | $925.26 | |
| Jim Emmerich | alize_torphy@yahoo.com | Lolamouth | Active | $366.56 | |
| Elisa Sporer | aliya_moen@hotmail.com | Katelinbury | Inactive | $123.57 | |
| Annette White-Boyle | rhonda7@hotmail.com | Erie | Inactive | $189.51 | |
| Bridie Ward | jennifer_kuvalis@hotmail.com | Edgarstead | Active | $364.03 | |
| Total | $1,968.93 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Edgar Daugherty | ginger56@hotmail.com | Babyburgh | Inactive | $104.80 | |
| Grant Daniel | andreanne_johnson@hotmail.com | North Onie | Inactive | $1,070.06 | |
| Sylvan Schowalter Jr. | beverly29@hotmail.com | Fort Hallecester | Active | $412.50 | |
| Bernadine Spinka | tanya6@yahoo.com | North Jerrellfort | Active | $1,140.90 | |
| Dr. Traci Heaney-Kub III | lorenzo99@hotmail.com | Wylie | Inactive | $239.26 | |
| Total | $2,967.52 | ||||
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 | |
|---|---|---|---|---|
| Emilio Stehr | eugenia15@gmail.com | North Highlands | Active | $1,009.98 |
| Jonathon Rutherford | lorenzo_wolff30@hotmail.com | Nicklausland | Inactive | $312.15 |
| Oma Hamill | sofia41@hotmail.com | Mitchellbury | Inactive | $977.95 |
| Toney Parisian | marvin.miller@hotmail.com | Novato | Active | $1,163.67 |
| Mrs. Emelia Wilderman | jordy.koelpin99@hotmail.com | Boston | Active | $670.42 |
| Ms. Cristina Treutel | jeannie.hahn@gmail.com | Naperville | Inactive | $861.98 |
| Kara Armstrong V | arnaldo_thiel@yahoo.com | Summerville | Active | $752.63 |
| Francisco Kihn | erick90@yahoo.com | New Maudieburgh | Inactive | $817.18 |
| Sebastian Carter | petra.corkery40@hotmail.com | Port Benjamin | Active | $713.07 |
| Terri Buckridge | henrietta.kohler65@yahoo.com | New Eugeniaborough | Inactive | $364.09 |
| Minnie Cartwright | hilda_brekke-kovacek@gmail.com | Pearland | Inactive | $556.31 |
| Precious Tromp | juanita.quigley@hotmail.com | San Rafael | Active | $694.16 |
| Elinor Hand | blanche_schultz@yahoo.com | New Josiah | Inactive | $308.17 |
| Oma Lindgren | hilda_mohr97@gmail.com | Lake Effieside | Inactive | $9.20 |
| Amy Pfeffer | willow_marks@yahoo.com | Oshkosh | Active | $119.74 |
| Total | $9,330.70 | |||
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 |