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 | $700.31 |
| INV002 | Pending | Credit Card | $836.57 |
| INV003 | Paid | Bank Transfer | $699.64 |
| INV004 | Paid | PayPal | $417.62 |
| INV005 | Paid | Credit Card | $926.02 |
| INV006 | Unpaid | PayPal | $945.35 |
| INV007 | Pending | Bank Transfer | $599.36 |
| Total | $5,124.87 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Charley Effertz | District Quality Agent | charley_effertz@hotmail.com | Admin | |
| Mariana Lebsack | Corporate Communications Orchestrator | mariana_lebsack35@yahoo.com | Admin | |
| Serenity Cassin | Dynamic Interactions Administrator | serenity_cassin99@yahoo.com | Admin | |
| Nikolas Waters | National Quality Representative | nikolas_waters@hotmail.com | Member | |
| Joe Powlowski | Lead Metrics Producer | joe_powlowski30@gmail.com | Viewer | |
| Marilyne Quitzon | Human Mobility Manager | marilyne_quitzon68@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 |
|---|---|---|
Ramona Connelly Product Functionality Associate ramona.connelly@gmail.com | Member | |
Jamaal Cummerata Forward Marketing Executive jamaal.cummerata@gmail.com | Viewer | |
Graham Reichel Chief Assurance Strategist graham_reichel@hotmail.com | Admin | |
Maribel Franey Legacy Intranet Planner maribel_franey84@gmail.com | Viewer | |
Mercedes Mante Product Infrastructure Agent mercedes_mante@yahoo.com | Viewer | |
Isadore Hirthe Lead Assurance Director isadore.hirthe20@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Carli Kuhn Corporate Communications Director carli.kuhn@yahoo.com | Viewer | |
Vladimir Jakubowski Product Accounts Agent vladimir.jakubowski33@hotmail.com | Viewer | |
Hannah Koss Future Mobility Consultant hannah.koss@hotmail.com | Viewer | |
Kyra White Legacy Markets Producer kyra_white@gmail.com | Viewer | |
Mckenzie Price Principal Program Designer mckenzie_price@yahoo.com | Admin | |
Lacy Lebsack Legacy Implementation Specialist lacy_lebsack18@yahoo.com | Viewer | |
Franz Morar Product Division Officer franz.morar8@gmail.com | Viewer | |
Jewell Rice District Functionality Administrator jewell.rice26@yahoo.com | Admin | |
Emie Schumm Senior Directives Director emie_schumm28@yahoo.com | Member | |
Jennifer Grant Customer Tactics Architect jennifer.grant74@hotmail.com | Viewer | |
Jabari Langosh Customer Operations Engineer jabari.langosh@yahoo.com | Admin | |
Darrell Herman International Configuration Supervisor darrell_herman8@hotmail.com | Admin | |
Shad Powlowski Central Communications Manager shad.powlowski@gmail.com | Viewer | |
Ally Wolff Corporate Accountability Planner ally.wolff@yahoo.com | Member | |
Lenore Zboncak Internal Marketing Architect lenore_zboncak@yahoo.com | Viewer | |
Shaniya Daniel Investor Solutions Planner shaniya_daniel19@gmail.com | Viewer | |
Helmer Smith Senior Response Coordinator helmer.smith42@yahoo.com | Viewer | |
Dereck Cummerata Legacy Data Director dereck_cummerata49@yahoo.com | Admin | |
Shaniya Jenkins Central Factors Representative shaniya.jenkins@hotmail.com | Viewer | |
Cydney Pfeffer-Bruen Chief Division Consultant cydney.pfeffer-bruen@yahoo.com | Member |
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 | |
|---|---|---|---|---|
| Randall Gerhold | marietta_jones47@gmail.com | Pourosville | Active | $1,012.85 |
| Ed Pouros | javonte.blanda64@gmail.com | Port Roscoeview | Inactive | $880.72 |
| Dr. Dennis Hoppe | kristian_johnston79@gmail.com | New Stefan | Inactive | $166.31 |
| Brad Bartoletti-King | larissa_kihn26@gmail.com | New Alechaven | Active | $322.71 |
| Edna Rippin | elna_rau-toy@gmail.com | Friesenberg | Inactive | $1,042.63 |
| Total | $3,425.22 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bernice Cole @fletcher.hoppe-stoltenberg82 | joyce42@hotmail.com | Willberg | Inactive | $699.04 |
Dwayne Beahan @lonie_nikolaus | clemens.considine23@hotmail.com | South Cydney | Inactive | $385.67 |
Laverne Huel @josiah_bailey | percival.kulas98@gmail.com | Port Cadentown | Inactive | $1,126.79 |
Eileen Rath @paris_dubuque | ulises.johns85@hotmail.com | Thielhaven | Active | $804.10 |
Dr. Gilberto Feil @susanna.barrows15 | aisha3@gmail.com | East Mikayla | Active | $610.05 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Stacey Boyle | darby.fritsch19@yahoo.com | Lilyside | Active | $475.33 |
| Carolyn Smitham | wilhelm.cremin97@yahoo.com | Kleinshire | Active | $740.18 |
| Faye Gulgowski MD | fiona_donnelly33@hotmail.com | New Skyla | Inactive | $741.60 |
| Anita Mills | beau21@hotmail.com | Jefferyboro | Inactive | $176.37 |
| Brett Yundt II | agnes22@yahoo.com | Gleasonstad | Inactive | $731.68 |
| Total | $2,865.16 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Earnest Stokes | augustine.bogisich@yahoo.com | Rorystead | Inactive | $483.17 |
| Miss Celia Kuphal | mikayla39@gmail.com | Cassidyfurt | Inactive | $23.94 |
| Josephine Ritchie | mia.hammes17@gmail.com | South Malvinaburgh | Active | $1,004.30 |
| Kim Kling | allene_lemke2@hotmail.com | Redlands | Active | $1,125.27 |
| Verna Langosh | rubie83@hotmail.com | Ziemecester | Active | $810.51 |
| Total | $3,447.19 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cody Haley DDS | sabina_farrell31@yahoo.com | Centennial | Active | $1,020.05 |
| Lori Hoppe | archibald38@gmail.com | Tiffanystad | Active | $431.81 |
| Kristopher Haag | alphonso.rath@yahoo.com | East Adelbertberg | Active | $279.11 |
| Marta Hoeger-Powlowski | roosevelt_hettinger@yahoo.com | Azusa | Active | $214.93 |
| Courtney Towne | noelia.bashirian-corwin@gmail.com | Burdettebury | Inactive | $1,141.95 |
| Total | $3,087.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 | ||
|---|---|---|---|---|---|
| Spencer Keeling | rylee.nienow@gmail.com | East Aditya | Active | $9.78 | |
| Mrs. Leslie Upton | chelsie_raynor35@gmail.com | Arden-Arcade | Active | $138.05 | |
| Lela Kirlin DDS | lorine.erdman65@hotmail.com | West Gretchenmouth | Active | $418.96 | |
| Roxanne McClure | johathan.runolfsson52@yahoo.com | Stammland | Inactive | $1,016.63 | |
| Lamar Dickinson | orville_little46@yahoo.com | Green Bay | Inactive | $508.86 | |
| Total | $2,092.28 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dr. Jake Buckridge | tatyana.bayer49@hotmail.com | Lake Tristian | Active | $1,152.70 | |
| Regina Stoltenberg Sr. | patsy_marquardt55@gmail.com | Port Seth | Active | $783.72 | |
| Jeffery Schuster | lonnie.blanda@hotmail.com | Bartontown | Inactive | $625.21 | |
| Milton Crist | torrance25@yahoo.com | Davidhaven | Inactive | $995.85 | |
| Joann Marks | fern_klocko@yahoo.com | South Milford | Active | $946.49 | |
| Total | $4,503.97 | ||||
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 | |
|---|---|---|---|---|
| Mr. Aaron Kessler | katheryn.gutkowski88@hotmail.com | Fort Dylan | Inactive | $56.85 |
| Gregory Mante DDS | ettie.buckridge@hotmail.com | Murphyfort | Active | $110.07 |
| Blanca Labadie | jerad48@gmail.com | Port Zackerytown | Active | $407.36 |
| Darrel Lesch | roslyn.harvey@gmail.com | New Marioborough | Active | $529.36 |
| Mr. Toby Bruen | geo_stark71@gmail.com | South Onie | Active | $1,199.28 |
| Darren Franey | hayley_toy@gmail.com | East Kenya | Active | $444.34 |
| Colleen Gerlach | eleanora.ortiz68@gmail.com | Hettieborough | Active | $29.48 |
| Alton Ortiz V | milton.pollich-pollich@hotmail.com | Lake Dejahfield | Active | $272.56 |
| Mr. Maurice Abshire | alfredo_haley19@gmail.com | North Mercedesville | Inactive | $180.98 |
| Joy Bechtelar | rey17@gmail.com | Johathanstead | Inactive | $464.07 |
| Jack Beer | meredith56@gmail.com | Port Lexi | Inactive | $58.26 |
| Bobby Goodwin Jr. | katharina_hackett@hotmail.com | Port Jose | Active | $25.18 |
| Juanita Little | alf58@hotmail.com | Lake Stephanieland | Active | $91.51 |
| Karla Runolfsson | stanley.schinner@hotmail.com | Port Rebeca | Active | $845.26 |
| Velma Block | lucile10@gmail.com | New Paris | Active | $915.03 |
| Total | $5,629.59 | |||
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 |