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 | Unpaid | Credit Card | $690.42 |
| INV002 | Pending | Credit Card | $240.16 |
| INV003 | Unpaid | Bank Transfer | $393.26 |
| INV004 | Pending | Credit Card | $825.16 |
| INV005 | Unpaid | Bank Transfer | $561.58 |
| INV006 | Paid | Credit Card | $677.71 |
| INV007 | Unpaid | PayPal | $762.03 |
| Total | $4,150.32 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rachael Bayer | Internal Mobility Developer | rachael_bayer@gmail.com | Viewer | |
| Florine Lesch | Investor Quality Manager | florine_lesch51@yahoo.com | Viewer | |
| Maxime Abbott | Dynamic Implementation Officer | maxime_abbott31@hotmail.com | Admin | |
| Danny Kemmer | Legacy Operations Technician | danny.kemmer@yahoo.com | Viewer | |
| Reed Lowe | Direct Creative Strategist | reed_lowe42@yahoo.com | Admin | |
| Ervin Bode-Rolfson | Direct Optimization Strategist | ervin.bode-rolfson24@yahoo.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 |
|---|---|---|
Prudence Rodriguez District Response Agent prudence_rodriguez@gmail.com | Member | |
Caleigh McGlynn-Volkman Legacy Tactics Producer caleigh_mcglynn-volkman52@hotmail.com | Member | |
Marlene Gusikowski Human Functionality Producer marlene_gusikowski70@gmail.com | Admin | |
Wellington Wolf Future Directives Planner wellington.wolf19@gmail.com | Admin | |
Jany Lynch Principal Intranet Assistant jany_lynch32@hotmail.com | Admin | |
Jacqueline McLaughlin Principal Program Associate jacqueline.mclaughlin@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 |
|---|---|---|
Muriel Lebsack Global Usability Specialist muriel.lebsack@gmail.com | Member | |
Julian Will Central Branding Liaison julian.will16@yahoo.com | Viewer | |
Christopher Kris Principal Paradigm Specialist christopher_kris@yahoo.com | Member | |
Morgan Christiansen Investor Intranet Architect morgan_christiansen@hotmail.com | Member | |
Eliza Gusikowski Lead Tactics Specialist eliza_gusikowski85@hotmail.com | Viewer | |
Jesse Block Forward Directives Officer jesse.block75@hotmail.com | Admin | |
Joann Hartmann Legacy Functionality Agent joann_hartmann5@gmail.com | Viewer | |
Sam Gibson Human Intranet Manager sam_gibson90@gmail.com | Member | |
Geraldine Hessel-Gerlach Human Directives Executive geraldine.hessel-gerlach67@hotmail.com | Viewer | |
Eloise Hoeger Forward Implementation Assistant eloise_hoeger@hotmail.com | Admin | |
Ken Collins Chief Directives Consultant ken_collins31@yahoo.com | Viewer | |
Bradley Kulas International Accountability Representative bradley.kulas8@gmail.com | Viewer | |
Terrance Jacobs Corporate Metrics Specialist terrance.jacobs74@gmail.com | Viewer | |
Johann Torp Internal Data Analyst johann_torp59@yahoo.com | Admin | |
Franklin Cummings Legacy Brand Producer franklin.cummings20@hotmail.com | Member | |
Peyton Hermiston Product Research Director peyton_hermiston21@gmail.com | Viewer | |
Monte Gleason Senior Data Administrator monte.gleason88@yahoo.com | Admin | |
Kelli Zieme Internal Applications Orchestrator kelli.zieme@yahoo.com | Viewer | |
Vidal Abbott Principal Brand Architect vidal.abbott80@yahoo.com | Member | |
Luke Hermann Internal Markets Orchestrator luke.hermann44@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 | |
|---|---|---|---|---|
| Eldon Armstrong | thaddeus.leffler@gmail.com | East Anahichester | Active | $691.69 |
| Clarabelle Rath | rory15@hotmail.com | Chadrickstad | Inactive | $592.29 |
| Felicia Dare | hugo.cummerata@hotmail.com | Daviston | Inactive | $349.67 |
| Mr. Maurice Terry | aryanna2@hotmail.com | Port Cristian | Inactive | $1,046.69 |
| Woodrow Pouros MD | leta.terry6@gmail.com | North Gailberg | Active | $776.47 |
| Total | $3,456.81 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bob Kassulke @charlie_purdy33 | lorena.carter6@yahoo.com | Lacey | Inactive | $8.89 |
May Spinka PhD @mandy73 | hanna_lueilwitz@yahoo.com | Lake Jody | Inactive | $597.89 |
Arnulfo Dooley @asa_jaskolski | dwight1@yahoo.com | East Winifred | Inactive | $757.40 |
Kody Gerlach @shawna_funk | ivan.schultz@hotmail.com | Honolulu | Inactive | $383.52 |
Clarissa Smith @edison.mccullough | carmella.robel56@yahoo.com | Kosston | Inactive | $148.18 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Garfield Bosco | velma_haag20@gmail.com | Wadeworth | Active | $383.99 |
| Willy Effertz | jenna49@gmail.com | Lake Jacklyn | Active | $875.39 |
| Miss Blanche Franecki | lucie_kuvalis65@hotmail.com | Chrisville | Inactive | $841.13 |
| Korey Wunsch | karine_daniel73@yahoo.com | Port Philchester | Active | $988.71 |
| Mariane Kessler | jeffrey_von-kerluke24@hotmail.com | Lake Lukechester | Active | $21.92 |
| Total | $3,111.14 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ignacio Schimmel | beulah.dietrich@hotmail.com | Zboncakview | Inactive | $1,120.59 |
| Donny Kozey | shelly94@yahoo.com | Adamsburgh | Active | $631.21 |
| Tomas Boyle II | kimberly47@hotmail.com | Worcester | Inactive | $635.22 |
| Guy Thompson | ephraim55@hotmail.com | Lake Bryceton | Active | $1,136.40 |
| Brandi White | marge76@yahoo.com | Katrinastad | Inactive | $418.77 |
| Total | $3,942.19 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Delfina Kohler | kara_schumm@gmail.com | Hartmannland | Inactive | $1,039.91 |
| Kari Nitzsche | dessie51@gmail.com | South Randall | Inactive | $501.93 |
| Terri Leffler | silas.maggio@yahoo.com | Athens-Clarke County | Active | $863.82 |
| Wanda Emmerich DDS | orlando.hayes@gmail.com | Joshuaport | Active | $891.55 |
| Jana Breitenberg | jody21@hotmail.com | Wadestead | Active | $14.94 |
| Total | $3,312.15 | |||
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 | ||
|---|---|---|---|---|---|
| Tonya Mertz | lynda.daugherty59@hotmail.com | Kurtberg | Inactive | $790.29 | |
| Reanna Mante | nikko87@gmail.com | Lindgrenboro | Active | $328.45 | |
| Mrs. Ardella Terry | norman42@gmail.com | Port Wainohaven | Inactive | $470.96 | |
| Elroy Marquardt | rochelle_hauck-dibbert@gmail.com | Handport | Active | $972.97 | |
| Paulette Dach | gilda_larkin95@gmail.com | South Amanda | Active | $472.16 | |
| Total | $3,034.83 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Joan Stracke | genesis_gerlach@hotmail.com | Nitzscheport | Inactive | $756.24 | |
| Mrs. Caden Brekke-Kunze I | traci.metz46@yahoo.com | East Quinten | Inactive | $142.49 | |
| Bennie Wunsch-Grant | katrina71@hotmail.com | Kassulkeburgh | Inactive | $187.31 | |
| Ms. Constance Boehm | anna10@hotmail.com | Redondo Beach | Active | $718.37 | |
| Georgette Grant | willard_lebsack@yahoo.com | South Lewisberg | Active | $474.68 | |
| Total | $2,279.09 | ||||
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 | |
|---|---|---|---|---|
| Gregory Lueilwitz-Armstrong | joyce.feeney@yahoo.com | East Alonzo | Active | $388.38 |
| Victor Schmitt | margarete_murphy@gmail.com | Lindburgh | Inactive | $192.36 |
| Emilio Windler | alexandre37@gmail.com | Burlington | Inactive | $171.23 |
| Electa Herman | dwight28@hotmail.com | Altamonte Springs | Inactive | $1,027.84 |
| Joe Bechtelar | mack5@yahoo.com | South Lori | Active | $658.52 |
| Fredrick Crooks | percy.jones-fisher24@hotmail.com | Port Jacquelynview | Inactive | $1,121.08 |
| Alexandrea Ward | kaci.tromp87@yahoo.com | Lake Patrickchester | Active | $722.83 |
| Juvenal Fisher | kirstin5@gmail.com | New Renee | Inactive | $268.70 |
| Mrs. Trinity Pfeffer IV | johann.gutkowski3@gmail.com | Larkinshire | Active | $367.92 |
| Beth Sauer | mellie_huel@gmail.com | Esperanzafort | Active | $1,060.92 |
| Gilberto Becker V | nicholas25@hotmail.com | North Maryann | Active | $278.03 |
| Lauretta Hermann | alexane.hodkiewicz91@yahoo.com | North Davidchester | Inactive | $157.08 |
| Carmel Wisoky | rocio_kris@hotmail.com | New Zoeboro | Inactive | $646.40 |
| Corey Haley I | ray.bartell11@hotmail.com | Armandoport | Inactive | $690.32 |
| Kaylah Dicki | wendell.beahan@hotmail.com | Lake Lindsey | Active | $102.23 |
| Total | $7,853.84 | |||
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 |