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
INV001UnpaidCredit Card$901.37
INV002PendingCredit Card$131.43
INV003UnpaidBank Transfer$667.78
INV004UnpaidBank Transfer$580.83
INV005PendingBank Transfer$834.27
INV006UnpaidCredit Card$507.98
INV007PaidCredit Card$161.49
Total$3,785.15

Simple

Users

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

NameTitleEmailRoleActions
Porter WildermanPrincipal Response Executiveporter_wilderman6@yahoo.comViewer
Eleonore CorwinRegional Intranet Supervisoreleonore_corwin@gmail.comMember
Russell HyattDistrict Configuration Architectrussell_hyatt@gmail.comAdmin
Fernando BahringerRegional Implementation Producerfernando.bahringer5@yahoo.comMember
Cristopher ProhaskaRegional Division Assistantcristopher.prohaska34@gmail.comMember
Janet CarterDistrict Marketing Engineerjanet.carter@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Camron Mann

Chief Response Facilitator

camron.mann@gmail.com

Admin

Bud Grant

Direct Optimization Specialist

bud_grant@gmail.com

Viewer

Barton Johns

Senior Program Technician

barton.johns@yahoo.com

Member

Wilford Kemmer

Forward Functionality Analyst

wilford_kemmer@yahoo.com

Admin

Elizabeth Rowe

International Factors Assistant

elizabeth_rowe@gmail.com

Member

Brent Botsford

Chief Response Executive

brent.botsford68@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Georgianna Gerlach

Forward Markets Liaison

georgianna.gerlach@gmail.com

Member

Naomie Bednar

Legacy Communications Strategist

naomie.bednar75@yahoo.com

Viewer

Aryanna Balistreri

Direct Implementation Associate

aryanna_balistreri85@yahoo.com

Member

Freida Leannon

Legacy Mobility Orchestrator

freida_leannon26@gmail.com

Admin

Pedro Toy

Senior Configuration Agent

pedro.toy20@gmail.com

Viewer

Yvonne Barton

Dynamic Program Planner

yvonne.barton51@yahoo.com

Admin

Miller Pfannerstill

Human Implementation Director

miller_pfannerstill@hotmail.com

Admin

Ansley Kreiger

Chief Usability Analyst

ansley.kreiger@gmail.com

Admin

Gerry Lockman

Central Marketing Strategist

gerry.lockman54@hotmail.com

Admin

Pattie Kuhic

Dynamic Factors Technician

pattie.kuhic@gmail.com

Admin

Glenda Heidenreich

Future Mobility Designer

glenda_heidenreich@hotmail.com

Admin

Caden Hauck

Lead Accountability Executive

caden_hauck52@hotmail.com

Viewer

Lucile Koss

Forward Branding Associate

lucile.koss@yahoo.com

Member

Vern Russel

International Quality Representative

vern_russel34@hotmail.com

Viewer

Marcelino Quitzon

Forward Applications Liaison

marcelino.quitzon@hotmail.com

Admin

Uriah Hand

Future Group Officer

uriah.hand@hotmail.com

Admin

Amaya Bradtke

Senior Operations Manager

amaya.bradtke36@hotmail.com

Viewer

Ford Collier

Dynamic Response Consultant

ford_collier@hotmail.com

Member

Wallace Batz

Corporate Marketing Officer

wallace_batz48@gmail.com

Member

Sheridan Stoltenberg

Global Branding Manager

