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
INV001PendingBank Transfer$100.72
INV002UnpaidBank Transfer$747.79
INV003UnpaidBank Transfer$432.46
INV004PaidBank Transfer$819.62
INV005PaidPayPal$326.52
INV006UnpaidCredit Card$500.36
INV007PaidCredit Card$513.67
Total$3,441.14

Simple

Users

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

NameTitleEmailRoleActions
Tyrique TorphyDirect Accountability Developertyrique_torphy30@gmail.comViewer
Reinhold SengerCorporate Quality Orchestratorreinhold_senger@gmail.comAdmin
Pete LakinCentral Optimization Developerpete.lakin@gmail.comViewer
Sven ReichelDirect Marketing Liaisonsven_reichel52@yahoo.comMember
Eldridge ColeFuture Marketing Orchestratoreldridge_cole@gmail.comMember
Marquis StrosinNational Group Liaisonmarquis_strosin39@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Itzel Fadel

Future Program Assistant

itzel.fadel93@hotmail.com

Viewer

Daphney Konopelski

International Security Technician

daphney_konopelski32@yahoo.com

Member

Francesco Christiansen

Chief Factors Coordinator

francesco_christiansen83@hotmail.com

Viewer

Lisandro Lynch

District Interactions Coordinator

lisandro_lynch15@gmail.com

Viewer

Camren Donnelly

National Directives Representative

camren.donnelly20@yahoo.com

Admin

Theo Casper

District Functionality Director

theo_casper@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Daron Stroman

Dynamic Identity Specialist

daron_stroman@yahoo.com

Admin

Elton McCullough

Human Tactics Architect

elton_mccullough41@hotmail.com

Member

Marilou Roob

Regional Directives Specialist

marilou.roob@hotmail.com

Admin

Jarod Fisher

Future Research Engineer

jarod.fisher@yahoo.com

Viewer

Nia Hilpert

Future Operations Architect

nia_hilpert20@gmail.com

Viewer

Ben Fisher

Forward Group Associate

ben_fisher@yahoo.com

Viewer

Myrtle Bradtke

Customer Marketing Coordinator

myrtle_bradtke@gmail.com

Admin

Norbert Dare

Internal Branding Producer

norbert.dare@hotmail.com

Member

Joana Deckow

Future Assurance Liaison

joana.deckow@gmail.com

Viewer

Edna Price

International Program Specialist

edna_price45@yahoo.com

Viewer

Rossie Frami-Dibbert

Investor Markets Administrator

rossie.frami-dibbert@hotmail.com

Member

Priscilla Senger

Direct Mobility Facilitator

priscilla_senger86@yahoo.com

Member

Enrique Hegmann

National Operations Technician

enrique_hegmann@hotmail.com

Member

Elisha Brakus

Global Integration Engineer

elisha.brakus90@hotmail.com

Admin

Leone Hoppe

Legacy Accountability Producer

leone_hoppe@gmail.com

Member

Arielle Wintheiser

Chief Implementation Producer

arielle.wintheiser@gmail.com

Member

Adelbert Fay

Direct Mobility Planner

adelbert.fay94@gmail.com

Admin

Winnifred Harber

Dynamic Creative Agent

winnifred.harber@yahoo.com

Member

Vena Graham

International Response Analyst

vena.graham1@yahoo.com

Member

Stanton Huel

Direct Applications Representative

stanton.huel22@hotmail.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
Aubrey Runolfsdottirgarret_welch@yahoo.comWest LeonelhavenInactive$815.05
Ann Beerjulianne_strosin@yahoo.comFort ArtActive$254.06
Daryl Wymanraina.heaney27@hotmail.comWindlerhavenInactive$868.79
Mr. Ismael Lesch MDnadia_metz@yahoo.comAltamonte SpringsInactive$299.87
Peter Kuhic Vmartin40@yahoo.comGrand IslandActive$3.23
Total$2,241.00

Basic table

Table with Images

