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 | Bank Transfer | $257.47 |
| INV002 | Paid | Credit Card | $906.94 |
| INV003 | Pending | PayPal | $264.84 |
| INV004 | Pending | Bank Transfer | $836.48 |
| INV005 | Pending | PayPal | $736.56 |
| INV006 | Pending | Credit Card | $888.86 |
| INV007 | Pending | PayPal | $581.35 |
| Total | $4,472.50 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Elias Schneider | Principal Interactions Developer | elias_schneider89@yahoo.com | Viewer | |
| Estelle Beier | Product Tactics Producer | estelle.beier31@yahoo.com | Viewer | |
| Alyssa Conn | Forward Assurance Director | alyssa.conn91@hotmail.com | Member | |
| Charlene Goldner | Dynamic Solutions Executive | charlene_goldner@yahoo.com | Member | |
| Monica Prohaska | Future Research Associate | monica_prohaska@hotmail.com | Member | |
| Eleanora Schimmel | Internal Group Specialist | eleanora_schimmel@hotmail.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 |
|---|---|---|
Clarence Botsford Regional Operations Producer clarence_botsford@yahoo.com | Member | |
Stewart Stehr National Metrics Specialist stewart.stehr@yahoo.com | Viewer | |
Pearl Wunsch Global Implementation Director pearl.wunsch98@yahoo.com | Admin | |
Gene Hackett Investor Marketing Designer gene_hackett@gmail.com | Viewer | |
Jaunita Rogahn Senior Communications Facilitator jaunita_rogahn47@hotmail.com | Member | |
Abraham Dickinson Legacy Accountability Orchestrator abraham.dickinson95@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Sherry Jenkins District Mobility Specialist sherry_jenkins17@yahoo.com | Member | |
Peter Von Internal Functionality Representative peter.von90@yahoo.com | Admin | |
Jermaine Cronin Corporate Usability Assistant jermaine.cronin@gmail.com | Member | |
Katrina Hettinger Investor Assurance Supervisor katrina.hettinger@gmail.com | Member | |
Dalton Smitham Central Accounts Assistant dalton_smitham@gmail.com | Admin | |
Kolby Sporer Forward Marketing Developer kolby.sporer36@gmail.com | Member | |
Lindsey Gorczany Human Communications Engineer lindsey_gorczany58@gmail.com | Admin | |
Raul Aufderhar Regional Marketing Manager raul_aufderhar0@gmail.com | Member | |
Mona Hilll Senior Integration Strategist mona.hilll60@hotmail.com | Viewer | |
Norman Cummerata Internal Infrastructure Administrator norman.cummerata92@yahoo.com | Viewer | |
Melinda Greenfelder Internal Identity Engineer melinda.greenfelder@hotmail.com | Member | |
Julius Bayer Principal Tactics Executive julius.bayer39@gmail.com | Admin | |
Jerome Considine Global Creative Manager jerome_considine57@yahoo.com | Admin | |
Annabel Crist Future Brand Associate annabel.crist70@yahoo.com | Member | |
Jevon Blanda Forward Branding Representative jevon.blanda82@gmail.com | Viewer | |
Alana Witting Senior Accountability Assistant alana_witting@gmail.com | Member | |
Cierra Franey Dynamic Program Analyst cierra.franey@hotmail.com | Admin | |
Abelardo Kovacek Senior Mobility Officer abelardo.kovacek@hotmail.com | Admin | |
Trever Rutherford Principal Configuration Officer trever_rutherford95@yahoo.com | Viewer | |
Kenneth Parker Customer Program Assistant kenneth_parker@gmail.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 | |
|---|---|---|---|---|
| Dr. Malcolm Veum | dianne_wolf@hotmail.com | Lockmanville | Active | $292.52 |
| Ella Franey | wade_roob@hotmail.com | West Russellfurt | Inactive | $295.24 |
| Harriet Pollich | eunice.rice46@hotmail.com | Konopelskistad | Inactive | $452.37 |
| Norberto Schmitt | dulce_okeefe-jacobs@gmail.com | Blick-Carrollboro | Inactive | $627.98 |
| Soledad Becker | bethel36@hotmail.com | Adanburgh | Active | $1,137.92 |
| Total | $2,806.03 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kristen Brown @rosetta.windler55 | alanna_cruickshank@gmail.com | Hagenesport | Inactive | $457.97 |
Mr. Demarcus Morar Jr. @michelle13 | murl_gutmann@hotmail.com | Pontiac | Active | $710.44 |
Ora Osinski @lucy.hand34 | myron_keebler@yahoo.com | North Loretta | Active | $797.94 |
Savion Boehm @candice.rau | darryl.hermiston@gmail.com | Cleveland Heights | Inactive | $741.00 |
Lillie Price-Schaden @daron_glover | virginie29@gmail.com | D'Amoremouth | Inactive | $421.92 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Antonietta Schowalter | tressie_treutel@yahoo.com | Alside | Active | $852.27 |
| Patsy Bashirian | bianka_torphy79@gmail.com | Port Frieda | Inactive | $559.82 |
| Faith Glover | leif39@gmail.com | New Zackchester | Inactive | $209.95 |
| Penny Cummerata | greg_hills-ondricka77@gmail.com | Kreigerfurt | Active | $273.70 |
| Mattie Armstrong | roselyn_christiansen58@gmail.com | Minot | Inactive | $181.13 |
| Total | $2,076.87 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kylie Yundt | bobbie_greenholt@hotmail.com | Boyerboro | Active | $1,152.11 |
| Garrett Wilkinson | clint_miller@gmail.com | Harrisonview | Inactive | $39.87 |
| Hannah Wunsch | candida_mcclure@gmail.com | New Octavialand | Active | $516.90 |
| Ralph Marks-Smith | ross.pouros14@yahoo.com | Pine Hills | Active | $641.88 |
| Eva Miller | eva48@hotmail.com | Port Woodrowport | Inactive | $307.68 |
| Total | $2,658.44 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Deontae Stiedemann | edward67@hotmail.com | Juliofield | Inactive | $966.41 |
| Tyrique Schultz | laurence_heaney39@yahoo.com | Weimann-Sawaynworth | Inactive | $364.58 |
| Carlton Graham | mireya73@gmail.com | York | Active | $452.64 |
| Alejandro Crona | tami.tromp@yahoo.com | Monicaport | Inactive | $733.11 |
| Lori Padberg | tremayne31@hotmail.com | North Chandlerberg | Active | $883.33 |
| Total | $3,400.07 | |||
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 | ||
|---|---|---|---|---|---|
| Eldon Hane | gavin_grimes50@gmail.com | Lake Wilburshire | Inactive | $305.93 | |
| Afton Flatley | corrine.maggio@yahoo.com | Fort Heather | Inactive | $246.35 | |
| Giovanna Flatley | jazmyn72@yahoo.com | Floydbury | Inactive | $50.97 | |
| Linwood Macejkovic | bradford.pfannerstill@hotmail.com | Danielcester | Active | $687.51 | |
| Newell Lueilwitz | madeline89@gmail.com | North Chloefurt | Active | $327.47 | |
| Total | $1,618.23 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Miss Bethel Kris V | lavina.schneider@yahoo.com | Effertzshire | Inactive | $189.82 | |
| Erik Wunsch | zachery_oreilly67@hotmail.com | Gerholdburgh | Active | $890.59 | |
| Juanita Schowalter | grady0@hotmail.com | Roobville | Inactive | $69.38 | |
| Dalton Abbott | jonathan36@yahoo.com | Lake Macyside | Inactive | $564.51 | |
| Montana Parker | sheryl_gleason59@gmail.com | West Ethelyn | Active | $362.37 | |
| Total | $2,076.67 | ||||
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 | |
|---|---|---|---|---|
| Lester Kautzer-Rice Jr. | terrill66@hotmail.com | Newport Beach | Inactive | $1,120.00 |
| Reynold Daniel | seth.vandervort@gmail.com | Wintheiserland | Active | $838.24 |
| Camylle Jacobs | kali_kshlerin@hotmail.com | East Marielleton | Inactive | $1,113.65 |
| Percy Hagenes | jerod.durgan55@hotmail.com | Gilbert | Active | $863.08 |
| Ollie Feil | paula_gislason@gmail.com | Reading | Inactive | $79.57 |
| Sarah Moore | fredrick78@gmail.com | Parkermouth | Inactive | $994.29 |
| Kelly Powlowski Sr. | phyllis21@gmail.com | Port Johnathon | Active | $727.22 |
| Cullen Langosh | janiya62@hotmail.com | Bruenbury | Inactive | $911.82 |
| Joelle Davis | rhoda.rowe@gmail.com | Giaport | Inactive | $72.35 |
| Brenda Kemmer | gail_cremin@hotmail.com | North Marlon | Active | $865.24 |
| Becky Rutherford | bertram_emard67@gmail.com | Crookston | Inactive | $659.75 |
| Marian Koepp III | ladarius_jast@gmail.com | Wittingview | Inactive | $1,179.46 |
| Frances Hoppe PhD | murray81@hotmail.com | East Kevin | Active | $176.01 |
| Randy Heidenreich | blair.feest@gmail.com | West Ardella | Inactive | $504.10 |
| Shari Raynor | irvin.kautzer72@hotmail.com | Kayleyboro | Inactive | $900.23 |
| Total | $11,005.01 | |||
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 |