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 | PayPal | $551.83 |
| INV002 | Pending | Bank Transfer | $459.70 |
| INV003 | Pending | Bank Transfer | $324.33 |
| INV004 | Unpaid | Bank Transfer | $762.12 |
| INV005 | Pending | Bank Transfer | $727.65 |
| INV006 | Paid | Bank Transfer | $731.04 |
| INV007 | Unpaid | Credit Card | $908.78 |
| Total | $4,465.45 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Grady Considine | Corporate Tactics Officer | grady.considine@gmail.com | Admin | |
| Hazel Bayer | Human Implementation Strategist | hazel_bayer@gmail.com | Viewer | |
| Dessie Bins | Global Program Representative | dessie_bins@yahoo.com | Member | |
| Marlin Jacobson | Direct Implementation Designer | marlin.jacobson@yahoo.com | Viewer | |
| Carla Pfeffer-Blanda | Future Identity Liaison | carla.pfeffer-blanda@gmail.com | Viewer | |
| George Purdy | District Communications Technician | george.purdy36@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 |
|---|---|---|
Anya Schimmel Principal Division Assistant anya_schimmel34@gmail.com | Viewer | |
Alysha Swaniawski Direct Paradigm Engineer alysha.swaniawski42@gmail.com | Admin | |
Kian Streich Human Implementation Planner kian.streich@gmail.com | Member | |
Louvenia Conn International Intranet Specialist louvenia.conn@hotmail.com | Admin | |
Trenton Powlowski Corporate Quality Director trenton_powlowski@hotmail.com | Admin | |
Ali Haag Direct Quality Orchestrator ali_haag35@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 |
|---|---|---|
Kenya Jones Internal Program Associate kenya_jones@hotmail.com | Viewer | |
Aliya Zulauf Global Division Specialist aliya.zulauf80@yahoo.com | Viewer | |
Clara Vandervort Direct Usability Director clara.vandervort@gmail.com | Member | |
Leora Braun-Nienow International Accountability Developer leora.braun-nienow0@gmail.com | Member | |
Claudia Thiel Dynamic Paradigm Officer claudia.thiel@yahoo.com | Member | |
Walter Kerluke Forward Accounts Producer walter_kerluke65@yahoo.com | Viewer | |
Aliyah Reinger Principal Division Administrator aliyah_reinger45@hotmail.com | Admin | |
Tracey Littel Chief Paradigm Agent tracey.littel@gmail.com | Viewer | |
Lawrence Reynolds Direct Interactions Engineer lawrence_reynolds98@yahoo.com | Member | |
Rhonda Yost Direct Solutions Developer rhonda.yost96@gmail.com | Viewer | |
Lawrence Schaden Principal Quality Planner lawrence_schaden98@gmail.com | Admin | |
Lois Kris International Intranet Orchestrator lois_kris@yahoo.com | Admin | |
Maurice Wolf Corporate Mobility Orchestrator maurice_wolf2@hotmail.com | Viewer | |
Chloe Christiansen Customer Marketing Consultant chloe.christiansen@hotmail.com | Member | |
Lucia Cole Corporate Directives Orchestrator lucia.cole@hotmail.com | Admin | |
Malachi Heller Global Operations Liaison malachi_heller92@gmail.com | Admin | |
Albert Daugherty Global Infrastructure Strategist albert_daugherty29@gmail.com | Member | |
Jill Ebert Regional Solutions Associate jill.ebert@gmail.com | Member | |
Elody Herman Central Paradigm Executive elody_herman@yahoo.com | Viewer | |
Ricky Lubowitz International Mobility Architect ricky_lubowitz99@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 | |
|---|---|---|---|---|
| Manley McClure | maurice95@gmail.com | Reichelhaven | Active | $438.69 |
| Moses Gutkowski | rachel.volkman@hotmail.com | Lake Melissa | Inactive | $574.52 |
| Stanton Greenfelder-Keebler | jessy_powlowski@gmail.com | Ludieside | Inactive | $706.29 |
| Mr. Jordy Stracke | selmer30@gmail.com | Shirleyberg | Active | $621.57 |
| Howell Denesik | tatyana35@yahoo.com | Kadestead | Inactive | $197.69 |
| Total | $2,538.76 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Maximillian Gerhold @marjolaine.carter | wilbert_bartoletti-buckridge@yahoo.com | Andersonboro | Active | $225.98 |
Mr. Sammy Armstrong DDS @enola.wisozk | roosevelt.ullrich47@yahoo.com | Normantown | Inactive | $840.35 |
Nicholaus Corwin @carolina.cummerata | amy_block95@hotmail.com | Reginashire | Inactive | $589.88 |
Mr. Micheal O'Conner @earnest47 | anne.lowe53@hotmail.com | Farrellburgh | Active | $1,086.66 |
Rod Ward @kathy.bins21 | lorenza_nolan@yahoo.com | Armaniberg | Inactive | $238.14 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ludie Labadie | jamie72@hotmail.com | Olathe | Inactive | $19.65 |
| Alyssa Rosenbaum | geoffrey.schimmel36@gmail.com | Independence | Active | $1,121.28 |
| Craig Ziemann | tod8@yahoo.com | Maggieberg | Active | $1,045.17 |
| Ada Brakus | talon_orn@yahoo.com | Janessastead | Active | $618.99 |
| Athena Runolfsdottir | joan51@gmail.com | South Alicia | Active | $537.91 |
| Total | $3,343.00 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cassandre Jenkins | nyah_feest@yahoo.com | Burleson | Inactive | $1,033.46 |
| Alfred Johnston II | lila_ohara44@yahoo.com | Funkburgh | Active | $115.52 |
| Lilliana Tillman | tyson.will17@yahoo.com | Bayamon | Active | $1,044.89 |
| Era Little | minerva.gerhold71@gmail.com | Davionshire | Active | $730.50 |
| Dr. Candida Goyette | sidney63@gmail.com | Harriston | Active | $257.84 |
| Total | $3,182.21 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Colleen Jacobi | pearl.rau@gmail.com | New Desiree | Inactive | $358.69 |
| Austin Conn | emilio_renner42@hotmail.com | North Annaview | Inactive | $500.01 |
| Gwendolyn Shields | felipe_gutmann85@gmail.com | Lake Juanaview | Active | $99.97 |
| Mr. Idell Schmitt | shaun68@hotmail.com | Lake Sherry | Active | $1,067.42 |
| Randall Yundt | ashley.dooley5@hotmail.com | Paulfield | Inactive | $931.20 |
| Total | $2,957.29 | |||
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 | ||
|---|---|---|---|---|---|
| Gennaro Rice | erika_little53@hotmail.com | North Irwin | Active | $1,145.35 | |
| Judith Mosciski | mindy67@yahoo.com | Port Tatumchester | Active | $952.74 | |
| Margie O'Reilly | tonya70@gmail.com | East Sheri | Inactive | $1,039.98 | |
| Jerry Runolfsson | sienna_tillman@yahoo.com | Muhammadfurt | Inactive | $10.47 | |
| Janis Towne V | mae.pfannerstill@gmail.com | Port Loyceside | Inactive | $663.74 | |
| Total | $3,812.28 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Liana Bosco-Olson DVM | elijah.west@hotmail.com | Tamistad | Active | $730.78 | |
| Garry Kulas | clinton.okon91@hotmail.com | Kansas City | Inactive | $531.26 | |
| Concepcion Hackett | clay32@hotmail.com | Luciafort | Active | $971.28 | |
| Shari Schaefer | angela_parker64@gmail.com | Anderson | Active | $715.64 | |
| Hershel Collins | kristen.gislason68@yahoo.com | Devincester | Inactive | $779.36 | |
| Total | $3,728.32 | ||||
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 | |
|---|---|---|---|---|
| Arne Price | marisa_predovic64@gmail.com | Kenner | Active | $1,118.44 |
| Ignacio Walter | juwan.turcotte87@gmail.com | South Tommyport | Inactive | $488.85 |
| Billie Kunde V | simon_dietrich35@yahoo.com | West Ransomtown | Active | $1,064.55 |
| Irma Renner-Konopelski | keith.reichert38@gmail.com | South Pablo | Inactive | $540.98 |
| Elena Mueller | clara_hansen@yahoo.com | West Moniquefort | Inactive | $721.80 |
| Thomas Huel | eddie61@yahoo.com | Palm Harbor | Inactive | $724.67 |
| Miss Alicia Dach | dwight1@hotmail.com | East Bartholomefurt | Active | $488.60 |
| Hayden Kozey | neha.watsica@hotmail.com | Marksmouth | Active | $208.84 |
| Sydnie Casper | jeff.mayert14@hotmail.com | Spinkaport | Active | $837.29 |
| Ferne Kertzmann | karina.brown@gmail.com | Lake Brandy | Inactive | $613.98 |
| Vernie Bosco | alvin12@yahoo.com | Lillieworth | Active | $315.91 |
| Nadine Ullrich Sr. | meta28@yahoo.com | O'Connermouth | Active | $758.84 |
| Sheryl Conn Jr. | lynne_koepp52@yahoo.com | North Filomenaville | Active | $144.71 |
| Sibyl Greenholt-Feil | arthur76@hotmail.com | Victoria | Active | $39.06 |
| Isobel Breitenberg | lester_konopelski38@yahoo.com | Melissatown | Active | $1,133.72 |
| Total | $9,200.24 | |||
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 |