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 | Paid | PayPal | $305.97 |
| INV002 | Paid | Bank Transfer | $380.82 |
| INV003 | Pending | PayPal | $683.94 |
| INV004 | Unpaid | PayPal | $528.59 |
| INV005 | Pending | PayPal | $682.75 |
| INV006 | Pending | Credit Card | $402.92 |
| INV007 | Unpaid | Credit Card | $398.43 |
| Total | $3,383.42 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Manuel Hahn | Dynamic Division Executive | manuel_hahn@gmail.com | Member | |
| Agnes Breitenberg | Dynamic Creative Orchestrator | agnes_breitenberg20@gmail.com | Admin | |
| Randal Lynch | Global Markets Specialist | randal.lynch90@gmail.com | Admin | |
| Carolina Lubowitz | Internal Division Designer | carolina.lubowitz@yahoo.com | Member | |
| Opal Kuhlman | National Research Officer | opal_kuhlman@hotmail.com | Member | |
| Declan Hilpert | Investor Communications Planner | declan_hilpert@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 |
|---|---|---|
Clara Gottlieb Lead Factors Planner clara.gottlieb@gmail.com | Admin | |
Sigurd Hammes Legacy Markets Orchestrator sigurd_hammes@gmail.com | Admin | |
Rudolph Moore National Applications Agent rudolph_moore57@yahoo.com | Member | |
Rosie Kiehn Chief Research Consultant rosie.kiehn88@yahoo.com | Viewer | |
Prudence Stokes Legacy Group Developer prudence_stokes60@yahoo.com | Viewer | |
Leland D'Amore Global Response Executive leland_damore@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Chris Ward Customer Research Strategist chris_ward@hotmail.com | Viewer | |
Marion Marvin Forward Marketing Manager marion_marvin@yahoo.com | Member | |
Sarah Runolfsdottir Product Functionality Officer sarah_runolfsdottir@hotmail.com | Viewer | |
Raegan Hahn Corporate Functionality Officer raegan.hahn24@gmail.com | Admin | |
Alisa Hermann Central Integration Supervisor alisa_hermann@hotmail.com | Admin | |
Cheyanne Simonis Direct Group Orchestrator cheyanne_simonis@gmail.com | Member | |
Esta Bernier Senior Optimization Associate esta.bernier@gmail.com | Viewer | |
Xzavier Cole Product Communications Executive xzavier_cole@hotmail.com | Admin | |
Faith Franey Dynamic Data Director faith_franey@hotmail.com | Viewer | |
Damon Ruecker Investor Functionality Associate damon_ruecker99@gmail.com | Admin | |
Hailey Shields Legacy Division Representative hailey_shields35@gmail.com | Admin | |
Tara Cremin Regional Accounts Supervisor tara.cremin5@hotmail.com | Member | |
Lennie Wehner Customer Infrastructure Liaison lennie.wehner@yahoo.com | Member | |
Joshua Mante Legacy Functionality Technician joshua.mante@hotmail.com | Admin | |
Claud Marvin Internal Program Administrator claud.marvin15@hotmail.com | Admin | |
Jason Carroll Investor Markets Strategist jason.carroll35@gmail.com | Viewer | |
Kevin Wintheiser Customer Identity Planner kevin_wintheiser@hotmail.com | Admin | |
Danielle Boyle District Operations Engineer danielle.boyle@gmail.com | Viewer | |
Teresa Ankunding-Willms Dynamic Infrastructure Representative teresa.ankunding-willms34@gmail.com | Member | |
Monserrate Weissnat Investor Optimization Coordinator monserrate_weissnat74@hotmail.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 | |
|---|---|---|---|---|
| Marie Keebler | arlene22@hotmail.com | Edenstead | Active | $867.39 |
| Gail Connelly | lawrence.bernhard@hotmail.com | East Kobe | Inactive | $221.51 |
| Sylvester Greenholt | diana.streich@gmail.com | Olathe | Inactive | $520.77 |
| Tricia Kassulke DVM | rhea55@hotmail.com | East Leopold | Inactive | $938.06 |
| Rowland Pollich | nellie55@gmail.com | South Micheal | Active | $917.33 |
| Total | $3,465.06 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Camren Bahringer @deshaun_kozey | kelley16@yahoo.com | Kaychester | Inactive | $61.58 |
Carlos Ryan @reyes_schamberger4 | clara_terry@hotmail.com | Fisherstead | Inactive | $914.42 |
Rosalinda Stamm PhD @jacqueline.mayer | timmothy.lesch66@yahoo.com | Kallieland | Inactive | $452.35 |
Mr. Antwan Auer @tonya.tillman-kshlerin3 | peggy.jones@hotmail.com | New Payton | Active | $713.12 |
Alena Frami Sr. @latoya_schultz | sonny_stark5@gmail.com | Klockoton | Active | $958.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hester Ziemann | roberto_spencer87@yahoo.com | New Jack | Active | $979.25 |
| Oral Ward II | tyler69@gmail.com | Manhattan | Inactive | $645.02 |
| Maurice Lindgren | oswald_bauch@hotmail.com | Fisherview | Active | $909.41 |
| Ismael Stanton | yvette_gutkowski@yahoo.com | South Bert | Active | $1,121.50 |
| Fernando Jaskolski | neil57@hotmail.com | Ermachester | Inactive | $1,094.50 |
| Total | $4,749.68 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Donald Halvorson | janice96@yahoo.com | Sheldonstad | Active | $233.81 |
| Juanita Dicki | jacob_boehm75@gmail.com | Armandobury | Inactive | $325.22 |
| Dovie Fahey | jane.spencer@gmail.com | West Baylee | Inactive | $81.21 |
| Ernestina Balistreri | fernando.mayert@hotmail.com | West Inezworth | Inactive | $1,084.84 |
| Dean Reinger | susan_rempel12@yahoo.com | Gottliebstead | Active | $306.94 |
| Total | $2,032.02 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Molly Keebler | cordie_johnston97@yahoo.com | Gislasonville | Inactive | $678.69 |
| Unique Gutkowski | rosie.watsica@gmail.com | West Alfredfield | Active | $658.89 |
| Tom Brakus | eloy20@hotmail.com | Schultzfurt | Inactive | $803.01 |
| Kara Lesch | marcella_kemmer@gmail.com | Streichstead | Inactive | $685.29 |
| Lonie Strosin | jettie94@yahoo.com | Lake Geraldine | Active | $228.76 |
| Total | $3,054.64 | |||
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 | ||
|---|---|---|---|---|---|
| Melinda Turcotte-Shields | elisabeth.trantow95@gmail.com | Faheyberg | Inactive | $962.83 | |
| Evangeline Stamm-Jast DVM | norman_kassulke@hotmail.com | Fort Raoul | Inactive | $273.16 | |
| Chase Daniel | felicity4@yahoo.com | Myrtleview | Active | $10.77 | |
| Carter Satterfield III | lynne_stroman4@gmail.com | West Melaniechester | Inactive | $316.36 | |
| Julian Kiehn | dave_feest87@hotmail.com | Lake Royal | Inactive | $1,141.15 | |
| Total | $2,704.27 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Miss Ernestine Stanton | kari25@hotmail.com | Jadaworth | Inactive | $482.61 | |
| Mr. Domingo Wiegand | rae_cartwright@hotmail.com | Schaeferchester | Active | $260.89 | |
| Terrance Krajcik | mabel89@yahoo.com | Marcosshire | Inactive | $873.15 | |
| Lilliana Nicolas PhD | jenny_mcdermott62@gmail.com | Delaneyfurt | Active | $229.89 | |
| Christina Baumbach | itzel39@gmail.com | New Jazminstad | Active | $186.57 | |
| Total | $2,033.11 | ||||
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 | |
|---|---|---|---|---|
| Brandi D'Amore | susan_mayert@gmail.com | Port Darlabury | Inactive | $221.02 |
| Darius Mosciski-Marvin | katrina32@yahoo.com | South Ann | Active | $946.92 |
| Cyrus Toy | ivan68@hotmail.com | Karlicester | Inactive | $242.66 |
| Sonia Kertzmann | halie_parker-hills@gmail.com | Dinaland | Inactive | $747.38 |
| Danielle Steuber | valerie_mosciski@yahoo.com | West Edwinfield | Active | $709.14 |
| Ann Nicolas | jess87@hotmail.com | East Lura | Active | $1,164.50 |
| Halle Altenwerth | owen_ernser@yahoo.com | Jacobmouth | Inactive | $873.13 |
| Miss Gloria Hills | colt_crist@gmail.com | Goldnerbury | Active | $694.05 |
| Hollie Schamberger Jr. | hugh.crooks6@gmail.com | Hanford | Active | $769.58 |
| Stanford Hamill | joshua58@gmail.com | Fort Pete | Inactive | $971.88 |
| Mrs. Ocie Ryan | henrietta69@gmail.com | Auerview | Inactive | $495.49 |
| Barton Kertzmann | jessica72@yahoo.com | Hillsboro | Active | $306.24 |
| Koby Herzog-Bernier | hope_pollich@hotmail.com | Port Shane | Active | $193.35 |
| Korbin Rowe | brent.bernier@yahoo.com | San Angelo | Inactive | $1,048.73 |
| Wayne Hamill Jr. | gordon.bartoletti46@yahoo.com | Worcester | Inactive | $403.81 |
| Total | $9,787.88 | |||
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 |