UI Thing

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$996.16
INV002PaidPayPal$329.75
INV003UnpaidPayPal$944.56
INV004UnpaidBank Transfer$145.56
INV005UnpaidCredit Card$579.71
INV006PaidBank Transfer$593.74
INV007PendingBank Transfer$380.37
Total$3,969.85

Simple

Users

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

NameTitleEmailRoleActions
Hubert HaneDistrict Infrastructure Administratorhubert.hane@gmail.comMember
Tate WindlerChief Communications Directortate.windler@hotmail.comMember
Arno DavisNational Division Executivearno.davis@hotmail.comViewer
Felicity StammNational Marketing Facilitatorfelicity_stamm@hotmail.comAdmin
Drew SwaniawskiDynamic Assurance Developerdrew_swaniawski54@hotmail.comMember
Thelma ToyGlobal Identity Associatethelma_toy79@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Desiree Gleichner-Larson

Chief Brand Analyst

desiree.gleichner-larson@yahoo.com

Admin

Deborah Conn

Human Implementation Facilitator

deborah_conn8@yahoo.com

Member

Penny Feil

Future Data Associate

penny_feil13@hotmail.com

Admin

Robyn Fahey

Corporate Implementation Officer

robyn.fahey@hotmail.com

Viewer

Bennie D'Amore

Human Security Coordinator

bennie.damore@yahoo.com

Admin

Vivienne Wisoky

Internal Identity Architect

vivienne.wisoky52@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Oren Yost

Product Configuration Orchestrator

oren_yost9@yahoo.com

Admin

Alexis McDermott

Forward Operations Agent

alexis.mcdermott65@hotmail.com

Member

Frances Terry

National Security Analyst

frances_terry@hotmail.com

Admin

Darnell Will

Product Data Facilitator

darnell_will@yahoo.com

Member

Roderick Abbott

Internal Security Architect

roderick_abbott60@yahoo.com

Viewer

Haven Reynolds

Customer Group Facilitator

haven.reynolds38@yahoo.com

Member

Leilani Hamill

International Assurance Representative

leilani.hamill@yahoo.com

Viewer

Vivien Wilkinson

District Branding Representative

vivien.wilkinson90@yahoo.com

Member

Lorene Langosh

Legacy Implementation Executive

lorene.langosh66@hotmail.com

Admin

Richard Kulas

Internal Division Agent

richard_kulas@hotmail.com

Member

Colin Morar

Dynamic Research Technician

colin_morar@yahoo.com

Admin

Lina Feil

Dynamic Research Director

lina_feil58@yahoo.com

Member

Anita Konopelski

Future Usability Specialist

anita.konopelski93@yahoo.com

Admin

Violette West

Senior Mobility Orchestrator

violette_west84@gmail.com

Admin

Mindy Rogahn

Future Applications Liaison

mindy.rogahn83@hotmail.com

Admin

Emelia Pfeffer

Product Metrics Agent

emelia.pfeffer@hotmail.com

Admin

Tamara Herzog

Forward Accountability Analyst

tamara.herzog97@hotmail.com

Admin

Winifred Morar

Principal Branding Officer

winifred.morar5@gmail.com

Member

Rafael DuBuque

Forward Interactions Supervisor

rafael.dubuque@yahoo.com

Admin

Wesley Conn-Kshlerin

Forward Division Associate

wesley.conn-kshlerin@gmail.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

NameEmailLocationStatusBalance
Ramona Rempelwanda.kilback@yahoo.comNorth AmosActive$296.93
Justin Crist Jr.sophia.littel1@yahoo.comLednerviewActive$940.82
Mrs. Pauline Skilessierra.volkman18@hotmail.comJameyburyInactive$1,030.92
Delphine Leuschkemerle_rath22@gmail.comCrookshavenInactive$758.22
Cindy Zulauf PhDkarli90@yahoo.comIracesterActive$39.02
Total$3,065.91

Basic table

Table with Images

