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 | $265.41 |
| INV002 | Paid | Bank Transfer | $297.31 |
| INV003 | Unpaid | Bank Transfer | $924.45 |
| INV004 | Pending | Bank Transfer | $965.65 |
| INV005 | Paid | PayPal | $404.65 |
| INV006 | Unpaid | Bank Transfer | $181.27 |
| INV007 | Paid | PayPal | $615.95 |
| Total | $3,654.69 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Chris Schmitt | Investor Infrastructure Representative | chris_schmitt@gmail.com | Viewer | |
| Charlotte Dibbert | National Interactions Facilitator | charlotte.dibbert@yahoo.com | Viewer | |
| Antonia Bayer | Internal Communications Liaison | antonia_bayer98@gmail.com | Member | |
| Jerry Kerluke | Senior Data Associate | jerry.kerluke38@hotmail.com | Admin | |
| Harry Schaden | Lead Optimization Engineer | harry_schaden@gmail.com | Viewer | |
| Horace Breitenberg | Global Marketing Representative | horace.breitenberg@yahoo.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 |
|---|---|---|
Vernon Pfeffer Legacy Web Officer vernon_pfeffer@hotmail.com | Admin | |
Garrett Huels Central Communications Engineer garrett_huels51@gmail.com | Viewer | |
Miriam Kassulke Legacy Research Agent miriam_kassulke@yahoo.com | Viewer | |
Kaelyn Reynolds Internal Branding Designer kaelyn.reynolds82@gmail.com | Viewer | |
Tiffany Oberbrunner National Intranet Director tiffany_oberbrunner86@hotmail.com | Member | |
Doyle Gislason Principal Mobility Producer doyle.gislason9@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 |
|---|---|---|
Darion Halvorson Global Branding Consultant darion.halvorson@hotmail.com | Member | |
Selina Marvin Global Quality Executive selina_marvin@yahoo.com | Member | |
Jake Kuvalis Chief Operations Producer jake_kuvalis@hotmail.com | Admin | |
Faith Lynch Legacy Interactions Liaison faith_lynch@gmail.com | Viewer | |
Paulette Ritchie Legacy Branding Coordinator paulette_ritchie93@gmail.com | Viewer | |
Laurence Brekke Chief Intranet Engineer laurence_brekke@gmail.com | Member | |
Sidney Green Internal Directives Liaison sidney.green13@hotmail.com | Admin | |
Brad Gottlieb Chief Usability Producer brad.gottlieb@hotmail.com | Admin | |
Jameson Fisher National Assurance Engineer jameson.fisher@yahoo.com | Member | |
Becky Walsh Forward Division Consultant becky.walsh76@yahoo.com | Admin | |
Alexie Feeney National Solutions Agent alexie_feeney39@yahoo.com | Admin | |
Avis Thiel International Division Representative avis.thiel17@gmail.com | Member | |
Rebecca Tremblay Central Group Assistant rebecca.tremblay79@yahoo.com | Admin | |
Gerardo Hayes Principal Identity Manager gerardo.hayes@yahoo.com | Admin | |
Nadia Schroeder Global Data Architect nadia.schroeder89@hotmail.com | Admin | |
Maureen Heller Customer Paradigm Engineer maureen_heller13@yahoo.com | Admin | |
Kendra Stark Regional Applications Assistant kendra.stark@yahoo.com | Viewer | |
Caroline Kunze International Integration Associate caroline.kunze@gmail.com | Admin | |
Tasha Metz Dynamic Brand Specialist tasha_metz48@yahoo.com | Viewer | |
Savannah Rowe Principal Web Director savannah.rowe44@gmail.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 | |
|---|---|---|---|---|
| Gilbert Bartell | meta74@yahoo.com | Ericaville | Inactive | $592.66 |
| Wilson Deckow | al.mcglynn@yahoo.com | West Blanca | Active | $1,134.16 |
| Lana Quitzon | julio8@gmail.com | Fort Shanny | Inactive | $1,004.30 |
| Oswald Shields | ashley91@yahoo.com | Lake Jocelyn | Active | $1,180.01 |
| Maegan Koepp | lorna_dooley53@hotmail.com | Lake Maynardland | Active | $533.27 |
| Total | $4,444.40 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Zula Conn @florida22 | sheila94@hotmail.com | Willmsboro | Active | $1,078.18 |
Destin Schultz @kathleen_funk | annette60@gmail.com | West Josefinaview | Inactive | $571.89 |
Mr. Tyrone Parker @tara_luettgen | ole5@yahoo.com | Port Davidville | Inactive | $284.94 |
Scarlett Roob @kiley.franey | jacklyn.hermiston41@gmail.com | New Eula | Active | $261.38 |
Nathaniel Okuneva @rosalinda_lang-heller | jonatan.beahan@gmail.com | Bowie | Inactive | $660.65 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eleanor Strosin | georgia67@yahoo.com | New Essiefurt | Active | $701.60 |
| D'angelo Dare | mariela_anderson83@hotmail.com | New Gloria | Active | $892.19 |
| Luther Larkin | ernest_yost-gislason@gmail.com | New Rudolphboro | Inactive | $751.01 |
| Mr. Anthony Prosacco IV | lucinda.kunde64@yahoo.com | Leonfort | Inactive | $1,120.17 |
| Joshua Botsford | ettie.leuschke@gmail.com | North Lysanne | Inactive | $729.87 |
| Total | $4,194.84 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Phyllis Larson | lempi.gislason@yahoo.com | Henderson | Inactive | $371.29 |
| Maye Bernhard | santina.emard22@yahoo.com | Port Gregoriachester | Inactive | $839.87 |
| Mrs. Jo Gorczany | joanne_ratke59@yahoo.com | West Stellaville | Inactive | $429.60 |
| Nettie Kihn V | valerie97@yahoo.com | Deliamouth | Active | $39.91 |
| Simone Gusikowski | warren_ledner51@gmail.com | Margate | Active | $660.09 |
| Total | $2,340.76 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Trudie Wolf | grayson6@yahoo.com | West Monserrateville | Active | $366.30 |
| Colleen Cassin | ivan72@yahoo.com | Evanston | Active | $889.73 |
| Miss Rosalia Kirlin MD | corrine.heller@yahoo.com | Port Emersontown | Active | $169.51 |
| Concepcion Heidenreich | tara.kling62@hotmail.com | Angelinastead | Inactive | $455.94 |
| Cleora Dicki | jerome7@hotmail.com | New Erikstead | Inactive | $619.43 |
| Total | $2,500.91 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Irving Franey | riley_schaefer48@yahoo.com | Lillieshire | Active | $884.73 | |
| Rodney Balistreri | bobby_dickinson-cole74@yahoo.com | The Woodlands | Active | $1,053.76 | |
| Modesta Prosacco | phillip.osinski@yahoo.com | Stillwater | Active | $48.65 | |
| Paula Bailey | karina_koss@gmail.com | Sporerberg | Active | $1,127.03 | |
| Jace Franecki | brody.emard@hotmail.com | College Station | Inactive | $327.17 | |
| Total | $3,441.34 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Rochelle Jacobi | kathlyn_walter51@gmail.com | Andersonstad | Inactive | $779.60 | |
| Garry Hayes | johnny_marks4@gmail.com | Benhaven | Active | $188.54 | |
| Mr. Margarete Hyatt | darwin51@gmail.com | Bedford | Inactive | $650.94 | |
| Angie Adams | tate72@gmail.com | Bodeburgh | Inactive | $233.39 | |
| Rafael Harvey | lila_jacobs52@hotmail.com | Fort Effie | Inactive | $986.83 | |
| Total | $2,839.30 | ||||
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 | |
|---|---|---|---|---|
| Eliseo Schmitt-Bartoletti | ellen34@hotmail.com | Rowechester | Inactive | $200.77 |
| Miss Adell Zulauf | erma74@yahoo.com | Alanaton | Active | $602.07 |
| Alanna Herman | peter.bruen90@gmail.com | Silasberg | Active | $430.46 |
| Faye Schiller | sunny25@gmail.com | Port Rebaburgh | Active | $951.26 |
| Kara Beier | immanuel_kerluke43@gmail.com | South Dillonville | Inactive | $455.41 |
| Dr. Veda Heller | marlon.runolfsson51@gmail.com | Tyreekborough | Active | $739.41 |
| Juvenal Cormier-Rempel | domenico.mohr0@hotmail.com | Yucaipa | Inactive | $541.60 |
| Dennis Rice | monica92@gmail.com | Chanceland | Active | $549.97 |
| Eula Senger | shanny_abernathy@yahoo.com | East Merlebury | Active | $910.24 |
| Regina Pagac | maxime94@hotmail.com | Mrazberg | Active | $207.88 |
| Darrel Schuppe | jakayla_beatty90@gmail.com | Monahanview | Inactive | $448.18 |
| Mr. Davonte Schroeder | mamie4@gmail.com | West Gretafield | Inactive | $1,052.61 |
| Katherine Kub | ken_rath@gmail.com | West Anita | Inactive | $275.00 |
| Letha Lebsack | graham.wilderman@gmail.com | West Zacheryhaven | Active | $247.59 |
| Raymond Kuhlman | danielle.hagenes-keebler17@yahoo.com | West Emersonboro | Active | $794.83 |
| Total | $8,407.28 | |||
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 |