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 | $796.51 |
| INV002 | Unpaid | Bank Transfer | $633.58 |
| INV003 | Paid | PayPal | $541.27 |
| INV004 | Pending | PayPal | $432.01 |
| INV005 | Pending | Credit Card | $981.48 |
| INV006 | Unpaid | Credit Card | $885.14 |
| INV007 | Pending | PayPal | $711.05 |
| Total | $4,981.04 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Beau McClure | Senior Implementation Orchestrator | beau.mcclure@hotmail.com | Member | |
| Reed Towne | Chief Communications Technician | reed_towne36@hotmail.com | Member | |
| Cecilia Toy | National Division Coordinator | cecilia.toy72@gmail.com | Member | |
| Brown Ankunding | Future Markets Developer | brown_ankunding92@hotmail.com | Member | |
| Kali Anderson | Principal Program Strategist | kali_anderson@yahoo.com | Member | |
| Misael Bednar | Corporate Operations Planner | misael_bednar27@hotmail.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 |
|---|---|---|
Ken Marks Product Division Strategist ken.marks@hotmail.com | Viewer | |
Joshuah Casper Regional Communications Assistant joshuah_casper94@hotmail.com | Member | |
Erin Zulauf Dynamic Optimization Orchestrator erin_zulauf42@gmail.com | Viewer | |
Asha Mante Global Infrastructure Supervisor asha.mante@hotmail.com | Member | |
Kristofer McGlynn District Markets Architect kristofer.mcglynn@hotmail.com | Admin | |
Mathilde Gusikowski International Communications Developer mathilde.gusikowski85@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 |
|---|---|---|
Lelah White Human Quality Facilitator lelah_white73@gmail.com | Viewer | |
Evan Armstrong District Identity Agent evan_armstrong50@gmail.com | Admin | |
Merritt Parker Internal Accounts Orchestrator merritt.parker@gmail.com | Admin | |
Hailie Padberg Lead Communications Director hailie_padberg@gmail.com | Member | |
Broderick Nikolaus Customer Tactics Technician broderick.nikolaus42@hotmail.com | Admin | |
Sage Kozey Chief Web Analyst sage_kozey72@gmail.com | Admin | |
Vallie Koepp Chief Communications Agent vallie.koepp33@yahoo.com | Member | |
Raleigh Mills Dynamic Directives Developer raleigh.mills20@hotmail.com | Admin | |
Corrine Wilderman Global Research Director corrine.wilderman@yahoo.com | Admin | |
Deangelo Smith Investor Usability Orchestrator deangelo.smith65@gmail.com | Admin | |
Angel D'Amore Senior Configuration Director angel.damore@gmail.com | Member | |
Charity Stracke-O'Reilly District Communications Specialist charity_stracke-oreilly21@yahoo.com | Member | |
Gabriella Altenwerth Product Integration Assistant gabriella.altenwerth@yahoo.com | Viewer | |
Lucy Pouros Regional Group Designer lucy_pouros24@yahoo.com | Viewer | |
Lela Ullrich Legacy Accountability Director lela.ullrich@yahoo.com | Viewer | |
Margot Schumm Legacy Accounts Technician margot.schumm@yahoo.com | Viewer | |
Riley Jast Forward Data Liaison riley.jast12@yahoo.com | Admin | |
Maverick McDermott Global Tactics Executive maverick_mcdermott55@gmail.com | Viewer | |
Gustave Zieme National Accounts Supervisor gustave.zieme64@hotmail.com | Viewer | |
Derek Douglas District Infrastructure Specialist derek_douglas15@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 | |
|---|---|---|---|---|
| Erin Brekke | mitchel_gerhold42@hotmail.com | East Lloyd | Inactive | $486.63 |
| Cecilia Tillman | jayden.johns2@yahoo.com | Connside | Inactive | $815.94 |
| Violet Bartell | lucius_lynch24@gmail.com | Leuschkeboro | Active | $206.57 |
| Dr. Ira Huels | emmitt70@hotmail.com | Leanntown | Inactive | $619.24 |
| Adrienne Price | vernice35@hotmail.com | Augusta-Richmond County | Inactive | $232.45 |
| Total | $2,360.83 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Marta Greenfelder @jerel_huels | tabitha.kiehn@yahoo.com | Trujillo Alto | Active | $512.61 |
Marcus Schaden @aimee.mills | leonor48@gmail.com | Rowland Heights | Active | $92.76 |
Shannon Kling DDS @misael64 | felicity_haley@yahoo.com | Lewiston | Active | $624.67 |
Lorene Zboncak V @michele9 | verda31@gmail.com | Citrus Heights | Active | $963.60 |
Jo Waters @oscar.price | ephraim.treutel58@hotmail.com | Uptonview | Active | $626.87 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lynne Sipes | lexus.wyman@gmail.com | Okunevaport | Active | $1,126.84 |
| Jeremiah Weimann | elisabeth95@gmail.com | North Rebaburgh | Inactive | $867.29 |
| Bill Mayer | alvera.yundt23@hotmail.com | Seattle | Inactive | $1,121.09 |
| Jesse Walker | gloria_satterfield@hotmail.com | East Tressa | Inactive | $558.62 |
| Geoffrey Swift | mikayla.thompson@gmail.com | Paucekbury | Inactive | $1,038.46 |
| Total | $4,712.30 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Carolyn Hayes | maia11@hotmail.com | Fort Fernport | Active | $809.80 |
| Blanche Ratke-Harris | abdiel79@yahoo.com | Fort Collins | Active | $194.23 |
| Terrance Mayer | clement93@gmail.com | South Theron | Inactive | $666.65 |
| Sergio Hodkiewicz | wellington29@hotmail.com | Mertzcester | Active | $1,055.12 |
| Jill Schroeder | jordi2@hotmail.com | Casperview | Inactive | $639.25 |
| Total | $3,365.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brandon Kunze | emmanuel_stark30@gmail.com | Maccester | Active | $929.84 |
| Christine Zboncak | yasmine_emard@hotmail.com | Cordiastead | Inactive | $146.71 |
| Otis Braun | ezekiel.smith79@hotmail.com | Fort Kaia | Inactive | $425.14 |
| Sylvester Volkman | sarina.parisian@gmail.com | Fort Clemmiechester | Active | $113.92 |
| Jane Toy | maritza_hauck@hotmail.com | Ryannchester | Active | $268.32 |
| Total | $1,883.93 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Adrienne Fisher I | claire_predovic32@yahoo.com | Fort Friedrich | Active | $862.51 | |
| Sabrina Durgan | amir_powlowski44@hotmail.com | West Gunnarland | Active | $507.99 | |
| Homer Halvorson | fabian70@yahoo.com | Carrollton | Inactive | $617.76 | |
| Ms. Marcia Altenwerth II | beatrice.paucek@gmail.com | Port Mekhi | Inactive | $327.34 | |
| Tammy Greenfelder | esmeralda.lesch@gmail.com | Allanside | Active | $1,128.92 | |
| Total | $3,444.52 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Winston Brekke | maya.turcotte@gmail.com | Gradybury | Active | $1,052.34 | |
| Jamie Homenick DDS | bernadine38@yahoo.com | Pacochamouth | Active | $952.30 | |
| Mr. Rick Corwin | tianna35@hotmail.com | Amayaville | Inactive | $633.11 | |
| Jamie Dickens | garret.upton-beatty58@hotmail.com | Lake Dawson | Inactive | $668.09 | |
| Holly Kuhn | candido_tillman20@yahoo.com | Port Estelle | Inactive | $294.69 | |
| Total | $3,600.53 | ||||
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 | |
|---|---|---|---|---|
| Jody Konopelski | kyler.volkman35@gmail.com | West Darrinchester | Active | $513.43 |
| Sylvia Cartwright | edmond_barrows13@gmail.com | New Noemie | Active | $241.58 |
| Lucas Graham | mavis.fahey68@hotmail.com | Fort Delphineberg | Inactive | $820.63 |
| Colin Hills | kamron51@yahoo.com | Port Devin | Inactive | $1,002.76 |
| Rosemary Spencer | isidro.krajcik89@yahoo.com | Ivyworth | Inactive | $931.44 |
| Ralph Simonis PhD | deja11@gmail.com | Wilson | Active | $678.83 |
| Grace Mohr | oran.howe@gmail.com | Emeliafort | Active | $1.67 |
| Nettie Towne | okey_simonis93@hotmail.com | Tatumshire | Active | $67.90 |
| Levi Stark | kris50@yahoo.com | Levittown | Inactive | $408.71 |
| Geraldine Bernier | oral_stark-anderson@yahoo.com | Genovevachester | Inactive | $602.28 |
| Terri Cremin | keara97@gmail.com | Beattyshire | Active | $352.43 |
| Austin Ratke | dangelo_aufderhar@yahoo.com | South Nicolette | Inactive | $1,144.66 |
| Earl Konopelski | eulah_dibbert43@hotmail.com | Delbertfield | Inactive | $834.54 |
| Lynne Kulas-Schmitt | brycen_welch47@hotmail.com | West Bettyfurt | Inactive | $406.58 |
| Rosa Douglas | chyna.becker@yahoo.com | Arihaven | Active | $724.20 |
| Total | $8,731.64 | |||
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 |