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 | PayPal | $257.20 |
| INV002 | Pending | Bank Transfer | $421.50 |
| INV003 | Unpaid | Bank Transfer | $889.67 |
| INV004 | Paid | PayPal | $411.49 |
| INV005 | Unpaid | PayPal | $488.95 |
| INV006 | Paid | Bank Transfer | $217.11 |
| INV007 | Unpaid | Credit Card | $710.53 |
| Total | $3,396.45 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Paula Langosh | Internal Intranet Architect | paula.langosh@yahoo.com | Admin | |
| Kailey Mueller | Chief Data Liaison | kailey_mueller38@hotmail.com | Member | |
| Russel Goldner | Chief Optimization Planner | russel.goldner51@gmail.com | Viewer | |
| Eino Walsh | Lead Web Associate | eino_walsh@yahoo.com | Member | |
| Louisa O'Hara | Customer Security Supervisor | louisa_ohara@yahoo.com | Member | |
| Joe Bradtke | Corporate Directives Engineer | joe.bradtke39@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 |
|---|---|---|
Asa Ryan Human Implementation Consultant asa_ryan@gmail.com | Member | |
Georgette Wilkinson Product Implementation Administrator georgette_wilkinson57@gmail.com | Member | |
Micheal Conroy Product Functionality Administrator micheal_conroy@yahoo.com | Admin | |
Manuela Barton Dynamic Response Engineer manuela.barton74@gmail.com | Member | |
Aliza Anderson Forward Communications Facilitator aliza.anderson@yahoo.com | Admin | |
Caterina Streich Corporate Implementation Consultant caterina_streich@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mckayla Ernser Dynamic Metrics Liaison mckayla.ernser@hotmail.com | Member | |
Freeda Schinner Global Integration Director freeda.schinner30@gmail.com | Admin | |
Jabari Schuppe National Operations Designer jabari_schuppe@yahoo.com | Admin | |
Hope Heller Legacy Group Specialist hope_heller@yahoo.com | Admin | |
Kallie Glover Global Group Liaison kallie_glover@gmail.com | Viewer | |
Macy Wehner-Fritsch Product Quality Executive macy.wehner-fritsch@yahoo.com | Admin | |
Aisha Moore Principal Implementation Manager aisha_moore60@hotmail.com | Viewer | |
Libby Beier Customer Interactions Developer libby_beier67@yahoo.com | Member | |
Jeffrey Buckridge Forward Identity Executive jeffrey.buckridge59@gmail.com | Admin | |
Breanna Collins Customer Assurance Director breanna_collins@hotmail.com | Viewer | |
Brannon O'Kon Regional Research Manager brannon_okon35@yahoo.com | Viewer | |
Toby Schuppe Principal Communications Producer toby.schuppe@gmail.com | Viewer | |
Kailee Brown Central Security Architect kailee_brown@hotmail.com | Viewer | |
Cooper Lueilwitz Customer Division Consultant cooper.lueilwitz@yahoo.com | Admin | |
Jailyn Gibson Regional Infrastructure Technician jailyn.gibson@gmail.com | Member | |
Lupe Robel Forward Accountability Administrator lupe_robel@yahoo.com | Member | |
Arnaldo Yost Central Directives Engineer arnaldo_yost28@hotmail.com | Admin | |
Kolby Turner Future Security Representative kolby_turner@yahoo.com | Admin | |
Annamae Muller Investor Brand Engineer annamae.muller92@yahoo.com | Viewer | |
Selmer Beatty Chief Accounts Manager selmer.beatty30@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 | |
|---|---|---|---|---|
| Betsy Prohaska-Kutch | amina_leannon@gmail.com | Lubbock | Inactive | $579.43 |
| Kevin Lang | tyreek9@yahoo.com | New Leolafort | Inactive | $976.42 |
| Gail Thompson | angelo71@gmail.com | West Norbertostad | Active | $24.89 |
| Caleb Hirthe | dwight_schaefer@yahoo.com | New Armand | Active | $914.07 |
| Roosevelt Ruecker | adeline78@hotmail.com | Roobview | Active | $613.48 |
| Total | $3,108.29 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Beatrice Wisoky MD @winona_ankunding83 | markus.barrows@yahoo.com | West Joshua | Active | $490.55 |
Felicia Buckridge @cydney_quigley82 | darwin80@yahoo.com | Wunschfort | Active | $689.65 |
Stacy Wuckert @chauncey_franey36 | kelley97@hotmail.com | North Taureanberg | Inactive | $138.23 |
Shelly Hickle @tina.schmitt | coy50@yahoo.com | Zackaryshire | Inactive | $303.62 |
Alexandra Dibbert-Gutmann @nelle30 | pedro.mraz@yahoo.com | Port Johnson | Inactive | $1,044.47 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jessica Mohr | emelia.hudson99@yahoo.com | Fort Katheryn | Inactive | $88.72 |
| Wendy Rempel | keon_skiles47@hotmail.com | Hoboken | Inactive | $517.63 |
| Gabriel Thompson | winston.marvin@hotmail.com | Zboncakworth | Active | $400.46 |
| Traci Wilkinson II | fabian_shanahan@gmail.com | Port Shaniya | Inactive | $889.79 |
| Donald Grimes | aliza.bauch-ullrich@gmail.com | Christopherworth | Active | $330.39 |
| Total | $2,226.99 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jessie Fadel I | jerrod82@yahoo.com | Deshaunberg | Active | $477.84 |
| Benny Kutch | jaylan95@hotmail.com | New Aliaport | Active | $141.16 |
| Mitchell Sawayn | ezra_goyette39@gmail.com | Lake Shaniya | Active | $1,185.68 |
| Arlene Bednar | terry_hills@yahoo.com | Shawnside | Active | $1,193.58 |
| Florence Medhurst | giles.spinka2@gmail.com | East Adalinefort | Active | $243.48 |
| Total | $3,241.74 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jay Purdy | lesly70@yahoo.com | East Tillmanmouth | Active | $369.49 |
| Mrs. Sara Hills | arvilla47@yahoo.com | Port Kelliport | Inactive | $516.38 |
| Tasha Homenick | caden_zulauf-adams89@gmail.com | Fort Hopeport | Active | $973.05 |
| Everett Stehr | chaim_rippin80@gmail.com | South Cleobury | Inactive | $161.21 |
| Traci Erdman | maximillian_swaniawski98@gmail.com | Lilianacester | Inactive | $1,189.59 |
| Total | $3,209.72 | |||
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 | ||
|---|---|---|---|---|---|
| Mike Schinner | chris.harris@yahoo.com | Berniecefurt | Active | $22.06 | |
| Jaime Prosacco | carson93@yahoo.com | East Finn | Inactive | $280.72 | |
| Marguerite Thiel | dominic16@hotmail.com | Hoegerberg | Active | $1,178.45 | |
| Evelyn Zulauf-Miller | spencer.wolf54@yahoo.com | West Janiscester | Inactive | $1,051.83 | |
| Yvette Nolan | freddie_nikolaus-carter27@gmail.com | New Osborneton | Inactive | $836.62 | |
| Total | $3,369.68 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Judy Hegmann | noble59@hotmail.com | New Barrettville | Inactive | $611.28 | |
| Sharon Beahan | margaret_bergnaum16@hotmail.com | Lemketon | Active | $542.25 | |
| Cornelius O'Reilly | carli_turcotte-marks@hotmail.com | Lake Leonardo | Active | $205.99 | |
| Cathy Waelchi | nils38@hotmail.com | Billberg | Inactive | $286.78 | |
| Bonnie Rau | susana29@yahoo.com | New Gwen | Inactive | $308.58 | |
| Total | $1,954.88 | ||||
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 | |
|---|---|---|---|---|
| Inez Baumbach | lesly_johns29@gmail.com | Nitzscheland | Inactive | $377.69 |
| Robin Wunsch | tiana.ohara@yahoo.com | Lake Israelview | Active | $75.16 |
| Mrs. Kristy Gottlieb-Bins MD | lolita.kerluke44@yahoo.com | Kevinworth | Active | $249.05 |
| Wilson Runolfsson | odessa9@yahoo.com | East Arloburgh | Inactive | $620.11 |
| Dr. Mamie McGlynn | arvid62@gmail.com | Port Marychester | Active | $102.66 |
| Willie Lueilwitz | torrance44@hotmail.com | Port Noemieville | Active | $1,038.93 |
| Jerome Corwin | uriel.roob@hotmail.com | Barneyborough | Inactive | $73.71 |
| Greg Goodwin | katheryn.marvin@gmail.com | North Julio | Inactive | $939.05 |
| Courtney Smitham | rosa.kautzer64@hotmail.com | Thompsonbury | Active | $803.78 |
| David Balistreri | roma.weissnat94@gmail.com | Macon-Bibb County | Inactive | $659.52 |
| Clarence Beahan | easton.ritchie@gmail.com | South Bertland | Active | $329.25 |
| Pete Steuber | tristin.schroeder69@hotmail.com | South Maribelfort | Active | $733.13 |
| Wallace Stiedemann Sr. | timmy5@hotmail.com | Port Braedenhaven | Inactive | $230.21 |
| Harriet Collins | broderick.prosacco@gmail.com | Port Jonas | Active | $531.00 |
| Boyd Von | lilly_kihn25@yahoo.com | East Bereniceboro | Inactive | $197.05 |
| Total | $6,960.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 |