Components
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 | $808.24 |
| INV002 | Paid | Credit Card | $662.35 |
| INV003 | Paid | PayPal | $882.47 |
| INV004 | Paid | Bank Transfer | $586.55 |
| INV005 | Pending | PayPal | $570.98 |
| INV006 | Unpaid | Bank Transfer | $809.89 |
| INV007 | Unpaid | Credit Card | $324.79 |
| Total | $4,645.27 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Alexandrea Turcotte | Customer Assurance Supervisor | alexandrea_turcotte@gmail.com | Viewer | |
| Stefan Sipes | Lead Web Designer | stefan.sipes@hotmail.com | Member | |
| Patricia Crist | Central Usability Planner | patricia.crist@gmail.com | Member | |
| Cecil Bartoletti | Customer Division Representative | cecil.bartoletti47@yahoo.com | Member | |
| Kristie Leuschke | Regional Intranet Liaison | kristie.leuschke65@gmail.com | Member | |
| Catherine Stanton | Dynamic Integration Administrator | catherine_stanton26@hotmail.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 |
|---|---|---|
Charlie Tromp Internal Accounts Consultant charlie.tromp@gmail.com | Admin | |
Angela Wolff District Creative Administrator angela_wolff65@yahoo.com | Viewer | |
Misty Leuschke-Skiles Central Assurance Specialist misty.leuschke-skiles@yahoo.com | Admin | |
Sylvester Altenwerth District Communications Agent sylvester_altenwerth@gmail.com | Member | |
Hector Upton Global Quality Technician hector.upton2@gmail.com | Member | |
Lon Nolan Future Program Consultant lon.nolan@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Elijah Goldner International Data Assistant elijah_goldner68@yahoo.com | Viewer | |
Vesta Cormier International Brand Orchestrator vesta_cormier@hotmail.com | Viewer | |
Eldon O'Kon District Assurance Technician eldon_okon45@yahoo.com | Admin | |
Julio Harris Lead Research Designer julio.harris68@hotmail.com | Admin | |
Sarai Torp-Durgan Central Operations Facilitator sarai.torp-durgan41@hotmail.com | Admin | |
Ladarius Grimes Forward Infrastructure Associate ladarius.grimes59@gmail.com | Member | |
Kallie Goodwin Chief Directives Analyst kallie.goodwin@hotmail.com | Member | |
Seamus Fadel Corporate Group Technician seamus_fadel@hotmail.com | Member | |
Roxanne Spinka Principal Division Representative roxanne.spinka34@hotmail.com | Viewer | |
Evan Quigley-Spencer Senior Markets Planner evan.quigley-spencer@yahoo.com | Admin | |
Vicky Mann International Division Executive vicky.mann@gmail.com | Member | |
Amos Lind Legacy Quality Coordinator amos_lind9@hotmail.com | Admin | |
Tatyana Walker Senior Identity Planner tatyana_walker43@hotmail.com | Admin | |
Agnes Christiansen Central Response Technician agnes.christiansen48@gmail.com | Admin | |
Madie Lang Chief Accountability Associate madie_lang90@yahoo.com | Viewer | |
Alfred Walker Internal Program Developer alfred.walker@hotmail.com | Member | |
Elijah Schmitt Dynamic Applications Producer elijah_schmitt81@gmail.com | Viewer | |
Lambert White Regional Solutions Supervisor lambert_white51@gmail.com | Viewer | |
Delbert Macejkovic Internal Infrastructure Technician delbert_macejkovic@gmail.com | Member | |
Justus Schaefer Dynamic Optimization Executive justus.schaefer@gmail.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 | |
|---|---|---|---|---|
| Susie Dietrich | javier_boehm33@gmail.com | North Roosevelt | Inactive | $450.29 |
| Frederic Schmeler | macey97@gmail.com | Jacksonfurt | Inactive | $61.18 |
| Emily Hermiston | lindsay37@gmail.com | Florin | Active | $1,085.16 |
| Mrs. Myrtle Bednar | katrina94@yahoo.com | North Bernard | Inactive | $638.08 |
| Mr. Andre Prosacco | caroline_hamill78@hotmail.com | Lake Lynette | Inactive | $208.03 |
| Total | $2,442.74 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Javon Kulas Sr. @briana_cole | edward.littel@hotmail.com | Hamillland | Inactive | $1,077.00 |
Isom Gislason @norman8 | rebekah.kemmer94@gmail.com | New York | Active | $572.18 |
Dr. Kaela Blanda @dan38 | amya.weimann@gmail.com | North Melodytown | Active | $776.77 |
Natasha Bogisich @lilla8 | david.cremin@gmail.com | Ornview | Active | $1,054.04 |
Cedric Rosenbaum @ashtyn_renner0 | cassandra_rogahn88@gmail.com | St. Joseph | Inactive | $867.68 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Carroll Mayert | alfred_collins@gmail.com | South Diannaworth | Active | $182.62 |
| Miss Jeanne Bauch | nicolette.hoeger@yahoo.com | Lake Charley | Active | $660.30 |
| Nelson Hettinger | margarita.monahan@yahoo.com | Kannapolis | Active | $760.27 |
| Kale Lynch | mae_ledner89@gmail.com | West Haven | Active | $998.12 |
| Tomas Berge | lydia57@yahoo.com | Hannahborough | Active | $639.44 |
| Total | $3,240.75 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hershel Abbott | raven28@yahoo.com | Devontehaven | Inactive | $376.50 |
| Mrs. Ida Daniel | rose12@yahoo.com | East Joseph | Inactive | $498.01 |
| Ms. Sven Lesch | melody.quigley-langworth16@hotmail.com | Noeliacester | Active | $646.41 |
| Dewey Satterfield-Gorczany | deron_balistreri62@gmail.com | Kettering | Inactive | $296.89 |
| George Champlin | gabrielle.kub21@yahoo.com | Kamrenberg | Active | $752.84 |
| Total | $2,570.65 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Theresa Marquardt | mario_smitham51@yahoo.com | Reneville | Inactive | $1,192.30 |
| Alexandre Heller | yesenia_howe@yahoo.com | Port Mariannaland | Active | $216.89 |
| Gilberto Oberbrunner IV | chelsey_feeney74@yahoo.com | Larkinbury | Active | $577.25 |
| Sophia Balistreri | dion70@gmail.com | Maple Grove | Inactive | $192.02 |
| Mr. Jeremiah Kemmer | oleta_franey@yahoo.com | Fort Clyde | Active | $155.21 |
| Total | $2,333.67 | |||
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 | ||
|---|---|---|---|---|---|
| Jimmie Balistreri | maddison_mayer@hotmail.com | Shawnee | Inactive | $903.63 | |
| Rodney Thiel | edwin.bartoletti@hotmail.com | Fort Sophia | Active | $182.73 | |
| Christy Lynch | lucienne86@hotmail.com | Kovacekview | Inactive | $878.44 | |
| Dennis Stark | darius.oconnell@gmail.com | Potomac | Active | $1,129.52 | |
| Mr. Raina Casper | juan.metz-grady@hotmail.com | Kingmouth | Active | $669.39 | |
| Total | $3,763.71 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Phil Kunde | eugene37@yahoo.com | Bartonmouth | Inactive | $221.52 | |
| Mrs. Mohammed Friesen | pauline.wunsch@yahoo.com | New Bryan | Active | $716.48 | |
| Mozelle Kuhic | jesse_bins44@yahoo.com | Fort Jaydon | Active | $870.42 | |
| Clyde Stehr III | oliver_adams96@gmail.com | Jaskolskiton | Inactive | $821.59 | |
| Greta Beatty | hazel.bashirian82@yahoo.com | Port Vernberg | Inactive | $689.72 | |
| Total | $3,319.73 | ||||
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 | |
|---|---|---|---|---|
| Taurean Rohan | andre50@hotmail.com | North Emma | Active | $943.26 |
| Lora Champlin | freeman8@hotmail.com | New Margarita | Inactive | $442.47 |
| Bettie Haley | adrienne_kuvalis41@yahoo.com | Kunzeport | Inactive | $228.86 |
| Kurtis Herzog | winnifred.boyle47@gmail.com | West Kiley | Inactive | $291.64 |
| Dr. Greg Rohan | carolyn_carroll@hotmail.com | Elyria | Active | $861.04 |
| Adolphus Ziemann | britney39@hotmail.com | North Charleston | Inactive | $994.68 |
| Luther Rippin-Jast | annamae34@hotmail.com | West Hailiefort | Active | $294.48 |
| Anya Ward | noe.bernier72@gmail.com | West Sheldonside | Inactive | $956.35 |
| Isaac Strosin | jillian_mante@yahoo.com | Gleasonbury | Inactive | $634.30 |
| Giuseppe Jacobi | leonora_dooley@gmail.com | Pablomouth | Active | $757.70 |
| Kevon Klocko II | danny94@gmail.com | New Ricardofurt | Inactive | $647.31 |
| Fermin Bosco | mattie_bednar@yahoo.com | South Eleanorhaven | Inactive | $1,030.84 |
| Claudia Gutkowski-Altenwerth | breanna.lueilwitz34@yahoo.com | Okunevaland | Active | $330.24 |
| Myrl Konopelski | bailey_bailey76@yahoo.com | Lake Camillefort | Inactive | $394.33 |
| Rufus Runte | rochelle.glover@yahoo.com | New Clydehaven | Active | $633.36 |
| Total | $9,440.86 | |||
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 |