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 | Paid | Bank Transfer | $554.84 |
| INV002 | Pending | Bank Transfer | $132.56 |
| INV003 | Paid | Bank Transfer | $979.29 |
| INV004 | Paid | PayPal | $249.40 |
| INV005 | Unpaid | Credit Card | $148.30 |
| INV006 | Pending | Credit Card | $374.88 |
| INV007 | Unpaid | PayPal | $215.95 |
| Total | $2,655.22 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Aylin Mohr | Corporate Data Developer | aylin_mohr@hotmail.com | Viewer | |
| Rose Collins | Chief Accounts Assistant | rose.collins@hotmail.com | Viewer | |
| Freddy Heller | International Group Coordinator | freddy_heller@hotmail.com | Member | |
| Lucienne Cole | Forward Web Agent | lucienne_cole11@hotmail.com | Viewer | |
| Nathen Yundt | Future Integration Designer | nathen.yundt@gmail.com | Admin | |
| Dawson Trantow | Senior Paradigm Planner | dawson_trantow93@gmail.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 |
|---|---|---|
Gardner Weissnat Forward Usability Director gardner_weissnat12@gmail.com | Viewer | |
Harry Abshire Human Quality Agent harry.abshire@hotmail.com | Member | |
Chanel Streich District Directives Agent chanel_streich@yahoo.com | Member | |
Mayra Nienow Corporate Metrics Manager mayra_nienow42@gmail.com | Viewer | |
Morgan Swift Central Functionality Liaison morgan.swift62@yahoo.com | Viewer | |
Kaylah Schaden Chief Program Associate kaylah.schaden@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Marietta Herzog Dynamic Identity Administrator marietta_herzog5@yahoo.com | Viewer | |
Salma Rosenbaum Investor Data Coordinator salma.rosenbaum@yahoo.com | Viewer | |
Louie Stokes Corporate Identity Producer louie.stokes28@yahoo.com | Member | |
Dominic Stiedemann Legacy Solutions Supervisor dominic_stiedemann@gmail.com | Member | |
Ted Rowe-Fahey Dynamic Marketing Representative ted.rowe-fahey72@yahoo.com | Admin | |
Eduardo Osinski Investor Marketing Engineer eduardo_osinski@yahoo.com | Admin | |
Jazmyne Ebert Forward Applications Coordinator jazmyne_ebert@gmail.com | Viewer | |
Merritt Mayert Internal Research Associate merritt_mayert@hotmail.com | Admin | |
Chesley Batz Forward Functionality Representative chesley_batz@hotmail.com | Member | |
Maxwell Wehner Chief Metrics Representative maxwell_wehner@hotmail.com | Member | |
Carson Howell Forward Web Supervisor carson_howell@yahoo.com | Viewer | |
Corene Johns Forward Marketing Representative corene.johns@hotmail.com | Admin | |
Norval Price-Mills Product Division Representative norval.price-mills69@gmail.com | Viewer | |
Nya Renner District Directives Developer nya.renner1@yahoo.com | Admin | |
Efren Bogisich Product Mobility Officer efren_bogisich@gmail.com | Viewer | |
Sigurd Nader Human Interactions Producer sigurd_nader@hotmail.com | Member | |
Trever Bosco Direct Branding Agent trever.bosco84@hotmail.com | Viewer | |
Rocky Bruen National Paradigm Producer rocky_bruen@yahoo.com | Member | |
Ben Kertzmann District Division Coordinator ben_kertzmann66@hotmail.com | Viewer | |
Buddy Runolfsson Chief Response Planner buddy.runolfsson3@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 | |
|---|---|---|---|---|
| Mindy Hilpert | jazmin99@gmail.com | North Bradford | Inactive | $963.87 |
| Dawn Reichert | elijah_moen@yahoo.com | Gerdatown | Active | $114.25 |
| Ramona Greenholt | oswald.schultz@gmail.com | Turcottestad | Inactive | $540.76 |
| Doreen Ratke | natalia59@yahoo.com | Elijahport | Inactive | $456.85 |
| Eric Mayer | aylin_thiel93@gmail.com | Pensacola | Active | $1,176.81 |
| Total | $3,252.54 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Darlene Wunsch @nick.senger41 | kattie94@hotmail.com | Rippincester | Active | $1,063.51 |
Miguel Berge @ali_jenkins9 | amelia.runte@gmail.com | Rippinbury | Active | $915.09 |
Van Turner II @gideon.cummings | maud94@hotmail.com | South Bend | Inactive | $1,190.97 |
Barbara Bernier I @angus33 | leon76@yahoo.com | Alpharetta | Inactive | $247.17 |
Orlando Schamberger @elaina_kozey33 | amanda29@hotmail.com | South Bridgetview | Inactive | $71.93 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Evelyn Watsica | ardith28@gmail.com | Heidenreichside | Inactive | $1,038.99 |
| Jackie Parker | verla70@hotmail.com | Smithamberg | Active | $931.79 |
| Robyn Swaniawski | lukas.tromp@gmail.com | Monserratstad | Active | $938.58 |
| Dr. Toby Carroll | americo_sanford-grimes93@yahoo.com | Dayton | Active | $277.99 |
| Kurt Zboncak | libby.davis@yahoo.com | South Reggie | Inactive | $558.48 |
| Total | $3,745.83 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sheryl Baumbach | penelope_hartmann97@yahoo.com | South Anabelstad | Active | $105.80 |
| Kenneth Gerhold | penelope.bechtelar8@hotmail.com | Fort Deanhaven | Inactive | $284.59 |
| Judith Prosacco | ernie50@yahoo.com | East Kacieside | Inactive | $187.48 |
| Michele Labadie | curtis_okon@yahoo.com | North Clementine | Inactive | $669.66 |
| Spencer Becker | chris_koch@gmail.com | West Wilfredo | Active | $644.20 |
| Total | $1,891.73 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eva Mertz | delia2@hotmail.com | South Aurelie | Inactive | $821.67 |
| Matthew Douglas III | horacio_ondricka94@gmail.com | Johns Creek | Active | $1,014.51 |
| Natasha Osinski | quentin_kohler7@yahoo.com | Hirthebury | Active | $1.39 |
| Jackie Hintz | clyde27@yahoo.com | Skilesshire | Active | $99.18 |
| Guy Ferry | alisa96@gmail.com | South Jayneborough | Active | $1,128.00 |
| Total | $3,064.75 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Melvin Okuneva | adelle67@hotmail.com | Heaneymouth | Inactive | $511.56 | |
| Noah Auer | athena.kirlin@hotmail.com | Herzogworth | Inactive | $335.81 | |
| Dr. Bill Stamm | leopoldo18@gmail.com | West Raoulburgh | Inactive | $520.22 | |
| Nellie Lemke | alisa_ohara61@gmail.com | Erie | Inactive | $282.31 | |
| Dr. Christy Swaniawski MD | betty.kreiger77@gmail.com | Dothan | Active | $1,026.25 | |
| Total | $2,676.15 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Martha Schumm PhD | francis_johnson@hotmail.com | Lincoln | Inactive | $127.72 | |
| Priscilla Crooks | katelynn37@hotmail.com | New Laurine | Inactive | $739.93 | |
| Shari Ritchie | marcel99@hotmail.com | Russelboro | Active | $805.10 | |
| Minnie Mayer | brandy.nienow91@hotmail.com | Vancouver | Inactive | $521.23 | |
| Lonnie Will | destinee_rempel@hotmail.com | Kassulkeland | Inactive | $937.00 | |
| Total | $3,130.98 | ||||
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 | |
|---|---|---|---|---|
| Glenn Kuvalis | myles_koepp49@hotmail.com | Nicolasfort | Inactive | $1,194.12 |
| Hattie Paucek | hattie_cole@hotmail.com | New Lucas | Inactive | $918.13 |
| Sarah Friesen | tara_hagenes@hotmail.com | Mosciskistead | Inactive | $145.92 |
| Don Doyle | mireille15@hotmail.com | East Maurine | Inactive | $934.08 |
| Charlie Champlin | florence79@yahoo.com | Labadieboro | Inactive | $420.09 |
| Gabriel Spinka MD | elva_hermann@yahoo.com | Carterview | Active | $184.17 |
| Delia Tromp | antoinette.kozey@hotmail.com | Rancho Palos Verdes | Active | $1,058.43 |
| Eloise Schimmel IV | yasmeen_boyer-nienow@hotmail.com | Patriciabury | Active | $302.81 |
| Joyce Tillman | aubrey39@hotmail.com | Anthonyside | Inactive | $1,099.15 |
| Miriam Miller | valentine_gutmann98@yahoo.com | Stromanland | Inactive | $365.10 |
| Jermaine Mayert | eugenia19@hotmail.com | South Abagailside | Active | $418.90 |
| Terry Tillman | olen_weimann@hotmail.com | Lake Louveniashire | Inactive | $435.79 |
| Wesley Wilderman | denis31@yahoo.com | East Devontestad | Active | $191.62 |
| Paulette Goodwin | terry82@gmail.com | Lake Miguel | Active | $380.52 |
| Ms. Stacy Goldner | lia68@yahoo.com | East Wyatt | Inactive | $290.87 |
| Total | $8,339.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 |