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$863.42
INV002PendingBank Transfer$664.82
INV003UnpaidCredit Card$441.60
INV004PendingPayPal$258.84
INV005PendingBank Transfer$473.34
INV006PaidBank Transfer$635.21
INV007PaidBank Transfer$607.34
Total$3,944.57

Simple

Users

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

NameTitleEmailRoleActions
Marion GerholdForward Marketing Consultantmarion_gerhold@hotmail.comViewer
Blaze BraunChief Response Architectblaze_braun@yahoo.comAdmin
Laura MuellerInternational Assurance Directorlaura.mueller@hotmail.comAdmin
Isaiah BrekkeInvestor Interactions Analystisaiah.brekke91@hotmail.comMember
Fae HoweRegional Operations Engineerfae_howe92@yahoo.comAdmin
Eula KoelpinForward Group Assistanteula.koelpin@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Audreanne Price

International Integration Administrator

audreanne_price60@gmail.com

Viewer

Annie Lakin

District Implementation Liaison

annie_lakin@yahoo.com

Member

Yadira Huels-Ankunding

Future Metrics Architect

yadira.huels-ankunding12@yahoo.com

Member

Freida Murray

Legacy Communications Administrator

freida_murray12@gmail.com

Member

Oscar Lynch

Investor Data Planner

oscar_lynch@gmail.com

Member

Clementina Franecki

International Program Specialist

clementina_franecki72@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Gladys Gusikowski

Regional Markets Technician

gladys.gusikowski99@gmail.com

Member

Nasir Hayes

International Brand Supervisor

nasir_hayes@gmail.com

Member

Felipe Emard

International Accountability Consultant

felipe_emard43@gmail.com

Admin

Randy Kuhlman

Principal Mobility Analyst

randy_kuhlman92@yahoo.com

Admin

Colin Collins

International Web Consultant

colin_collins@yahoo.com

Viewer

Marlene Harber

Regional Program Liaison

marlene_harber4@gmail.com

Viewer

Okey Schroeder

Legacy Accountability Agent

okey_schroeder86@hotmail.com

Member

Frieda O'Reilly

Future Web Facilitator

frieda_oreilly37@gmail.com

Admin

Felix Walter

National Tactics Technician

felix.walter@yahoo.com

Member

Patrick Yundt

Internal Implementation Architect

patrick.yundt@yahoo.com

Member

Elvira Bode

National Accountability Facilitator

elvira.bode@hotmail.com

Viewer

Henry Brakus

Product Configuration Coordinator

henry.brakus@yahoo.com

Member

Danielle Kautzer

District Markets Orchestrator

danielle_kautzer@yahoo.com

Member

Jennie Grant

District Data Administrator

jennie.grant@hotmail.com

Member

Cornelius Jones

Chief Factors Producer

cornelius_jones@gmail.com

Admin

Jermaine Swaniawski

Global Infrastructure Administrator

jermaine.swaniawski@yahoo.com

Viewer

Eileen Littel

Dynamic Interactions Engineer

eileen_littel@hotmail.com

Member

Laura Haag

Regional Communications Director

laura_haag74@hotmail.com

Member

Kaylie Jacobson

International Assurance Architect

kaylie.jacobson97@hotmail.com

Member

Jasmin Hilll

Global Metrics Representative

jasmin_hilll@yahoo.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
Roberto Littel MDgregg.ritchie@yahoo.comStehrsideActive$382.79
Felicita Lakinedd72@yahoo.comPort KeeganshireInactive$1,084.43
Dr. Barton Breitenbergolivia.koch@yahoo.comFort AaliyahboroInactive$976.03
Lesly Ziemannkaia_mckenzie@gmail.comMount ProspectActive$783.95
Raymond Goyettejeanie10@gmail.comEast JamilActive$1,066.72
Total$4,293.92

Basic table

Table with Images

