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$306.51
INV002UnpaidBank Transfer$127.52
INV003UnpaidPayPal$115.85
INV004UnpaidBank Transfer$754.11
INV005PendingPayPal$917.21
INV006PendingBank Transfer$865.52
INV007PendingCredit Card$818.32
Total$3,905.04

Simple

Users

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

NameTitleEmailRoleActions
Baylee ZulaufSenior Data Specialistbaylee.zulauf87@gmail.comViewer
Alex WildermanLead Mobility Technicianalex.wilderman@yahoo.comAdmin
Dejon CroninChief Solutions Analystdejon_cronin43@yahoo.comAdmin
Estella RunolfssonInternal Data Analystestella.runolfsson25@yahoo.comAdmin
Devon BoscoDynamic Group Facilitatordevon_bosco@hotmail.comViewer
Howell HammesInternational Quality Orchestratorhowell_hammes3@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Nova Dicki-Blanda

District Accounts Strategist

nova.dicki-blanda@hotmail.com

Admin

Brendan Franey

Dynamic Infrastructure Analyst

brendan_franey17@hotmail.com

Viewer

Terence Vandervort

International Tactics Associate

terence.vandervort71@gmail.com

Admin

Edythe Bauch

Investor Creative Technician

edythe.bauch89@yahoo.com

Viewer

Tomas Brown

Legacy Division Associate

tomas.brown42@hotmail.com

Member

Carmen Gulgowski

Central Division Analyst

carmen.gulgowski73@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Robert Terry

Lead Quality Analyst

robert_terry@yahoo.com

Member

Hermina Littel

National Markets Assistant

hermina_littel@hotmail.com

Viewer

Cecile Turcotte

Direct Program Associate

cecile.turcotte19@gmail.com

Admin

Helene Ondricka

Central Functionality Agent

helene_ondricka81@gmail.com

Member

Adalberto Witting

Chief Mobility Administrator

adalberto.witting84@gmail.com

Viewer

Reid Murphy

Customer Infrastructure Agent

reid_murphy50@gmail.com

Member

Trevor Mohr

Forward Branding Strategist

trevor_mohr62@hotmail.com

Admin

Caitlyn Herzog

Future Functionality Executive

caitlyn_herzog50@yahoo.com

Member

Rachel Wunsch

Dynamic Creative Director

rachel.wunsch26@gmail.com

Admin

Addison Pollich

District Mobility Orchestrator

addison_pollich@hotmail.com

Member

Ila Berge

Chief Intranet Technician

ila.berge@hotmail.com

Member

Moshe Kreiger

International Research Executive

moshe.kreiger93@gmail.com

Viewer

German Weber

Corporate Group Engineer

german_weber30@gmail.com

Viewer

Sincere Huels

Product Infrastructure Engineer

sincere_huels@gmail.com

Viewer

Waldo Witting-Runolfsdottir

Chief Tactics Director

waldo.witting-runolfsdottir@gmail.com

Member

Tiara Keebler

Legacy Program Producer

tiara.keebler74@hotmail.com

Member

Sabryna Keebler

Lead Mobility Agent

sabryna.keebler@gmail.com

Viewer

Tobin O'Keefe

National Optimization Executive

tobin_okeefe@gmail.com

Member

Darius Keebler

Corporate Web Associate

darius_keebler@yahoo.com

Admin

Ericka Herzog

Direct Quality Developer

ericka.herzog86@hotmail.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
Paulette Mitchelledgardo15@gmail.comPhiladelphiaInactive$620.74
Bill Rutherfordbailey.flatley@hotmail.comNew BritainActive$874.51
Faith Rathnelson_block@yahoo.comAlecsteadActive$586.26
Melanie Runtechasity6@yahoo.comPort EastonInactive$966.79
Dr. Latoya Jerdejavonte2@yahoo.comEast BretviewActive$106.90
Total$3,155.20

Basic table

Table with Images