NameEmailLocationStatusBalance
Liliana Bartell
@fannie.pollich
lonnie_larkin67@hotmail.comPort OlgaburyActive$797.20
Hailey Goldner
@pam93
eunice.greenholt@hotmail.comBillingsInactive$1,190.35
Todd Heidenreich Jr.
@dora.ratke34
robb42@hotmail.comWest BenniemouthActive$473.41
Melissa Schulist
@savanah.dooley
junior7@gmail.comLaurenfurtInactive$485.55
Luis Connelly
@tara_kertzmann
tyree.carroll@gmail.comNewport NewsInactive$6.87

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Cleora Langisom7@gmail.comNew EstefaniaInactive$784.61
Doris Williamsonstephanie.towne97@yahoo.comNorth CarltonchesterInactive$981.65
Wallace VonRuedenoleta_ortiz42@gmail.comYundtmouthInactive$85.67
Marion Stammsusie_konopelski@gmail.comCreminsteadActive$753.39
Peggy Stromanshari.friesen5@gmail.comRoanokeInactive$1,111.33
Total$3,716.65

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ben Dooleyadelle_koss@yahoo.comDaresideActive$795.66
Otis Boehmmarguerite_ruecker@hotmail.comNew LaurafieldActive$534.38
Loretta Blickeleanora.langworth@gmail.comDurganviewInactive$806.71
Jayne Langoshlennie62@hotmail.comKentInactive$910.88
Joelle Wiza PhDsamuel57@yahoo.comNew SethActive$190.21
Total$3,237.84

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Natasha Shields Ijohnathan.frami@gmail.comSan RamonInactive$243.83
Alicia Baileysaul.ondricka13@yahoo.comNew AlfredActive$1,046.82
Hillard Muller-Trompruthie.bergnaum76@gmail.comWest MaeActive$1,129.19
Susie Blick Vblanche.wilderman88@hotmail.comIgnatiusfurtInactive$277.07
Alivia Franeckilera.veum95@hotmail.comSanta RosaInactive$1,102.29
Total$3,799.20

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
Idella Littlefranz.keebler71@gmail.comNorth NettieActive$196.50
Karson Westkay.cartwright@yahoo.comNorth TerencefieldInactive$771.00
Lucinda Schambergerbernadette37@gmail.comSalemInactive$736.67
Ira Pfefferjustina13@gmail.comBillingsActive$663.52
Griffin Leuschke-Wittinglouvenia9@gmail.comQuincyActive$400.83
Total$2,768.52

Table with row selection

Card Table

NameEmailLocationStatusBalance
Milton Marksviolet44@hotmail.comLake NathanialboroInactive$596.07
Elaine Hessel IIfinn_wuckert98@yahoo.comLake CasperActive$296.72
Marjorie O'Connershannon58@hotmail.comStehrburyActive$404.35
Calvin Cummings-Wiegandjay.bernhard9@gmail.comTracicesterActive$1,109.42
Gilbert Greenelena_rau@gmail.comSouth LindseyInactive$29.78
Total$2,436.34

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
Pedro Dibbertgeovanny12@gmail.comEast JaneActive$36.02
Drew Johns Sr.veronica_kilback@yahoo.comLake DashawnActive$1,167.11
Bridget Bogannora.hamill-hessel46@gmail.comLolachesterInactive$875.18
Elizabeth Hoegerleah19@yahoo.comEast RobertboroughInactive$151.66
Helga Nienow DDSross28@gmail.comUrbandaleInactive$355.27
Hershel Pricebernhard.schaden@hotmail.comNew EsperanzafortActive$274.70
Euna Konopelskijenny.schroeder@yahoo.comNew OrleansActive$1,111.45
Orlando Schmittsalma_schmeler49@yahoo.comMadilynfieldInactive$399.37
Sabina Aufderharbrent.rutherford@yahoo.comWest OlinInactive$729.16
Laury Gutmannjared.corwin59@yahoo.comFort HeleneportActive$1,018.19
Sara Cronin DDSrufus.ohara@gmail.comBrentshireActive$514.36
Melinda Wisozkfrankie.roob28@hotmail.comKelleyviewInactive$1,000.86
Marguerite Schadenbethel_schmitt@hotmail.comEast JohannaInactive$782.53
Dr. Katherine Beerlynne_turcotte@gmail.comBrandtshireActive$221.51
Delores Bechtelar IIIandre60@yahoo.comAbshireviewActive$674.23
Total$9,311.60

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.