NameEmailLocationStatusBalance
Donald Auer
@miguel.larson
jaylin63@gmail.comValdostaInactive$1,167.73
Rodger Miller
@raymond_hagenes54
augustus_zulauf45@hotmail.comLake CarolinecesterActive$232.33
Rodney Kuhic
@amara_oconner19
joshua_schimmel31@yahoo.comVictorvilleActive$995.43
Lamar Hintz
@joshua.quitzon
thea.heathcote@hotmail.comHirtheburghInactive$281.65
Velma Bins
@bryant41
sean.kozey@hotmail.comEdmondActive$760.22

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Stewart Lindgrenkallie.bogisich-fahey75@hotmail.comFort HildaActive$30.29
Mr. Mervin Smithamhyman_reichel@hotmail.comApexInactive$298.25
Nelson Collinsstuart.kovacek74@hotmail.comHanfordInactive$916.83
Belinda Powlowskiyadira.von@hotmail.comVonviewActive$535.89
Aubrey Boyerliana.berge57@gmail.comJamiltownInactive$1,148.38
Total$2,929.64

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Noel Heaneypaula73@gmail.comSanta RosaInactive$806.81
Dr. Dawn Johnston-Hodkiewicz DVMenrique_schiller@yahoo.comEast SantinoInactive$111.68
Yvette Roberts PhDmaia14@gmail.comDickifortActive$948.57
Miss Shannon Konopelskioleta.walsh-balistreri@hotmail.comNorth EldridgevilleActive$504.83
Rebekah Spinkahoward.cremin@hotmail.comRyleystadInactive$915.72
Total$3,287.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dino Beerdon_lemke8@yahoo.comLindshireInactive$922.00
Rebekah Kreigerjuwan_hyatt84@hotmail.comEffertzshireInactive$982.02
Rodrick Kirlinstanley.schuster@yahoo.comPort JeanneActive$165.81
Thurman Jerde-Altenwerthjuan.breitenberg68@hotmail.comEast ZoiestadActive$781.32
Gregory Beattyautumn30@yahoo.comDetroitInactive$369.09
Total$3,220.24

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
Opal Ricemikayla.dickinson51@gmail.comBrantviewInactive$1,095.32
Candice Nicolassavannah97@gmail.comPort DejaActive$495.39
Robin O'Konfavian68@yahoo.comEast OrrinInactive$630.80
Rufus Feeneygerardo_friesen@gmail.comChattanoogaInactive$20.62
Eveline Stokescory.effertz@gmail.comWest RaphaelleActive$3.34
Total$2,245.47

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mrs. Nya Creminshawn.anderson@hotmail.comNorth EliseInactive$128.36
Naomi Goyettefabiola14@hotmail.comGayleboroughInactive$432.83
Jason Moore-Fisherguadalupe_zulauf88@hotmail.comSan DiegoInactive$867.62
Wade Maggiocole59@hotmail.comAngusviewActive$458.83
Guadalupe Wintheisergermaine_macejkovic@gmail.comPort AugustusActive$656.99
Total$2,544.63

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
Patty Ankundingmaryse_stiedemann53@gmail.comNew ShanaActive$967.76
Sophia Kshlerin-Langwortharmando_sanford@hotmail.comSpencerboroughActive$716.51
Jean Quitzoncaleigh.mraz74@gmail.comLake NolasteadInactive$417.64
Shaun Muellerlisette_ratke64@gmail.comLake MazieActive$325.13
Pablo Stantonjenny_rau58@gmail.comSouth WilfredoInactive$777.74
Cade Crooksedward21@hotmail.comNew EsmeraldacesterInactive$251.80
Ms. Alexandro Olsonsammy.feil@gmail.comLittleburyActive$805.67
Tiffany Braunemil79@hotmail.comWest MylesActive$531.34
Lee Mrazadrian28@yahoo.comNorth JarvislandActive$1.85
Shanel Stehrdillon_bernhard72@hotmail.comNorth EdgarfieldActive$626.11
Angela Kassulkeseamus_abbott@gmail.comHeathcoteviewInactive$1,118.70
Danny Senger-Macejkoviclaverne_crona@yahoo.comEmmyfieldInactive$422.54
Mr. Narciso Goyettekendall.zemlak@hotmail.comPensacolaInactive$538.86
Skyla Raynorsandy_greenfelder19@gmail.comMohammedboroActive$901.74
Rebekah Klingdonna55@hotmail.comVonRuedenfortActive$791.82
Total$9,195.21

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.