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
INV001PendingBank Transfer$656.04
INV002PaidBank Transfer$584.95
INV003PendingBank Transfer$504.15
INV004PaidPayPal$175.05
INV005PaidCredit Card$829.35
INV006PendingCredit Card$306.29
INV007PendingPayPal$831.23
Total$3,887.06

Simple

Users

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

NameTitleEmailRoleActions
Jan WestFuture Program Specialistjan_west@yahoo.comAdmin
Deion BrakusDirect Markets Officerdeion.brakus35@hotmail.comAdmin
Vella GutkowskiHuman Implementation Administratorvella_gutkowski@hotmail.comViewer
Torrance MitchellDistrict Usability Executivetorrance_mitchell@gmail.comViewer
Devan ConsidineCorporate Applications Assistantdevan_considine@yahoo.comViewer
Walton HettingerCentral Applications Supervisorwalton.hettinger62@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Deven Carter

Central Operations Associate

deven_carter71@hotmail.com

Admin

Krystal Skiles

Central Division Specialist

krystal_skiles@gmail.com

Member

Saul Halvorson

Senior Communications Producer

saul_halvorson@hotmail.com

Admin

Lewis Barton

District Data Consultant

lewis.barton@yahoo.com

Admin

Otto Swaniawski

Principal Web Coordinator

otto.swaniawski28@yahoo.com

Viewer

Walton Wyman

National Response Representative

walton_wyman13@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Vanessa Collier

Legacy Quality Planner

vanessa.collier78@gmail.com

Admin

Josephine Goldner

Principal Intranet Strategist

josephine.goldner@yahoo.com

Admin

Drew Marquardt

Internal Interactions Officer

drew.marquardt82@yahoo.com

Viewer

Lizeth Weimann

Corporate Creative Agent

lizeth.weimann28@hotmail.com

Viewer

Meta Cremin

District Security Designer

meta_cremin@gmail.com

Viewer

Sammy Marquardt

Corporate Creative Manager

sammy.marquardt52@gmail.com

Admin

Deontae Hills

Human Markets Facilitator

deontae.hills@gmail.com

Viewer

Jordane Koss

Central Group Technician

jordane_koss88@gmail.com

Admin

Brianne Stark

Senior Implementation Strategist

brianne_stark@hotmail.com

Admin

Quincy Fadel

National Security Developer

quincy_fadel@hotmail.com

Member

Janis Bechtelar

Chief Quality Coordinator

janis.bechtelar@gmail.com

Member

Orin Erdman

Chief Web Supervisor

orin_erdman@yahoo.com

Admin

Viviane Paucek

Principal Solutions Developer

viviane_paucek36@hotmail.com

Member

Nels Schulist

Senior Quality Facilitator

nels_schulist42@yahoo.com

Viewer

Heber Nienow

Direct Identity Supervisor

heber_nienow@gmail.com

Admin

Ramiro Kihn

International Assurance Facilitator

ramiro.kihn22@hotmail.com

Member

Vance Bruen

Future Optimization Designer

vance_bruen37@yahoo.com

Viewer

Morris Anderson

International Accounts Director

morris.anderson@hotmail.com

Admin

Kane Parisian-Kuphal

International Directives Supervisor

kane.parisian-kuphal@yahoo.com

Member

Odie Kutch

National Metrics Liaison

odie_kutch4@yahoo.com

Admin

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
Donnie Ernsermelyssa_wyman85@yahoo.comWalkerburyInactive$1,040.92
Terry Purdymay.donnelly38@yahoo.comNew MustafaActive$1,007.81
Judy Mayertearnestine5@gmail.comLavadavilleActive$403.21
Percy Bechtelareliezer28@hotmail.comFort ChristyfurtInactive$233.43
Iris Lindfabian.carter52@gmail.comCarson CityInactive$1,081.02
Total$3,766.39

Basic table

Table with Images

