Components

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
INV001PendingBank Transfer$640.40
INV002PendingPayPal$795.50
INV003UnpaidCredit Card$878.28
INV004UnpaidCredit Card$655.50
INV005PendingBank Transfer$839.82
INV006UnpaidCredit Card$598.66
INV007PaidPayPal$171.38
Total$4,579.54

Simple

Users

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

NameTitleEmailRoleActions
Layne McCulloughLead Web Architectlayne_mccullough3@hotmail.comAdmin
Eva SanfordSenior Markets Consultanteva.sanford9@hotmail.comAdmin
Phyllis KovacekSenior Accounts Executivephyllis.kovacek36@yahoo.comMember
Melyna RohanGlobal Identity Plannermelyna.rohan74@hotmail.comAdmin
Anderson GrahamDynamic Brand Orchestratoranderson_graham@hotmail.comViewer
Ewell HermistonInternal Response Agentewell_hermiston@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Miguel Waelchi

Lead Branding Associate

miguel_waelchi73@hotmail.com

Member

Leah Purdy

Corporate Solutions Executive

leah_purdy@gmail.com

Viewer

Hallie Tromp

Customer Security Officer

hallie_tromp@yahoo.com

Admin

Jaylin Haag

Direct Identity Designer

jaylin_haag@yahoo.com

Viewer

Sidney Welch

Global Mobility Representative

sidney_welch@yahoo.com

Viewer

Urban Gusikowski

Regional Markets Architect

urban.gusikowski38@hotmail.com

Admin

Users

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

NameRoleActions

Lon Armstrong

Chief Factors Director

lon_armstrong@hotmail.com

Viewer

Tyra Moore

Dynamic Research Architect

tyra_moore@yahoo.com

Member

Gilberto Crist

Principal Mobility Administrator

gilberto.crist78@hotmail.com

Admin

Ransom Lemke

Internal Infrastructure Facilitator

ransom.lemke@yahoo.com

Viewer

Bobby Hagenes

Dynamic Marketing Facilitator

bobby.hagenes@gmail.com

Admin

Manuel Schroeder

International Marketing Planner

manuel.schroeder@hotmail.com

Member

Giovani Brekke-Koelpin

National Operations Manager

giovani_brekke-koelpin@hotmail.com

Member

Brooke Kreiger

Lead Identity Assistant

brooke_kreiger74@hotmail.com

Member

Darrin Bernhard

Future Directives Architect

darrin_bernhard48@hotmail.com

Member

Alicia Reinger

Lead Integration Designer

alicia.reinger@gmail.com

Member

Alexzander Dickinson

Central Paradigm Technician

alexzander.dickinson@hotmail.com

Viewer

Lena Goldner

Global Functionality Designer

lena.goldner91@hotmail.com

Admin

Bobbie Johns

Dynamic Applications Planner

bobbie_johns@gmail.com

Member

Lynette Murphy

Forward Quality Supervisor

lynette_murphy66@hotmail.com

Viewer

Denis Glover

Investor Creative Producer

denis.glover@gmail.com

Viewer

Ethel Borer

Central Interactions Facilitator

ethel.borer@yahoo.com

Member

Elna Hayes

Lead Web Director

elna.hayes53@gmail.com

Member

Hulda Kilback

District Mobility Producer

hulda_kilback@yahoo.com

Viewer

Nelson Wuckert

Chief Mobility Producer

nelson.wuckert@gmail.com

Member

Boyd Yost

Forward Branding Architect

boyd_yost20@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
Devante Adamsblanche.maggio@yahoo.comNew GastonburghInactive$1,063.10
Fred Ankundingralph57@yahoo.comBeercesterActive$1,155.95
Mr. Petra Nikolauscecilia.ernser-jacobson20@gmail.comEast AbagailActive$704.32
Stacy Stammjensen_stehr67@yahoo.comRobertoburyInactive$504.78
Reymundo Colevan82@yahoo.comEast TabithaviewInactive$507.05
Total$3,935.20

Basic table

Table with Images

