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
INV001PaidCredit Card$305.74
INV002PaidPayPal$651.92
INV003PendingBank Transfer$645.36
INV004PaidPayPal$550.85
INV005PendingPayPal$776.64
INV006UnpaidCredit Card$274.54
INV007UnpaidCredit Card$109.89
Total$3,314.94

Simple

Users

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

NameTitleEmailRoleActions
Alice TrompRegional Marketing Liaisonalice.tromp19@hotmail.comAdmin
Demarco WardCorporate Assurance Facilitatordemarco_ward@yahoo.comMember
Kenyatta BauchCorporate Response Coordinatorkenyatta.bauch20@yahoo.comViewer
Sidney ToyChief Optimization Agentsidney_toy8@hotmail.comMember
Kim DareInternal Integration Directorkim.dare@gmail.comViewer
Michael SchulistSenior Factors Agentmichael.schulist14@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Margaretta Wisoky

Human Usability Producer

margaretta.wisoky@gmail.com

Member

Vicki Pollich

Customer Program Associate

vicki.pollich@yahoo.com

Viewer

Patsy Senger

International Assurance Strategist

patsy.senger37@yahoo.com

Admin

Billie O'Conner

Central Branding Specialist

billie_oconner50@yahoo.com

Viewer

Tyrell Flatley

Direct Applications Technician

tyrell_flatley52@yahoo.com

Viewer

Forrest Bednar

Investor Accountability Executive

forrest_bednar39@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Tommie Willms

Investor Factors Executive

tommie.willms@gmail.com

Viewer

Brennon Gutkowski-Murray

Customer Accountability Manager

brennon.gutkowski-murray86@hotmail.com

Admin

Aric Gerlach

Chief Directives Agent

aric.gerlach17@yahoo.com

Viewer

Amari Dooley

Internal Division Consultant

amari_dooley@yahoo.com

Viewer

Heidi Stracke

Global Metrics Consultant

heidi.stracke62@gmail.com

Viewer

Dallas Gleichner

Human Mobility Representative

dallas.gleichner@gmail.com

Viewer

Deanna Emard

Direct Tactics Designer

deanna_emard@gmail.com

Member

Arno Tremblay-Hegmann

Corporate Branding Coordinator

arno_tremblay-hegmann38@yahoo.com

Admin

Gabriel Bartell

Product Data Executive

gabriel.bartell50@hotmail.com

Viewer

Leslie Bednar

Customer Solutions Specialist

leslie_bednar72@hotmail.com

Admin

Kristi Pacocha

Regional Intranet Executive

kristi.pacocha@yahoo.com

Admin

Mia Runte

Product Configuration Director

mia.runte20@gmail.com

Admin

Samir Hodkiewicz

Regional Integration Coordinator

samir_hodkiewicz@yahoo.com

Viewer

Jalen Kulas

Customer Group Developer

jalen_kulas@hotmail.com

Member

Gerry Purdy

Dynamic Configuration Strategist

gerry_purdy@yahoo.com

Member

Kenna Torp

Human Interactions Assistant

kenna_torp23@hotmail.com

Member

Dean Grant

Customer Security Engineer

dean.grant@yahoo.com

Member

Dolores Mayer

Chief Web Officer

dolores_mayer@hotmail.com

Member

Genesis Barrows

Product Identity Director

genesis.barrows68@gmail.com

Member

Ramona Hand

Dynamic Usability Coordinator

ramona.hand79@yahoo.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
Miss Lupe O'Reillyrickey59@hotmail.comFeeneyburghActive$361.38
Rose Ondrickaowen.leuschke@hotmail.comDeshawnsteadActive$936.65
Seth Turcotte MDdavid_gusikowski35@hotmail.comNorth GerardoInactive$144.05
Mrs. Nicholas Murray-Vonbrandi38@hotmail.comTurlockInactive$1,055.12
Sara Koeppdanny_erdman99@hotmail.comEast CristianviewActive$965.92
Total$3,463.12

Basic table

Table with Images

