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
INV001PendingPayPal$317.46
INV002PendingCredit Card$996.34
INV003PendingBank Transfer$345.38
INV004PendingBank Transfer$974.63
INV005PaidPayPal$516.65
INV006UnpaidCredit Card$792.62
INV007PaidPayPal$341.42
Total$4,284.50

Simple

Users

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

NameTitleEmailRoleActions
Cory LockmanProduct Quality Analystcory.lockman@yahoo.comAdmin
Ruben LynchDynamic Usability Specialistruben.lynch31@hotmail.comViewer
Pamela SchultzCustomer Accounts Orchestratorpamela_schultz@yahoo.comAdmin
Belinda NitzscheCustomer Mobility Liaisonbelinda.nitzsche@yahoo.comMember
Edmond FadelFuture Accountability Officeredmond.fadel67@hotmail.comViewer
Jettie PfefferPrincipal Intranet Technicianjettie_pfeffer@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jonathan Ward

Senior Solutions Director

jonathan_ward@gmail.com

Admin

Amos Gorczany

Direct Brand Consultant

amos_gorczany@hotmail.com

Viewer

Mortimer Shanahan

Forward Infrastructure Developer

mortimer.shanahan63@hotmail.com

Admin

Johnpaul Bosco

International Configuration Assistant

johnpaul.bosco31@hotmail.com

Viewer

Freda Heller

Central Solutions Architect

freda.heller@hotmail.com

Admin

Rosa Abbott

Investor Factors Strategist

rosa.abbott@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Jaden Sporer

Investor Brand Designer

jaden.sporer32@gmail.com

Viewer

Mariana Schaden

Internal Assurance Executive

mariana.schaden@gmail.com

Viewer

Ismael Weimann

Regional Security Technician

ismael_weimann@gmail.com

Admin

Janiya Prosacco

Chief Configuration Associate

janiya_prosacco59@gmail.com

Member

Marvin D'Amore

Customer Data Producer

marvin_damore44@yahoo.com

Admin

Maurine Kovacek

Dynamic Optimization Architect

maurine.kovacek@hotmail.com

Admin

Zachariah Fadel

Investor Group Associate

zachariah.fadel@gmail.com

Admin

Mark Kerluke

National Directives Architect

mark_kerluke@gmail.com

Viewer

Aliya Predovic-Bauch

Investor Optimization Liaison

aliya_predovic-bauch81@yahoo.com

Member

Florencio Farrell

Corporate Operations Director

florencio.farrell@hotmail.com

Viewer

Chris Parisian

Dynamic Metrics Coordinator

chris.parisian@hotmail.com

Admin

Natasha Mraz-Upton

National Metrics Technician

natasha.mraz-upton@hotmail.com

Admin

Lester Kessler-Mueller

District Infrastructure Developer

lester_kessler-mueller87@hotmail.com

Admin

Eugenia Sipes

District Accounts Coordinator

eugenia.sipes@yahoo.com

Member

Trisha Boyle

Lead Program Agent

trisha_boyle@yahoo.com

Admin

Tamara O'Kon

Chief Marketing Administrator

tamara.okon@yahoo.com

Member

Alysson Herzog

Human Infrastructure Representative

alysson_herzog74@gmail.com

Member

Courtney VonRueden

Direct Factors Producer

courtney_vonrueden@gmail.com

Admin

Shannon Marquardt

Human Configuration Representative

shannon.marquardt@gmail.com

Admin

Toby Cruickshank

Product Paradigm Liaison

toby_cruickshank44@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
Eliseo Framijane73@hotmail.comLake TyshawnActive$794.39
Eileen Stantonkeith96@gmail.comAbshirefurtActive$977.24
Sharon Bradtke PhDsuzanne_reinger@yahoo.comSandrineburghInactive$947.47
Neil Erdmanally.homenick@gmail.comFarmingtonActive$833.44
Callie Jacobi Vkatelynn_mosciski74@gmail.comParadiseActive$328.84
Total$3,881.38

Basic table

Table with Images

