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 | $511.05 |
| INV002 | Unpaid | Credit Card | $553.37 |
| INV003 | Unpaid | Credit Card | $461.12 |
| INV004 | Paid | Credit Card | $474.54 |
| INV005 | Paid | PayPal | $998.14 |
| INV006 | Paid | Credit Card | $495.98 |
| INV007 | Paid | Bank Transfer | $912.83 |
| Total | $4,407.03 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Helga Cummings | District Directives Architect | helga_cummings68@hotmail.com | Member | |
| Genevieve Feil | Senior Brand Assistant | genevieve.feil@yahoo.com | Member | |
| Rebeca Heidenreich | Lead Marketing Producer | rebeca_heidenreich55@hotmail.com | Viewer | |
| Jaquan Grimes | Direct Division Developer | jaquan.grimes38@yahoo.com | Viewer | |
| Gabriel VonRueden | Central Usability Representative | gabriel.vonrueden@gmail.com | Member | |
| Clyde Williamson | Central Interactions Agent | clyde_williamson86@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 |
|---|---|---|
Elenora Pagac Legacy Accountability Specialist elenora.pagac10@yahoo.com | Viewer | |
Rene Abbott Principal Factors Executive rene.abbott@hotmail.com | Viewer | |
Stella Schneider Senior Markets Supervisor stella.schneider@yahoo.com | Member | |
Evan Schuster Lead Interactions Liaison evan_schuster37@yahoo.com | Admin | |
Delta Wyman Regional Applications Officer delta_wyman@gmail.com | Viewer | |
Julianne MacGyver-Mueller Investor Solutions Executive julianne.macgyver-mueller7@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 |
|---|---|---|
Dagmar Ullrich Lead Mobility Coordinator dagmar.ullrich64@hotmail.com | Admin | |
Ansley McLaughlin Global Response Technician ansley.mclaughlin@gmail.com | Member | |
Tanya Schowalter Direct Operations Coordinator tanya.schowalter@gmail.com | Admin | |
Stewart Stiedemann Central Directives Specialist stewart_stiedemann@yahoo.com | Member | |
Rosamond Christiansen Dynamic Quality Planner rosamond_christiansen@gmail.com | Viewer | |
Emil Schmeler Investor Infrastructure Liaison emil_schmeler57@yahoo.com | Member | |
Irving Kemmer International Division Manager irving_kemmer6@yahoo.com | Admin | |
Rachael Hayes Regional Paradigm Administrator rachael_hayes@hotmail.com | Admin | |
Vivian Rath Senior Operations Consultant vivian_rath80@yahoo.com | Member | |
Tabitha Howe Human Identity Agent tabitha.howe@gmail.com | Admin | |
Jaylan Schuster Legacy Optimization Producer jaylan_schuster@yahoo.com | Admin | |
Vern Heller Regional Marketing Supervisor vern.heller35@hotmail.com | Viewer | |
Silvia Wilkinson Regional Tactics Representative silvia_wilkinson64@yahoo.com | Member | |
Albert Pacocha Forward Functionality Designer albert.pacocha58@hotmail.com | Member | |
Penny Hyatt Investor Branding Technician penny_hyatt@hotmail.com | Member | |
Jeff Harber Internal Directives Representative jeff_harber@gmail.com | Viewer | |
Sherri Gulgowski Dynamic Usability Representative sherri.gulgowski81@hotmail.com | Viewer | |
Elody Brekke-Gottlieb Senior Web Technician elody_brekke-gottlieb84@yahoo.com | Viewer | |
Alison Block Lead Tactics Technician alison_block88@yahoo.com | Viewer | |
Kamron Gulgowski Dynamic Marketing Coordinator kamron.gulgowski@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 | |
|---|---|---|---|---|
| Mr. Dario Friesen | gretchen_rodriguez@hotmail.com | Runtestad | Active | $559.44 |
| Tanya Ritchie | addison.armstrong@yahoo.com | Lynwood | Active | $68.80 |
| Garfield Heaney | everette80@gmail.com | New Devanfurt | Inactive | $790.69 |
| Emanuel Wunsch PhD | david.muller30@yahoo.com | Danberg | Active | $261.73 |
| Tianna Bradtke III | marion_goldner-marks91@gmail.com | Wintheiserfort | Active | $791.25 |
| Total | $2,471.91 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Terri Kshlerin @tiffany.lynch | maryjane.hermiston9@yahoo.com | Hilo | Inactive | $624.80 |
Rex Mueller @timmothy59 | donavon_zboncak@hotmail.com | Fort Miguel | Active | $239.87 |
Rashawn Quitzon III @kavon.schaefer | aditya.fritsch@gmail.com | South Shelly | Active | $871.49 |
Mohamed Mayert @ebony_bashirian | webster.prosacco@hotmail.com | Azusa | Active | $102.52 |
Dr. Jon Halvorson @homer49 | lindsay78@yahoo.com | Parma | Inactive | $864.48 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Zachary McDermott | vinnie91@yahoo.com | East Jaclyn | Active | $72.85 |
| Richard Ward MD | lynette.bruen@gmail.com | East Fanny | Inactive | $797.00 |
| Mr. Brandon Keebler | deanna68@hotmail.com | Charlottesville | Inactive | $206.97 |
| Thomas Pfeffer | lynne_hilpert@yahoo.com | Wichita | Active | $517.08 |
| Dr. Gloria Bogisich | charlie.klein@yahoo.com | Upland | Active | $747.04 |
| Total | $2,340.94 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rufus McLaughlin | kaleb_leffler@yahoo.com | Allisonboro | Inactive | $388.60 |
| Antonia Wisozk | sylvan_heidenreich@gmail.com | North Sanford | Inactive | $308.78 |
| Maeve Stehr | vernon_reinger@yahoo.com | Dachmouth | Inactive | $165.97 |
| Willard Daugherty | barry90@gmail.com | Cristhaven | Active | $1,101.78 |
| Wade Hettinger | elinore65@yahoo.com | South Nellie | Inactive | $1,122.41 |
| Total | $3,087.54 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Norberto Kris | al.kshlerin@yahoo.com | Plainfield | Inactive | $26.62 |
| Marcia Spencer II | jeanette.koch@yahoo.com | Winstonside | Active | $48.90 |
| Katherine Dare | tara.witting@gmail.com | Traviston | Active | $415.81 |
| Lyla Ebert | orland.fisher@yahoo.com | Antelope | Inactive | $744.72 |
| Fausto Cummerata | gustave.littel30@gmail.com | East Anaischester | Inactive | $1,131.29 |
| Total | $2,367.34 | |||
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 | ||
|---|---|---|---|---|---|
| Jaylan Metz | hans79@yahoo.com | Arnoborough | Inactive | $754.14 | |
| Noemy Walter | priscilla68@yahoo.com | Fort Jenniecester | Inactive | $191.54 | |
| Imelda Runolfsson | johnathan.hand41@hotmail.com | Schneiderbury | Active | $540.42 | |
| Peggie Satterfield | wilfred77@yahoo.com | East Deltastad | Active | $321.86 | |
| Alverta Heaney PhD | aryanna34@yahoo.com | Port Christopherburgh | Active | $252.99 | |
| Total | $2,060.95 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Giovani Tremblay PhD | aubrey54@hotmail.com | Port Gia | Inactive | $53.47 | |
| Leola Dickens | wesley.ward21@gmail.com | New Herbertboro | Inactive | $1,174.96 | |
| Mckenzie Beatty | esther_daniel16@yahoo.com | East Shawnaboro | Active | $394.51 | |
| Jedediah Kulas | bernice_bergstrom11@hotmail.com | Tabithachester | Active | $864.47 | |
| Ashton Goldner | quinton_konopelski11@hotmail.com | McLaughlinport | Active | $334.55 | |
| Total | $2,821.96 | ||||
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 | |
|---|---|---|---|---|
| Robin Beahan II | lessie_boyer92@gmail.com | Randalberg | Inactive | $913.33 |
| Lionel Hammes PhD | granville31@hotmail.com | Jarretburgh | Active | $650.14 |
| Libbie Christiansen | alice_predovic@yahoo.com | Winston-Salem | Inactive | $619.01 |
| Edna Graham | effie_haag31@hotmail.com | Johnsonchester | Active | $1,163.51 |
| Darion Schinner | frank_steuber33@yahoo.com | Karleefort | Active | $900.96 |
| Ada Adams | ida_koch24@yahoo.com | New Toddview | Inactive | $842.91 |
| Tommie Towne | nancy_will@hotmail.com | East Kariannecester | Inactive | $633.79 |
| Wayne Schuster | gloria.wilderman@yahoo.com | West Dallasside | Active | $102.85 |
| Norman Zemlak | darla_kreiger@yahoo.com | Pfannerstillstead | Active | $795.38 |
| Noemi Bode | kim87@gmail.com | Ogden | Active | $1,141.23 |
| Leah Graham | bridget_lowe@hotmail.com | Port Jeff | Active | $729.86 |
| Kameron Klein | roslyn.stehr18@hotmail.com | East Providence | Inactive | $834.58 |
| Priscilla Johns | hugo37@gmail.com | Port Greggfield | Inactive | $1,095.23 |
| Janae Miller V | cristina.batz2@yahoo.com | Minniefield | Inactive | $345.78 |
| Harvey Nienow | diana_pollich33@yahoo.com | New Clifford | Inactive | $1,065.51 |
| Total | $11,834.07 | |||
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 |