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 | $806.49 |
| INV002 | Paid | Credit Card | $177.23 |
| INV003 | Unpaid | PayPal | $939.49 |
| INV004 | Pending | Bank Transfer | $396.22 |
| INV005 | Pending | Credit Card | $815.88 |
| INV006 | Unpaid | PayPal | $428.64 |
| INV007 | Pending | Credit Card | $302.01 |
| Total | $3,865.96 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Karelle Dietrich | District Research Designer | karelle.dietrich@gmail.com | Admin | |
| Cordie Considine | National Division Administrator | cordie_considine@hotmail.com | Viewer | |
| Dallin Berge | District Implementation Planner | dallin_berge83@yahoo.com | Member | |
| Marilyn Romaguera-Abshire | Forward Brand Orchestrator | marilyn.romaguera-abshire@hotmail.com | Viewer | |
| Troy Bergnaum | Future Brand Strategist | troy_bergnaum30@yahoo.com | Admin | |
| Maudie Medhurst | Lead Factors Engineer | maudie.medhurst@gmail.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 |
|---|---|---|
Adrian Kessler Senior Group Strategist adrian.kessler51@yahoo.com | Member | |
Barney Block Direct Branding Designer barney.block@yahoo.com | Viewer | |
Keanu Mills Customer Security Agent keanu_mills@yahoo.com | Admin | |
Mervin Murphy Chief Creative Producer mervin.murphy25@yahoo.com | Viewer | |
Murphy Haley Human Markets Planner murphy_haley@hotmail.com | Member | |
Dante Yost Dynamic Interactions Coordinator dante.yost31@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 |
|---|---|---|
Edgar Labadie District Optimization Coordinator edgar_labadie17@gmail.com | Viewer | |
Cristobal Sanford Direct Research Administrator cristobal.sanford26@yahoo.com | Admin | |
Monty Vandervort Central Interactions Planner monty_vandervort@yahoo.com | Viewer | |
Kenneth Larkin Internal Brand Assistant kenneth_larkin68@hotmail.com | Viewer | |
Samantha Harvey National Brand Engineer samantha_harvey@gmail.com | Member | |
Laurine Rogahn Legacy Accounts Architect laurine_rogahn@hotmail.com | Member | |
Blanche Greenholt District Metrics Producer blanche_greenholt@gmail.com | Viewer | |
Lana Nitzsche Principal Marketing Consultant lana_nitzsche79@gmail.com | Member | |
Winifred Ruecker Senior Factors Strategist winifred.ruecker@yahoo.com | Member | |
Eliza O'Hara Lead Interactions Designer eliza_ohara@yahoo.com | Viewer | |
Jazmyne Howell Global Solutions Administrator jazmyne_howell@gmail.com | Member | |
Carlie Lind Lead Optimization Strategist carlie_lind@hotmail.com | Viewer | |
Kiana McKenzie Senior Intranet Planner kiana.mckenzie73@yahoo.com | Admin | |
Ervin Kihn Regional Operations Liaison ervin_kihn74@yahoo.com | Member | |
Sidney Tremblay Chief Security Consultant sidney_tremblay50@hotmail.com | Viewer | |
Stuart Balistreri Principal Assurance Associate stuart_balistreri71@hotmail.com | Viewer | |
Bert Beahan Central Configuration Consultant bert.beahan91@gmail.com | Viewer | |
Viviane White Senior Markets Agent viviane_white@hotmail.com | Member | |
Eva Stroman Principal Branding Architect eva.stroman41@yahoo.com | Admin | |
Laverne Hayes Central Program Developer laverne_hayes@yahoo.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 | |
|---|---|---|---|---|
| Bernhard Gusikowski-Kozey | vergie.cartwright@yahoo.com | Aliciafurt | Active | $171.81 |
| Ezra Windler | candelario.johnston17@hotmail.com | Kenosha | Active | $206.68 |
| Anita Emard | jedidiah.huel@hotmail.com | South Norrisbury | Inactive | $1,174.90 |
| Kristian Klocko | tom.harber9@yahoo.com | Kirlin-Beahanberg | Active | $551.23 |
| Lloyd Aufderhar | nicholas_klocko@gmail.com | Grantport | Active | $788.47 |
| Total | $2,893.09 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Gordon Schroeder @gunnar_kulas87 | chester9@hotmail.com | North Boyd | Inactive | $267.16 |
Sonia Prosacco @ryder.fisher | reina75@gmail.com | Fort Clinton | Inactive | $641.71 |
Henrietta Hauck @loyce_jerde | lonie_hoeger@hotmail.com | Ziemanncester | Active | $116.99 |
Jabari Lemke I @emanuel53 | sarina.kuphal@hotmail.com | Port Robertaville | Inactive | $525.35 |
Lea Ankunding @austin56 | tamara57@yahoo.com | East Camilla | Inactive | $405.91 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Jean Buckridge | jackson42@hotmail.com | Port Meredithtown | Active | $164.79 |
| Felicia Huel MD | sarah.greenfelder@gmail.com | West Norbert | Inactive | $1,187.46 |
| Albert Adams-Johnson | bailey.morissette49@hotmail.com | Rempelworth | Active | $52.53 |
| Julie Aufderhar | olen27@gmail.com | Ernserfield | Active | $667.07 |
| Dereck Dicki | marcella_witting31@yahoo.com | Fort Jessica | Active | $93.60 |
| Total | $2,165.45 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Armando Herman | miranda_wuckert77@gmail.com | New Michaela | Inactive | $1,091.41 |
| Tamara Block III | kenny0@gmail.com | Aaronfield | Inactive | $1,086.08 |
| Aletha Lubowitz-O'Conner | adan43@yahoo.com | Angelafort | Inactive | $344.76 |
| Dr. Garry Rodriguez | gerardo_gusikowski@gmail.com | Kristenboro | Inactive | $606.09 |
| Kyra Corwin | earlene_kuvalis@yahoo.com | Lebsackville | Inactive | $940.98 |
| Total | $4,069.32 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alaina Spinka | orval46@gmail.com | Port Johnnyview | Inactive | $5.76 |
| Lloyd Kovacek | emma.kozey@hotmail.com | Lake Kelsieside | Active | $1,101.02 |
| Dianna Fahey | shaun39@hotmail.com | Adamsfurt | Active | $1,041.39 |
| Gwendolyn Hansen | santos_mertz87@yahoo.com | Rogahnfield | Inactive | $2.62 |
| Mr. Ignatius Swaniawski | breana76@yahoo.com | Bergnaumchester | Inactive | $123.70 |
| Total | $2,274.49 | |||
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. Chris Abbott | adrian27@yahoo.com | South Litzy | Active | $711.88 | |
| Ricardo Grady | rosario_walsh@gmail.com | Port Karenmouth | Active | $527.23 | |
| Cory Bruen | mackenzie41@hotmail.com | Darianmouth | Active | $898.37 | |
| Jovanny Heller | wendy49@yahoo.com | West Maximillia | Inactive | $324.56 | |
| Raven Wehner III | eloise_bednar@gmail.com | East Olgaland | Active | $1,002.99 | |
| Total | $3,465.03 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tamara Lebsack | orville.champlin@yahoo.com | Stanleyland | Active | $1,098.33 | |
| Eryn Witting | deshawn44@hotmail.com | Lake Ahmad | Inactive | $232.49 | |
| Lori Yundt | andy.spinka45@gmail.com | Fort Pearlie | Active | $1,143.19 | |
| Domenick Leuschke | seth.franey12@yahoo.com | Pasadena | Inactive | $680.23 | |
| Daron Von | jacquelyn.wuckert28@yahoo.com | Connellyboro | Active | $889.06 | |
| Total | $4,043.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 | |
|---|---|---|---|---|
| Shanel Gleason | bernard.graham@gmail.com | Dixiebury | Active | $113.48 |
| Angus Emmerich | willard93@gmail.com | Lake Eric | Inactive | $438.41 |
| Mrs. Georgia Marks | lowell35@yahoo.com | Ursulastad | Inactive | $206.59 |
| Dominick Miller | janis8@hotmail.com | Trompport | Active | $1,010.03 |
| Francisca Anderson | wilfredo_dietrich56@yahoo.com | South Katlyn | Inactive | $459.91 |
| Mr. Roberto Haag-Berge | gregoria.stoltenberg-dickens29@hotmail.com | Feestfurt | Active | $936.96 |
| Elwin Harvey-O'Reilly | sally_reinger@yahoo.com | Wolffhaven | Inactive | $471.22 |
| Linnea Aufderhar | kenneth_thompson4@yahoo.com | Todton | Active | $603.03 |
| Helen Herman-Feeney DDS | marcus_johnson@hotmail.com | Wisokyworth | Inactive | $1,098.60 |
| Roberta Johnson | alex_brakus@hotmail.com | Torphyton | Active | $647.12 |
| Alvin Price | floyd.tremblay@hotmail.com | Glen Burnie | Active | $299.96 |
| Miss Tamara Barton | wesley99@hotmail.com | Carolyncester | Active | $732.70 |
| Lucinda Kihn-Steuber | carroll.sanford71@hotmail.com | Heaneyfort | Inactive | $592.68 |
| Skylar Kirlin | audra75@yahoo.com | Wehnerfort | Active | $982.67 |
| Dexter Welch | emanuel.mills46@yahoo.com | Osinskihaven | Active | $457.49 |
| Total | $9,050.85 | |||
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 |