NameEmailLocationStatusBalance
Clayton Dietrich
@layla.deckow
reginald75@gmail.comValdostaActive$610.28
Johnathan Pfannerstill
@connie31
linda47@gmail.comNorth WayneActive$1,012.15
Katrina Mraz
@davin_swift35
nelle_dickens@gmail.comKosscesterActive$413.72
Krista Fisher
@alan_hegmann17
rosemary.hodkiewicz98@gmail.comSt. CharlesInactive$99.79
Bridget Jast
@ilene.walker
christian_block@yahoo.comSouth ValleyInactive$1,143.89

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Maybell Cummings Valison_ruecker@gmail.comBashirianburyInactive$1,058.38
Dr. Marie Champlinjudy52@gmail.comRogahnworthActive$197.90
Tammy Ullrichciara61@yahoo.comAmirstadActive$720.42
Jessie Runolfsdottirjeannie71@yahoo.comLake LennaInactive$588.99
Yasmine Lemkelauretta78@yahoo.comFranzcesterInactive$126.92
Total$2,692.61

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Tom Braunfrancis_von@gmail.comState CollegeInactive$297.93
Mr. Clemens Jacobslorene_okuneva@hotmail.comFort MaximeActive$504.16
Gerson Goldnerjerry.marks22@hotmail.comJermainebergActive$1,143.32
Reginald Rolfson Vkarlee.carter@gmail.comPort JackelineActive$374.56
Ms. Sue Rowerodney_dooley3@hotmail.comParmaActive$941.39
Total$3,261.36

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Elissa Rueckermeagan.reilly15@yahoo.comBartolettiboroActive$342.85
Courtney Heidenreichcary_sipes@yahoo.comNew JairoInactive$459.16
Mrs. Leigh McDermottmarshall_cartwright43@yahoo.comLake ElyseInactive$1,119.37
Raul Treutelvicki43@hotmail.comNorth VidalcesterActive$538.41
Tina Swaniawskitraci.wolff61@gmail.comYundtsteadInactive$115.13
Total$2,574.92

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
Mary Ortizsidney_kerluke88@yahoo.comNew OlenInactive$285.26
Delbert Harvey-Vandervortbobbie.quitzon@hotmail.comDaytonActive$904.76
Carole Fritschrubye8@yahoo.comLouveniafurtActive$1,079.93
Leonard Mannjeffrey.corwin@hotmail.comTorranceActive$59.31
Alberta Purdymitchell_moen@yahoo.comFall RiverActive$618.67
Total$2,947.93

Table with row selection

Card Table

NameEmailLocationStatusBalance
Phillip Schaeferyasmin_blanda94@yahoo.comPort BlaiseInactive$787.22
Leslie Quigleycristina_nader@gmail.comNew WandachesterInactive$112.65
Wanda Sawayn IVdawn.stamm@yahoo.comDubuqueActive$1,008.24
Marguerite Hilllelliott24@gmail.comDeronsteadInactive$411.55
Derrick McCulloughedwin_connelly46@yahoo.comFort RosacesterActive$431.91
Total$2,751.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
Ms. Zelma Kochearnest_bartoletti68@gmail.comCandidaboroughInactive$1,109.72
John Hudsonmerl.ledner59@hotmail.comLivermoreInactive$511.17
Dr. Amya Bartoletticourtney.bauch@hotmail.comWest VaughnsideInactive$874.22
Lucia Zulaufmonroe_lockman33@yahoo.comChula VistaInactive$1,091.25
Garry Cartwright IIjaydon_harber77@gmail.comBruenhavenActive$929.82
Remington Dibbert IIIjulius42@gmail.comNorth ClaraInactive$242.64
Ms. Ramiro Shieldsfloyd61@gmail.comNorth JayInactive$186.69
Willy O'Konmuhammad9@gmail.comWest RubyeInactive$1,085.52
Sylvia Greenfeldermarcella_will@yahoo.comRozellaworthActive$500.10
Pierre Rutherfordkyra_simonis48@hotmail.comFrederickhavenInactive$585.67
Irving Kilback-Turnerdoug92@gmail.comDunwoodyActive$1,173.68
Tom Wymanmalcolm.rau@gmail.comKochburyActive$24.60
Santa Osinskiima.marvin96@gmail.comJudebergInactive$97.66
Tanya Turcottejalon98@hotmail.comSouth GennarotownActive$372.85
Estelle Rosenbaumlillian_kohler@yahoo.comEvelynboroActive$173.81
Total$8,959.40

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.