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 | Paid | Credit Card | $135.76 |
| INV002 | Unpaid | Bank Transfer | $470.96 |
| INV003 | Pending | PayPal | $431.99 |
| INV004 | Paid | PayPal | $158.44 |
| INV005 | Pending | PayPal | $613.93 |
| INV006 | Pending | Bank Transfer | $927.35 |
| INV007 | Paid | PayPal | $975.11 |
| Total | $3,713.54 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jettie Muller | Direct Mobility Representative | jettie.muller17@gmail.com | Member | |
| Elise Wiza | Corporate Usability Developer | elise_wiza@yahoo.com | Member | |
| Micaela Kassulke | Dynamic Tactics Analyst | micaela.kassulke23@hotmail.com | Admin | |
| Alanna Terry | Dynamic Group Facilitator | alanna_terry@gmail.com | Viewer | |
| Jeanie Carter | Investor Division Planner | jeanie.carter@hotmail.com | Member | |
| Harmony Turcotte | Internal Configuration Analyst | harmony.turcotte28@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 |
|---|---|---|
Markus Turner Product Applications Representative markus_turner37@hotmail.com | Viewer | |
Esperanza Hessel-Mraz Human Infrastructure Producer esperanza_hessel-mraz@hotmail.com | Member | |
Olin Schroeder National Implementation Producer olin.schroeder@gmail.com | Member | |
Kaley Cummerata Chief Implementation Developer kaley.cummerata@hotmail.com | Viewer | |
Jeanne Hodkiewicz Global Configuration Engineer jeanne_hodkiewicz@yahoo.com | Admin | |
Paolo DuBuque Legacy Interactions Planner paolo_dubuque@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Stan Mraz Regional Infrastructure Orchestrator stan.mraz@gmail.com | Member | |
Marie Quigley National Response Agent marie.quigley@hotmail.com | Admin | |
Wilhelm Steuber Internal Configuration Designer wilhelm_steuber@hotmail.com | Member | |
Sadye Blanda Future Directives Technician sadye_blanda50@hotmail.com | Viewer | |
Idella Wuckert Dynamic Intranet Developer idella.wuckert91@gmail.com | Member | |
Dolly Shields Senior Integration Designer dolly_shields@gmail.com | Member | |
Kurt Wilderman Internal Directives Designer kurt_wilderman@gmail.com | Member | |
Marty Fadel Product Operations Designer marty.fadel@yahoo.com | Viewer | |
Berneice Muller District Mobility Technician berneice_muller@yahoo.com | Member | |
Ernestina Greenholt Global Tactics Facilitator ernestina.greenholt@hotmail.com | Member | |
Amber Swaniawski Central Applications Associate amber_swaniawski3@yahoo.com | Viewer | |
Jarred Erdman Internal Usability Technician jarred_erdman@yahoo.com | Admin | |
Raina Hickle Corporate Web Director raina_hickle@gmail.com | Admin | |
Henry Stamm Investor Mobility Consultant henry_stamm@gmail.com | Admin | |
Terrill Kohler Human Creative Administrator terrill_kohler@gmail.com | Admin | |
Marguerite Gusikowski-Collins Central Configuration Producer marguerite.gusikowski-collins46@hotmail.com | Viewer | |
Kyle Flatley Direct Brand Engineer kyle.flatley@gmail.com | Member | |
Greyson Hermiston Customer Mobility Manager greyson_hermiston34@yahoo.com | Member | |
Luther Sanford Lead Interactions Associate luther.sanford45@hotmail.com | Admin | |
Autumn Gerhold National Accountability Manager autumn.gerhold@hotmail.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 | |
|---|---|---|---|---|
| Danielle Ryan | mohamed70@hotmail.com | McLaughlinport | Active | $107.98 |
| Angelica Swift | carlo.kihn@hotmail.com | Round Rock | Active | $500.74 |
| Norma Jones | dasia_doyle@yahoo.com | South Mozellmouth | Inactive | $51.92 |
| Myra Huel I | emmy_mraz@yahoo.com | Conradville | Active | $596.29 |
| Mr. Troy Kutch | dane_spinka84@yahoo.com | Buckridgeborough | Active | $1,079.03 |
| Total | $2,335.96 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Nelson Jacobi @syble_gerhold72 | adelia47@gmail.com | Chesterstead | Inactive | $484.02 |
Nicole Hoeger @bradley2 | melyna97@yahoo.com | Funkhaven | Inactive | $615.05 |
Linda Ullrich Sr. @vern.sipes85 | wendy.towne61@hotmail.com | Lake Brenna | Active | $89.46 |
Gabriel Will @cora_lowe90 | rosemarie15@gmail.com | Shreveport | Active | $923.16 |
Miss Terry Borer-Schaefer @annabelle.huel45 | pattie_okeefe@hotmail.com | Devanteview | Active | $391.75 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ella Johnston | shayne_collins5@gmail.com | Port Willisfort | Inactive | $461.43 |
| Julius Wolff Sr. | zita.nitzsche@hotmail.com | West Carey | Inactive | $921.48 |
| Pablo Nader | eliza64@gmail.com | Harveyfurt | Inactive | $939.33 |
| Everett Greenfelder | collin_friesen26@hotmail.com | North Brisaport | Active | $952.92 |
| Roy Monahan | ernestina_bernhard@yahoo.com | Funkworth | Inactive | $502.44 |
| Total | $3,777.60 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mike Runolfsdottir | floyd43@yahoo.com | Stammport | Inactive | $687.76 |
| Blanche Parisian | rowland12@gmail.com | New Rogerbury | Inactive | $285.87 |
| May Gutkowski | dortha_lueilwitz95@gmail.com | Yuma | Active | $124.99 |
| Mr. Robin Erdman | beulah_dietrich@yahoo.com | Portsmouth | Active | $1,090.32 |
| Lance Zemlak | lempi_christiansen1@gmail.com | Chesleybury | Inactive | $510.28 |
| Total | $2,699.22 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kari Carter | theron89@yahoo.com | Greenwood | Active | $44.38 |
| Patrick Mertz | augusta_bergstrom@hotmail.com | Port Johnathanport | Inactive | $819.32 |
| Gerald Schimmel | palma35@yahoo.com | Brandonton | Active | $810.57 |
| Sammy Buckridge | brandon39@gmail.com | Fort Ansley | Active | $354.96 |
| Darren Daugherty | rashad.harvey13@hotmail.com | Franeckistead | Inactive | $982.23 |
| Total | $3,011.46 | |||
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 | ||
|---|---|---|---|---|---|
| Nicholas Pollich | jettie_cremin76@gmail.com | South Veronicahaven | Active | $61.10 | |
| Gerard Crist | kendrick.kilback25@gmail.com | North Jacinthefurt | Inactive | $610.53 | |
| Rafael Bogan | tillman.okuneva8@hotmail.com | Lake Hal | Active | $1,168.61 | |
| Lee Jenkins | lesly42@yahoo.com | Alpharetta | Inactive | $849.87 | |
| Yvonne Ward | josefa16@yahoo.com | Emilieville | Active | $1,004.06 | |
| Total | $3,694.17 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mamie Hoeger | scotty_bode@gmail.com | Delfinafurt | Inactive | $761.96 | |
| Tammy Cole | janet_murray@gmail.com | Port Melvinabury | Active | $711.80 | |
| Jamie Bechtelar | cynthia64@hotmail.com | Haverhill | Active | $872.80 | |
| Rosemary Kuhlman-Dickens | michale.homenick1@yahoo.com | East Sebastianside | Active | $897.71 | |
| Kenneth Pacocha | emilie.oconnell@yahoo.com | Edgarworth | Inactive | $68.36 | |
| Total | $3,312.63 | ||||
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 | |
|---|---|---|---|---|
| Patti Borer | zella.hayes@yahoo.com | Bowie | Active | $682.20 |
| Sadie Ferry | rosario11@hotmail.com | Port Alfonsoberg | Inactive | $556.51 |
| Lucas Spinka | jabari_kub59@gmail.com | Hodkiewiczworth | Inactive | $531.69 |
| Raul Walter | fiona.heidenreich1@gmail.com | Prohaskaworth | Inactive | $895.11 |
| Amanda Kling | joannie97@gmail.com | Kulasport | Inactive | $180.76 |
| Jesus Lockman | cristopher.hermann@hotmail.com | Estafield | Active | $822.53 |
| Rudy Kerluke | lowell_emmerich@yahoo.com | West Veda | Inactive | $978.18 |
| Muriel Orn | amya80@hotmail.com | Florin | Inactive | $47.00 |
| Mable Rath | alfonzo.goyette@hotmail.com | Fort Pasqualefield | Inactive | $813.96 |
| Micheal Bartoletti | sage33@yahoo.com | North Milostad | Inactive | $447.05 |
| Fred Hahn | dillan15@hotmail.com | Auburn | Inactive | $636.69 |
| Marion Barton | phyllis78@hotmail.com | Idaho Falls | Active | $405.41 |
| Jennie Kertzmann | elza.johnston@yahoo.com | Port Marielle | Active | $1,001.69 |
| Troy Bartoletti | moshe_medhurst@yahoo.com | Hesselfort | Inactive | $1,077.94 |
| Mrs. Stephanie Johnson | leanna83@yahoo.com | New Georgiannafurt | Inactive | $15.50 |
| Total | $9,092.22 | |||
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 |