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
INV001UnpaidPayPal$908.12
INV002PaidCredit Card$575.65
INV003UnpaidCredit Card$361.62
INV004PendingPayPal$349.37
INV005UnpaidCredit Card$360.88
INV006PaidCredit Card$629.43
INV007UnpaidPayPal$246.40
Total$3,431.47

Simple

Users

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

NameTitleEmailRoleActions
Douglas Koss-CummingsRegional Identity Coordinatordouglas.koss-cummings@yahoo.comAdmin
Skylar QuitzonInvestor Security Orchestratorskylar.quitzon61@gmail.comViewer
Mozell GreenholtNational Marketing Directormozell.greenholt77@gmail.comMember
Llewellyn LoweInvestor Implementation Engineerllewellyn_lowe33@yahoo.comViewer
Karlee EmmerichCorporate Configuration Developerkarlee.emmerich15@hotmail.comMember
Estella QuitzonFuture Accountability Engineerestella.quitzon17@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Yoshiko Marvin

Human Response Executive

yoshiko.marvin1@yahoo.com

Admin

Craig Mann

Central Optimization Designer

craig_mann87@yahoo.com

Member

Sydnie Kub

Future Interactions Consultant

sydnie.kub@gmail.com

Viewer

Loraine Armstrong

Human Accountability Engineer

loraine.armstrong@yahoo.com

Viewer

Catalina Haag

Regional Identity Planner

catalina.haag16@yahoo.com

Admin

Talia Goodwin

Customer Web Planner

talia.goodwin@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Derrick Gerhold

Human Research Designer

derrick_gerhold@hotmail.com

Admin

Noemie Murphy

Human Mobility Liaison

noemie_murphy@gmail.com

Member

Nova Raynor

Internal Directives Agent

nova.raynor31@yahoo.com

Viewer

Lolita MacGyver

District Markets Producer

lolita_macgyver@hotmail.com

Member

Faustino Bergnaum

Future Brand Facilitator

faustino_bergnaum@gmail.com

Viewer

Leslie Auer

District Metrics Representative

leslie.auer69@yahoo.com

Viewer

Horace Bode

Dynamic Functionality Strategist

horace_bode85@gmail.com

Admin

Lou Hyatt

Internal Response Liaison

lou.hyatt@gmail.com

Viewer

Betty Cummings

District Markets Administrator

betty_cummings99@hotmail.com

Admin

Adah Corwin

Dynamic Identity Coordinator

adah_corwin74@hotmail.com

Admin

Demetris Durgan

Legacy Identity Representative

demetris_durgan@hotmail.com

Viewer

Ava Aufderhar

Forward Web Facilitator

ava.aufderhar8@yahoo.com

Member

Sidney Jones

Investor Configuration Analyst

sidney_jones70@gmail.com

Member

Kyle Gibson

Global Configuration Director

kyle_gibson@hotmail.com

Member

Erica Schneider

Chief Data Engineer

erica_schneider@hotmail.com

Admin

Andres VonRueden

International Data Facilitator

andres.vonrueden81@hotmail.com

Admin

Norris Schaefer

Customer Creative Facilitator

norris_schaefer33@gmail.com

Member

Thaddeus Weber

Dynamic Assurance Liaison

thaddeus_weber@hotmail.com

Member

Shayne Strosin-Bahringer

Senior Paradigm Agent

shayne.strosin-bahringer1@gmail.com

Admin

Augusta Nienow

Chief Configuration Producer

augusta_nienow@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
Derek Strackekatelyn_padberg@gmail.comEast LudwigInactive$494.39
Melody Emmerichcheyanne47@yahoo.comNorth RodolfoInactive$351.61
Alfredo Reichert PhDlempi79@gmail.comMichelportInactive$475.40
Herman Kubgerald_howe84@gmail.comRutherfordfurtInactive$3.80
Julius Kunzeursula.schumm@yahoo.comNorth AlbinashireActive$121.54
Total$1,446.74

Basic table

Table with Images

