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 | PayPal | $250.31 |
| INV002 | Pending | PayPal | $459.30 |
| INV003 | Pending | Bank Transfer | $521.30 |
| INV004 | Paid | Bank Transfer | $959.09 |
| INV005 | Paid | Bank Transfer | $552.53 |
| INV006 | Paid | Credit Card | $542.91 |
| INV007 | Paid | Credit Card | $132.20 |
| Total | $3,417.64 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Pam Beier | Regional Assurance Executive | pam_beier@hotmail.com | Admin | |
| Shea Hyatt | Regional Assurance Assistant | shea.hyatt0@gmail.com | Member | |
| Ronnie Metz | Dynamic Usability Representative | ronnie_metz@hotmail.com | Member | |
| Henry Bailey | Global Tactics Planner | henry.bailey@yahoo.com | Admin | |
| Kellie Turcotte | Human Accountability Agent | kellie_turcotte13@yahoo.com | Member | |
| Christina Mills | Regional Factors Facilitator | christina_mills70@hotmail.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 |
|---|---|---|
Samuel Runolfsdottir Customer Interactions Planner samuel_runolfsdottir@yahoo.com | Admin | |
Paul Barrows Corporate Accounts Architect paul_barrows36@gmail.com | Member | |
Mario Pagac Corporate Configuration Officer mario_pagac85@gmail.com | Admin | |
Tatum Bednar Future Accounts Strategist tatum_bednar66@hotmail.com | Admin | |
Danial Howe Future Tactics Developer danial.howe@yahoo.com | Member | |
Grady Blanda Chief Web Director grady.blanda@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Margaret Keebler Direct Optimization Consultant margaret.keebler@hotmail.com | Admin | |
Freddie Berge Investor Interactions Planner freddie.berge@hotmail.com | Viewer | |
Eleanor Crona Regional Accounts Assistant eleanor.crona@hotmail.com | Viewer | |
Winston Brekke Senior Solutions Architect winston.brekke91@hotmail.com | Member | |
Armand Boehm Global Division Orchestrator armand.boehm64@hotmail.com | Viewer | |
Anjali Rosenbaum Senior Research Agent anjali_rosenbaum@gmail.com | Admin | |
Ismael Krajcik Global Group Liaison ismael_krajcik@gmail.com | Member | |
Garth Jakubowski Product Brand Supervisor garth_jakubowski43@hotmail.com | Admin | |
Billie McLaughlin Central Mobility Engineer billie_mclaughlin5@gmail.com | Member | |
Christy Schowalter Principal Factors Consultant christy.schowalter@yahoo.com | Viewer | |
Camron Tromp Product Implementation Architect camron_tromp@yahoo.com | Viewer | |
Haley Satterfield Global Applications Liaison haley.satterfield@hotmail.com | Member | |
Martha Carroll National Metrics Orchestrator martha.carroll@gmail.com | Admin | |
Deborah Hane Forward Implementation Designer deborah.hane81@yahoo.com | Admin | |
Marsha Stiedemann Chief Operations Supervisor marsha_stiedemann@hotmail.com | Member | |
Elvis Wehner Customer Usability Administrator elvis.wehner@gmail.com | Viewer | |
Herman Kozey Principal Applications Orchestrator herman.kozey@yahoo.com | Viewer | |
Cristal Brekke Senior Data Analyst cristal.brekke@yahoo.com | Admin | |
Gunnar Funk Corporate Metrics Planner gunnar.funk70@gmail.com | Viewer | |
Claude Ferry Customer Branding Developer claude_ferry@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 | |
|---|---|---|---|---|
| Jannie Kerluke | andrew_quigley@hotmail.com | Hintzborough | Inactive | $1,005.00 |
| Otis Halvorson | ambrose53@gmail.com | Tanyaburgh | Inactive | $562.86 |
| Ruby Hyatt | walter.quigley4@yahoo.com | Hillsboro | Active | $618.10 |
| Maxwell Rice | bethel.ankunding@hotmail.com | Portage | Inactive | $941.81 |
| Sidney Volkman | minnie_barrows@gmail.com | New Lora | Inactive | $1,196.03 |
| Total | $4,323.80 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Nicholas McLaughlin @darnell.damore | lena.grady@hotmail.com | Fort Darrincester | Active | $947.73 |
Kobe Weber @jermaine62 | juliana52@gmail.com | Port Madisonchester | Active | $856.96 |
Rudolph Johnston @myra71 | don.monahan@hotmail.com | Spring Valley | Inactive | $8.03 |
Bernice Wolff @nicolette70 | myriam58@hotmail.com | Farmington | Active | $794.68 |
Darnell Simonis @latoya37 | yoshiko.graham72@yahoo.com | West Jordan | Active | $714.85 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gilbert Yundt | lonnie_hane57@yahoo.com | Christiansenton | Inactive | $1,117.72 |
| Kristopher Jast | nina_moen@gmail.com | North Antwon | Active | $352.22 |
| Santos Lockman | bruce_roob-heidenreich57@hotmail.com | Mayertberg | Inactive | $520.73 |
| Anastasia Schmeler | maureen22@hotmail.com | Fontana | Inactive | $858.56 |
| Trisha Klein | rosa.kreiger@yahoo.com | Rodrigueztown | Inactive | $983.29 |
| Total | $3,832.52 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Drew Kiehn | lucious65@hotmail.com | East Rasheedbury | Active | $872.27 |
| Brittany Kuphal | frederick.haley83@gmail.com | Andreannefurt | Inactive | $689.65 |
| Danial Muller | rafael79@hotmail.com | South Emorycester | Active | $347.84 |
| Torrey Dickinson | saul_nicolas@gmail.com | Jefferyfield | Inactive | $123.39 |
| Gerard Haley | sarina96@yahoo.com | Fort Worth | Inactive | $78.37 |
| Total | $2,111.52 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Aisha Hermann | curtis89@yahoo.com | Port Kirkburgh | Active | $242.57 |
| Olivia Pfannerstill | kailey_schuppe50@hotmail.com | Herzogland | Active | $1,028.93 |
| Nathaniel Runte | katelyn64@gmail.com | New Dusty | Active | $2.63 |
| Miss Rosemary Buckridge | blair_stehr39@gmail.com | New Rufus | Active | $1,169.11 |
| Brooke Swaniawski | raoul89@hotmail.com | Palm Desert | Inactive | $634.35 |
| Total | $3,077.59 | |||
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 | ||
|---|---|---|---|---|---|
| Hester Wyman | vena_gutmann@hotmail.com | Skokie | Inactive | $437.27 | |
| Chris Smith | josh.vandervort67@hotmail.com | Gutmann-Cristfort | Active | $627.28 | |
| Hyman Monahan | shelia_lockman60@hotmail.com | Port Belinda | Active | $301.68 | |
| Bethany Collins | anissa_muller80@yahoo.com | Suestead | Inactive | $67.43 | |
| Herbert Cronin | leone.blick35@gmail.com | Jorgeshire | Inactive | $1,129.85 | |
| Total | $2,563.51 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alize Purdy | kent.bode-runolfsson@yahoo.com | South Gia | Inactive | $243.47 | |
| Janiya Balistreri | jeremiah.gleason@hotmail.com | Leocester | Active | $17.66 | |
| Niko Koelpin | guadalupe11@yahoo.com | Lindgrenhaven | Active | $467.44 | |
| Devin Okuneva | tomas16@gmail.com | Lake Emmettland | Inactive | $683.76 | |
| Bria Zieme | edmond2@yahoo.com | Kathyton | Inactive | $183.19 | |
| Total | $1,595.52 | ||||
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 | |
|---|---|---|---|---|
| Titus Abernathy DVM | mildred.cassin74@hotmail.com | East Rochelleland | Inactive | $946.45 |
| Sofia Gusikowski | maxime22@hotmail.com | Bobbyfort | Inactive | $781.58 |
| Jorge Nikolaus | felipa_brekke@hotmail.com | Delphineworth | Inactive | $938.99 |
| Mrs. Stephan Bernhard | theo.ruecker@gmail.com | Lake Steve | Active | $673.83 |
| Gerard Ritchie | crawford68@gmail.com | Fort Durward | Inactive | $414.22 |
| Mr. Nils Collier | debra16@yahoo.com | Carmel | Inactive | $1,004.02 |
| Lucille Schaden | santa_daugherty75@hotmail.com | Ceres | Active | $544.04 |
| Jennyfer Hermiston | bobbie.lockman67@hotmail.com | Konopelskiville | Inactive | $918.33 |
| Renee Purdy | gussie98@hotmail.com | Fort Lyric | Inactive | $733.00 |
| Jeff Senger | eula55@hotmail.com | West Louveniaberg | Active | $425.58 |
| Melissa Rau | lucy_nicolas@gmail.com | Inglewood | Inactive | $460.46 |
| Winston Schaefer | jennie.brekke70@yahoo.com | New Johanna | Inactive | $664.31 |
| Mrs. Jenna Schamberger | nina.steuber@yahoo.com | Fort Javier | Inactive | $335.10 |
| Rochelle Hyatt-Simonis | nels41@gmail.com | North Tina | Active | $208.79 |
| Jeramie Morissette | katlyn3@yahoo.com | New Jerryhaven | Active | $835.56 |
| Total | $9,884.26 | |||
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 |