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
INV001UnpaidBank Transfer$634.71
INV002PaidPayPal$548.25
INV003PaidBank Transfer$853.44
INV004UnpaidPayPal$820.02
INV005PaidCredit Card$202.02
INV006PaidBank Transfer$417.26
INV007PendingPayPal$163.26
Total$3,638.96

Simple

Users

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

NameTitleEmailRoleActions
Jerrod LockmanPrincipal Directives Plannerjerrod_lockman28@hotmail.comMember
Harmony WiegandNational Metrics Specialistharmony.wiegand51@yahoo.comAdmin
Joshua TorpFuture Operations Associatejoshua_torp15@hotmail.comMember
Vito OrtizFuture Accounts Specialistvito_ortiz15@yahoo.comAdmin
Nick BruenLead Directives Strategistnick_bruen@hotmail.comViewer
Johnny SmithamPrincipal Markets Analystjohnny.smitham@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Oliver Toy

Lead Creative Assistant

oliver_toy40@hotmail.com

Viewer

Kaelyn Altenwerth

District Program Strategist

kaelyn_altenwerth@yahoo.com

Admin

Deonte Zieme

Regional Division Engineer

deonte_zieme@yahoo.com

Member

Abbigail Franey

Chief Markets Executive

abbigail.franey@hotmail.com

Viewer

Jordan Murray

Human Creative Technician

jordan.murray80@gmail.com

Member

Mozelle Padberg

District Response Engineer

mozelle.padberg91@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Alycia Collier

National Creative Consultant

alycia.collier88@yahoo.com

Member

David Stroman

Corporate Web Representative

david_stroman@yahoo.com

Viewer

Alfonzo Brekke

Direct Solutions Designer

alfonzo_brekke63@hotmail.com

Member

Vida Wintheiser

Corporate Response Architect

vida.wintheiser@hotmail.com

Viewer

Sylvester Rau

Internal Research Orchestrator

sylvester_rau91@yahoo.com

Viewer

Liliane Durgan

Lead Operations Analyst

liliane.durgan51@hotmail.com

Member

Freddie Friesen

Future Mobility Planner

freddie.friesen59@yahoo.com

Viewer

Julia Kovacek

Lead Paradigm Engineer

julia.kovacek70@yahoo.com

Member

Michelle Runolfsson

Dynamic Infrastructure Technician

michelle.runolfsson84@gmail.com

Viewer

Caitlyn Reichel

Direct Functionality Engineer

caitlyn.reichel84@gmail.com

Member

Theresia Kreiger

Principal Quality Executive

theresia.kreiger17@yahoo.com

Viewer

Margot Wunsch

Future Intranet Associate

margot_wunsch60@hotmail.com

Admin

Layla Gutmann

Chief Metrics Representative

layla.gutmann13@hotmail.com

Admin

Justina Barrows

Senior Accountability Administrator

justina_barrows18@hotmail.com

Member

Keeley Ryan

Investor Quality Executive

keeley.ryan@hotmail.com

Admin

Beryl Hermiston

Corporate Markets Agent

beryl_hermiston73@yahoo.com

Viewer

Cora West

Direct Integration Representative

cora_west75@yahoo.com

Admin

Dedric Paucek

International Security Analyst

dedric_paucek@yahoo.com

Admin

Eulalia Koelpin

Product Accounts Executive

eulalia.koelpin@yahoo.com

Viewer

Marvin Koelpin

National Branding Consultant

marvin_koelpin@hotmail.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
Seth Hayesbeau.rohan48@gmail.comNational CityInactive$524.33
Domingo Bayermadalyn_howell84@yahoo.comPort MaxineportActive$748.13
Harold Macejkovicvirginia.langosh@yahoo.comEast ProvidenceActive$897.72
Elaine Lueilwitz MDlaura.funk46@hotmail.comLake SigmundvilleInactive$290.47
Christopher Ziemannbaylee.mills@gmail.comSouth TyratownActive$467.48
Total$2,928.13

Basic table

Table with Images

