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 | $312.68 |
| INV002 | Pending | PayPal | $655.65 |
| INV003 | Unpaid | PayPal | $100.07 |
| INV004 | Unpaid | Bank Transfer | $539.77 |
| INV005 | Paid | PayPal | $714.92 |
| INV006 | Unpaid | Bank Transfer | $487.40 |
| INV007 | Pending | Bank Transfer | $987.12 |
| Total | $3,797.61 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Hazle Franecki | International Group Planner | hazle_franecki@yahoo.com | Viewer | |
| Kacie Von | Product Functionality Technician | kacie_von@hotmail.com | Member | |
| Orlando Mosciski | Forward Solutions Agent | orlando_mosciski48@hotmail.com | Viewer | |
| Ellis Yundt | Senior Tactics Technician | ellis.yundt@gmail.com | Member | |
| Arthur Pfeffer | Internal Optimization Liaison | arthur_pfeffer@hotmail.com | Member | |
| Trever Reichert | Regional Mobility Orchestrator | trever_reichert55@gmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Sage Keebler Forward Infrastructure Producer sage_keebler@hotmail.com | Admin | |
Curtis Rippin Internal Integration Developer curtis.rippin@hotmail.com | Admin | |
Cheyenne Cronin Senior Division Administrator cheyenne.cronin@yahoo.com | Admin | |
Eloise McClure National Functionality Designer eloise.mcclure68@gmail.com | Admin | |
Conrad Barrows Regional Research Specialist conrad.barrows@yahoo.com | Member | |
Beatrice Yundt Central Optimization Coordinator beatrice_yundt68@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 |
|---|---|---|
Dorris Effertz International Response Specialist dorris.effertz98@yahoo.com | Admin | |
Misty Feil Product Mobility Engineer misty_feil42@yahoo.com | Admin | |
Lucia Stehr Human Applications Executive lucia.stehr@hotmail.com | Viewer | |
Albert Pagac Forward Data Coordinator albert_pagac23@gmail.com | Viewer | |
Sonya Cronin Dynamic Division Architect sonya.cronin@gmail.com | Admin | |
Johnathan O'Kon Corporate Communications Planner johnathan_okon@hotmail.com | Admin | |
Shanna Bartoletti Future Factors Administrator shanna_bartoletti@gmail.com | Admin | |
Marc Sanford National Identity Analyst marc_sanford@hotmail.com | Member | |
Ubaldo Abbott Senior Mobility Planner ubaldo_abbott@hotmail.com | Admin | |
Jocelyn Cummings National Applications Specialist jocelyn.cummings@gmail.com | Viewer | |
Randolph Satterfield Customer Accounts Coordinator randolph.satterfield@gmail.com | Member | |
Tamara Crooks Central Research Analyst tamara_crooks@yahoo.com | Admin | |
Marie Fritsch Internal Applications Assistant marie_fritsch@gmail.com | Member | |
Emily Nader Chief Accounts Consultant emily_nader@yahoo.com | Member | |
Vella McGlynn Senior Applications Administrator vella_mcglynn95@gmail.com | Member | |
Mia Corwin Central Response Technician mia.corwin14@gmail.com | Admin | |
Carroll Pollich Chief Web Designer carroll_pollich@gmail.com | Admin | |
Adolf Feil Legacy Accounts Strategist adolf.feil@yahoo.com | Member | |
Suzanne Rosenbaum Corporate Solutions Developer suzanne.rosenbaum61@yahoo.com | Member | |
Marlen Turcotte Principal Marketing Designer marlen.turcotte79@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 | |
|---|---|---|---|---|
| Dessie Nitzsche | irving_robel88@yahoo.com | Moseport | Active | $481.04 |
| Jeanette Kertzmann | allen73@yahoo.com | New Lewiston | Inactive | $662.16 |
| Pete Weissnat | nina.hahn-okon@gmail.com | Fort Justine | Active | $163.77 |
| Adrian Ebert | donna96@yahoo.com | Leliastad | Inactive | $674.43 |
| Dr. Antonina D'Amore | irene1@gmail.com | San Mateo | Active | $827.87 |
| Total | $2,809.27 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mariah Hane IV @lindsey_white26 | cali76@hotmail.com | North Austyn | Active | $93.23 |
Betty Dicki-Prosacco @bertha63 | anthony41@hotmail.com | Maribelshire | Active | $599.33 |
Reginald Tromp Sr. @ambrose_bergstrom | salvador_herzog@yahoo.com | Port Claudieside | Active | $851.48 |
Rigoberto Trantow @pearl_adams | julio73@hotmail.com | New Brendenbury | Active | $510.76 |
Moriah Hackett @geoffrey71 | clay.hessel@hotmail.com | Elroyport | Inactive | $348.74 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Christop Koch | bill55@gmail.com | West Paxton | Inactive | $779.11 |
| Mamie Bins | claudia_carroll@gmail.com | Lake Cobymouth | Inactive | $147.44 |
| Whitney Gutkowski | wilbert26@hotmail.com | Yasmeenport | Inactive | $694.92 |
| Mr. Nakia White | diane.white69@hotmail.com | South Susan | Inactive | $837.60 |
| Tomas Schowalter Jr. | sofia_krajcik90@yahoo.com | East Cortney | Inactive | $1,076.36 |
| Total | $3,535.43 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roberta Huels V | herminia_oreilly-nitzsche@gmail.com | Ritchieville | Inactive | $713.49 |
| Audrey Macejkovic | mabel.klocko99@gmail.com | Katlynnfurt | Inactive | $139.74 |
| Doyle Friesen | queen.buckridge@yahoo.com | Lake Dariusstad | Active | $433.07 |
| Spencer Dare | christine_thiel40@hotmail.com | Homestead | Inactive | $1,042.85 |
| Liza Olson | julian1@gmail.com | Lake Patboro | Inactive | $990.49 |
| Total | $3,319.64 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erin Jacobi | virgie.schuster-thiel36@gmail.com | Schimmelview | Active | $429.12 |
| Karl Boehm-Littel | lora_dubuque@hotmail.com | Ontario | Active | $717.35 |
| Arlene Terry | horace39@gmail.com | North Tomasberg | Inactive | $493.00 |
| Glen Jones | billie_emard92@hotmail.com | Gottliebview | Active | $739.18 |
| Edmond Smitham | alba_bradtke93@gmail.com | Tremblayville | Inactive | $602.94 |
| Total | $2,981.59 | |||
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 | ||
|---|---|---|---|---|---|
| Winston Stroman II | weldon47@gmail.com | North Josianne | Active | $290.59 | |
| Eliezer McGlynn | whitney_terry@yahoo.com | Krystelburgh | Inactive | $984.16 | |
| Guillermo Greenfelder | joy15@yahoo.com | Maryjaneport | Active | $672.87 | |
| Casandra Rodriguez-Hudson | candace_schroeder84@gmail.com | South Kayaville | Active | $622.95 | |
| Dr. Alton McKenzie | wilbur.abshire@hotmail.com | North Isabellaboro | Inactive | $128.98 | |
| Total | $2,699.55 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Judd Yost IV | janie_greenfelder-abbott@yahoo.com | Leolaberg | Active | $701.76 | |
| Maryann O'Reilly | dwayne69@hotmail.com | Fort Verniceberg | Inactive | $224.83 | |
| Luke Pfeffer PhD | richard22@yahoo.com | Port Tyreekcester | Active | $545.08 | |
| Arlie Grady | declan.parisian@gmail.com | South Jesus | Inactive | $423.26 | |
| Albert Kemmer | ellis30@yahoo.com | West Anissa | Inactive | $218.88 | |
| Total | $2,113.81 | ||||
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 | |
|---|---|---|---|---|
| Eloise Mann | kim_smitham-willms28@yahoo.com | Lake Tomastown | Active | $20.81 |
| Margret Corwin | meredith.watsica41@gmail.com | Port Vivian | Active | $569.04 |
| Dudley Ratke | samantha71@hotmail.com | Thaliaville | Inactive | $278.70 |
| Sammy Lindgren-Jacobson Jr. | brooklyn.cartwright-pfannerstill13@yahoo.com | North Reagan | Inactive | $1,082.22 |
| Perry Gulgowski | virgil39@gmail.com | East Enricofurt | Inactive | $1,020.17 |
| Reginald Miller | alison47@yahoo.com | Armstronghaven | Inactive | $196.89 |
| Arch Leannon | asa42@hotmail.com | South Brooklyn | Active | $936.36 |
| Emely Ruecker | shawna_kautzer@gmail.com | Fort Lavadastad | Inactive | $653.55 |
| Wayne Pollich | jenna.crist66@hotmail.com | Jovaniburgh | Active | $777.02 |
| Wilton Bayer | angelica_quigley32@yahoo.com | Lake Giuseppeberg | Active | $435.05 |
| Mr. Jared Cole | ethyl7@yahoo.com | Mullerberg | Active | $118.66 |
| Nadine Carter | river16@gmail.com | Ankundingmouth | Inactive | $510.35 |
| Preston Klein | eugene_tromp@yahoo.com | Opalstad | Inactive | $743.80 |
| Allan Beatty | gracie78@gmail.com | Boyletown | Active | $490.20 |
| Dr. Dimitri Mante-Reichel DVM | leroy0@gmail.com | Daphneworth | Active | $332.54 |
| Total | $8,165.36 | |||
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 |