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$172.01
INV002PendingPayPal$118.47
INV003PaidPayPal$377.80
INV004UnpaidBank Transfer$652.98
INV005PaidBank Transfer$674.93
INV006PendingBank Transfer$228.12
INV007UnpaidCredit Card$919.53
Total$3,143.84

Simple

Users

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

NameTitleEmailRoleActions
Krystal GerholdDistrict Mobility Directorkrystal.gerhold24@yahoo.comAdmin
Orval SchroederGlobal Directives Coordinatororval_schroeder@hotmail.comViewer
Lila DuBuqueNational Web Producerlila.dubuque72@yahoo.comMember
Christy BaumbachCentral Identity Administratorchristy.baumbach70@gmail.comViewer
Thelma GusikowskiInternational Accountability Managerthelma_gusikowski93@gmail.comViewer
Sheldon MannProduct Identity Representativesheldon_mann41@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Jacqueline Weber

International Quality Designer

jacqueline_weber98@yahoo.com

Viewer

Terri Hermann

Corporate Brand Technician

terri_hermann@gmail.com

Viewer

Kathryn Ledner

Direct Research Director

kathryn_ledner@yahoo.com

Admin

Cameron Cremin

Senior Usability Consultant

cameron_cremin@hotmail.com

Admin

Marcia Hettinger

Customer Applications Technician

marcia_hettinger@yahoo.com

Member

Darion Hermiston

Central Intranet Producer

darion_hermiston60@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Eusebio Rolfson

Human Paradigm Supervisor

eusebio.rolfson@hotmail.com

Viewer

Albert Marquardt

Corporate Tactics Facilitator

albert_marquardt93@yahoo.com

Viewer

Derek Corwin

Central Tactics Coordinator

derek.corwin@hotmail.com

Admin

Joann Gottlieb

Internal Research Manager

joann_gottlieb41@hotmail.com

Admin

Cesar Russel

Customer Branding Assistant

cesar_russel19@hotmail.com

Member

Rozella Dibbert

National Functionality Coordinator

rozella.dibbert@gmail.com

Member

Maurice Cummerata

Corporate Operations Orchestrator

maurice.cummerata@yahoo.com

Admin

Lafayette Bailey-Hartmann

Central Metrics Analyst

lafayette.bailey-hartmann@hotmail.com

Viewer

Timmothy Kuhn

Forward Security Representative

timmothy_kuhn54@hotmail.com

Member

Wava Walter

Customer Accountability Agent

wava.walter12@hotmail.com

Viewer

Bill Tremblay

National Paradigm Manager

bill_tremblay69@gmail.com

Member

Newton Nikolaus

Senior Program Technician

newton_nikolaus3@hotmail.com

Member

Earl Sawayn

National Factors Supervisor

earl_sawayn@hotmail.com

Viewer

Marianne Terry

Product Marketing Analyst

marianne_terry@hotmail.com

Member

Ora Lueilwitz

Customer Factors Facilitator

ora.lueilwitz70@yahoo.com

Member

Mathilde Vandervort

District Data Administrator

mathilde.vandervort@yahoo.com

Member

Nya Spencer

Direct Infrastructure Producer

nya_spencer@hotmail.com

Member

Mark McKenzie

Principal Marketing Coordinator

mark_mckenzie97@gmail.com

Member

Regina Conroy

Customer Communications Technician

regina.conroy81@gmail.com

Viewer

Edgar Deckow

Direct Accounts Consultant

