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

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$286.99
INV002UnpaidCredit Card$860.99
INV003PaidPayPal$492.15
INV004PendingCredit Card$561.68
INV005UnpaidBank Transfer$903.78
INV006UnpaidCredit Card$996.04
INV007PendingPayPal$947.77
Total$5,049.40

Simple

Users

A list of all the users in your account including their name, title, email and role.

NameTitleEmailRoleActions
Sheri SmithInternational Metrics Techniciansheri.smith60@hotmail.comMember
Dedric Rosenbaum-PaucekLead Mobility Assistantdedric_rosenbaum-paucek88@hotmail.comAdmin
Eldridge GottliebDynamic Usability Engineereldridge_gottlieb@yahoo.comMember
Eda LarkinProduct Usability Assistanteda.larkin69@gmail.comMember
Brice OlsonPrincipal Infrastructure Representativebrice_olson67@hotmail.comMember
Reanna AbernathyCustomer Applications Specialistreanna.abernathy70@hotmail.comMember

Stacked on mobile

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Marta Larson

Internal Directives Assistant

marta_larson2@hotmail.com

Admin

Gwen Mann

Central Operations Producer

gwen.mann46@yahoo.com

Admin

Wesley Harber

Legacy Creative Agent

wesley.harber32@yahoo.com

Admin

Reese Kreiger

Dynamic Accountability Specialist

reese.kreiger93@yahoo.com

Viewer

Era Tromp

Legacy Research Supervisor

era_tromp@hotmail.com

Member

Kristine Huels

Product Accounts Assistant

kristine.huels@gmail.com

Member

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Hugh Williamson

Global Implementation Strategist

hugh_williamson84@yahoo.com

Viewer

Rebecca Macejkovic

District Operations Coordinator

rebecca.macejkovic@yahoo.com

Viewer

Evelyn Jerde

Human Security Executive

evelyn_jerde@hotmail.com

Viewer

Antoinette Toy

Forward Creative Representative

antoinette.toy5@yahoo.com

Admin

Julian Krajcik

International Quality Representative

julian_krajcik@gmail.com

Viewer

Paige Shields

Regional Interactions Representative

paige_shields@gmail.com

Admin

Dora Dare

Internal Operations Liaison

dora_dare75@hotmail.com

Member

Marguerite Frami

Central Tactics Assistant

marguerite_frami@gmail.com

Member

Faye O'Conner

Internal Data Manager

faye_oconner21@gmail.com

Viewer

Theresa Rolfson

Customer Interactions Coordinator

theresa.rolfson@yahoo.com

Member

Kristie Altenwerth

Central Group Assistant

kristie_altenwerth93@yahoo.com

Member

Andrea Okuneva

Global Accounts Associate

andrea_okuneva@gmail.com

Viewer

Judith Ondricka

International Configuration Specialist

judith_ondricka@yahoo.com

Viewer

Bud Russel

Legacy Division Producer

bud.russel@gmail.com

Viewer

Dale Wolff

Future Markets Analyst

dale_wolff39@yahoo.com

Viewer

Julian Considine

Central Integration Planner

julian_considine@hotmail.com

Admin

Oscar Wuckert

Senior Infrastructure Consultant

oscar.wuckert@gmail.com

Viewer

Deon Wilderman

Corporate Solutions Engineer

deon.wilderman18@yahoo.com

Viewer

Alessia Prosacco

Dynamic Creative Producer

alessia_prosacco@yahoo.com

Admin

Zaria Tremblay

Customer Brand Manager

zaria_tremblay52@gmail.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

NameEmailLocationStatusBalance
Charlene Dickitalon41@yahoo.comAlpharettaActive$1,171.31
Madisyn Homenicktomas16@gmail.comWest AhmadActive$219.72
Jamel Ricemagnolia7@gmail.comMurrayburyInactive$1,122.20
Annie Bruenbelinda85@yahoo.comWest AnnabelleboroActive$890.10
Hailey Wizabrook.mills57@gmail.comLake JohnnyInactive$925.55
Total$4,328.88

Basic table

Table with Images

