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 | $773.07 |
| INV002 | Pending | PayPal | $785.78 |
| INV003 | Paid | PayPal | $619.23 |
| INV004 | Paid | Bank Transfer | $801.08 |
| INV005 | Pending | Bank Transfer | $395.04 |
| INV006 | Unpaid | Bank Transfer | $797.60 |
| INV007 | Paid | Credit Card | $495.01 |
| Total | $4,666.81 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kristofer Kshlerin | Chief Division Strategist | kristofer_kshlerin46@hotmail.com | Member | |
| Grayce Yundt | Dynamic Response Director | grayce.yundt17@yahoo.com | Member | |
| Alfreda Abbott | Internal Factors Designer | alfreda.abbott31@gmail.com | Member | |
| Monty DuBuque | Dynamic Assurance Director | monty_dubuque90@gmail.com | Admin | |
| Maryam Tremblay | Regional Paradigm Assistant | maryam_tremblay15@gmail.com | Viewer | |
| Keira Wuckert | Chief Factors Manager | keira_wuckert@hotmail.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 |
|---|---|---|
Berry Flatley Direct Response Orchestrator berry.flatley80@yahoo.com | Viewer | |
Mollie Heaney Dynamic Mobility Agent mollie.heaney9@hotmail.com | Admin | |
Anita Larson International Paradigm Analyst anita_larson65@gmail.com | Member | |
Dianna Romaguera Human Markets Director dianna_romaguera@hotmail.com | Admin | |
Griffin Oberbrunner Product Operations Planner griffin_oberbrunner90@yahoo.com | Viewer | |
Treva Keeling Direct Intranet Administrator treva.keeling@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Julian Kozey Product Usability Officer julian_kozey@gmail.com | Member | |
Gudrun Heller Corporate Accounts Coordinator gudrun_heller11@gmail.com | Member | |
Bud Ullrich Lead Operations Developer bud.ullrich69@gmail.com | Viewer | |
Neil Franey Product Identity Developer neil_franey@yahoo.com | Viewer | |
Matilda West Principal Response Producer matilda.west@hotmail.com | Admin | |
Baron Abernathy Lead Quality Facilitator baron.abernathy24@gmail.com | Member | |
Santina Tremblay Senior Security Coordinator santina.tremblay76@yahoo.com | Viewer | |
Shanna Schowalter-Carter National Markets Designer shanna_schowalter-carter48@hotmail.com | Viewer | |
Peggie Gorczany Principal Optimization Executive peggie.gorczany@yahoo.com | Admin | |
Jolie Shanahan International Applications Agent jolie_shanahan@gmail.com | Admin | |
Lavon Hyatt Chief Assurance Executive lavon.hyatt30@yahoo.com | Member | |
Fernando Bosco Central Identity Executive fernando.bosco73@gmail.com | Member | |
Abbigail Lakin-McGlynn Legacy Security Designer abbigail.lakin-mcglynn@gmail.com | Admin | |
Emanuel DuBuque Human Communications Officer emanuel_dubuque58@gmail.com | Admin | |
Mekhi Windler Future Division Administrator mekhi.windler29@hotmail.com | Admin | |
Aurore O'Connell Internal Brand Agent aurore_oconnell@gmail.com | Viewer | |
Cordia Boyer Principal Directives Supervisor cordia_boyer40@yahoo.com | Member | |
Madge Lang Forward Web Architect madge_lang@hotmail.com | Member | |
Raegan Rice International Factors Developer raegan.rice@hotmail.com | Viewer | |
Chesley Tromp Customer Research Designer chesley_tromp@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 | |
|---|---|---|---|---|
| Miguel Leuschke | lloyd3@gmail.com | North Maxwellport | Active | $696.78 |
| Mr. Jose Mann | meaghan.vonrueden1@gmail.com | Waltertown | Inactive | $156.71 |
| Dr. John Crona | kiera_haley54@gmail.com | North Emilieboro | Inactive | $625.55 |
| Marshall Reynolds | arturo.green63@yahoo.com | Melodyside | Inactive | $880.99 |
| Barbara Bins | rodrick.hegmann38@gmail.com | Blaine | Inactive | $983.61 |
| Total | $3,343.64 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Neil Stark @sigrid_senger | dock_king@gmail.com | Bauchland | Active | $546.70 |
Irene King @jon.halvorson59 | eileen17@hotmail.com | East Aurelio | Inactive | $363.74 |
Myrtle Gislason DDS @murl.wuckert20 | maximillian95@hotmail.com | Santee | Inactive | $473.50 |
Alison Howe @devan_borer | fletcher_hammes@gmail.com | Barryport | Inactive | $536.42 |
Jack Schamberger @shany_corwin | kian_hills@yahoo.com | Johnsonworth | Inactive | $922.31 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Opal Quitzon-Maggio | mikel54@yahoo.com | Bernierburgh | Active | $677.11 |
| Jan Streich | kaycee.rutherford@yahoo.com | Port Kellyside | Inactive | $697.58 |
| Edwin Halvorson Jr. | bret_wunsch@gmail.com | Williamsonfort | Inactive | $482.61 |
| Allen Kilback | jonatan65@yahoo.com | Port Enricoborough | Inactive | $1,170.25 |
| Jo Kohler | chloe_ortiz@yahoo.com | New Avery | Inactive | $167.80 |
| Total | $3,195.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Erick Bayer | stanley_harber@gmail.com | Kubstead | Inactive | $885.79 |
| Billie Jenkins | virgil2@yahoo.com | Fairfield | Inactive | $195.38 |
| Gordon Jenkins-King III | giovani84@yahoo.com | Williamsonburgh | Inactive | $553.86 |
| Krystal Kozey | reva.kshlerin@yahoo.com | Bozeman | Active | $512.39 |
| Sheri McClure | ceasar_von@yahoo.com | East Jan | Inactive | $739.34 |
| Total | $2,886.76 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Joseph Gutkowski | earnest47@yahoo.com | Fort Bruce | Inactive | $1,056.38 |
| Malcolm Swaniawski-Mann | amos96@hotmail.com | Einotown | Inactive | $954.41 |
| Jan Hagenes | cristina.beahan76@hotmail.com | Altadena | Active | $597.29 |
| Jaime Schuppe | ardella.schaden@gmail.com | Adancester | Active | $172.13 |
| Clay Abshire-Donnelly | joan_kihn25@gmail.com | West Ibrahim | Inactive | $366.96 |
| Total | $3,147.17 | |||
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 | ||
|---|---|---|---|---|---|
| Gordon Kilback | ray.stiedemann93@hotmail.com | Abernathytown | Active | $1,042.63 | |
| Vera Rice | hope_mueller@yahoo.com | Fort Abelardo | Inactive | $743.95 | |
| Fannie Stark III | garrett_emard@gmail.com | Hillsboro | Active | $657.66 | |
| Luther Armstrong | era_mcclure9@yahoo.com | East Jackelineland | Active | $772.74 | |
| Mrs. Marcia Macejkovic | jimmy.hirthe93@yahoo.com | Pierrebury | Active | $1,152.85 | |
| Total | $4,369.83 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Katherine Gulgowski | lauryn_trantow46@hotmail.com | Larsonberg | Active | $121.42 | |
| Dr. Jermaine Steuber | haven.daniel@gmail.com | Santa Clara | Inactive | $787.90 | |
| Edgar Hyatt | ramiro_mosciski@gmail.com | Lake Buck | Inactive | $759.29 | |
| Blanche Kuphal | ciara76@gmail.com | Fort Dellmouth | Inactive | $773.65 | |
| David Bashirian | emilie95@gmail.com | East Boydcester | Inactive | $669.95 | |
| Total | $3,112.21 | ||||
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 | |
|---|---|---|---|---|
| David Rowe DDS | corine50@hotmail.com | Rohanstead | Inactive | $59.35 |
| Kathryn Stroman | issac_keeling@yahoo.com | Fort Salvador | Inactive | $437.12 |
| Beulah Padberg | tyrell.jast@gmail.com | South Cletaworth | Active | $236.27 |
| Dr. Josephine Johnston | reymundo62@hotmail.com | Cheektowaga | Active | $451.91 |
| Lorena Jaskolski Sr. | jensen.flatley@yahoo.com | Blacksburg | Active | $897.81 |
| Kellie Rohan | green_kris31@hotmail.com | Fort Deondrecester | Active | $282.15 |
| Ken Hettinger | treva92@yahoo.com | Doyleland | Active | $465.50 |
| Laverne Senger | destiny_kling@hotmail.com | Pfeffermouth | Active | $486.42 |
| Byron Fahey | ashton.friesen84@yahoo.com | South Carlo | Active | $359.97 |
| Sara McLaughlin-Hills | pansy.grady@hotmail.com | Judgefurt | Active | $480.23 |
| Randolph Witting | issac.fisher3@yahoo.com | McClurestad | Inactive | $768.79 |
| Noel Spinka | kolby93@hotmail.com | Lake Kurt | Active | $201.20 |
| Pete Spinka | magdalen.greenholt@yahoo.com | Fort Marc | Active | $998.15 |
| Gustavo Graham | keith64@yahoo.com | Mobile | Active | $665.79 |
| Natasha Stoltenberg | arlie_anderson93@yahoo.com | Raphaelleton | Active | $618.99 |
| Total | $7,409.65 | |||
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 |