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 | Pending | Credit Card | $518.07 |
| INV002 | Unpaid | PayPal | $341.44 |
| INV003 | Paid | Bank Transfer | $931.53 |
| INV004 | Pending | Credit Card | $769.87 |
| INV005 | Paid | Credit Card | $302.82 |
| INV006 | Pending | Bank Transfer | $814.63 |
| INV007 | Pending | Bank Transfer | $243.02 |
| Total | $3,921.38 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sandra Stiedemann | Internal Integration Planner | sandra.stiedemann@gmail.com | Admin | |
| Marcus Heathcote | Regional Research Architect | marcus.heathcote@yahoo.com | Member | |
| Roland Hoppe | Senior Group Planner | roland.hoppe75@yahoo.com | Member | |
| Bruce Gutmann | Corporate Security Representative | bruce_gutmann@yahoo.com | Viewer | |
| Kristi Corkery | Future Markets Officer | kristi_corkery71@yahoo.com | Member | |
| Agustina Wuckert | District Research Analyst | agustina_wuckert94@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 |
|---|---|---|
Sebastian Grady Regional Implementation Officer sebastian_grady@yahoo.com | Admin | |
Ellsworth Haley National Quality Representative ellsworth_haley@yahoo.com | Admin | |
Marcia Rath International Metrics Analyst marcia.rath15@yahoo.com | Member | |
Shanie Crooks Regional Interactions Representative shanie_crooks32@hotmail.com | Viewer | |
Ann Kassulke Global Operations Officer ann_kassulke@hotmail.com | Admin | |
Janie Mertz Senior Communications Director janie.mertz@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 |
|---|---|---|
Georgia Murray National Communications Officer georgia.murray33@yahoo.com | Viewer | |
Cristian Koss Chief Operations Developer cristian_koss86@hotmail.com | Member | |
Mercedes Paucek Legacy Web Executive mercedes_paucek@gmail.com | Admin | |
Jessica Auer Dynamic Infrastructure Technician jessica.auer@yahoo.com | Viewer | |
Blaise Rempel Direct Applications Agent blaise.rempel19@hotmail.com | Member | |
Barry Witting Corporate Integration Producer barry_witting@hotmail.com | Member | |
Bob Howe Senior Web Analyst bob_howe@hotmail.com | Member | |
Kristen Hodkiewicz Chief Quality Engineer kristen_hodkiewicz@yahoo.com | Admin | |
Mac Doyle Global Metrics Strategist mac.doyle83@hotmail.com | Viewer | |
Theo Turner Principal Quality Engineer theo_turner48@hotmail.com | Member | |
Barry Wilkinson Regional Quality Associate barry.wilkinson@yahoo.com | Admin | |
Bria Klein-Bartoletti Chief Creative Agent bria.klein-bartoletti@gmail.com | Viewer | |
Rose Vandervort Senior Tactics Developer rose.vandervort43@hotmail.com | Admin | |
Bradford Gislason International Research Liaison bradford_gislason58@yahoo.com | Viewer | |
Bailey Rutherford Product Intranet Officer bailey.rutherford45@gmail.com | Viewer | |
Emily Rogahn Lead Applications Specialist emily_rogahn@gmail.com | Member | |
Roman Lueilwitz Global Infrastructure Representative roman.lueilwitz@yahoo.com | Member | |
Carole Robel Internal Directives Planner carole.robel@yahoo.com | Viewer | |
Marta Jacobi Chief Data Analyst marta.jacobi@hotmail.com | Member | |
Rufus Purdy International Program Engineer rufus_purdy@yahoo.com | Admin |
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 | |
|---|---|---|---|---|
| Miss Magnus Hoppe I | jennie.quitzon@gmail.com | New Juanaberg | Inactive | $605.54 |
| Cameron Grady | lynda.hilll98@gmail.com | Veronicaworth | Inactive | $999.97 |
| Erik Will | yvette.denesik62@gmail.com | Hermannboro | Inactive | $791.94 |
| Mr. Daryl Larson | jeanne.murazik0@yahoo.com | South Alonzostad | Active | $329.36 |
| Ebba Zulauf | shaina.lockman@hotmail.com | Winifredhaven | Inactive | $811.97 |
| Total | $3,538.78 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ms. Leta Nader @kristi12 | stone_farrell85@hotmail.com | Anselfield | Inactive | $1,122.01 |
Ashley Hansen @laverne.konopelski | tracy_bernier@gmail.com | Lake Santinoland | Active | $822.64 |
Monserrat Franecki @august.kihn | christie74@hotmail.com | Angieberg | Inactive | $276.25 |
Juan Crist @silas_considine12 | marcus_little37@yahoo.com | Boehmborough | Active | $747.82 |
Lawson Dickinson DDS @gunnar.abernathy | madeline4@yahoo.com | Yostland | Inactive | $464.40 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Candice King MD | roger.haley83@hotmail.com | Fort Sarinafort | Active | $791.60 |
| Gilbert Collins | celia.collins72@hotmail.com | North Beulahstead | Active | $605.65 |
| Lina Grant | delia_herzog91@hotmail.com | Port Amelieworth | Inactive | $1,002.56 |
| Drew Baumbach | yvonne21@hotmail.com | Manteside | Active | $175.01 |
| Irving O'Kon | virginia_howell94@yahoo.com | East Myronstad | Inactive | $437.45 |
| Total | $3,012.27 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Oleta Toy | barry79@gmail.com | Israelport | Inactive | $304.84 |
| Mr. Clayton Conroy | madilyn.okeefe@hotmail.com | Cheyenne | Active | $699.85 |
| Mr. Santiago Walker | edith.heathcote85@yahoo.com | Lake Arnoldo | Active | $454.87 |
| Fae Willms | paige_rippin-connelly21@yahoo.com | Davisboro | Inactive | $1,166.26 |
| Kellie Runolfsdottir | lavinia.schuster32@yahoo.com | Leighport | Inactive | $616.84 |
| Total | $3,242.66 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Akeem Lind | ahmed33@gmail.com | Franklinland | Active | $608.60 |
| Dr. Anita Will-Williamson | molly.oconner0@gmail.com | Elenaworth | Active | $297.26 |
| Van Hills | sophia.smith@hotmail.com | Justuschester | Inactive | $514.03 |
| Dora Morar | tim.boyle73@hotmail.com | Alyssatown | Active | $170.09 |
| Bradley Beier | blanca_lang@yahoo.com | Chancehaven | Inactive | $1,112.68 |
| Total | $2,702.66 | |||
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 | ||
|---|---|---|---|---|---|
| Sheldon Reinger | mariam.lesch@gmail.com | Dedricstead | Inactive | $451.03 | |
| Isidro Kozey | tyra.bauch-lind@yahoo.com | Chicopee | Inactive | $327.12 | |
| Violet Predovic | korey_wolf-stark@hotmail.com | Catalina Foothills | Inactive | $304.57 | |
| Dr. Eduardo Littel | colton27@hotmail.com | Jast-Howellchester | Active | $512.50 | |
| Mireille Fahey | miranda75@gmail.com | Bethlehem | Active | $940.09 | |
| Total | $2,535.31 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dr. Jose Mayer | ryann.stark24@hotmail.com | Paterson | Active | $718.74 | |
| Flora Bode | citlalli.tillman@yahoo.com | Rogahnworth | Inactive | $705.78 | |
| Jacqueline Mante | nancy.thompson@gmail.com | Buffalo Grove | Active | $421.94 | |
| Laura Lockman | jasen.kiehn72@gmail.com | Aliaburgh | Active | $1,072.11 | |
| Alyce Franecki | raquel_fay48@hotmail.com | Ullrichside | Active | $1,096.18 | |
| Total | $4,014.75 | ||||
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 | |
|---|---|---|---|---|
| Earnest Harris | jessika.stiedemann89@yahoo.com | Lake Jennie | Active | $646.65 |
| Mr. Jonathon Kassulke | sasha.stehr94@yahoo.com | Lueilwitzhaven | Active | $576.34 |
| Dr. Josh Keeling | grady.pouros14@hotmail.com | Lake Mindyland | Active | $1,047.02 |
| Katie Gorczany | ethel_ebert27@hotmail.com | North Santiago | Active | $880.81 |
| Emerald Heaney | danny_lowe@yahoo.com | Chesterfield | Active | $174.39 |
| Suzanne Lubowitz | jacques.hettinger@gmail.com | San Rafael | Active | $100.89 |
| Donnie Abshire | loren.emard@yahoo.com | New Broderick | Inactive | $569.03 |
| Roberta Stehr Sr. | yolanda47@yahoo.com | Port Jazlyn | Active | $656.45 |
| Leigh Mertz | cathryn_stanton@yahoo.com | Gwenborough | Active | $782.55 |
| Mr. Cedric Boyle | emie.daniel77@yahoo.com | Anderson-Schmidtfield | Inactive | $562.55 |
| Dorris Hessel | gail.hermann18@gmail.com | Port Brennonburgh | Inactive | $124.83 |
| Betty Dooley | jessika.collier@gmail.com | Garden Grove | Inactive | $812.03 |
| Baylee Mayert | juwan_oreilly53@hotmail.com | Scottsdale | Inactive | $470.40 |
| Marlee Berge | marta_purdy@gmail.com | Barbaramouth | Inactive | $558.63 |
| Reba Kiehn | dakota_block90@gmail.com | West Samuel | Inactive | $1,174.39 |
| Total | $9,136.96 | |||
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 |