NameEmailLocationStatusBalance
Carolyne Mosciski
@sadye30
ian.white28@hotmail.comLeuschke-RitchiehavenActive$618.15
Melanie Swift
@rahul.armstrong18
alejandro_klocko38@gmail.comFarrellchesterInactive$1,009.28
Keith Abbott MD
@mark35
juwan_cruickshank@hotmail.comVeumchesterInactive$108.66
Marianne Harris
@nelson_greenholt89
beatrice17@gmail.comSouthfieldInactive$7.73
Geoffrey Rodriguez
@robert75
lora.prohaska@hotmail.comLutherportActive$98.67

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Tremaine Heaneypaula.goldner90@gmail.comMattiebergActive$730.07
Yvette Erdmanpat58@hotmail.comWymancesterActive$943.81
Mr. Keshaun Boganhellen.brakus@hotmail.comPinellas ParkActive$129.40
Burdette Ziemannbrice_hyatt@hotmail.comFreeportInactive$718.58
Mr. Caterina Connmaddison39@yahoo.comStokesshireInactive$836.31
Total$3,358.17

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Roman Strosinfrederic21@yahoo.comCathrineshireInactive$469.61
Ethel McDermottmyrtis.tremblay@gmail.comLake SashaburyInactive$703.47
Adrienne Stroman Sr.nigel44@hotmail.comPort CindyActive$333.69
Casey Hane Vannabell.miller86@hotmail.comOlgahavenInactive$574.64
Beulah Muellergonzalo52@gmail.comLake RandolphInactive$469.79
Total$2,551.20

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Adriel Lockman IInathan.weber-schuster36@gmail.comEast RossActive$697.08
Manuel Heidenreich DVMmarion.hilll4@yahoo.comGutmannchesterInactive$617.45
Edna Considinesean17@yahoo.comHoppeshireActive$80.07
Lindsey Ratkebenny_rippin@yahoo.comMarjorieburghInactive$643.36
Scottie Thielkristi26@yahoo.comPort CloydActive$894.11
Total$2,932.07

Table with vertical lines

Dense Table

NameRelease YearDeveloperTypingParadigmExtensionLatest VersionPopularity
JavaScript1995Brendan EichDynamicMulti-paradigm.jsES2021High
Python1991Guido van RossumDynamicMulti-paradigm.py3.10High
Java1995James GoslingStaticObject-oriented.java17High
C++1985Bjarne StroustrupStaticMulti-paradigm.cppC++20High
Ruby1995Yukihiro MatsumotoDynamicMulti-paradigm.rb3.0Low

Dense table

Row Selection

NameEmailLocationStatusBalance
Moses Wardmilo65@gmail.comDaytona BeachActive$1,069.44
Marian Wilkinson IIIbilly_balistreri@hotmail.comBrooklineActive$201.23
Tina Grantpaulette_cummings75@yahoo.comNorth StephenburghActive$434.79
Randal Kilback IIIanthony67@hotmail.comWest MyraInactive$223.98
Eileen Jastchristine.vonrueden37@yahoo.comSouth MadalineshireInactive$1,084.48
Total$3,013.92

Table with row selection

Card Table

NameEmailLocationStatusBalance
Adell Hyattbrittany.gottlieb@gmail.comLake LynneworthInactive$19.18
Jammie Wintheiserclyde64@gmail.comEast ChristineshireActive$49.76
Dr. Vera Jenkinslily9@gmail.comPort JonInactive$653.24
Percy Hermannsadie93@yahoo.comJamesfurtActive$1,187.73
Jorge Kubkevin11@gmail.comHarrisburgInactive$1,128.42
Total$3,038.33

Table with row selection

Vertical Table

NameDavid Kim
Emaild.kim@company.com
LocationSeoul, KR
StatusActive
Balance$1,000.00

Vertical table

Sticky Header 2

NameEmailLocationStatusBalance
Jack Sengerlamar.bradtke33@yahoo.comLednerboroughInactive$203.29
Mr. Serena Greenfelderleroy86@gmail.comBountifulActive$634.73
Kurtis McClurelouise_hoppe47@yahoo.comLake PearlineActive$338.86
Harriet Haleytommie_friesen@yahoo.comBozemanActive$369.28
Halie Rogahntabitha71@gmail.comPort VelmasteadActive$920.38
Cathy O'Connernathanael26@hotmail.comPort MaudInactive$732.49
Mrs. Sharon Schaeferkatrina_smitham54@hotmail.comCountry ClubActive$658.73
Geraldine Rodriguezbrooks_bergstrom@hotmail.comNew BryantInactive$344.13
Karson Weissnat-Bartonpaul0@gmail.comKaylahboroInactive$496.85
Frederik Littelnorbert92@gmail.comLake TyroneportActive$717.94
Erick Jacobspedro_hills78@gmail.comRatketonInactive$1,161.49
Miss Darlene Schulistluz_rosenbaum-schiller83@gmail.comReichelfortInactive$661.19
Coleman Dietrich IIIloyal.oconnell@yahoo.comKariportActive$769.61
Darryl Conroymaddison_wuckert9@yahoo.comPomonaInactive$571.17
Nathan Reilly Vyvette_kovacek@hotmail.comAnkenyInactive$422.87
Total$9,003.01

Table with sticky header

Browser Support

Desktop browsersMobile browsers
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox AndroidOpera AndroidSafari iOSSamsung Internet
scroll-timelineSupported
115
Supported
115
Not supported
111
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
view-timelineSupported
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-adjustSupported
127
Supported
127
Not supported
3
Supported
113
Supported
16.4
Supported
127
Supported
4
Supported
84
Supported
16.4
Not supported
No