NameEmailLocationStatusBalance
Arne Balistreri
@vernon.lockman
dorothy87@hotmail.comStammsteadInactive$105.46
Vernon Feest
@dustin_schmeler
lavonne_grady@gmail.comDunwoodyInactive$388.71
Fredrick Leuschke
@francisco.collier32
lon75@hotmail.comParkerActive$846.18
Trudie Toy
@roxanne.trantow13
louis.nikolaus-crooks@yahoo.comDavisworthActive$901.92
Walter Goodwin
@guillermo_waelchi17
mae.ward39@hotmail.comHomesteadActive$1,198.32

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Oral Schulistelmore.mcclure99@gmail.comMcLeanInactive$820.88
Alice Kirlin-Gusikowskiorlando_russel@gmail.comKaialandInactive$619.68
Leo Johnsanais_kiehn@hotmail.comApple ValleyInactive$590.02
Phil Harveydimitri_roberts@gmail.comPort LesleyfurtActive$230.89
Stacy Farrell-O'Kon Vjason63@hotmail.comEast UlicesvilleInactive$177.53
Total$2,439.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Judge Quitzoncarey_lockman@gmail.comFort AugustustownInactive$248.96
Cara Gibsonkarine44@gmail.comEast AlcesterActive$1,035.30
Candice Uptongrayson.jaskolski64@gmail.comFort MarcoInactive$1,019.41
Catharine Reillyismael.volkman32@hotmail.comNew StaceychesterActive$604.51
Sheryl Runolfsdottir Sr.angelo_konopelski40@gmail.comLawrenceshireActive$1,022.48
Total$3,930.66

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jennyfer Lesch DDStracy_zieme92@gmail.comHuelmouthInactive$45.08
Domingo Harriskody_hoppe@gmail.comPasadenaInactive$656.29
Mrs. Ceasar Friesen-Abbott DVMwoodrow82@yahoo.comMarksfortActive$359.42
Daryl Stantonnatalie65@gmail.comNorth ChristybergActive$462.33
Rose Millerviolet.reilly6@gmail.comHonoluluInactive$1,029.99
Total$2,553.11

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
Lorenzo Heathcotejennifer49@gmail.comNorth BrisaworthInactive$13.27
Miss Harmony Kertzmannbethany_murazik@yahoo.comLake MableburyInactive$992.70
Natasha Murraygerardo_klocko33@hotmail.comWest WebsterburyActive$1,047.69
Nat Nienowskyla54@yahoo.comSalemInactive$557.19
Mr. Kyler Lesch Sr.rodger62@hotmail.comEast HalieviewActive$1,079.28
Total$3,690.13

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cecilia Murray PhDahmad54@gmail.comBaltimoreInactive$1,190.91
Leon Fritsch PhDluther_jones@gmail.comTallahasseeInactive$514.07
Edgardo Wardanne.orn@yahoo.comNoviActive$1,118.56
Melvin Donnelly IIesta.turcotte@gmail.comMaxstadInactive$710.40
Tabitha Boganmarilou_leffler83@gmail.comTopekaInactive$642.50
Total$4,176.44

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
Miss Julia Johnsahmed.krajcik@gmail.comLake AmanimouthInactive$540.53
Paolo Watsicaorlando.fisher@gmail.comMohrvilleActive$112.47
Darrion Cartwrightjaron73@yahoo.comFort AyanatownInactive$748.32
Irving Purdyroy.torphy9@yahoo.comNorth DeshaunInactive$32.82
Joe Christiansentravis_schaefer77@hotmail.comTillmanfieldInactive$936.34
Ms. Deion Larsonbessie.paucek@yahoo.comMarielalandActive$91.00
Anya Kertzmanntimmy_feest7@gmail.comNorth JoeyInactive$495.10
Lynette Hettingerdorothy14@yahoo.comBayerworthActive$51.16
Lela O'Kon IIaleen_anderson23@hotmail.comFond du LacActive$686.94
Stewart Runteshaniya16@gmail.comSchneiderstadInactive$812.26
Preston Armstrongdianna.mills75@hotmail.comNorth RamiroInactive$328.90
Pedro Markskatie.nitzsche15@yahoo.comSouth ChloeActive$896.55
Craig Bruenroy96@hotmail.comMissouri CityActive$593.28
Kurt Yundthassie_hudson24@yahoo.comNew SiennalandInactive$455.23
Kelvin Paucek IIIsteve67@yahoo.comNorth ZoieboroughInactive$507.69
Total$7,288.59

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.