edgar.deckow@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
Dena Harbernina_cronin@gmail.comFort PriscillabergInactive$163.08
Carole Fritschollie24@yahoo.comDomingochesterInactive$848.58
Dr. Anika Rolfsonlewis_prosacco24@hotmail.comEast VincenzoActive$938.45
Heather Lakinciara.marks72@yahoo.comNapervilleActive$1,092.23
Kaleb Colliermiguel.hintz@yahoo.comSouth YvetteInactive$633.64
Total$3,675.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Kaley Keebler
@ron2
freddy.steuber@hotmail.comFort RomanInactive$546.18
Corey Adams
@frances.leffler32
lera.schmeler4@gmail.comZiemann-MurrayviewActive$478.04
Linwood Tromp III
@cedric_quigley18
michaela_flatley75@hotmail.comGorczanyburyInactive$735.21
Mrs. Harriet Bartell
@rogelio30
marie97@hotmail.comNew CesarviewInactive$876.78
Ilene Nikolaus MD
@gillian45
vivian.berge65@yahoo.comTemeculaActive$608.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dean Kleinmelisa8@yahoo.comWalsh-TrantowfieldActive$1,160.19
Miss Kay Braunera_abernathy-hermiston37@gmail.comConwayInactive$10.70
Peter Millercamille_ortiz-rolfson63@yahoo.comFort FilibertoburyInactive$612.44
Miss Christina Beckerrachael12@hotmail.comEast KarlbergInactive$368.97
Alysa Williamsonelta_hettinger-champlin@gmail.comNew KelvinburghInactive$321.83
Total$2,474.13

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Victoria Harveyjanet_ebert@gmail.comMarvinworthActive$622.46
Milo Weimanndaniel.bechtelar-hodkiewicz94@gmail.comBarbaraburyInactive$294.64
Hiram Crookstod_robel11@hotmail.comPort CarlviewInactive$408.47
Dwayne Monahantorey.christiansen29@gmail.comFort KameronvilleActive$765.71
Marcella Johnsforrest.adams@gmail.comGaryInactive$102.68
Total$2,193.96

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Della Glover PhDdorcas_hickle@hotmail.comLake AngelineActive$397.86
Allie Langworthroger_weimann@yahoo.comLake ElsievilleInactive$849.92
Royal Ziemanndevin_davis40@hotmail.comBaldwin ParkActive$949.24
Devan Johnstonsienna91@hotmail.comNorth OdieInactive$686.35
Lyle Hirthelisandro42@hotmail.comFort MarquestownActive$787.10
Total$3,670.47

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
Viola Adamsmercedes81@gmail.comEast AltonInactive$132.03
Dorothy Ullrichian98@hotmail.comCreminportActive$910.49
Miss Jaeden Kunzeshawna10@hotmail.comEast StephonInactive$1,128.66
Perry Considinerey65@gmail.comWest GrantActive$826.28
Gerardo Dooley-Croningodfrey.sauer47@hotmail.comNew MarjorieburghActive$1,136.32
Total$4,133.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sanford Schadengrover65@gmail.comBoehmchesterInactive$349.54
Abagail Millsmadison.hartmann41@gmail.comNew VickieburghInactive$1,148.29
Estella Mantearvilla6@gmail.comBillieboroInactive$156.31
Connie Whitealvena_hane17@gmail.comHeathcotetonActive$723.86
Charles Harveytrinity95@gmail.comFraneyboroughInactive$88.38
Total$2,466.38

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
Carson Parisian-Wisozkpeter_denesik81@hotmail.comNampaInactive$1,134.08
Mr. Archie Mosciskireginald_moore59@yahoo.comRancho Santa MargaritaActive$490.24
Reinhold Lefflerrey.hauck@gmail.comRathstadInactive$708.88
Winifred Marquardtola82@gmail.comKennerActive$933.92
Mr. Freeda Hickle DVMheber.kerluke61@hotmail.comNorth SheaInactive$511.85
Joanne Hartmannrod_haag88@yahoo.comPort EleanorInactive$713.30
Cecil Barrowslila_hansen@yahoo.comColetonInactive$523.52
Clark Crooks IIjordon_runte27@hotmail.comHoppesideActive$64.71
Paul Stromankareem.skiles@yahoo.comKingchesterActive$501.79
Herman Kreiger IIIdarryl.bashirian@yahoo.comPort JoannInactive$641.69
Teri Blockallen_hudson69@gmail.comCummingsburyInactive$869.15
Carolyn Cummerata-Considine DVMdock40@gmail.comJaedenstadInactive$510.76
Tania Waelchimiranda.yost45@hotmail.comTaylorInactive$250.40
Jason Waelchijuan_macgyver@gmail.comNorth TheresaActive$200.56
Dr. Delbert Altenwerth DDSdayna48@gmail.comFort EvanInactive$111.22
Total$8,166.07

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.