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
INV001PaidPayPal$151.44
INV002PaidPayPal$800.86
INV003PendingBank Transfer$174.31
INV004PaidPayPal$777.60
INV005PendingPayPal$259.83
INV006UnpaidBank Transfer$786.45
INV007UnpaidCredit Card$163.53
Total$3,114.02

Simple

Users

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

NameTitleEmailRoleActions
Anne KunzePrincipal Solutions Facilitatoranne_kunze14@hotmail.comMember
Maurine BeahanForward Branding Representativemaurine.beahan@yahoo.comViewer
Randy WardInternal Factors Technicianrandy.ward90@hotmail.comMember
Freddie BlickRegional Functionality Engineerfreddie.blick21@yahoo.comViewer
Marcos HickleLegacy Marketing Engineermarcos.hickle@yahoo.comMember
Celia GibsonSenior Metrics Techniciancelia.gibson@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Linda McClure

Dynamic Interactions Coordinator

linda_mcclure@gmail.com

Viewer

Meredith Hodkiewicz

Investor Functionality Assistant

meredith.hodkiewicz44@hotmail.com

Viewer

Greg Kuhn

Central Applications Representative

greg.kuhn@hotmail.com

Member

Scottie Yundt

Corporate Paradigm Architect

scottie.yundt@hotmail.com

Member

Enoch Zulauf

International Branding Architect

enoch_zulauf88@gmail.com

Member

Rose Kihn

Direct Functionality Designer

rose_kihn31@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Nellie Prohaska

Corporate Applications Coordinator

nellie_prohaska99@yahoo.com

Member

Devante Heathcote

Regional Paradigm Producer

devante_heathcote83@hotmail.com

Viewer

Orrin Mertz

Global Web Producer

orrin_mertz57@hotmail.com

Member

Dasia Roob

Forward Solutions Strategist

dasia_roob70@gmail.com

Admin

Ariel Daugherty

Principal Paradigm Assistant

ariel_daugherty13@gmail.com

Member

Vincent Hills

Lead Paradigm Developer

vincent.hills@hotmail.com

Member

Naomi Stamm

Corporate Intranet Analyst

naomi.stamm37@hotmail.com

Viewer

Nelson Ledner

Chief Mobility Producer

nelson_ledner@gmail.com

Viewer

Philip Fahey

Chief Security Assistant

philip_fahey@gmail.com

Member

Kristi Murazik

Legacy Accountability Producer

kristi_murazik@hotmail.com

Admin

Kylee Lueilwitz

Human Branding Producer

kylee.lueilwitz48@gmail.com

Member

Augustus Reichert

Direct Applications Representative

augustus_reichert92@gmail.com

Member

Murphy Haley

Senior Factors Architect

murphy_haley@gmail.com

Viewer

Clark Kemmer

Internal Integration Director

clark.kemmer@hotmail.com

Viewer

Tevin Kling

Senior Mobility Facilitator

tevin_kling@hotmail.com

Admin

Albertha Wyman-Anderson

Forward Division Agent

albertha_wyman-anderson@hotmail.com

Viewer

Paulette Maggio

Corporate Mobility Technician

paulette_maggio@hotmail.com

Viewer

Jill Torp

Direct Identity Developer

jill.torp@yahoo.com

Viewer

Blanca Wyman

International Accounts Representative

blanca_wyman69@yahoo.com

Viewer

Aisha Bernier

Corporate Program Technician