NameEmailLocationStatusBalance
June Kuhic
@marco_crist49
whitney_jerde@yahoo.comEast ClintInactive$553.74
Damon Frami
@carolyn.walker55
karli49@yahoo.comNew MiaInactive$30.77
Paul Padberg
@hallie_koss45
bobbie.walker@yahoo.comNaderworthInactive$1,144.10
Betsy Heller
@shari.kub94
nellie.koelpin49@gmail.comWest VirgieActive$992.98
Stacy Yost
@judith66
ericka23@yahoo.comFort TellyInactive$809.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Sherman Mante Jr.nick.champlin@gmail.comGrand ForksActive$928.91
Madeline Braunpercy_mueller81@yahoo.comSouth DanielatonInactive$7.08
Kara Cole IIIpablo49@gmail.comOsinskitonInactive$153.60
Neil Willmschance.ward@yahoo.comSalinaInactive$244.74
Ivan Harrischad17@hotmail.comSan DiegoActive$1,165.63
Total$2,499.96

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Troy Abbottderek.hilpert60@gmail.comShaniyasideActive$1,133.48
Miss Dorian Williamsondangelo72@hotmail.comHansen-DaughertyboroInactive$1,081.15
Nelson Greenholtcierra_franecki@hotmail.comParisiansideActive$936.68
Kenyatta Kerlukejeremy14@yahoo.comMamieshireInactive$488.17
Josefa Wittingkevin_schaden@yahoo.comNew AdellInactive$489.45
Total$4,128.93

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Berenice Ortizgladys.rohan36@gmail.comGeneralportActive$983.59
Schuyler McGlynndeshawn68@gmail.comLewistownActive$329.59
Mr. Verlie Morissettelorraine_mills@yahoo.comHildegardsteadActive$361.51
Claude Spinkaconnor.ondricka55@hotmail.comWest JeffryInactive$405.36
Ebony Robertsashley.bauch@gmail.comJillburghInactive$318.82
Total$2,398.87

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
Dexter Cartwrightjameson.feeney@hotmail.comThelmahavenActive$677.14
Micheal Moenjack.harber92@gmail.comCalelandInactive$107.76
Natasha Fritsch Jr.amber_kautzer-schultz@yahoo.comAlexzandershireActive$648.94
Cristobal Monahanserenity18@yahoo.comStromanlandActive$258.31
Becky Cremin Jr.ethyl.reichert@hotmail.comKertzmannfieldInactive$596.99
Total$2,289.14

Table with row selection

Card Table

NameEmailLocationStatusBalance
Andrew Ankundingsergio98@gmail.comMarksbergActive$270.02
Judy Wuckertlawrence_orn@gmail.comFort RusselInactive$509.05
Dr. Abdullah Heathcote Sr.vladimir.rempel@hotmail.comCedar ParkInactive$897.96
Abner Krisleah_kessler99@yahoo.comEast CynthiaActive$467.26
Donato Bergstrommargaret.maggio-ernser@yahoo.comNew KellenActive$678.44
Total$2,822.73

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
Jennifer Hartmannkayla7@yahoo.comEast DerekInactive$348.20
Mattie Connneoma21@gmail.comIkeshireActive$684.27
Candice Nitzschebethany.feest@hotmail.comSmithambergActive$898.84
Carmen Hermanbertram55@hotmail.comSporermouthInactive$368.48
Miss Roberta Greenadriel_green@gmail.comWest SeanInactive$714.19
Lynda Klockocletus_bergstrom@hotmail.comOberbrunnerchesterActive$326.32
Maurice Murrayova.ruecker65@gmail.comNicolastonInactive$114.94
Cathy Spinka IIlydia87@hotmail.comSandyInactive$297.12
Patti Boyleraquel69@yahoo.comSalinaInactive$62.67
Cordia Willmschristian54@gmail.comWest GuyportActive$34.34
Friedrich Schmelerhalie.mcglynn93@gmail.comNew ErickstadActive$220.44
Carlie Mertzcleta_gleason17@hotmail.comPort GertrudeActive$67.18
Gracie Watersanthony78@yahoo.comArvadaActive$728.21
Tim Wymanpietro41@hotmail.comLebsackboroughActive$395.57
Emiliano Ryanjohanna_koss36@yahoo.comElizabethstadActive$475.96
Total$5,736.73

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