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 | $812.21 |
| INV002 | Pending | Credit Card | $867.24 |
| INV003 | Paid | Bank Transfer | $678.63 |
| INV004 | Paid | Bank Transfer | $458.87 |
| INV005 | Paid | Credit Card | $868.46 |
| INV006 | Unpaid | PayPal | $472.41 |
| INV007 | Paid | PayPal | $518.37 |
| Total | $4,676.19 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Libbie Lind-Cartwright | Customer Branding Planner | libbie.lind-cartwright34@yahoo.com | Admin | |
| Jerome Kemmer | Human Identity Specialist | jerome.kemmer46@yahoo.com | Member | |
| Roberta Block | Senior Markets Assistant | roberta.block37@hotmail.com | Admin | |
| Tiffany Zulauf | Corporate Response Executive | tiffany.zulauf@gmail.com | Admin | |
| Maya Lueilwitz | International Interactions Designer | maya.lueilwitz@gmail.com | Viewer | |
| Vernice Walsh | Product Configuration Strategist | vernice_walsh35@hotmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Suzanne Weber Central Paradigm Representative suzanne.weber@gmail.com | Admin | |
Owen Ernser Future Research Executive owen.ernser@yahoo.com | Admin | |
Evert Tromp Future Creative Strategist evert_tromp@gmail.com | Member | |
Thaddeus Klocko Senior Identity Associate thaddeus_klocko@hotmail.com | Member | |
Hollis Rempel Product Infrastructure Technician hollis_rempel18@yahoo.com | Viewer | |
Kristin Bahringer Internal Security Orchestrator kristin_bahringer65@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Misty Bogan Central Configuration Supervisor misty_bogan@yahoo.com | Member | |
Dora Volkman Regional Interactions Architect dora_volkman37@gmail.com | Member | |
Nicholas Jakubowski Human Marketing Agent nicholas.jakubowski50@hotmail.com | Admin | |
Ross Haley Global Intranet Facilitator ross.haley@hotmail.com | Admin | |
Hector Waelchi Legacy Integration Engineer hector_waelchi@hotmail.com | Member | |
Vanessa Adams Product Data Specialist vanessa_adams58@gmail.com | Viewer | |
Laura Harvey International Data Technician laura_harvey@hotmail.com | Viewer | |
Evans Reynolds District Data Supervisor evans.reynolds33@hotmail.com | Viewer | |
Mack Moen Human Program Coordinator mack_moen57@gmail.com | Viewer | |
Rudy Harvey Future Marketing Associate rudy_harvey@hotmail.com | Admin | |
Ruby Denesik International Operations Agent ruby.denesik@gmail.com | Member | |
Rosie Cronin Corporate Integration Director rosie.cronin@hotmail.com | Member | |
Kris Franey Customer Research Orchestrator kris_franey52@hotmail.com | Admin | |
Birdie Sipes Central Data Facilitator birdie_sipes37@gmail.com | Viewer | |
Louisa Cassin Forward Factors Specialist louisa_cassin89@yahoo.com | Member | |
Whitney Greenholt-Abernathy Global Response Director whitney.greenholt-abernathy84@hotmail.com | Admin | |
Korey Schuppe Lead Response Producer korey_schuppe41@hotmail.com | Admin | |
Joshua Wyman Global Integration Facilitator joshua.wyman48@gmail.com | Member | |
Dallin Maggio International Division Developer dallin.maggio27@hotmail.com | Admin | |
Clyde Marks Investor Interactions Specialist clyde.marks@gmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Catharine Lehner | joseph_corwin51@yahoo.com | Antoniachester | Active | $1,122.24 |
| James Mayer | sherwood75@yahoo.com | Immanuelshire | Inactive | $134.69 |
| Kale Stroman | esperanza_rice@gmail.com | Enterprise | Inactive | $1,059.48 |
| Maryann Champlin | lillian60@hotmail.com | Herminioport | Active | $390.69 |
| Freda Hermiston | frederick.hilpert@hotmail.com | Santa Ana | Inactive | $1,129.28 |
| Total | $3,836.38 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Elmore Murray-Goodwin @roland_walsh | yvonne_little6@hotmail.com | Sherichester | Inactive | $102.50 |
Rachel Jerde @daphne71 | elisa_mayert58@hotmail.com | New Leila | Active | $1,103.13 |
Miss Destany Heller @rickey87 | gabriel58@gmail.com | Mullerbury | Active | $891.36 |
Malcolm Klein @jerod_jones1 | daisy.welch99@gmail.com | Delphinecester | Active | $1,012.28 |
Glen Wilkinson @shany_marquardt | naomi.will56@hotmail.com | East Bryanbury | Inactive | $178.51 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ronny Jerde | ona78@hotmail.com | Vandervortville | Inactive | $1,029.47 |
| Don Emmerich | elsa76@gmail.com | Lake Mertie | Inactive | $501.92 |
| Delia Lowe | elizabeth_emmerich@yahoo.com | Schummworth | Active | $924.19 |
| Petra Klocko | winifred59@gmail.com | Gutmannfort | Active | $777.66 |
| Misty Langosh V | dayne.kertzmann50@yahoo.com | Hialeah | Active | $313.42 |
| Total | $3,546.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jed Trantow | bethel89@gmail.com | Port Frankie | Active | $244.87 |
| Monroe Hagenes | mikayla.hoeger84@gmail.com | Hirthefurt | Inactive | $521.19 |
| Lola Conroy | colin87@gmail.com | Dooleycester | Active | $502.11 |
| Mr. George Sipes | erma_murray@yahoo.com | Crystalport | Active | $1,113.26 |
| Madeline Crona | brayan.bartell42@gmail.com | Gusikowskibury | Inactive | $205.10 |
| Total | $2,586.53 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eriberto Grimes | charlene_gislason30@yahoo.com | Gloverville | Active | $176.92 |
| Mayra Parker-Aufderhar PhD | ada84@yahoo.com | Lacey | Inactive | $397.11 |
| Brad Kessler | dawson_langosh@hotmail.com | North Gary | Inactive | $53.84 |
| Lucius McGlynn | brandi_gutmann99@hotmail.com | East Destiney | Inactive | $881.28 |
| Angeline Ebert | marsha27@hotmail.com | Levittown | Inactive | $130.08 |
| Total | $1,639.23 | |||
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 | ||
|---|---|---|---|---|---|
| Heather Hickle | anabelle.kunde21@gmail.com | Tallahassee | Inactive | $714.08 | |
| Rudolph Grimes | melissa.windler@gmail.com | New Brando | Inactive | $933.73 | |
| Flora Hartmann | rebekah_braun@yahoo.com | Erichfort | Inactive | $1,113.08 | |
| Paulette Nienow-Cassin | roxanne.white@hotmail.com | Fort Marciaboro | Inactive | $481.79 | |
| Gabriel Hane V | laron_roberts@yahoo.com | Schinnerport | Inactive | $1,072.93 | |
| Total | $4,315.61 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Winnifred Ward | esther_dickinson95@yahoo.com | Fountain Valley | Inactive | $830.27 | |
| Jeffrey Casper | horace_mohr@gmail.com | Ceres | Inactive | $1,075.56 | |
| Aileen Reynolds | rickey.spinka30@yahoo.com | Lake Sonya | Inactive | $435.74 | |
| Corbin Sanford | joshuah34@hotmail.com | Antoninaville | Active | $607.87 | |
| Jesse Kerluke-Bauch | joey90@hotmail.com | Fort Thomas | Active | $1,048.29 | |
| Total | $3,997.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 | |
|---|---|---|---|---|
| Devyn Turcotte | mallory_maggio@gmail.com | Reneefurt | Active | $412.55 |
| Mathilde Schultz | joan_effertz69@gmail.com | Emmettshire | Inactive | $1,118.45 |
| Holly O'Connell | ottilie18@hotmail.com | Thornton | Inactive | $954.77 |
| Aaron Nolan | cyrus.spinka45@hotmail.com | Pine Bluff | Active | $1,062.41 |
| Ruthie Balistreri | raquel_luettgen93@gmail.com | West Jimmyborough | Inactive | $607.20 |
| Lennie Wuckert | gustavo.cartwright96@hotmail.com | Pollichstad | Inactive | $1,046.79 |
| Sherri Hills DVM | nya.cronin@hotmail.com | East Issacside | Inactive | $447.05 |
| Gina Corwin | moses_ohara@hotmail.com | Kerlukeboro | Inactive | $231.42 |
| Mrs. Jamal Gerlach | ali98@gmail.com | Larsonland | Active | $1,141.43 |
| Nicola Kunze | karen_boyer@gmail.com | Stantonfurt | Inactive | $794.55 |
| Kacie Harris | elaine_paucek@gmail.com | Kassulkeworth | Active | $836.87 |
| Joanny Padberg-Sporer | trent_wiegand@gmail.com | East Isabellaton | Active | $410.75 |
| Harvey Upton | ransom31@yahoo.com | Nashua | Active | $355.92 |
| Cade Streich I | adriel_lesch81@hotmail.com | Nakiaborough | Inactive | $1,075.60 |
| Ana Block I | jonas_schimmel55@gmail.com | Fort Tommiefurt | Inactive | $1,163.05 |
| Total | $11,658.81 | |||
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 |