aisha.bernier3@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
Jodi Schummkarlee92@hotmail.comVolkmansideActive$990.64
Ashley Stokesharold12@gmail.comDarrenstadInactive$45.02
Kaelyn Koepproxanne_boyle@gmail.comPagacsteadInactive$1,174.78
Lester Gleichneralek.dickinson43@gmail.comNew AngelaActive$363.37
Dayne Armstrongteresa69@yahoo.comEast OrvilleInactive$383.17
Total$2,956.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Marsha Murphy III
@jeannette45
mattie_robel-dare@yahoo.comSouth MerleburghActive$125.23
Aglae Abernathy II
@wm.mcglynn
alfred95@gmail.comAppletonInactive$1,164.48
Arnold Larkin
@marcelina78
leo.grady18@gmail.comMoseburghInactive$791.41
Otis Satterfield
@sydnee62
hassan.raynor22@hotmail.comNew MaxineActive$9.52
Maegan Brakus Sr.
@vivian95
olivia50@gmail.comPort MyraInactive$823.19

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Alene Lesch IIIdusty_waters45@hotmail.comCassintownInactive$1,072.44
Mrs. Heidi Haleyjoanna.hansen16@hotmail.comEast LeticiaActive$1,063.69
Clayton Legroslucile.emmerich@hotmail.comFort JaysonfieldInactive$91.66
Miss June Balistreri PhDharrison.stokes@yahoo.comLake EstrellaInactive$920.23
Santina Dooleyyvette.kling19@gmail.comLake DonatoActive$38.07
Total$3,186.09

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ewald Rippinhardy86@yahoo.comRenoInactive$1,091.79
Deanna Bauchjoelle.willms@gmail.comRuntefieldActive$403.51
Kacie Zulaufkatelin_mills@hotmail.comHodkiewiczboroughInactive$987.32
Clemens Smithjenny44@yahoo.comFort AmyaburyInactive$50.21
Dawson Langoshbrielle.stamm@gmail.comWauwatosaInactive$94.24
Total$2,627.07

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Laura Auergary.schaefer@gmail.comSidlandInactive$823.07
Irma Hoppeenrico.emmerich@yahoo.comSouth AishaActive$1,092.41
Susie Hellercorrine.boyle49@yahoo.comFredasteadActive$748.68
Jamel Heidenreich DDSwallace93@yahoo.comThorntonInactive$394.63
Allen Orncarlotta95@yahoo.comWest KarianneActive$790.07
Total$3,848.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
Maynard Konopelskielda52@hotmail.comMarvinportActive$713.73
Paula Binsjohnny_pfannerstill74@yahoo.comBeerfortActive$1,185.75
Laurianne Wolfflynne_larkin@hotmail.comBerkeleyInactive$602.55
Ramon Hermannralph.treutel@hotmail.comNikolasfortInactive$453.16
Hugh Wolf-Labadiejanice.schaden44@gmail.comPriceburyActive$749.82
Total$3,705.01

Table with row selection

Card Table

NameEmailLocationStatusBalance
Justin Koepp MDdave_kshlerin@yahoo.comSouth EdmundfieldActive$142.15
Doyle Lockmanbernadine_white84@yahoo.comMafaldaboroActive$519.66
Shanel Hyattrickie.bechtelar8@gmail.comLegrosworthActive$855.14
Jaquelin Kihncarolyne53@hotmail.comJanashireActive$1,050.26
Terrell Powlowskitelly_jenkins4@hotmail.comNorth AlenaInactive$644.03
Total$3,211.24

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
Lexus Cummingscleveland_wiza@yahoo.comPort BernardstadInactive$785.98
Zachary Gerhold Vdonald_kutch53@gmail.comPfannerstillburyActive$197.77
Francesca Lockmansarai_nienow78@yahoo.comFort ElsaInactive$77.90
Mrs. Jeanne Stehrmonique.bayer@yahoo.comPort OswaldInactive$1,051.39
Whitney Halvorsondwight_dicki@hotmail.comSouth CalvinInactive$598.95
Dr. Sylvester Skilesabigayle45@yahoo.comEast FredaInactive$356.60
Douglas Welch DVMcarlos_effertz89@gmail.comAlfonzotonActive$38.44
Rossie Schimmeljoelle.beier@yahoo.comLeighvilleInactive$316.34
Kattie Steuberlura86@gmail.comSouth KarleystadActive$903.71
Doug Wittingjameson17@gmail.comFort TimviewInactive$542.71
Carmen Feeneykatelin99@hotmail.comFort DebramouthInactive$943.72
Etha Raynorkristine_parker@hotmail.comWest JanicefortActive$669.11
Spencer Gerholdzachariah.macgyver-jast80@hotmail.comMenifeeInactive$780.93
Leah Gusikowskisterling.mertz11@gmail.comFort SheriInactive$994.07
Earlene Reicheldevin_jaskolski97@hotmail.comRivertonActive$170.14
Total$8,427.76

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.