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 | Bank Transfer | $722.56 |
| INV002 | Paid | Bank Transfer | $383.86 |
| INV003 | Pending | PayPal | $540.71 |
| INV004 | Pending | Bank Transfer | $248.22 |
| INV005 | Pending | PayPal | $236.23 |
| INV006 | Paid | Bank Transfer | $410.66 |
| INV007 | Paid | PayPal | $535.61 |
| Total | $3,077.85 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Mckenzie Tremblay | Product Intranet Administrator | mckenzie.tremblay@yahoo.com | Viewer | |
| Mozelle Smith | Forward Brand Officer | mozelle.smith50@hotmail.com | Viewer | |
| Payton Lueilwitz | Principal Integration Assistant | payton_lueilwitz48@gmail.com | Viewer | |
| Colton Heidenreich | Product Tactics Strategist | colton.heidenreich35@gmail.com | Admin | |
| Leola Boehm | Customer Creative Producer | leola_boehm37@yahoo.com | Viewer | |
| Claire Mraz | Customer Metrics Consultant | claire_mraz@yahoo.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Tomas Bernier District Interactions Producer tomas_bernier97@hotmail.com | Member | |
Leonor Dach Investor Tactics Consultant leonor.dach@hotmail.com | Admin | |
Rubie Gleichner Central Identity Facilitator rubie.gleichner52@yahoo.com | Admin | |
Callie Volkman Dynamic Group Director callie.volkman86@hotmail.com | Viewer | |
Beth Morar Forward Usability Orchestrator beth_morar@yahoo.com | Viewer | |
Forest Durgan Internal Usability Agent forest.durgan13@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 |
|---|---|---|
Morris Mills Product Marketing Coordinator morris_mills@yahoo.com | Admin | |
Mafalda Hyatt Future Accounts Coordinator mafalda.hyatt13@gmail.com | Viewer | |
Allen Marvin Direct Branding Engineer allen_marvin@gmail.com | Viewer | |
Beatrice Hills Regional Group Associate beatrice.hills19@gmail.com | Viewer | |
Jaquan Walter Direct Accountability Associate jaquan_walter@gmail.com | Member | |
Edward Hansen Chief Accounts Analyst edward_hansen@hotmail.com | Member | |
Alba Murazik Future Response Designer alba_murazik@yahoo.com | Viewer | |
Cordell Kuhn-O'Hara Regional Markets Analyst cordell.kuhn-ohara@gmail.com | Member | |
Aidan Gerlach Principal Mobility Representative aidan.gerlach52@gmail.com | Member | |
Wendell Smith Dynamic Interactions Administrator wendell_smith@yahoo.com | Viewer | |
Maverick Oberbrunner Senior Configuration Manager maverick.oberbrunner@yahoo.com | Admin | |
Dan Harber Forward Configuration Agent dan.harber98@hotmail.com | Member | |
Christ Crona Global Factors Supervisor christ.crona13@hotmail.com | Viewer | |
Jayne Kerluke Product Configuration Planner jayne.kerluke58@gmail.com | Viewer | |
Hector Kassulke Senior Data Producer hector.kassulke50@gmail.com | Viewer | |
Sadie Pouros Product Applications Representative sadie_pouros97@hotmail.com | Member | |
Carey Haag Customer Brand Designer carey_haag@yahoo.com | Admin | |
Santina Von Human Accountability Engineer santina.von3@gmail.com | Viewer | |
Shany Veum Future Data Coordinator shany.veum51@yahoo.com | Member | |
Keshaun Robel Product Functionality Producer keshaun.robel@hotmail.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 | |
|---|---|---|---|---|
| Ollie Cruickshank MD | jarred.mayer@yahoo.com | Mertzboro | Active | $861.25 |
| Yvette Emmerich | akeem.wolf58@hotmail.com | Davisboro | Active | $585.65 |
| Norma O'Keefe | maverick_franecki78@gmail.com | Tinley Park | Inactive | $274.88 |
| Mr. Marc Pacocha Jr. | jon93@hotmail.com | Jonshire | Active | $878.24 |
| Manuel Rolfson | kailyn62@gmail.com | Lake Dominic | Inactive | $500.28 |
| Total | $3,100.30 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Doris Weimann @estefania_rodriguez | marcia_altenwerth@hotmail.com | Grand Rapids | Active | $267.23 |
Victoria Emmerich @bonita_hudson56 | lorenzo_jast26@hotmail.com | Lake Aniya | Inactive | $1,067.02 |
Dr. Gwendolyn Mueller @gwendolyn16 | lynn93@yahoo.com | Raphaellefield | Active | $485.39 |
Traci Barton @anastacio10 | berry.shanahan@hotmail.com | Emmerichboro | Active | $981.74 |
Peggy Runolfsson @madge_heller91 | trycia_witting@yahoo.com | South Herman | Inactive | $895.63 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Louise Littel | marie43@yahoo.com | Wildermanbury | Active | $644.43 |
| Dave Kuphal | lyric_schuppe@hotmail.com | North Nikitatown | Inactive | $1,092.59 |
| Wesley Davis | sadie13@gmail.com | Vidaville | Inactive | $710.12 |
| Jennifer Klocko | alexa.simonis47@hotmail.com | Stillwater | Active | $1,128.08 |
| Phyllis Jenkins | cruz.pagac66@yahoo.com | Roswell | Active | $327.19 |
| Total | $3,902.41 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Clifford Nikolaus | charlotte_metz@gmail.com | South Madgechester | Inactive | $331.29 |
| Annette Bahringer Jr. | mozell.mckenzie54@yahoo.com | Bodeboro | Inactive | $15.18 |
| Miss Elaine Wiza | ayana.padberg@yahoo.com | West Norberto | Active | $480.88 |
| Iris Gutmann | joshua.weber@hotmail.com | New Maeganshire | Active | $39.08 |
| Johnnie Jacobson | filiberto.ratke3@gmail.com | Pansyfield | Inactive | $909.99 |
| Total | $1,776.42 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ernestine Mertz | vito.jaskolski@hotmail.com | Rebashire | Active | $867.77 |
| Dr. Leland Prohaska | lenora.pouros76@hotmail.com | Rempelchester | Active | $144.99 |
| Ira Krajcik | jabari_hilll@gmail.com | Fort Alfonso | Active | $355.82 |
| Laurence Renner | barbara.stoltenberg@hotmail.com | Lenexa | Active | $626.31 |
| Mr. Dean Rohan | ines_batz@hotmail.com | North Marisa | Active | $533.28 |
| Total | $2,528.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 | ||
|---|---|---|---|---|---|
| Miss Hannah Simonis | nayeli_goldner@gmail.com | Port Marionburgh | Inactive | $662.49 | |
| Bobbie Wolf | nickolas.lynch@hotmail.com | Salinas | Active | $287.32 | |
| Guillermo Renner | morton6@yahoo.com | New Delfina | Inactive | $1,013.64 | |
| Marcia Schmitt | marisol78@hotmail.com | West Nicklaus | Active | $1,111.38 | |
| Rodolfo Aufderhar | julian_schmitt@yahoo.com | Rennerside | Active | $771.84 | |
| Total | $3,846.67 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Vivian Fahey | mack.goodwin@gmail.com | Augustton | Active | $282.67 | |
| Lee Hilll | dina9@gmail.com | Brookline | Inactive | $805.52 | |
| Lucille Bogan-Veum PhD | roger_kautzer@yahoo.com | Joyceshire | Inactive | $443.51 | |
| Bobbie Kuhlman | dasia_glover70@yahoo.com | Rhiannonbury | Active | $963.98 | |
| Moses Schulist | elta_legros68@hotmail.com | New Milan | Active | $117.69 | |
| Total | $2,613.37 | ||||
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 | |
|---|---|---|---|---|
| Lynne Aufderhar | leonel.metz@yahoo.com | Nametown | Inactive | $652.62 |
| Terri Schaden | davon33@yahoo.com | Kuphalstad | Active | $707.12 |
| Miss Debbie Buckridge | carolyne56@gmail.com | Aufderharburgh | Active | $883.48 |
| Latoya Torp-Yundt | sallie19@gmail.com | New Evert | Inactive | $586.54 |
| Marta Fay Sr. | alberta19@hotmail.com | North Maryfield | Inactive | $237.14 |
| Bobby Stehr-Wisozk | nikita.howell@gmail.com | Ethantown | Inactive | $93.78 |
| Marc Bernier | hipolito_carter31@hotmail.com | Napa | Active | $959.73 |
| Joyce Jacobs | eldred_rosenbaum@gmail.com | North Matt | Inactive | $687.68 |
| Ella Stiedemann | neal59@yahoo.com | Fort Teresaborough | Inactive | $167.90 |
| Delbert Crist | santina_bednar98@yahoo.com | Aldaton | Active | $1,154.62 |
| Jeannie Crooks | ron53@yahoo.com | Niagara Falls | Active | $625.87 |
| Gregory Monahan | hilario0@gmail.com | Kirstenburgh | Inactive | $1,167.19 |
| Jesse Marks | lucius84@gmail.com | Lilianstad | Active | $754.84 |
| Ramon Wuckert | turner.ebert@gmail.com | Janiyatown | Inactive | $895.33 |
| Amber Turner | marquis_morissette92@yahoo.com | Fort Darenton | Inactive | $969.36 |
| Total | $10,543.20 | |||
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 |