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 | $368.07 |
| INV002 | Pending | PayPal | $777.47 |
| INV003 | Paid | Credit Card | $245.69 |
| INV004 | Unpaid | Credit Card | $182.01 |
| INV005 | Pending | Bank Transfer | $950.74 |
| INV006 | Pending | Credit Card | $281.20 |
| INV007 | Paid | PayPal | $651.48 |
| Total | $3,456.66 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Simone Sanford | Regional Solutions Manager | simone_sanford@yahoo.com | Viewer | |
| Jevon Flatley | Customer Group Officer | jevon.flatley68@gmail.com | Member | |
| Elisabeth Bergstrom | District Intranet Director | elisabeth.bergstrom7@hotmail.com | Viewer | |
| Noble Quigley | Legacy Optimization Producer | noble_quigley54@hotmail.com | Admin | |
| Zita Kautzer-Harvey | Lead Accounts Strategist | zita.kautzer-harvey50@gmail.com | Admin | |
| Jesus Crona | International Configuration Supervisor | jesus.crona10@yahoo.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Lessie Strosin Customer Division Technician lessie_strosin@yahoo.com | Viewer | |
Chanel Doyle Product Markets Supervisor chanel_doyle2@yahoo.com | Member | |
Stanley Casper Human Metrics Architect stanley_casper45@yahoo.com | Viewer | |
Magali Denesik Regional Response Agent magali_denesik@gmail.com | Member | |
Wellington Cremin District Creative Representative wellington_cremin@yahoo.com | Member | |
Anibal Wunsch Lead Markets Liaison anibal.wunsch@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 |
|---|---|---|
Meghan Lebsack District Creative Coordinator meghan_lebsack95@yahoo.com | Admin | |
Adah Schuppe Legacy Quality Administrator adah_schuppe67@hotmail.com | Member | |
Lulu Hand Legacy Data Associate lulu.hand@gmail.com | Viewer | |
Sasha Bernier Lead Research Executive sasha.bernier51@yahoo.com | Member | |
Anastasia Fadel National Web Planner anastasia.fadel79@hotmail.com | Member | |
Ardith Buckridge Internal Functionality Associate ardith_buckridge@yahoo.com | Admin | |
Cicero Windler Central Data Supervisor cicero.windler@yahoo.com | Member | |
Lincoln Ritchie District Usability Administrator lincoln_ritchie19@gmail.com | Admin | |
Jaiden Beahan Forward Branding Analyst jaiden.beahan@gmail.com | Member | |
Mack Durgan Product Research Analyst mack_durgan@gmail.com | Viewer | |
Frederique Lesch Dynamic Solutions Producer frederique_lesch45@hotmail.com | Admin | |
Ari Mante Customer Communications Assistant ari.mante@hotmail.com | Admin | |
Freida Kunde Corporate Program Technician freida.kunde@yahoo.com | Member | |
Mathias Kuhlman Product Creative Consultant mathias.kuhlman@yahoo.com | Admin | |
Valentin Rowe Principal Accounts Administrator valentin.rowe25@yahoo.com | Admin | |
August Bailey Investor Operations Orchestrator august_bailey@hotmail.com | Viewer | |
Dandre Quigley National Metrics Technician dandre.quigley46@gmail.com | Viewer | |
Heath Adams Legacy Program Orchestrator heath_adams@yahoo.com | Viewer | |
Joshuah Hegmann Forward Web Specialist joshuah_hegmann74@yahoo.com | Admin | |
Delilah Gislason Principal Group Representative delilah.gislason56@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 | |
|---|---|---|---|---|
| Greg Casper DVM | angelica.hirthe@gmail.com | East Monroechester | Inactive | $324.18 |
| Jennie Swaniawski | rasheed_grimes@gmail.com | New Aidan | Inactive | $914.92 |
| Blanca Weissnat | dessie_stracke@hotmail.com | Trompville | Inactive | $762.44 |
| Dr. Darryl Schroeder | nakia51@yahoo.com | Detroit | Inactive | $718.90 |
| Stephen Kutch | evans21@hotmail.com | Fort Albertachester | Active | $235.51 |
| Total | $2,955.95 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Silvia Lindgren @charley_robel | horacio_lang@hotmail.com | Rahulworth | Inactive | $948.65 |
Dexter Tillman @daryl_hermann | gust3@gmail.com | North Annabelfurt | Active | $826.31 |
Kurt Gleichner @arvel97 | mercedes_strosin@hotmail.com | Fort Einarchester | Active | $587.51 |
Jody Howe IV @justus.haley83 | alivia_cummerata85@hotmail.com | West Hayleystead | Active | $1,067.63 |
Mable Gorczany @lenore4 | terrell.howell@gmail.com | Kunzeburgh | Inactive | $977.83 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cecil Dickens | brennon17@yahoo.com | Littelshire | Active | $388.12 |
| Madeline Streich | yasmin.thiel49@gmail.com | Lowebury | Active | $31.43 |
| Elisa Luettgen | rachelle_bailey@yahoo.com | Tillmanshire | Inactive | $389.23 |
| Darren Stamm | darrion_schimmel@gmail.com | Lawton | Active | $920.87 |
| Drew Tromp | lorena.abbott@hotmail.com | Barrowsstead | Active | $477.45 |
| Total | $2,207.10 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cathy Keeling | cheyenne86@yahoo.com | Kihnmouth | Active | $149.37 |
| Jamie Jones | rhett86@yahoo.com | Kuphalchester | Inactive | $596.87 |
| Dr. Wilson Boehm | samantha.halvorson85@yahoo.com | Rosarioworth | Active | $87.43 |
| Alfred Mosciski | estefania.legros@yahoo.com | West Brockborough | Active | $104.98 |
| Dr. Holly Jenkins Sr. | jewell_abernathy@hotmail.com | Fort Obiefield | Inactive | $514.26 |
| Total | $1,452.91 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Vernon Runolfsdottir | syble24@hotmail.com | West Kurtisfield | Active | $320.83 |
| Ivan Heidenreich | melvin_lueilwitz0@hotmail.com | Mariannemouth | Inactive | $573.37 |
| Gregg Quitzon | bettie.ondricka35@yahoo.com | Schoenside | Active | $836.58 |
| Cedric White | dorris_harris@hotmail.com | Catonsville | Active | $404.00 |
| Clyde Williamson | isobel96@yahoo.com | Fort Lelia | Active | $504.55 |
| Total | $2,639.33 | |||
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 | ||
|---|---|---|---|---|---|
| Jenny Little | guido81@hotmail.com | Morissettestead | Active | $897.97 | |
| Colin Bernhard | randal.klein66@gmail.com | Sipesport | Inactive | $652.86 | |
| Bonnie Waelchi | bernhard_orn@gmail.com | Anaheim | Inactive | $878.05 | |
| Anne Roob | ryleigh35@yahoo.com | Jaydemouth | Active | $410.96 | |
| Shaun Mann | stephania94@gmail.com | Torphaven | Inactive | $180.32 | |
| Total | $3,020.16 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| James Kunze | aron66@gmail.com | Jadeport | Inactive | $952.40 | |
| Jordan Terry | rose_ondricka98@yahoo.com | Lake Ernestinaberg | Inactive | $61.59 | |
| Ruth Borer | harold_schowalter@gmail.com | Schinnerstead | Inactive | $622.11 | |
| Alejandro Funk | shyanne62@hotmail.com | Schinnershire | Inactive | $1,160.18 | |
| Roger Simonis-Okuneva | kennith80@yahoo.com | West Elroyfort | Active | $418.22 | |
| Total | $3,214.50 | ||||
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 | |
|---|---|---|---|---|
| Randal Reichel | johnnie_koch@gmail.com | Millerton | Inactive | $1,124.06 |
| Arturo Friesen | gregoria63@yahoo.com | Camronmouth | Inactive | $660.63 |
| Alton Denesik-Tromp | riley_quitzon@yahoo.com | West Aaronburgh | Active | $426.32 |
| Danny Yost | rubie_stoltenberg39@gmail.com | Lake Oraville | Active | $363.35 |
| Harriet Muller | aniya41@yahoo.com | North Connorcester | Active | $853.60 |
| Nathan Ruecker | meghan77@hotmail.com | Boscoburgh | Inactive | $746.31 |
| Jonathon Wehner | jarret.lubowitz-howell@yahoo.com | Shemarfurt | Inactive | $194.22 |
| Wilbert Roberts | elaina_cronin82@gmail.com | Lake Gunnarbury | Inactive | $1,150.41 |
| Juana Keebler | delta.davis42@yahoo.com | Sofiaworth | Active | $252.90 |
| Olga Bauch | lisa_rowe94@hotmail.com | Corkeryfield | Active | $327.42 |
| Melvin Deckow | mavis.collier@hotmail.com | Abdullahstad | Active | $824.18 |
| Phillip Koepp | amie.hartmann@yahoo.com | Port Hildegard | Inactive | $900.69 |
| Bradford Mertz | vilma_cummerata@hotmail.com | Kreigerton | Inactive | $325.80 |
| Nina Hessel | adolph.farrell60@hotmail.com | West Geovanyberg | Active | $523.95 |
| Randy Krajcik | adaline_heaney@gmail.com | Houston | Inactive | $495.88 |
| Total | $9,169.72 | |||
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 |