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 | Credit Card | $138.47 |
| INV002 | Pending | PayPal | $425.22 |
| INV003 | Unpaid | Bank Transfer | $189.65 |
| INV004 | Paid | Bank Transfer | $339.90 |
| INV005 | Paid | PayPal | $306.03 |
| INV006 | Paid | Credit Card | $664.56 |
| INV007 | Paid | Credit Card | $175.29 |
| Total | $2,239.12 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rollin Pouros | International Usability Designer | rollin.pouros@gmail.com | Viewer | |
| Jayson Johnson | Human Factors Representative | jayson_johnson@gmail.com | Member | |
| Shanelle Dicki | Human Optimization Orchestrator | shanelle_dicki4@hotmail.com | Admin | |
| Virginie Heller | Human Paradigm Agent | virginie_heller68@hotmail.com | Member | |
| Elvie Bartell | Regional Integration Manager | elvie_bartell@hotmail.com | Viewer | |
| Suzanne Balistreri | Global Division Planner | suzanne_balistreri@hotmail.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 |
|---|---|---|
Eldon Cole Human Intranet Strategist eldon.cole23@hotmail.com | Viewer | |
Marcella Stracke Human Operations Facilitator marcella_stracke@hotmail.com | Member | |
Brice Torp Central Usability Director brice.torp@gmail.com | Member | |
Magdalena Kiehn National Brand Engineer magdalena_kiehn68@gmail.com | Viewer | |
Garett Nienow Chief Research Liaison garett_nienow@hotmail.com | Member | |
Antone Wuckert Future Response Producer antone_wuckert69@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 |
|---|---|---|
Maud Hintz Product Branding Engineer maud_hintz@yahoo.com | Viewer | |
Armando Blick Customer Optimization Administrator armando.blick24@yahoo.com | Admin | |
Raina Wolf Chief Branding Administrator raina.wolf94@yahoo.com | Admin | |
Abraham Abernathy Customer Communications Specialist abraham.abernathy@yahoo.com | Viewer | |
Alfredo Veum Future Division Technician alfredo_veum@hotmail.com | Admin | |
Helene Hyatt Principal Optimization Assistant helene_hyatt44@gmail.com | Viewer | |
Norval Corkery Human Integration Representative norval.corkery@hotmail.com | Viewer | |
Chanelle Schinner Internal Metrics Planner chanelle_schinner@hotmail.com | Viewer | |
Lempi McLaughlin Global Research Administrator lempi.mclaughlin72@yahoo.com | Admin | |
Grace Kovacek Future Usability Engineer grace_kovacek62@hotmail.com | Viewer | |
Ruben Marvin Corporate Program Executive ruben.marvin19@yahoo.com | Viewer | |
Brandon Mosciski Future Operations Strategist brandon_mosciski61@gmail.com | Viewer | |
Harmon Nolan National Accountability Producer harmon.nolan@gmail.com | Admin | |
Johnny Blanda International Creative Orchestrator johnny.blanda55@hotmail.com | Viewer | |
Lavonne Flatley Human Accountability Designer lavonne.flatley57@hotmail.com | Member | |
Iva Gusikowski Internal Communications Administrator iva_gusikowski30@hotmail.com | Member | |
Chance Hammes Global Accountability Representative chance.hammes11@gmail.com | Viewer | |
Dayna Lockman Regional Communications Coordinator dayna_lockman12@gmail.com | Admin | |
Colten Bergnaum Principal Usability Orchestrator colten_bergnaum@hotmail.com | Member | |
Lue Lemke International Web Planner lue.lemke3@hotmail.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 | |
|---|---|---|---|---|
| Randal Kertzmann | rosamond.stark@yahoo.com | Miramar | Active | $3.95 |
| Maggie Zemlak | wilford49@gmail.com | North Mavis | Inactive | $452.24 |
| Jake Turner | johnny35@hotmail.com | Vancouver | Active | $255.26 |
| Dr. Maryann Braun | grady91@gmail.com | Lakeville | Inactive | $535.09 |
| Dr. Louis Hegmann | devyn_nolan-oberbrunner@hotmail.com | Wyoming | Inactive | $936.31 |
| Total | $2,182.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tom Ritchie I @francisco84 | isabell56@gmail.com | Leonstad | Inactive | $258.46 |
Antoinette Bernier @blake90 | kaitlin.mcglynn50@yahoo.com | Lake Elody | Inactive | $191.56 |
Michelle Runolfsson @moshe_kris50 | maximillian_klocko@yahoo.com | Springfield | Inactive | $1,113.13 |
Joey Hintz @brennan64 | amanda_christiansen11@gmail.com | Walkerberg | Active | $196.93 |
Mr. Julius Harber PhD @nash_skiles | omari_wiza34@gmail.com | West Jaleelfurt | Inactive | $713.81 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Tommie Macejkovic | pinkie50@yahoo.com | Klockoport | Inactive | $67.58 |
| Ms. Sheila Abshire | mortimer.okeefe@gmail.com | Alecstad | Active | $947.22 |
| Mitchell Cruickshank | keara.fadel-gerlach45@hotmail.com | Port Isobel | Inactive | $1,010.33 |
| Dr. Clinton Price | meghan_hettinger@gmail.com | Auerstead | Inactive | $164.42 |
| Tara Dicki | shania.kuhlman98@yahoo.com | Jasonport | Inactive | $113.81 |
| Total | $2,303.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keith Price-Flatley | curtis49@yahoo.com | Kelleymouth | Active | $1,064.53 |
| Miss Felicia Moore | dariana.roberts77@hotmail.com | Scranton | Active | $240.13 |
| Elijah Rice-Ruecker | bethany64@gmail.com | Glenview | Active | $1,187.10 |
| Candace Heller | bertrand36@hotmail.com | New Arnoldoborough | Active | $485.26 |
| Ruby Murphy | jerry64@yahoo.com | Jacobiboro | Active | $449.56 |
| Total | $3,426.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erin Mills | nia_predovic@hotmail.com | Mission | Inactive | $130.60 |
| Hilda Swift | charity.casper91@hotmail.com | Beaverton | Active | $901.05 |
| Darin Ankunding | elza28@gmail.com | Norrishaven | Active | $143.90 |
| Patsy Herman-Breitenberg | calista_hermann97@hotmail.com | Wardfield | Active | $649.82 |
| Ms. Nancy Waters | nia_wiegand@hotmail.com | Arvada | Active | $292.73 |
| Total | $2,118.10 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. John Borer | federico.mccullough@gmail.com | North Hailey | Active | $890.44 | |
| Julie Bechtelar | gideon.kerluke@hotmail.com | Appleton | Active | $1,066.52 | |
| Janet Glover | neha80@gmail.com | Gradyton | Active | $1,172.03 | |
| Matthew Beier | hobart_tromp@hotmail.com | Mayaguez | Inactive | $1,134.44 | |
| Boyd Leffler | guido_torphy@yahoo.com | Jaleelside | Inactive | $296.02 | |
| Total | $4,559.45 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Jan Parisian | leif75@hotmail.com | Huelsville | Inactive | $1,073.66 | |
| Ms. Kristin Rolfson-McClure | janis.gulgowski92@hotmail.com | Lake Johathan | Inactive | $483.22 | |
| Eleanor Hettinger | polly_vandervort@hotmail.com | Framiton | Active | $310.37 | |
| Herman Bechtelar | madalyn_kuhic@gmail.com | Konopelskihaven | Active | $815.42 | |
| Francis Huels | sincere_streich@yahoo.com | Waipahu | Active | $147.15 | |
| Total | $2,829.82 | ||||
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 | |
|---|---|---|---|---|
| Fred Lueilwitz | clair47@yahoo.com | Avondale | Inactive | $854.80 |
| Dr. Isabel Bernier | yolanda.walter56@gmail.com | East Ardellacester | Active | $6.13 |
| Kristopher Daniel | arjun.mueller@yahoo.com | South Meggieboro | Active | $583.93 |
| Nicole Hammes | keith.connelly@yahoo.com | Tonibury | Active | $26.97 |
| Lorene Parker | diana.nienow39@hotmail.com | Berwyn | Inactive | $1,000.17 |
| Alyssa Kessler | otha.lakin5@yahoo.com | North Odell | Active | $569.42 |
| Terrence Wolf | angus_mertz61@hotmail.com | Brauntown | Inactive | $1,195.13 |
| Ernesto Jacobs | henriette.swaniawski@hotmail.com | Lawton | Inactive | $270.28 |
| Wesley Kuhic | vicente74@gmail.com | Arachester | Inactive | $606.12 |
| Lillie Legros | myrtis_ankunding@gmail.com | Dangelofurt | Inactive | $745.68 |
| Tanya Kessler Sr. | hazel13@gmail.com | East Lonnie | Inactive | $260.77 |
| Nicolas Raynor | fabiola87@yahoo.com | Edmond | Inactive | $381.18 |
| Mrs. Olga Simonis | kayden.kutch74@gmail.com | West Ona | Active | $403.57 |
| Hugh Hayes | erick_baumbach@yahoo.com | Battle Creek | Active | $387.10 |
| Jackie Considine | haskell96@gmail.com | South Maxboro | Inactive | $166.96 |
| Total | $7,458.21 | |||
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 |