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 | $808.51 |
| INV002 | Pending | Bank Transfer | $160.66 |
| INV003 | Unpaid | Credit Card | $340.02 |
| INV004 | Unpaid | Bank Transfer | $760.40 |
| INV005 | Pending | Credit Card | $299.97 |
| INV006 | Unpaid | Credit Card | $498.99 |
| INV007 | Unpaid | PayPal | $794.67 |
| Total | $3,663.22 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Corey Mayert | International Marketing Architect | corey.mayert@hotmail.com | Admin | |
| Tim Wolf | Chief Response Representative | tim_wolf@yahoo.com | Viewer | |
| Cindy Morar | Internal Communications Representative | cindy.morar77@yahoo.com | Viewer | |
| Angie Daugherty | District Factors Manager | angie.daugherty23@gmail.com | Admin | |
| Eula Hammes | Dynamic Applications Associate | eula.hammes86@yahoo.com | Member | |
| Owen Paucek | National Metrics Assistant | owen_paucek23@gmail.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 |
|---|---|---|
Michele Wisozk Human Intranet Administrator michele.wisozk@gmail.com | Viewer | |
Ricardo Jacobs Legacy Implementation Coordinator ricardo.jacobs1@gmail.com | Admin | |
Clyde Beer Human Markets Analyst clyde.beer48@yahoo.com | Admin | |
Patrick Schmidt Human Marketing Manager patrick.schmidt13@gmail.com | Member | |
Joan Watsica Future Usability Executive joan_watsica@yahoo.com | Viewer | |
Ashley White Dynamic Implementation Associate ashley.white89@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Anibal Collins Legacy Response Technician anibal_collins34@hotmail.com | Viewer | |
Gust Dibbert-McLaughlin Senior Implementation Designer gust.dibbert-mclaughlin@gmail.com | Member | |
Colleen Treutel Future Usability Officer colleen_treutel48@hotmail.com | Viewer | |
Courtney Kshlerin Principal Markets Assistant courtney.kshlerin@yahoo.com | Admin | |
Billy Bradtke Forward Response Agent billy_bradtke@hotmail.com | Admin | |
Gerald Borer Investor Configuration Analyst gerald_borer@yahoo.com | Viewer | |
Pauline Herzog International Web Coordinator pauline_herzog@yahoo.com | Admin | |
Nancy Hansen Dynamic Operations Orchestrator nancy_hansen89@hotmail.com | Viewer | |
Ida Kohler Corporate Interactions Specialist ida_kohler@hotmail.com | Viewer | |
Bradford Cassin Global Optimization Representative bradford.cassin43@hotmail.com | Member | |
Aryanna Ritchie Dynamic Marketing Coordinator aryanna_ritchie@gmail.com | Member | |
Lindsay Gottlieb Central Intranet Specialist lindsay_gottlieb@gmail.com | Admin | |
Clinton Kuhic Global Data Designer clinton.kuhic80@hotmail.com | Viewer | |
Sidney Hartmann Direct Program Technician sidney.hartmann@hotmail.com | Admin | |
Myrtle Schuppe Investor Optimization Strategist myrtle_schuppe33@hotmail.com | Member | |
Vernon Walter Human Marketing Producer vernon.walter@yahoo.com | Member | |
Miriam White Human Identity Director miriam_white@gmail.com | Admin | |
Wilfredo Muller Legacy Directives Representative wilfredo.muller@yahoo.com | Admin | |
Angelo Langosh Senior Data Officer angelo.langosh@hotmail.com | Member | |
Floy McClure Senior Applications Officer floy_mcclure@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 | |
|---|---|---|---|---|
| Mathias Littel | aida_kuhlman@hotmail.com | Dallinmouth | Active | $170.77 |
| Kendall Kovacek | terrence56@gmail.com | Davisborough | Active | $619.06 |
| Rae Koepp | aubrey51@yahoo.com | Destanyfort | Active | $203.43 |
| Maud Wehner | catherine98@gmail.com | Leoneville | Inactive | $394.37 |
| Todd Hagenes | bradford17@yahoo.com | South Halfort | Inactive | $683.10 |
| Total | $2,070.73 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ivah Heathcote @petra0 | toby.doyle@yahoo.com | Fort Todstead | Active | $944.50 |
Delphia Schinner @malinda18 | damon49@gmail.com | East Destinifurt | Active | $263.68 |
Dr. Pat Nicolas @kacey78 | hayden.armstrong70@yahoo.com | Thompsonfurt | Inactive | $543.77 |
Ms. Riley Braun-Mante @aletha.connelly | dorothea.damore@yahoo.com | New Raeport | Active | $965.31 |
Ruth Friesen V @jimmie.renner6 | erica_heidenreich86@hotmail.com | Rohanboro | Inactive | $601.77 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josie West | quentin.durgan54@gmail.com | Steuberchester | Active | $1,009.03 |
| Leticia McClure Sr. | jerrell_lemke@hotmail.com | Port Jessikaport | Inactive | $260.00 |
| Luella Sporer | cody_schiller75@yahoo.com | Walkerport | Active | $1,052.27 |
| Paulette Bechtelar | jane.reynolds@hotmail.com | Coleborough | Inactive | $806.64 |
| Mr. Simon Zieme | lonie23@yahoo.com | North Katelyn | Inactive | $395.75 |
| Total | $3,523.69 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Boris Dach | tami83@yahoo.com | Zettaburgh | Inactive | $48.00 |
| Kurt Gottlieb Sr. | sofia.watsica44@gmail.com | West Babylon | Inactive | $184.21 |
| Gavin Walker | forrest_pfannerstill@yahoo.com | Bellevue | Active | $612.82 |
| Johnnie Donnelly | hannah_hills@hotmail.com | West Garrett | Inactive | $465.43 |
| Chad Stoltenberg | cory19@hotmail.com | South Lempiton | Inactive | $522.77 |
| Total | $1,833.23 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wilber Price | kadin99@yahoo.com | Volkmanmouth | Active | $823.09 |
| Wilson Lesch | jalyn56@yahoo.com | Juliustown | Active | $1,127.31 |
| Dr. Destin Johnston | sandy.wilderman@hotmail.com | Port Ursula | Active | $59.01 |
| Pedro Koepp | oliver_kuhlman31@gmail.com | The Woodlands | Active | $955.60 |
| Elvis O'Connell | luisa68@yahoo.com | Langoshboro | Active | $584.84 |
| Total | $3,549.85 | |||
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 | ||
|---|---|---|---|---|---|
| Jermaine Krajcik V | nelson.stanton47@hotmail.com | New Clementinafield | Inactive | $924.29 | |
| Patty McGlynn | jared1@yahoo.com | North Floy | Inactive | $407.61 | |
| Justyn Corwin | avery_ryan25@hotmail.com | Theresiaport | Inactive | $310.93 | |
| Kristin Hansen | ismael34@yahoo.com | Hyattfurt | Active | $999.15 | |
| Eddie Bergstrom | dewey.keeling@yahoo.com | Fort Favianside | Active | $1,148.91 | |
| Total | $3,790.89 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Toy Block | lavon.stoltenberg89@yahoo.com | New Coymouth | Inactive | $384.55 | |
| Jamar Smitham PhD | mercedes_jast@yahoo.com | Casas Adobes | Inactive | $19.49 | |
| Eulah Oberbrunner | kristopher_hirthe0@hotmail.com | Schultzton | Inactive | $694.15 | |
| Raphael Thiel | donna_kohler@hotmail.com | Stantonboro | Active | $1,093.40 | |
| Mrs. Garland Kessler | willie.morar23@yahoo.com | Birmingham | Inactive | $554.23 | |
| Total | $2,745.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 | |
|---|---|---|---|---|
| Josiane Kihn | vernon_adams@hotmail.com | Uptonboro | Active | $111.86 |
| Mozelle Bergstrom | victoria_fritsch-watsica@hotmail.com | Roobchester | Active | $868.12 |
| Sammy Friesen | verna_stiedemann38@gmail.com | South Jasenhaven | Active | $972.88 |
| Alfonso Spinka | tamia_cummerata79@yahoo.com | West Terenceside | Active | $1,155.94 |
| Clinton Casper | jenna.kiehn@yahoo.com | Reynafort | Active | $641.98 |
| Lorenzo Kautzer | kennedy_hauck@gmail.com | South Burdette | Inactive | $149.70 |
| Tanya Conn MD | sallie.kuphal4@hotmail.com | Everett | Active | $1,153.93 |
| Alison Mills | bennie.witting@hotmail.com | Lake Waltonport | Active | $1,174.20 |
| Jane Russel | fannie_bednar95@gmail.com | Leannonboro | Active | $141.03 |
| Pedro Stark | randall_cole@hotmail.com | Hartmannberg | Active | $44.24 |
| Mrs. Billie Gulgowski | armani.reilly@hotmail.com | West Gabe | Inactive | $828.87 |
| Wayne Rogahn | abdul44@yahoo.com | North Yvonnefurt | Active | $395.85 |
| Kathryn Hettinger | agnes.ziemann85@hotmail.com | Creolaboro | Inactive | $921.46 |
| Raoul Bayer | edmund41@yahoo.com | East Nedratown | Inactive | $461.03 |
| Mallie White | emily.kulas@yahoo.com | New Antwonside | Inactive | $875.12 |
| Total | $9,896.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 |