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 | Credit Card | $890.24 |
| INV002 | Unpaid | Bank Transfer | $478.85 |
| INV003 | Unpaid | Credit Card | $588.20 |
| INV004 | Paid | Bank Transfer | $186.12 |
| INV005 | Paid | PayPal | $183.81 |
| INV006 | Unpaid | PayPal | $364.04 |
| INV007 | Paid | Bank Transfer | $329.46 |
| Total | $3,020.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Reta Lindgren | Internal Security Strategist | reta_lindgren@gmail.com | Viewer | |
| Friedrich Prosacco | Regional Accountability Supervisor | friedrich.prosacco32@gmail.com | Admin | |
| Chelsey Green | Global Identity Consultant | chelsey_green@yahoo.com | Viewer | |
| Erin Hahn | Dynamic Solutions Orchestrator | erin.hahn21@yahoo.com | Admin | |
| Lola Boyer | Customer Configuration Assistant | lola_boyer@yahoo.com | Member | |
| Gerson Walter | National Branding Agent | gerson_walter@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 |
|---|---|---|
Daphney Jones Lead Creative Strategist daphney.jones70@yahoo.com | Viewer | |
Isaac Sauer Global Program Coordinator isaac_sauer33@gmail.com | Member | |
Jefferey Mueller Global Quality Planner jefferey.mueller@yahoo.com | Admin | |
Tremaine Mertz Customer Assurance Engineer tremaine_mertz@yahoo.com | Member | |
Charles Mann Corporate Infrastructure Technician charles_mann@hotmail.com | Viewer | |
Andrea Hills Legacy Communications Administrator andrea.hills@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 |
|---|---|---|
Ted Rodriguez Regional Tactics Coordinator ted.rodriguez43@hotmail.com | Admin | |
Doug Hahn Direct Accountability Architect doug_hahn3@gmail.com | Viewer | |
Wesley Stehr Principal Integration Officer wesley.stehr13@hotmail.com | Admin | |
Theodore McGlynn Direct Implementation Analyst theodore_mcglynn@yahoo.com | Member | |
Vanessa Macejkovic International Infrastructure Representative vanessa.macejkovic39@gmail.com | Admin | |
Pedro Blick Dynamic Solutions Designer pedro.blick24@hotmail.com | Viewer | |
Veronica Jaskolski Direct Tactics Architect veronica.jaskolski@hotmail.com | Viewer | |
Jeanne Krajcik Lead Response Designer jeanne.krajcik63@hotmail.com | Member | |
Tanner Turcotte International Accounts Developer tanner.turcotte22@gmail.com | Viewer | |
Claudia Bruen National Integration Consultant claudia.bruen21@gmail.com | Member | |
Bert Herzog-Kshlerin Forward Program Architect bert_herzog-kshlerin34@gmail.com | Admin | |
Kelley O'Keefe District Interactions Supervisor kelley.okeefe28@yahoo.com | Admin | |
Alex Rutherford District Brand Technician alex_rutherford@hotmail.com | Member | |
Gordon Gulgowski Product Security Orchestrator gordon.gulgowski20@yahoo.com | Admin | |
Ettie Goodwin National Identity Producer ettie.goodwin@gmail.com | Admin | |
Seth Dicki Central Infrastructure Executive seth_dicki33@yahoo.com | Admin | |
Eleanor Feeney Direct Mobility Agent eleanor_feeney26@hotmail.com | Viewer | |
Bessie Sporer Central Markets Representative bessie.sporer69@hotmail.com | Member | |
Henry Hane Future Solutions Liaison henry_hane72@yahoo.com | Viewer | |
Mazie Hudson Chief Mobility Technician mazie_hudson47@gmail.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 | |
|---|---|---|---|---|
| Gustave Rohan | jacqueline_kuhlman@hotmail.com | North Seamusworth | Inactive | $366.13 |
| Tyshawn Stoltenberg | ruth5@yahoo.com | Kirlinport | Inactive | $271.64 |
| Carrie Blanda II | warren75@gmail.com | Summerbury | Inactive | $1,151.54 |
| Ernesto Greenfelder I | larue_vonrueden42@yahoo.com | Bozeman | Active | $215.80 |
| Filomena Gibson | karen.oreilly@gmail.com | Schinnerstad | Active | $664.39 |
| Total | $2,669.50 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Philip Schroeder @jermaine.sipes | kamryn89@hotmail.com | Blockland | Inactive | $340.77 |
Mr. Tyra Okuneva @louis58 | joe.luettgen92@hotmail.com | Friesenmouth | Inactive | $1,138.18 |
Aubrey Schuppe @christy1 | conor.simonis33@hotmail.com | Fort Jayceeton | Active | $39.58 |
Tracey O'Hara-Lesch @mariah.dare | jillian.huels29@yahoo.com | Gailboro | Active | $89.38 |
Kristina Kunze-Heidenreich @jesse78 | oliver0@hotmail.com | Harveyworth | Inactive | $369.15 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cynthia Cassin-Oberbrunner IV | mike33@hotmail.com | McAllen | Active | $207.35 |
| Jordan Schumm | margaret.sanford28@gmail.com | Port Clyde | Inactive | $189.50 |
| Percy Lockman III | terri_ankunding55@hotmail.com | Nitzschefurt | Active | $666.18 |
| Neal Vandervort | lamont.erdman@yahoo.com | Mesa | Active | $850.84 |
| Philip Kirlin | gretchen23@hotmail.com | Salt Lake City | Active | $673.34 |
| Total | $2,587.21 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Penny Nienow-Pouros | dave21@hotmail.com | Nicolashaven | Inactive | $900.12 |
| Santiago Feeney | marshall55@yahoo.com | Tristianchester | Inactive | $602.99 |
| Emma Ullrich | bobby13@hotmail.com | Elwynmouth | Inactive | $450.02 |
| Katie Bartell I | erik99@gmail.com | VonRuedenworth | Inactive | $560.66 |
| Elsie Streich | heidi.roberts@hotmail.com | Rancho Palos Verdes | Active | $233.83 |
| Total | $2,747.62 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lucio Moore | patrick78@yahoo.com | Travistown | Inactive | $174.63 |
| Mr. Merle Conroy I | vidal3@hotmail.com | Nicholeboro | Active | $1,057.69 |
| Luz Bartoletti | leonor.will@yahoo.com | New Waldohaven | Inactive | $277.48 |
| Noah Ankunding | deron_ward99@yahoo.com | Sincerefield | Inactive | $482.81 |
| Nick Maggio | jailyn41@hotmail.com | Port Rosemarie | Active | $324.22 |
| Total | $2,316.83 | |||
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. Isaiah Reichert | scott35@yahoo.com | Koreytown | Active | $101.91 | |
| Mrs. Evan Jerde | evalyn.feest@hotmail.com | Pembroke Pines | Active | $519.94 | |
| Ursula Hagenes | cara3@yahoo.com | Andersonbury | Inactive | $1,074.50 | |
| Jacklyn Armstrong-Strosin | abigayle34@gmail.com | Princessside | Inactive | $1,023.96 | |
| Myrna Rice | patsy_marquardt29@yahoo.com | Weimannfield | Active | $808.84 | |
| Total | $3,529.15 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Anahi Harvey | minerva_hegmann@gmail.com | Fort Annabelleworth | Inactive | $907.46 | |
| Theron Bayer | sheldon_stokes@hotmail.com | East Zelma | Inactive | $498.59 | |
| Lamont Aufderhar | hugo20@hotmail.com | East Rachelleborough | Active | $763.25 | |
| Oscar Funk | guadalupe_rath@hotmail.com | Corbinbury | Inactive | $34.94 | |
| Raina Abshire | caroline_ratke@hotmail.com | East Lansing | Active | $515.37 | |
| Total | $2,719.61 | ||||
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 | |
|---|---|---|---|---|
| Wendell Heidenreich | joe.kreiger@yahoo.com | Sonyafurt | Inactive | $767.52 |
| Mr. Alicia Dicki | ebony.schaefer@gmail.com | Murrayhaven | Active | $717.48 |
| Nathen Cummings | timmy_kertzmann-predovic2@yahoo.com | Verdaburgh | Active | $384.24 |
| Yvette Ankunding | lydia19@hotmail.com | Larissachester | Active | $979.91 |
| Lucas Mante | kaitlyn_oberbrunner5@hotmail.com | Daxshire | Active | $564.06 |
| Mathew Carter | cletus65@hotmail.com | Hegmannland | Inactive | $809.59 |
| Abdullah Mante-Deckow | alysha_wunsch66@hotmail.com | Spencerside | Inactive | $363.71 |
| Ira Schroeder | wilson.abernathy@yahoo.com | Konopelskiside | Inactive | $220.58 |
| Thelma Cronin | ernesto_flatley@hotmail.com | Lee's Summit | Active | $221.38 |
| Amber Dietrich | trevor.watsica4@gmail.com | New Ashtynstead | Inactive | $1,187.65 |
| Roberta Konopelski | bill23@gmail.com | Lake Hayleehaven | Inactive | $306.18 |
| Rosa Veum | thurman.rath13@gmail.com | New Franz | Active | $299.66 |
| Wilton Marks | guillermo.conn72@gmail.com | Casper | Inactive | $977.41 |
| Lindsay Mertz | tommy.baumbach32@gmail.com | Vacaville | Inactive | $1,100.10 |
| Flora Hermann | gabrielle39@yahoo.com | Donnaside | Inactive | $574.01 |
| Total | $9,473.48 | |||
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 |