NameEmailLocationStatusBalance
Daryl Cruickshank
@buford_crooks
halle98@hotmail.comKaratonInactive$35.49
Ernest Spinka
@fletcher_glover
april.dach74@hotmail.comBowling GreenInactive$453.81
Tracy Feeney
@leo.howell74
celine_swaniawski-mayer@yahoo.comSouth DinafurtActive$1,026.67
Kristie Quigley
@leland25
jailyn51@hotmail.comWillardviewActive$956.85
Myrtle Maggio
@kiel.gleichner33
jessika.paucek54@yahoo.comStarkviewActive$212.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marta Dickinsongeorgianna59@gmail.comNorth HipolitoActive$688.92
Frederick Cummeratajosiah46@hotmail.comHammesvilleInactive$871.47
Misty Weberkathryne19@hotmail.comEleonorefieldActive$207.88
Mattie Wuckertroma.jones66@gmail.comHarrisfieldActive$646.11
Raquel Murazik Vcamilla.sanford@hotmail.comSouth AlanisworthActive$768.89
Total$3,183.27

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dan Baumbachcamryn.spencer@gmail.comStrackelandInactive$105.04
Stacy Lindgren Jr.susana9@yahoo.comShieldssideActive$99.90
Hazel McKenzieotilia87@yahoo.comSouth LolitaboroughActive$1,184.46
Carolyn Hesselkayli_steuber@yahoo.comMilpitasActive$215.18
Vicki Koelpin-Sawaynwellington_corkery@hotmail.comSouth HassiesteadInactive$492.52
Total$2,097.10

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dianne Howeangela31@gmail.comSouth WilbertcesterInactive$1,196.88
Timmy Wuckertjamir20@gmail.comJocelynburyInactive$580.34
Dr. Alan Effertz Iking22@yahoo.comDonniestadActive$80.16
Cory Cartwrightleanna99@yahoo.comPort AdalinefieldActive$959.56
Dr. Ricardo Skiles IIIidell4@gmail.comEast BertramviewActive$643.41
Total$3,460.35

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
May Kemmer IIIkarl.connelly@hotmail.comAmbroseportInactive$66.47
Elbert Schadencatharine.schmitt49@yahoo.comOlatheInactive$325.11
Dr. Orville Greenmontana18@hotmail.comNorth CharlestonInactive$533.19
Seth Volkman Sr.leonora_harris@yahoo.comDetroitInactive$907.80
Annette Gottliebmac_skiles@gmail.comFlatleystadActive$346.95
Total$2,179.52

Table with row selection

Card Table

NameEmailLocationStatusBalance
Samantha Yosthailie.feest7@hotmail.comNorth PortInactive$709.80
Jeff Moore-Kuhicalfreda_medhurst83@hotmail.comBarrowsburghActive$127.40
Linda Weissnatdestany.hoeger-murphy1@gmail.comGeorgetownInactive$1,177.62
Miss Darlene Swiftwilhelmine.keeling55@gmail.comHuelmouthInactive$574.33
Clarence Gusikowskivalentine_littel70@gmail.comNorth DestanylandActive$782.00
Total$3,371.15

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
Antonia Dachshania0@gmail.comPort EllaInactive$726.28
Miriam Dooleyjarrod.grimes@hotmail.comGarlandInactive$7.24
Myrtle Halvorsonlurline6@gmail.comPort PaulinefortActive$787.96
Miss Johanna Dickinson IVkrystel_erdman75@yahoo.comClementinasideInactive$295.33
Geoffrey Oberbrunnerkari_baumbach@hotmail.comNew DonnyInactive$108.33
Phil Lindgrenbette_marquardt91@yahoo.comShanelmouthInactive$401.70
Dr. Alan Buckridgekrystina.schamberger82@yahoo.comPort VickyInactive$863.64
Dr. Al Beahantomasa.orn-rau@hotmail.comEffertzboroInactive$435.27
Myrtle Harber IIulises.kessler99@hotmail.comNew JacynthetownInactive$864.63
Jeremy Langworthlucinda.williamson51@gmail.comKellytownInactive$946.95
Glenda Howelllisandro.tromp82@hotmail.comLowefurtInactive$1,094.25
Christie Schulistcasimir.nitzsche46@gmail.comSchoentownInactive$488.83
Dr. Douglas Whiteaugust25@yahoo.comRoytownInactive$724.98
Jacquelyn Haleypasquale_fahey69@yahoo.comChicoInactive$950.53
Jeannie Waltervada_emmerich28@yahoo.comNicholasmouthActive$567.12
Total$9,263.04

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.