NameEmailLocationStatusBalance
Sabrina Nikolaus
@demetris17
audreanne.trantow4@yahoo.comConroeInactive$749.05
Eileen Kreiger
@wilber_lockman
davon_lesch76@hotmail.comPagactownActive$776.86
Shirley Nienow
@dallas59
mathias.schowalter@gmail.comWest HannaActive$639.25
Marion Langworth II
@rodrick.ernser57
wilfrid.hamill52@yahoo.comComptonInactive$870.82
Mrs. Diana Stamm
@salma_windler
johnpaul.runolfsson74@yahoo.comNew HayleevilleInactive$1,174.50

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Molly Legrosgriffin_johnson50@gmail.comPort MarquisActive$296.20
Erica Leannon Sr.lukas.lind35@yahoo.comNilsboroughActive$457.43
Tim Ritchie IIIjannie64@hotmail.comFort JesstownActive$453.66
Alfonso Shieldsorville7@yahoo.comTyrelltonInactive$68.58
Kellie Wilderman MDmariana.ryan98@hotmail.comNew ColbyviewActive$619.15
Total$1,895.02

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Roy Gulgowskiassunta85@gmail.comNorth QuincylandInactive$1,179.69
Lee Herzoglora42@gmail.comPort AlejandrasteadInactive$1,182.92
Dr. Edward Hilperttony_terry@yahoo.comWest QuincyInactive$578.93
Dr. Pam Armstrongluis_hilpert@hotmail.comWest PatsytonInactive$348.44
Saul Kihnnettie_bartell2@hotmail.comNorth FridaburghActive$815.44
Total$4,105.42

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lela Hauckwilson.collier@hotmail.comZulaufhavenActive$181.55
Jacqueline Cronindestiny.doyle@hotmail.comMarvinfortActive$798.35
Dr. Isaac Kozeyreginald26@hotmail.comEast CarleeboroActive$390.71
Clark Dooleywilson60@yahoo.comLeathachesterInactive$268.47
Suzanne Ebertricardo30@yahoo.comWest LafayetteInactive$766.90
Total$2,405.98

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
Renee Connelly DDSedwardo.hane@gmail.comBernierboroActive$1,025.99
Arlene Wizajodie_schimmel@yahoo.comLake BrycefortActive$967.59
Roberta Bartoncecelia_boyle31@gmail.comSchowalterfurtActive$480.89
Stacey Monahan Jr.howard_carter@gmail.comNew HassanboroActive$466.69
Molly Rohanarielle.dickinson@yahoo.comFort VenaInactive$294.23
Total$3,235.39

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kyle Schneider Igracie_shields@yahoo.comMoenhavenInactive$789.05
Marty Zboncakcarolina_schmeler@gmail.comGunnershireActive$826.02
Melanie Spencerima_davis@yahoo.comWest AlphonsofortActive$84.88
Allan Hansenaaron.jaskolski62@hotmail.comFrancescatonActive$73.74
Dr. Arthur Ullrich-Toymajor_rolfson@hotmail.comNorth EulahhavenInactive$706.22
Total$2,479.91

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
Gordon Pourosflorencio.sipes@yahoo.comWyomingActive$1,027.40
Marguerite Rippincarrie.mills82@yahoo.comElisashireInactive$702.67
Sam Pollichwilma.gottlieb-rosenbaum@hotmail.comHaleyfortInactive$132.04
Stacy Armstronglibby52@yahoo.comThielshireActive$407.84
Woodrow Willmschristophe96@gmail.comLindenActive$520.48
Irma Framigiovanni.nolan8@gmail.comNew ClevelandActive$1,037.81
Angela Bartellvella_ritchie@gmail.comTimothysideInactive$400.21
Miss Tiffany Rowemelisa.wilderman80@gmail.comLayneboroughInactive$391.02
Silvia Robertselena.oconner@yahoo.comSouth ParkerActive$991.42
Abraham Watersperry_klein@hotmail.comBashiriantownActive$1,188.17
Dr. Mark Kutchkale83@yahoo.comNew RebaburghInactive$644.64
Dominic O'Kon Itierra.effertz@gmail.comJameyvilleInactive$863.51
Olga Sipes PhDdayana79@hotmail.comLovelandInactive$430.96
Fannie Brekkejavonte.farrell@hotmail.comKovacekmouthActive$1,176.72
Eddie Townesonya.howell@yahoo.comArturoshireActive$155.97
Total$10,070.86

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.