NameEmailLocationStatusBalance
Pat Willms
@tom.king85
marques_kub@hotmail.comJefferyburghInactive$525.90
Brittany Treutel
@hilton.bergnaum9
jess_mcdermott@hotmail.comSouth BrendenActive$306.34
Dallas Doyle-Bauch
@shanon.considine
lilly.bashirian@gmail.comWest ThelmaInactive$1,163.91
Myron Kuhic
@ignacio_kunde
brook.gerlach@yahoo.comEast JalenburghActive$525.39
Rosemarie Feeney
@axel84
lenore71@gmail.comTulareActive$640.56

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Jonathan Blockpearl_kunze99@gmail.comFordhavenInactive$663.27
Alice Mayertbrandt51@gmail.comWest SandrineboroInactive$2.03
Louise Carteraugustine32@gmail.comEast AileenfieldActive$338.00
Alyssa Coleeusebio_stark72@gmail.comJenningssideInactive$671.67
Tommie Schuppe-Macejkovic IVwayne_larson60@yahoo.comSedrickmouthActive$737.95
Total$2,412.92

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kirk Harveymagnolia_moen57@gmail.comEast EvanburyActive$847.49
Tamara Vandervortallie.dickinson21@gmail.comNorth NelsonActive$549.23
Eric Orn IIdon10@yahoo.comXanderlandActive$522.00
Hannah Turnerdashawn94@yahoo.comWest HartfordActive$1,170.63
Mrs. Winifred Ullrichdustin.wunsch87@hotmail.comLake ShainaInactive$365.99
Total$3,455.34

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Terri Cartwrightmaya_grant15@gmail.comSouth WiltonfortInactive$643.09
Betsy Muellerregan33@hotmail.comRonaldomouthActive$200.55
Jacqueline Gleichneriva44@gmail.comVonRuedenburghActive$1,072.35
Edith Hilllmckenna_fahey97@gmail.comPort BransonInactive$1,151.01
Mack Collierbrant_bernhard@gmail.comEast NellastadInactive$774.58
Total$3,841.58

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
Raymond Gerholdkatelin.auer@gmail.comFort AvislandActive$544.14
Toni Cartermadelyn60@hotmail.comSchowalterworthInactive$651.87
Mr. Melvin Boylelilla_heidenreich@hotmail.comSouth KelsieInactive$671.24
Jim Skilesraleigh.sporer-kling85@hotmail.comEast JadenActive$79.61
Kelley Hyattadah_mueller@yahoo.comUticaInactive$791.05
Total$2,737.91

Table with row selection

Card Table

NameEmailLocationStatusBalance
Melvin Rogahnmax88@gmail.comWymanviewActive$795.91
Maureen VonRueden Vprincess_flatley@gmail.comEast EmerystadActive$179.90
Viola Zemlaknorris36@hotmail.comBobbiemouthActive$1,027.55
Wilson DuBuquewoodrow18@hotmail.comPort MilfordfieldInactive$587.38
Grant Ornhelen32@yahoo.comGleasonboroInactive$698.65
Total$3,289.39

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
Lucia Lueilwitz PhDriley_corwin90@hotmail.comWest JuddInactive$2.39
Ebony Grahamjeanette_larkin32@yahoo.comBeauboroActive$654.28
Antoinette Kreigercharity26@gmail.comJohns CreekActive$951.28
Miriam Gottlieblilian43@yahoo.comPort OdieInactive$970.19
Dwight Weberdallin76@hotmail.comMariobergInactive$586.73
Patricia Walkerrachelle_lemke@yahoo.comVicentatownActive$42.81
Mario Whitecathrine_littel14@gmail.comSuzannefieldInactive$472.54
Gerard Koeppshaun84@yahoo.comMarisolportActive$248.97
Duane Howe-Huelsjosue82@yahoo.comNew ThadchesterInactive$250.61
Damon Vonangela55@hotmail.comMarksboroughActive$579.02
Leigh Runolfsdottirchrista_bednar-nader38@gmail.comGraceshireInactive$1,167.50
Vicki Kshlerinadelbert.hamill@yahoo.comWest RolandoInactive$359.19
Ms. Violet Cummeratamarquis.monahan@gmail.comOlafportInactive$448.35
Jennie Wizaricardo.schaefer34@hotmail.comNolanworthInactive$347.85
Olivia Thiel IVrosetta24@hotmail.comNew EvangelinetonActive$26.35
Total$7,108.06

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.