NameEmailLocationStatusBalance
Randall Schinner
@jared_rath
noe.bechtelar53@gmail.comNorth TrystanInactive$256.01
Stewart Keebler-Botsford
@weldon_mcclure65
kellie.reichel@yahoo.comFarrellbergActive$927.15
Tyrone Miller
@aron_lemke92
claude.bailey37@gmail.comNorth MohamedcesterActive$417.83
Patti Hermiston-Quitzon
@dominic32
kylie82@hotmail.comNorth DellsideActive$26.51
Julia Greenfelder
@haskell74
ambrose_ebert41@gmail.comWest BaileyfurtInactive$310.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Sonia Luettgenluz.weber62@hotmail.comWalterviewActive$499.37
Renee Barrowsceline.terry@gmail.comSouth GeoffreysideInactive$643.51
Brittany Langworthblake_stokes@gmail.comDubuqueActive$51.21
Omar Boganminerva23@gmail.comNew PriscillafurtActive$43.55
Johnnie Feeney DDSlucile40@yahoo.comRebekatownInactive$803.78
Total$2,041.42

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Patrick Kleinorlando_dubuque58@gmail.comFeilboroughActive$941.81
Oliver Erdmansandrine_purdy-simonis@yahoo.comKayleefieldActive$6.84
Ms. Ann Jerdebrandy_fahey93@gmail.comEdinaActive$229.60
Leticia Townekeon_waelchi97@hotmail.comPort MollyshireActive$214.19
Owen Jacobsalysson.baumbach@gmail.comHandfieldInactive$959.74
Total$2,352.18

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jenny Buckridgehillard_cronin25@yahoo.comNorth FatimaInactive$751.60
Abel Wiegandgarnett.roob@gmail.comNew KobyInactive$663.46
Kellie Jacobimarquis76@yahoo.comEast AbbieInactive$613.18
Joel Daugherty DVMmossie36@yahoo.comPort MilfordsideInactive$24.72
Brent Kohlerrosella_schinner@yahoo.comSmithfieldInactive$291.91
Total$2,344.87

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
Jeremiah Marvinabraham_harber@hotmail.comEast LavonInactive$1,063.86
Blake O'Connerjaylen.spinka6@hotmail.comSouth CrystelburghInactive$633.40
Eleanor Wymanjanis_barrows99@gmail.comLake DouglasburyInactive$1,189.23
Adrian Markskayleigh_hudson@gmail.comCortneyshireInactive$184.36
Moses Murphykayli.wiza@yahoo.comIrwinfurtInactive$855.93
Total$3,926.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Rodolfo Okuneva Vguido_bogisich77@gmail.comGroverbergActive$361.69
Erick D'Amoreshana_wolf@gmail.comFlorenciosideInactive$540.08
Kerry Wymanlorenza.wiza@yahoo.comNorth VellaInactive$813.44
Miss Tami Bauchclaudia58@yahoo.comUticaInactive$777.48
Mindy Crist IIIhassie.keeling45@yahoo.comSan BernardinoInactive$542.88
Total$3,035.57

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
Candace Kingmadonna.ratke14@hotmail.comWest KacielandActive$123.61
Russell Wuckertdemetrius_goyette78@hotmail.comSouth San FranciscoActive$232.86
Eula Pagacalena15@gmail.comEast ConnortownActive$1,182.98
Elvira Hegmannnicholas_stamm@hotmail.comLake GwendolynInactive$1,141.79
Nancy Mannsamara64@hotmail.comWest FayecesterActive$395.51
Malcolm Dicki Iedyth_dare89@hotmail.comClaudiashireInactive$236.59
Darren Lockmansimeon91@yahoo.comNorth RebekahchesterInactive$512.08
Lucas Paucekfrancisco.hackett@yahoo.comDentonInactive$1,000.54
Willie Labadievicenta85@hotmail.comLionelsideActive$974.16
Adrian Hayesnapoleon_zboncak76@gmail.comPort PetrafortActive$1,166.88
Seth Watersbrad_quigley3@gmail.comAylinsideActive$911.53
Elmer Torphy Vcarlotta.ledner99@gmail.comNorth UlisesActive$637.07
Carlos Maggiorowena_mckenzie11@gmail.comElizabethActive$287.62
Alex Grahamvida12@yahoo.comColumbiaActive$955.87
Jorge Reynoldspietro_bauch@gmail.comEast MaximilianActive$536.08
Total$10,295.17

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.