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 | Credit Card | $563.35 |
| INV002 | Paid | Bank Transfer | $319.38 |
| INV003 | Unpaid | Bank Transfer | $275.86 |
| INV004 | Pending | PayPal | $605.70 |
| INV005 | Unpaid | Bank Transfer | $187.88 |
| INV006 | Paid | Credit Card | $308.29 |
| INV007 | Pending | Credit Card | $983.47 |
| Total | $3,243.93 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Myles Padberg | Principal Accounts Specialist | myles.padberg42@yahoo.com | Viewer | |
| Ike Jacobs | Customer Assurance Assistant | ike_jacobs@hotmail.com | Admin | |
| Hulda Ullrich | Senior Division Architect | hulda.ullrich62@yahoo.com | Admin | |
| Wilfrid Bednar | Future Integration Liaison | wilfrid.bednar@hotmail.com | Member | |
| Vicky Crooks | International Functionality Producer | vicky_crooks@yahoo.com | Viewer | |
| Johnpaul Boehm | Central Assurance Planner | johnpaul_boehm@gmail.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 |
|---|---|---|
Tillman Bailey-Lakin Senior Infrastructure Technician tillman_bailey-lakin44@yahoo.com | Viewer | |
Alessandro Bosco Dynamic Identity Specialist alessandro_bosco66@yahoo.com | Member | |
Doris Wolff Legacy Usability Director doris_wolff@hotmail.com | Admin | |
Ophelia Douglas Global Program Architect ophelia.douglas88@yahoo.com | Viewer | |
Jerome Carroll-Paucek Principal Security Developer jerome_carroll-paucek6@gmail.com | Viewer | |
Jadyn Breitenberg Chief Markets Orchestrator jadyn_breitenberg@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ambrose Miller-Pollich Direct Identity Orchestrator ambrose.miller-pollich8@hotmail.com | Viewer | |
Milo Kutch Direct Usability Manager milo.kutch90@yahoo.com | Member | |
Geoffrey Ernser Chief Implementation Planner geoffrey.ernser@yahoo.com | Viewer | |
Zachery Trantow Customer Factors Facilitator zachery_trantow@gmail.com | Admin | |
Alfredo Lehner Principal Configuration Planner alfredo.lehner@gmail.com | Viewer | |
Destany Gleason Central Division Consultant destany.gleason36@hotmail.com | Viewer | |
Maegan Baumbach Investor Group Coordinator maegan.baumbach24@hotmail.com | Member | |
Althea Mante Future Accounts Facilitator althea_mante@hotmail.com | Member | |
Mara Heathcote Forward Configuration Technician mara.heathcote@gmail.com | Admin | |
Alexie Armstrong Internal Tactics Supervisor alexie_armstrong29@gmail.com | Member | |
Elian Bahringer Forward Operations Assistant elian_bahringer43@hotmail.com | Member | |
Alexandrea Moore Internal Research Liaison alexandrea.moore46@hotmail.com | Member | |
Aubrey Armstrong Global Research Architect aubrey.armstrong@hotmail.com | Admin | |
Braulio Kiehn-Berge Direct Marketing Specialist braulio_kiehn-berge85@yahoo.com | Viewer | |
Jamir Casper Investor Brand Designer jamir_casper80@gmail.com | Viewer | |
Gino Senger Corporate Operations Officer gino.senger@yahoo.com | Viewer | |
Coleman Willms Future Marketing Coordinator coleman.willms@yahoo.com | Member | |
Miracle Hirthe Product Mobility Analyst miracle_hirthe29@gmail.com | Member | |
Jaleel Oberbrunner Chief Metrics Technician jaleel_oberbrunner@hotmail.com | Admin | |
Trinity Stracke Direct Implementation Planner trinity_stracke@gmail.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 | |
|---|---|---|---|---|
| Jessie Brown | emma_doyle@gmail.com | Lake Cayla | Inactive | $567.92 |
| Ms. Juanita Walter | marianne7@yahoo.com | Doraside | Active | $923.26 |
| Vickie Bergnaum | willow39@yahoo.com | North Beatrice | Active | $448.37 |
| Roland Von DDS | ara.beier0@hotmail.com | Hanford | Inactive | $1,025.77 |
| Mrs. Gwendolyn Connelly Sr. | rosella.graham6@hotmail.com | South Georgetteshire | Inactive | $654.82 |
| Total | $3,620.14 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Roxanne Roob @kattie19 | deonte_bayer@gmail.com | Heidiville | Active | $897.31 |
Louise Jakubowski @miguel.ankunding | travon98@yahoo.com | East Laurelfurt | Active | $1,146.42 |
Mrs. Angelica Block @marion.pfannerstill39 | sherman_denesik@gmail.com | North Onaberg | Inactive | $101.56 |
Wanda Vandervort @merl_lehner57 | fae0@gmail.com | West Melvinabury | Inactive | $752.96 |
Gerard Bernhard @alexane_walsh58 | kitty.dooley@hotmail.com | Knoxville | Inactive | $660.61 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jodi Torp | ole.connelly95@gmail.com | South Weston | Active | $897.16 |
| Lorraine Cole | nathaniel_koepp@gmail.com | Lauryport | Active | $84.47 |
| Nicholas Shanahan | gianni.walsh8@gmail.com | Evanston | Active | $470.05 |
| Sheldon Bradtke DVM | jeanne_becker@yahoo.com | South Quintonton | Active | $249.01 |
| Mrs. Angelica Wunsch | irving_hahn@yahoo.com | Fort Erling | Active | $208.55 |
| Total | $1,909.24 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Noel Hessel | gerhard31@yahoo.com | Chesapeake | Active | $734.16 |
| Vivian Beatty | allie44@hotmail.com | Huelsstead | Inactive | $43.99 |
| Gary Harber | camron_marvin11@hotmail.com | Waltonville | Active | $526.77 |
| Wanda Kuvalis | queenie.gutkowski92@gmail.com | Feestport | Inactive | $83.13 |
| Omar Ernser MD | rhiannon.crooks@hotmail.com | Lake Lisaport | Inactive | $1,156.26 |
| Total | $2,544.31 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Katrina Hermiston | virginia_kreiger@hotmail.com | Gusikowskiville | Active | $478.47 |
| John Smitham | savanah_runolfsdottir40@hotmail.com | Tiffanyberg | Inactive | $179.31 |
| Moses Carter | briana.rogahn14@hotmail.com | North Cyrilboro | Active | $497.23 |
| Grace Frami | mauricio_toy@yahoo.com | Wittingborough | Active | $104.71 |
| Ms. Bonnie DuBuque | kaylee82@yahoo.com | Fort Larissa | Inactive | $419.36 |
| Total | $1,679.08 | |||
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 | ||
|---|---|---|---|---|---|
| Ms. Irma Hartmann Sr. | valentine.boyle@hotmail.com | New Alvah | Inactive | $597.61 | |
| Gordon Cole | russ_murphy-schuster@yahoo.com | Arvada | Inactive | $259.32 | |
| Paul Cummings | claude.hartmann25@hotmail.com | Enochstad | Inactive | $441.79 | |
| Miss Debra Gutkowski | myles.gusikowski80@yahoo.com | South Marcel | Active | $838.44 | |
| Delbert Powlowski | angie.kassulke@yahoo.com | Stellahaven | Active | $485.24 | |
| Total | $2,622.40 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ruth Pfannerstill-Lueilwitz DDS | eladio41@hotmail.com | Port Guillermobury | Active | $473.93 | |
| Sophia Sanford | stone.fadel@hotmail.com | East Tremainecester | Active | $740.32 | |
| Allison Brakus | moshe.cremin@gmail.com | Schuppetown | Inactive | $205.87 | |
| Ismael Corwin | ophelia.runolfsson44@yahoo.com | Flagstaff | Active | $377.75 | |
| Homer Nikolaus | lorenzo.bashirian@gmail.com | North Larissatown | Active | $78.19 | |
| Total | $1,876.06 | ||||
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 | |
|---|---|---|---|---|
| Georgia McDermott Sr. | althea.schneider@yahoo.com | Fort Jaydenmouth | Inactive | $184.76 |
| Kirk Corwin | hellen71@yahoo.com | New Stanfordchester | Inactive | $501.42 |
| Latoya Lueilwitz | hank.herzog96@hotmail.com | New Jessicacester | Inactive | $134.83 |
| Karen Prosacco | alessandro_walsh@hotmail.com | Kingboro | Inactive | $257.39 |
| Lucy Moore | kaia.klocko46@gmail.com | Asheville | Active | $377.71 |
| Pedro Gislason | kacey_stanton@gmail.com | Jenkinscester | Inactive | $309.95 |
| Rachael Langworth | dallas_rowe@yahoo.com | Brannonview | Active | $139.45 |
| Helen Kilback | naomie.carroll@gmail.com | North Myahfort | Inactive | $308.46 |
| Janie Williamson | kendra_oberbrunner3@gmail.com | New Garett | Active | $688.93 |
| Darryl Lebsack Jr. | tod.langworth61@yahoo.com | Vista | Inactive | $301.69 |
| Alejandro Kerluke | selina24@yahoo.com | Spring Hill | Inactive | $1,088.00 |
| Mona Smitham | hope.daugherty22@hotmail.com | Destinfield | Inactive | $811.02 |
| Casey MacGyver | electa.bruen38@yahoo.com | East Michale | Inactive | $915.61 |
| Mrs. Stacy Jacobi | arely37@yahoo.com | Niagara Falls | Active | $289.15 |
| Mr. Charles Paucek | dianna_dooley1@hotmail.com | Roobton | Active | $458.93 |
| Total | $6,767.30 | |||
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 |