NameEmailLocationStatusBalance
Deborah Moore
@nels.fahey97
skye_ohara22@yahoo.comWelchfieldInactive$67.64
Fredrick Altenwerth
@adan19
winona_mohr37@gmail.comNorth RodrickInactive$332.86
Robin Rowe
@mina_greenholt38
camren.ledner73@hotmail.comKileyviewActive$289.97
Ada Jacobs
@kellie_prohaska3
russel.trantow75@hotmail.comPadbergshireInactive$536.01
Juanita Moore
@kaelyn.daugherty
arnoldo87@gmail.comSouth AlberthaviewInactive$650.37

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Emilio Dickikara99@gmail.comNew KaleyInactive$784.31
Laura Braunloma_champlin88@yahoo.comMercedeslandActive$1,099.33
Dallas D'Amorejohan90@yahoo.comArnaldolandActive$569.87
Candace Gutkowski-Collieraurelie.lakin@gmail.comAndersonInactive$906.13
Neil Williamson Itracey.hegmann@yahoo.comGrimesboroInactive$330.63
Total$3,690.27

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shannon Moensean82@gmail.comBlickfurtActive$1,014.23
Jackie Kuhlmanaiden25@yahoo.comNorth JaylonActive$909.36
Ruben Blockeleazar46@gmail.comWest KaleInactive$215.45
Alyssa Buckridgeransom.bartoletti@gmail.comLake KaralandActive$996.58
Rachael Rempelthora.williamson@gmail.comJazmynlandActive$331.35
Total$3,466.97

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Joseph Bauch Vana_shanahan27@hotmail.comWest ChaddvilleActive$29.38
Julia Hand PhDcamille77@hotmail.comFort DestanyfurtActive$672.56
Nina Breitenbergcarissa_bauch99@gmail.comCouncil BluffsActive$875.63
Mr. Doyle Yundtmilford_stamm@gmail.comSouth BendActive$128.82
Clarence Davissamir.pagac80@yahoo.comPine BluffActive$215.30
Total$1,921.69

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
Ellen Koss Jr.francesca_ruecker@gmail.comClemenstonInactive$581.58
Shelia Gulgowskilillian36@hotmail.comCassinfortInactive$333.53
Carmen Ryanlanden.walker@hotmail.comPreciousshireActive$766.40
Gene Wilkinson DDSfelipa.fisher@gmail.comLynchtownInactive$1,085.23
Cecelia Andersonalana_orn@gmail.comWest EmmanuelviewActive$721.22
Total$3,487.96

Table with row selection

Card Table

NameEmailLocationStatusBalance
Shelly Walshelbert.weber75@yahoo.comNew CamdenportInactive$517.88
Ramona Rogahnletha37@gmail.comPort JacquesActive$1,133.16
Russell Hilll Sr.khalil94@gmail.comSouth LinatownInactive$1,197.14
Antoinette Gislasonmichel.strosin@hotmail.comPort TerryActive$223.70
Suzanne Westmuhammad_brekke@hotmail.comHickleshireInactive$229.41
Total$3,301.29

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
Lyle Mosciskibianka_pacocha@yahoo.comTerryviewActive$867.34
Dwayne Kuvalisedwardo.konopelski@gmail.comTerre HauteActive$70.93
Ray McKenziehardy_hane29@hotmail.comFarrellboroughActive$607.62
Janis Wilkinsonmary.yundt@hotmail.comEast MuhammadInactive$191.09
Olive Krajcik IIkaela0@gmail.comSchmelerburyActive$1,124.74
Dr. Terry Green-Rolfsonike_glover80@hotmail.comHarrisportActive$485.39
Marilyn Flatleydasia73@hotmail.comBowieActive$88.80
Penny Bashirianal_schimmel-lueilwitz5@yahoo.comMount PleasantActive$824.32
Mr. Victor Cummerata-Connressie_gulgowski@yahoo.comEast LamontActive$737.91
Doug Weimannnestor_padberg@yahoo.comNew LillianworthInactive$406.04
Nelson Keelingalexzander_howe13@yahoo.comDenisboroInactive$692.57
Henry Botsfordhaven.russel@hotmail.comAthens-Clarke CountyInactive$446.93
Jana Kerlukejuliet.sawayn16@yahoo.comWest HartfordActive$694.06
Hannah Wuckertkatrine.schuppe66@hotmail.comLynnInactive$1,076.00
Frank Cummerata IIImarley_lockman@hotmail.comBrooklyn ParkInactive$693.85
Total$9,007.59

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.