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 | $231.12 |
| INV002 | Pending | PayPal | $835.45 |
| INV003 | Unpaid | PayPal | $938.58 |
| INV004 | Unpaid | Bank Transfer | $475.42 |
| INV005 | Pending | Bank Transfer | $940.97 |
| INV006 | Unpaid | Bank Transfer | $494.91 |
| INV007 | Unpaid | PayPal | $266.47 |
| Total | $4,182.92 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rogelio Rolfson | Human Tactics Executive | rogelio_rolfson49@yahoo.com | Admin | |
| Moses Hahn | Legacy Configuration Specialist | moses_hahn@yahoo.com | Member | |
| Salvador Johnston | Customer Infrastructure Analyst | salvador.johnston@gmail.com | Admin | |
| Devin Kutch | Lead Operations Representative | devin_kutch@yahoo.com | Admin | |
| Guillermo Marvin | Principal Group Designer | guillermo.marvin80@yahoo.com | Viewer | |
| Brennon Ortiz | Future Functionality Consultant | brennon.ortiz@gmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Duane Hammes Central Identity Orchestrator duane_hammes@gmail.com | Viewer | |
Griffin Wilkinson National Applications Manager griffin_wilkinson@hotmail.com | Admin | |
Dana Renner Legacy Accounts Representative dana_renner@yahoo.com | Viewer | |
Darla Brekke Legacy Creative Agent darla.brekke78@hotmail.com | Member | |
Mattie Parker Dynamic Implementation Liaison mattie_parker45@hotmail.com | Admin | |
Trevor Becker Global Quality Technician trevor_becker@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Alessandra Lubowitz Global Tactics Planner alessandra_lubowitz21@yahoo.com | Admin | |
Fern Greenholt Direct Group Administrator fern.greenholt@yahoo.com | Admin | |
Josh Johnson International Brand Liaison josh_johnson@gmail.com | Admin | |
Frances Sipes Principal Configuration Coordinator frances_sipes38@yahoo.com | Member | |
Rhonda Kub-Yundt Regional Implementation Designer rhonda_kub-yundt@hotmail.com | Member | |
Mack Beier Principal Group Developer mack_beier91@yahoo.com | Member | |
Murray Bauch Dynamic Identity Executive murray.bauch39@gmail.com | Member | |
Susie Cassin Internal Functionality Planner susie_cassin@hotmail.com | Viewer | |
Tiara Padberg Lead Applications Specialist tiara.padberg@gmail.com | Admin | |
Cassidy Sanford District Security Supervisor cassidy.sanford20@yahoo.com | Admin | |
Laura Mosciski Product Brand Engineer laura_mosciski@hotmail.com | Member | |
Antonietta Jakubowski Customer Creative Technician antonietta.jakubowski@hotmail.com | Member | |
Linda Barrows Human Data Coordinator linda.barrows15@hotmail.com | Admin | |
Casimir Wiegand International Operations Specialist casimir_wiegand74@yahoo.com | Admin | |
Pedro Orn National Program Planner pedro.orn@gmail.com | Viewer | |
Joe Crooks Regional Operations Administrator joe_crooks@gmail.com | Admin | |
Mafalda Dooley Chief Factors Facilitator mafalda_dooley81@hotmail.com | Viewer | |
Albert Stanton Investor Configuration Engineer albert_stanton28@hotmail.com | Viewer | |
Taurean Labadie Corporate Response Representative taurean.labadie36@hotmail.com | Admin | |
Alda Runolfsdottir Product Infrastructure Producer alda_runolfsdottir10@hotmail.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 | |
|---|---|---|---|---|
| Ms. Ellen Pagac | tami_friesen@hotmail.com | Rolfsonchester | Inactive | $182.15 |
| Andre Crooks II | johan_raynor-schulist86@gmail.com | Julianmouth | Inactive | $41.39 |
| Kasandra Kerluke | glenn68@gmail.com | Ames | Active | $713.97 |
| Willard Denesik | alejandra2@yahoo.com | Marleeworth | Inactive | $558.85 |
| Harvey Russel | marlee_bailey@yahoo.com | Lake Scarlett | Inactive | $208.62 |
| Total | $1,704.98 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tatyana Hermann @etha.bernier | lamar47@gmail.com | Louisfort | Inactive | $306.00 |
Izaiah Willms @merle23 | kade43@hotmail.com | Winstonport | Inactive | $477.81 |
Bonita Fisher @eduardo48 | kristie.upton@hotmail.com | East Eduardoworth | Inactive | $118.28 |
Deion Brown @beulah76 | wendell8@gmail.com | San Juan | Inactive | $750.68 |
Clemens Schneider Sr. @becky.dietrich74 | edmond.bernhard86@yahoo.com | Brekketown | Inactive | $265.78 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cora Johns | noemi44@yahoo.com | Veumton | Inactive | $1,029.41 |
| Tricia McLaughlin | ardella98@hotmail.com | Sherriberg | Inactive | $978.50 |
| Elias Gerhold | claude_runte-schiller@yahoo.com | Larkinworth | Inactive | $358.82 |
| Sherri Koepp | edythe0@gmail.com | East Oliverville | Inactive | $197.56 |
| Amelia DuBuque-Jacobson | sherman_wunsch@hotmail.com | Lake Veronicaland | Inactive | $82.13 |
| Total | $2,646.42 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeffrey Kilback | lillian.bechtelar@gmail.com | Ornfort | Active | $676.63 |
| Miss Terri Roberts | jane.marquardt36@gmail.com | Archchester | Active | $1,024.25 |
| Melody Green Jr. | nick51@hotmail.com | O'Haraland | Inactive | $47.17 |
| Dr. Phil Lemke | chris37@gmail.com | Jeanetteville | Active | $2.75 |
| Mr. Mathew Purdy | homer.glover3@gmail.com | Floydland | Active | $759.92 |
| Total | $2,510.72 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dillan Schinner | pedro.yost31@hotmail.com | Owenhaven | Active | $214.45 |
| Kaycee Stokes | berneice.aufderhar@yahoo.com | Raynorborough | Active | $1,087.25 |
| Robert Turner I | flo34@gmail.com | North Maureenboro | Inactive | $883.38 |
| Jean Hilll V | buddy.towne42@yahoo.com | Lionelport | Inactive | $831.88 |
| Josefa Lueilwitz | adaline22@gmail.com | Dicki-Rutherfordfield | Inactive | $843.96 |
| Total | $3,860.92 | |||
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 | ||
|---|---|---|---|---|---|
| Anibal Bernier | candice_murray96@hotmail.com | Lake Bentonville | Inactive | $431.71 | |
| Curtis Grant III | geovany.aufderhar@yahoo.com | North Amari | Active | $424.32 | |
| Isaac Stracke | jeanette23@gmail.com | North Miami Beach | Inactive | $1,126.76 | |
| Mr. Jalen Upton | jermey.hagenes@hotmail.com | Port Geneva | Active | $671.09 | |
| Lamont Leffler | marcos.trantow@yahoo.com | Long Beach | Active | $1,008.91 | |
| Total | $3,662.79 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Gerardo Torp | johanna.morissette1@hotmail.com | Fort Hilton | Active | $443.75 | |
| Sally Pollich I | marcelino81@hotmail.com | Malcolmville | Inactive | $913.74 | |
| Dr. Lexus Pacocha | daphney51@hotmail.com | South Ernesto | Inactive | $1,096.03 | |
| Norberto Bosco | sonny81@gmail.com | Mount Prospect | Active | $854.32 | |
| Mrs. Latoya Effertz | richard_cormier@yahoo.com | West Rachael | Active | $513.99 | |
| Total | $3,821.83 | ||||
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 | |
|---|---|---|---|---|
| Alexie Skiles DDS | lucy10@gmail.com | Marshaport | Active | $1,033.01 |
| Mr. Chaya Schmitt | doreen49@yahoo.com | Dianaboro | Inactive | $527.93 |
| Branson Trantow | jaylen_feeney6@gmail.com | Rancho Santa Margarita | Active | $680.60 |
| Pearl Stamm | chelsea_lynch@gmail.com | Port Trinity | Active | $1,131.75 |
| Aleen Erdman-Fisher | demarcus_wolf57@gmail.com | Hialeah | Active | $626.02 |
| Ira Jerde | randolph.smith-marvin@hotmail.com | Portland | Active | $821.58 |
| Mr. Kira Adams | jack_witting@gmail.com | Treutelmouth | Active | $698.81 |
| Issac Hudson PhD | hazel.toy24@gmail.com | Georgeborough | Active | $640.74 |
| Wilhelmine Pouros-Dickinson | devonte_bergnaum@yahoo.com | Ontario | Inactive | $121.25 |
| Glenna Waelchi | roger_leannon12@gmail.com | Bridietown | Active | $51.57 |
| Dr. Dario Turner-Block | simon74@gmail.com | Tonyaside | Inactive | $1,015.98 |
| Mrs. Caden Gislason | clinton.hane63@yahoo.com | Dancester | Active | $110.65 |
| Edna Cronin | stacy21@gmail.com | Port Daxmouth | Active | $1,097.42 |
| Andrew Corkery | celestine_wiza@gmail.com | Reston | Active | $166.07 |
| Delores MacGyver Sr. | gregory_west54@hotmail.com | Fishershire | Active | $250.12 |
| Total | $8,973.50 | |||
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 |