sheridan_stoltenberg@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
Gabriel Mohr Jr.lavern_romaguera@gmail.comNew LuisboroughActive$49.34
Terri Bruenabbie.bednar@hotmail.comLydiavilleActive$70.26
Rickey Wisokygeneral6@gmail.comChino HillsActive$782.36
Javier Bahringer-Schultz DVMtheo99@gmail.comNorth KarinaActive$179.60
Shirley Townedayton70@hotmail.comDedricviewActive$467.42
Total$1,548.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Wayne Mayer
@brett_daniel
aliza68@gmail.comLeesburgActive$651.11
Alicia Dickinson-Hirthe
@theo.kunde29
albina.champlin38@yahoo.comSouth YeseniaviewActive$88.92
Brandi Kulas
@denis89
calista.orn14@hotmail.comNew GordonActive$548.43
Jackie Purdy
@jane.kertzmann36
marge.gerhold62@hotmail.comNorth FloydburyInactive$627.74
Carolyn Sawayn
@marilie77
nikita.bashirian@hotmail.comFlagstaffInactive$376.34

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Noah Gorczanyjamar10@hotmail.comSouth ManuelvilleActive$1,092.79
Lester Vonjosh_oconner82@yahoo.comSouth BendActive$867.89
Hugo Robelestevan.ratke61@gmail.comEast CameronhavenActive$1,177.15
Mrs. Camille Kirlinsammy.homenick@gmail.comNew WinnifredActive$563.86
Drew Millerarne.rau@gmail.comRhettboroughActive$699.33
Total$4,401.02

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lee Welchgisselle76@gmail.comFort MavericktonInactive$288.73
Eileen Hirthe Sr.howell.walker@hotmail.comChino HillsInactive$396.67
Rachael Anderson Vlela.kirlin35@gmail.comLemkeburyActive$633.76
Miss Janet Hessel IVola_schmitt71@gmail.comPort ZakaryActive$822.47
Clifford Larkin IVedmund54@hotmail.comSouth WilbertboroInactive$1,041.66
Total$3,183.29

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ruth Collier IVmarisa20@yahoo.comSeamusfortInactive$89.36
Stacy Sawaynlexi.rice75@yahoo.comNew AlvaActive$918.38
Eleanor Sanforddax.howell81@hotmail.comAnkundingfurtActive$251.29
Margie Rohanabbey_schowalter1@hotmail.comFort AlaynachesterActive$94.22
Keith Dietrichmarisol1@gmail.comThelmafurtInactive$176.61
Total$1,529.86

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
Dixie Keelingbrennon.cole34@gmail.comHartmannviewActive$564.39
Olive Ortizchesley33@yahoo.comKeshawnboroughInactive$201.23
Erik Lefflerruthe_hagenes@gmail.comAndreworthInactive$86.36
Dr. Evan Coleraphaelle1@gmail.comCarsonInactive$1,066.89
Kari Mitchellelda_schulist@hotmail.comChicopeeActive$754.55
Total$2,673.42

Table with row selection

Card Table

NameEmailLocationStatusBalance
Pat Danielflavio_dibbert23@yahoo.comPort MayeActive$20.75
Cathy Greenfelder-Bergetriston94@gmail.comErnserburghActive$12.22
Danielle Ratkearne98@gmail.comLynchsideInactive$484.47
Julius Ondrickaelias.pfannerstill82@gmail.comOrnboroActive$76.03
Dr. Susan O'Connerdalton.schuppe@hotmail.comFort AshtynportInactive$413.01
Total$1,006.48

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
Dr. Andres Hackettrosalinda.crist@hotmail.comLake CharlesInactive$277.93
Herman Cormierlenna72@gmail.comAdelletownInactive$19.45
Jody Jerdejesse.mccullough@hotmail.comSouth MallieInactive$578.78
Melody Nolanfrances21@yahoo.comNew EltatownActive$568.69
Pauline Borereleonore_welch@gmail.comSouth AbrahamActive$36.47
Robin Littelernestine.mccullough24@hotmail.comNapoleonboroActive$329.50
Israel Maggio-Labadiehardy12@gmail.comHanfordInactive$1,144.79
Naomi Keelingross17@yahoo.comFort OthafurtInactive$636.99
Rose Howegeorge16@gmail.comHarrisburyInactive$505.12
Mr. Ignacio Pollichruth_swift70@hotmail.comWest ConnertownActive$691.74
Lowell Herzogdayne9@yahoo.comMelbourneInactive$94.48
Melanie Kautzerdevon.lockman86@hotmail.comNew ShanechesterInactive$347.37
Ms. Brenda Dachloyal50@gmail.comWest MeaghantownActive$199.30
Travis Kassulkealden_schuppe@yahoo.comLexifurtInactive$478.94
Verna Sanforddaron.buckridge@hotmail.comAbbeytonActive$564.65
Total$6,474.20

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.