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
INV001PendingCredit Card$838.98
INV002UnpaidCredit Card$267.99
INV003UnpaidPayPal$347.28
INV004PendingBank Transfer$579.17
INV005UnpaidPayPal$743.48
INV006UnpaidPayPal$908.98
INV007PaidPayPal$795.26
Total$4,481.14

Simple

Users

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

NameTitleEmailRoleActions
Karl ShanahanInvestor Branding Plannerkarl_shanahan@gmail.comMember
Zechariah HahnInternal Marketing Facilitatorzechariah.hahn20@hotmail.comViewer
Maryjane CarrollInvestor Marketing Developermaryjane_carroll78@yahoo.comViewer
Rocio OkunevaLegacy Data Officerrocio_okuneva@gmail.comMember
Arely RitchieCorporate Group Engineerarely_ritchie@yahoo.comViewer
Rita ZiemannGlobal Accounts Strategistrita.ziemann@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Susana Fadel

National Accountability Representative

susana.fadel89@gmail.com

Admin

Logan O'Reilly-Cole

Forward Program Associate

logan.oreilly-cole11@gmail.com

Admin

Trevion Auer

National Brand Developer

trevion_auer@gmail.com

Viewer

Syble Gleichner

Central Metrics Agent

syble_gleichner29@yahoo.com

Viewer

Ubaldo Swift

Chief Accounts Agent

ubaldo_swift32@yahoo.com

Admin

Isaac Jenkins

Dynamic Branding Assistant

isaac.jenkins@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Edna Williamson-Zulauf

Regional Configuration Orchestrator

edna_williamson-zulauf@hotmail.com

Member

Clint Denesik

Future Response Planner

clint_denesik77@yahoo.com

Viewer

Michaela Schroeder

Central Quality Planner

michaela.schroeder89@gmail.com

Viewer

Orrin Adams

Investor Response Director

orrin.adams24@hotmail.com

Member

Jacklyn Gislason

Investor Quality Designer

jacklyn_gislason@yahoo.com

Viewer

Eliezer Murray

Customer Data Planner

eliezer_murray70@yahoo.com

Member

Cyrus Jerde

Chief Functionality Architect

cyrus_jerde7@yahoo.com

Admin

Katarina Hamill

Human Research Specialist

katarina_hamill@hotmail.com

Admin

Hollie Sauer

Direct Communications Engineer

hollie_sauer@gmail.com

Admin

Maci Robel

Customer Group Technician

maci_robel97@yahoo.com

Member

Katlyn Stark

Forward Mobility Producer

katlyn_stark@yahoo.com

Admin

Opal Oberbrunner

Direct Markets Manager

opal_oberbrunner@hotmail.com

Admin

Hugh Rodriguez

Investor Brand Analyst

hugh.rodriguez86@yahoo.com

Viewer

Mellie Price

Global Paradigm Director

mellie_price@hotmail.com

Admin

Ashly Smitham

Central Web Analyst

ashly_smitham52@hotmail.com

Admin

Katelyn Wehner

Chief Division Liaison

katelyn_wehner@yahoo.com

Viewer

Emelie Mosciski

Corporate Division Administrator

emelie_mosciski62@hotmail.com

Member

Robb Cassin

Product Metrics Director

robb_cassin@gmail.com

Viewer

Avis Bins

Human Branding Associate

avis.bins93@gmail.com

Admin

Nelle Bruen

Corporate Security Liaison

nelle.bruen@yahoo.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
Harriet Wunschtara_collier19@gmail.comNorth KirstinActive$416.84
Marianne Schulistausten_bailey@hotmail.comWest EmilburyInactive$43.45
Max Weimann IVkatrine.lowe@yahoo.comNew DallasActive$780.16
Frankie Kshlerinabel.corwin2@gmail.comFort KennaviewInactive$181.74
Dr. Edwin Heaneyrosendo66@hotmail.comNorth UrielInactive$1,052.68
Total$2,474.87

Basic table

Table with Images

