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 | Bank Transfer | $851.50 |
| INV002 | Pending | Bank Transfer | $281.03 |
| INV003 | Pending | PayPal | $895.17 |
| INV004 | Paid | Bank Transfer | $622.10 |
| INV005 | Pending | Credit Card | $243.89 |
| INV006 | Paid | Credit Card | $819.72 |
| INV007 | Pending | Bank Transfer | $255.55 |
| Total | $3,968.96 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Frankie Hagenes-Bruen | Product Intranet Producer | frankie.hagenes-bruen@gmail.com | Member | |
| Angela Pfeffer | National Directives Consultant | angela_pfeffer@yahoo.com | Admin | |
| Esther Maggio | District Usability Planner | esther_maggio@gmail.com | Admin | |
| Sabrina Shields | Legacy Infrastructure Architect | sabrina_shields95@hotmail.com | Admin | |
| Darlene Feest | Forward Operations Director | darlene.feest81@gmail.com | Viewer | |
| Margie Waelchi | Lead Communications Architect | margie_waelchi6@gmail.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 |
|---|---|---|
Fabiola Grady Dynamic Mobility Developer fabiola_grady82@hotmail.com | Member | |
Rafaela Gibson Internal Security Liaison rafaela.gibson37@yahoo.com | Admin | |
Elmer Veum Human Usability Liaison elmer.veum69@gmail.com | Viewer | |
Janae Walsh Lead Metrics Engineer janae.walsh@gmail.com | Admin | |
Elda Braun Legacy Interactions Manager elda.braun@yahoo.com | Viewer | |
Mathew Rolfson International Usability Strategist mathew.rolfson84@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dave Metz Customer Identity Executive dave_metz@hotmail.com | Viewer | |
Lucy Wolff Direct Paradigm Agent lucy_wolff22@hotmail.com | Admin | |
Lorraine Quigley Investor Accountability Manager lorraine_quigley83@gmail.com | Admin | |
Emilia Stark Central Assurance Strategist emilia.stark@yahoo.com | Viewer | |
Clayton Fadel Legacy Factors Associate clayton_fadel21@yahoo.com | Viewer | |
Marlene Purdy Forward Solutions Officer marlene_purdy29@yahoo.com | Member | |
Kay Cartwright Lead Assurance Planner kay_cartwright@gmail.com | Admin | |
Marian Berge Corporate Solutions Analyst marian.berge@hotmail.com | Admin | |
Ebony Stracke Internal Implementation Planner ebony_stracke@yahoo.com | Viewer | |
Ricky Schneider Investor Paradigm Architect ricky_schneider@gmail.com | Viewer | |
Maximillian Morissette Chief Configuration Liaison maximillian_morissette26@gmail.com | Admin | |
Lolita Bergstrom International Branding Executive lolita_bergstrom@gmail.com | Admin | |
Jon Reichel Product Data Supervisor jon_reichel@hotmail.com | Viewer | |
Arnaldo Collier Future Solutions Officer arnaldo.collier5@yahoo.com | Viewer | |
Phillip McLaughlin Principal Accountability Designer phillip.mclaughlin33@gmail.com | Viewer | |
Desmond Stroman Direct Branding Producer desmond_stroman94@gmail.com | Viewer | |
Nicklaus Abernathy Human Implementation Architect nicklaus_abernathy@hotmail.com | Member | |
Alana Sawayn Chief Accountability Assistant alana_sawayn20@yahoo.com | Viewer | |
Amanda Renner Principal Intranet Executive amanda_renner83@hotmail.com | Admin | |
Israel Goyette Human Solutions Manager israel_goyette20@yahoo.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 | |
|---|---|---|---|---|
| Monroe Hettinger | arturo.prosacco89@hotmail.com | Lake Chaim | Inactive | $599.21 |
| Simone Corwin | abdiel75@hotmail.com | Laurencemouth | Inactive | $226.19 |
| Joel Hoeger | franklin35@yahoo.com | East Eileen | Inactive | $106.87 |
| Camren Gislason | alvah45@hotmail.com | Alvertacester | Inactive | $15.85 |
| Ida Crona | kathy.murray71@yahoo.com | Sadieport | Active | $437.52 |
| Total | $1,385.64 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lloyd Kulas V @keith31 | sherry_weber@yahoo.com | Mertzhaven | Inactive | $431.39 |
Jettie Hagenes DDS @simeon46 | orville.zboncak@hotmail.com | Carrollview | Active | $787.52 |
Ernestine Gorczany @micaela.maggio35 | halie.murray52@gmail.com | West Rebeccaland | Active | $64.01 |
Ricardo Feil @meggie59 | juan_kilback@hotmail.com | Fort Rasheedberg | Inactive | $567.45 |
Robb Kiehn @norma89 | leda_homenick@hotmail.com | Effertzfurt | Inactive | $148.35 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Carmen Kling | lila.schumm88@gmail.com | Coltchester | Inactive | $396.04 |
| Miranda Renner | dean_morar68@yahoo.com | West Candido | Inactive | $140.78 |
| Delfina Wiegand | jany_steuber@yahoo.com | Jefferyberg | Active | $850.21 |
| Kristine Pfannerstill | mathew77@hotmail.com | South Davin | Active | $593.69 |
| Xzavier Schmeler | haley.hudson45@yahoo.com | Lacey | Active | $564.39 |
| Total | $2,545.11 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Janick Farrell | amanda.fritsch50@yahoo.com | Helmermouth | Inactive | $294.00 |
| Mike Huel | bill_keebler-dare30@yahoo.com | East Debbie | Active | $95.51 |
| Amy Wolff | christie77@gmail.com | New Cristobal | Inactive | $876.83 |
| Delphine Blick PhD | amir.kautzer@yahoo.com | East Carmelamouth | Inactive | $231.54 |
| Roberto Schiller | jordan_kutch82@gmail.com | Gradyberg | Inactive | $1,153.95 |
| Total | $2,651.83 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Coy Mann I | ross.kulas97@yahoo.com | McGlynnview | Inactive | $768.27 |
| Clinton Boehm | christop68@yahoo.com | Tuckahoe | Inactive | $1,194.78 |
| Gretchen Runolfsdottir | chad42@hotmail.com | Evaview | Inactive | $60.52 |
| Justin Brekke | noel.boehm@yahoo.com | Romagueraborough | Active | $702.01 |
| Eugene Ondricka-Marks | ora12@hotmail.com | Auburn | Inactive | $1,170.89 |
| Total | $3,896.47 | |||
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 | ||
|---|---|---|---|---|---|
| Isom Hudson | joanna.hermiston13@gmail.com | East Noelia | Active | $157.31 | |
| Krystal Hudson | jeffrey_marks53@gmail.com | Freddiestead | Inactive | $760.34 | |
| Wilbur Pfannerstill | skye.koss@hotmail.com | Zeldafort | Active | $842.46 | |
| Waylon Dibbert | austen69@yahoo.com | Vacaville | Inactive | $1,192.60 | |
| Annie Mayer | danielle.stokes@yahoo.com | Darrenfort | Active | $1,029.79 | |
| Total | $3,982.50 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dominic Braun | claire_cronin@gmail.com | Parkerworth | Inactive | $883.48 | |
| Maiya Crist | lynda96@hotmail.com | New Laurinefield | Inactive | $696.01 | |
| Patrick Kovacek | joesph85@hotmail.com | Abelburgh | Inactive | $184.10 | |
| Franklin Fahey | luz.jerde12@gmail.com | Mikefort | Active | $13.20 | |
| Ruben Daugherty | lyle.bartoletti21@yahoo.com | Lake Juanfurt | Inactive | $768.39 | |
| Total | $2,545.18 | ||||
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 | |
|---|---|---|---|---|
| Jenny Roberts | rita45@hotmail.com | Alyssahaven | Active | $956.52 |
| Tremaine Bradtke DDS | ivah.heathcote75@hotmail.com | Fort Manuelaberg | Active | $1,079.23 |
| Sheryl Klocko | agnes40@hotmail.com | Fort Montanaberg | Inactive | $392.47 |
| Lena DuBuque | christie16@gmail.com | Lindseyport | Active | $885.80 |
| Skyla Franey | amely.reichel@gmail.com | North Roseview | Inactive | $108.37 |
| Rebekah Wunsch | dorothea76@hotmail.com | South Connie | Inactive | $757.63 |
| Gwen Veum Sr. | tiffany.wyman@hotmail.com | Mission | Active | $1,054.25 |
| Rosie Schaefer | ed.brown@hotmail.com | Ruthville | Inactive | $677.76 |
| Ms. Jaron Stoltenberg | bret_hermann91@hotmail.com | East Dougcester | Inactive | $790.14 |
| Miss Beatrice Kessler Jr. | jerome.schoen17@gmail.com | Fort Erica | Inactive | $957.81 |
| Brad Doyle | oscar_green12@hotmail.com | East Darrelview | Active | $828.11 |
| Dee Klein | anderson_willms89@hotmail.com | Kearny | Active | $558.44 |
| Brittany Reilly | randall.wilderman74@yahoo.com | East Joshua | Inactive | $824.10 |
| Miss Arno Bode | patsy.crona96@hotmail.com | Waltershire | Active | $922.53 |
| Colton Conroy | mae_hermann68@yahoo.com | South Elliott | Active | $590.59 |
| Total | $11,383.75 | |||
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 |