NameEmailLocationStatusBalance
Meredith Stroman
@delia_maggio
lafayette74@yahoo.comLa HabraInactive$315.08
Elias Nikolaus
@max.stokes-carter31
evert_dicki21@gmail.comLouisville/Jefferson CountyInactive$17.37
Rudy Collins MD
@riley.ondricka
sonny.dickinson@yahoo.comAufderharvilleActive$1,018.66
Freddie Ratke
@alanis.rath
andreane.gleason@hotmail.comNorth CoyviewActive$189.00
Brian Walsh
@christop.will
pierce.gislason33@gmail.comHandchesterInactive$990.87

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Claude Flatleymarlen_little@yahoo.comNorth JeromeActive$225.69
Darla Sanfordrey48@hotmail.comEast ElnorasideActive$329.87
Karen Trantowdrew_lesch@yahoo.comKimtownInactive$1,101.31
Angelo Ratkebenny_bode@hotmail.comFort RaeganfurtActive$1,057.11
Jesse Batzwilton.bergnaum@hotmail.comWhitneysideInactive$1,189.79
Total$3,903.77

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kristine Andersonalec_kilback-pfeffer6@hotmail.comBiankatonActive$239.45
Everett Windlerlibby51@gmail.comWillmstownActive$559.37
Gayle Renneraylin_stehr19@gmail.comEast ClaudiaActive$886.62
Brenda Harveyyadira.botsford10@gmail.comAbernathytownInactive$383.17
Timothy Weissnatearlene38@gmail.comEffertzlandActive$18.44
Total$2,087.05

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jodi Runte IIIdavion_schuster80@gmail.comCantonInactive$643.86
Sophia Brownmireya_mcclure81@hotmail.comAlbuquerqueActive$262.40
Sylvester Wittingmadilyn_beahan@yahoo.comLas CrucesActive$202.72
Pat Mrazgregg73@gmail.comRochesterInactive$227.80
Jackie Dickinsonafton_okon29@gmail.comBashirianvilleInactive$155.66
Total$1,492.44

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
Cameron Thompsonfreeda5@yahoo.comFayportInactive$197.82
Lela Skiles PhDnigel.sipes@gmail.comSouth VioletstadInactive$489.99
Bethany Berge-Hilperthassan.lindgren-hills@hotmail.comNew JohnnieshireInactive$104.23
Kent Rowe Inettie36@hotmail.comWest MontycesterActive$887.25
Edgar Homenick Jr.elfrieda68@yahoo.comDaresteadInactive$182.70
Total$1,861.99

Table with row selection

Card Table

NameEmailLocationStatusBalance
Johanna Beckerduncan_ortiz88@hotmail.comDaytonchesterInactive$1,126.12
Ms. Victoria Weber DDSstevie70@hotmail.comWittingburyActive$425.33
Devin McCullough Vhellen_kris@gmail.comValdostaActive$788.02
Marian Hettingertitus81@hotmail.comCeresActive$262.94
Dewey Welchmeaghan.schaden89@hotmail.comEast LafayettehavenInactive$533.70
Total$3,136.11

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
Ross Greenmoises_marquardt@hotmail.comOsvaldofieldInactive$594.22
Dr. Bridget Hoppethalia.collier-kohler@yahoo.comEast ShainastadInactive$747.17
Kelvin Kautzerkathleen.graham59@hotmail.comWunschcesterActive$902.05
Fannie Feeneyhumberto.smitham@hotmail.comNew MartinaActive$457.07
Heather Marquardthans_predovic54@hotmail.comFargoActive$62.73
Andres Greenfurman71@hotmail.comLake BurdetteActive$805.39
Lee Dibbert Sr.savanna92@yahoo.comCedar HillInactive$399.06
Gary Hansenleonora_hilpert@yahoo.comNorth SigurdtownInactive$1,081.27
Joy Adamsrosalyn93@hotmail.comTrentonInactive$714.32
Dr. Orville Cassinjonathan.berge15@hotmail.comCullenstadActive$322.87
Dr. Nicholas Hillsgarett79@yahoo.comTuckahoeActive$208.69
Ebony Johnsmarta75@gmail.comNashuaActive$393.97
Brendan Kutchalthea.thiel@gmail.comSammamishActive$510.25
Edward Mohrarianna.thiel6@gmail.comNorth ChesleyshireInactive$397.03
Celia Framiguy83@yahoo.comKuhlmanburghInactive$1,097.66
Total$8,693.75

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.