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
INV001PendingCredit Card$173.60
INV002PendingCredit Card$923.79
INV003PaidCredit Card$527.38
INV004PaidBank Transfer$757.56
INV005UnpaidCredit Card$608.08
INV006PaidBank Transfer$395.28
INV007PendingPayPal$385.54
Total$3,771.23

Simple

Users

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

NameTitleEmailRoleActions
Gwen MannSenior Directives Executivegwen.mann33@hotmail.comAdmin
Alf HaneRegional Accounts Specialistalf_hane13@gmail.comViewer
Joshuah ThielSenior Creative Liaisonjoshuah_thiel@gmail.comViewer
Rodrick RunolfssonForward Integration Supervisorrodrick_runolfsson@hotmail.comViewer
Lexi RiceFuture Tactics Producerlexi.rice@hotmail.comMember
Tania BoyleGlobal Solutions Plannertania_boyle@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Guillermo Hand

Human Creative Strategist

guillermo.hand@yahoo.com

Viewer

Emil Kuhlman

Lead Integration Planner

emil_kuhlman@yahoo.com

Admin

Ladarius Emmerich

Global Creative Administrator

ladarius.emmerich@gmail.com

Admin

Dianna Balistreri

Lead Solutions Orchestrator

dianna.balistreri65@hotmail.com

Viewer

Cale Morissette

Internal Accounts Planner

cale.morissette51@gmail.com

Viewer

Lambert Bosco

District Operations Planner

lambert_bosco@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Leanna Schinner

Dynamic Data Facilitator

leanna.schinner97@hotmail.com

Viewer

Christian Crooks

Customer Integration Consultant

christian.crooks@yahoo.com

Member

Cheyenne Wyman

Human Division Producer

cheyenne_wyman@yahoo.com

Member

Charlene Schamberger

District Web Architect

charlene.schamberger@hotmail.com

Viewer

Manuela Goodwin

National Web Specialist

manuela.goodwin19@gmail.com

Admin

Delphia Cummings

Lead Implementation Analyst

delphia.cummings16@gmail.com

Admin

Melyna Schumm

Dynamic Optimization Designer

melyna.schumm@hotmail.com

Member

Jannie Kuhn

Central Directives Consultant

jannie_kuhn97@hotmail.com

Member

Rhett Runolfsson

International Interactions Analyst

rhett.runolfsson@hotmail.com

Viewer

Josephine Hartmann

Global Communications Coordinator

josephine_hartmann@hotmail.com

Member

Alexzander Block-Goodwin

Regional Communications Technician

alexzander_block-goodwin39@gmail.com

Member

Jaquan Bartoletti

Direct Implementation Supervisor

jaquan.bartoletti53@gmail.com

Member

Andrew Howell

Corporate Metrics Strategist

andrew_howell@yahoo.com

Admin

Courtney Flatley

Investor Interactions Analyst

courtney.flatley@yahoo.com

Admin

Lenora Kilback

Future Branding Architect

lenora.kilback@hotmail.com

Admin

Rickey Gottlieb

Chief Optimization Analyst

rickey_gottlieb@hotmail.com

Member

Micaela Kuvalis

Corporate Group Manager

micaela_kuvalis@gmail.com

Admin

General Hessel

Chief Program Liaison

general.hessel@hotmail.com

Admin

Darren Stanton

Customer Implementation Architect

darren_stanton30@gmail.com

Admin

Madalyn Emard

Internal Accounts Administrator

madalyn.emard36@yahoo.com

Admin

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
Victor Murphyedmond52@gmail.comWildermantownInactive$942.36
Gilbert O'Connelljerald_jast63@yahoo.comClearwaterInactive$1,007.77
Wendell Krajcikwalton_steuber0@gmail.comLindhavenActive$171.82
Herman VonRuedendonavon_lesch@gmail.comHintzbergActive$391.03
Annie Johnslindsey_mayer@yahoo.comLake AuroretonActive$51.84
Total$2,564.82

Basic table

Table with Images

NameEmailLocationStatusBalance
Esther Denesik
@fritz14
ray10@hotmail.comRohnert ParkInactive$263.59
Allison Schoen
@ola17
virgie.parisian@hotmail.comWest JosephInactive$660.62
Marjorie Gusikowski
@sandy.bosco
jerrell_trantow@yahoo.comNew KelleyInactive$578.95
Faye Johns Jr.
@levi_kuhic
kristian18@yahoo.comFort KhalidInactive$178.23
Randal Beer
@devonte_huels71
kenna85@hotmail.comJuanaburyInactive$1.66

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Alfred Schmelermolly.morissette@hotmail.comWest JovannyInactive$243.57
Nancy Bergstromjarod.price@hotmail.comThorntonActive$275.48
Andres Romaguerajuanita_schuppe-yost@yahoo.comSouth DeionworthInactive$998.81
Fernando Adamsrupert.okon27@yahoo.comFort SashaInactive$260.37
Max Wymanderrick_glover@hotmail.comElk GroveActive$383.19
Total$2,161.42

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mrs. Kate Shieldsarely90@hotmail.comNorth RosettastadInactive$523.83
Hugo Daughertyadriana_white80@hotmail.comBlue SpringsActive$616.30
Mr. Scott Jacobsobie.bernier98@gmail.comEverettmouthInactive$1,111.57
Simon Dachrebekah_conroy@yahoo.comKshlerintownInactive$180.83
Dr. Max Treutelkasandra_hackett75@gmail.comAugustchesterActive$319.13
Total$2,751.66

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Johnnie Grant Vmaxine64@yahoo.comSouth TrentonchesterActive$98.11
Cameron Parisianstefanie.stamm@hotmail.comSchummportActive$591.88
Dr. Opal Emmerich-Runolfssonjavier_renner98@gmail.comMatildeburyActive$420.65
Lori DuBuquedelta10@yahoo.comIowa CityActive$360.43
Eunice McClurelily60@gmail.comNorth DelphineInactive$577.11
Total$2,048.18

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
Naomi Jaskolskisherman97@gmail.comTraceyviewActive$951.92
Kellie Halvorsonelvera_buckridge25@gmail.comPort RosalindafurtInactive$331.33
Ismael Kshlerinbrenden.huel@yahoo.comNorth FlavieInactive$871.63
Blanche Littleandreanne83@hotmail.comFort KarineboroughInactive$276.05
Bertha Bogisichantonia73@yahoo.comNorth CicerovilleInactive$438.02
Total$2,868.95

Table with row selection

Card Table

NameEmailLocationStatusBalance
Santos Metzlela13@gmail.comEast TarabergActive$865.79
Freda Predovic Imarisa65@hotmail.comWolftonInactive$63.62
Marcella McLaughlinrhea.borer@gmail.comWest IleneInactive$982.15
Mr. Jerry Ziemanntiffany68@gmail.comNorth JaysonchesterInactive$887.66
Mona Stoltenbergmegane.stiedemann-anderson@yahoo.comHughfieldInactive$539.73
Total$3,338.95

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
Tyler Deckowryley_spinka52@gmail.comTuckahoeInactive$1,076.98
Mr. Wilson Langosh MDlola.kemmer@hotmail.comEstebanshireActive$213.37
Jennifer Colezelma79@gmail.comAnselportActive$145.07
Gilbert Bechtelarlamont_langosh92@gmail.comGrand RapidsActive$1,190.83
Albert Stiedemannisac.stracke31@hotmail.comKerlukefurtActive$168.33
Marcella Sengerarlie41@yahoo.comNorth ElvisActive$1,015.70
Kristy Labadie-Bechtelar IIImara.parker17@yahoo.comFort EstelInactive$218.33
Natalie O'Connellarely_mohr42@yahoo.comThousand OaksActive$773.31
Elbert Runolfsdottirguillermo25@yahoo.comFort LaurettaInactive$181.84
Carroll Leschkeyshawn_wunsch@gmail.comNew AlbinInactive$262.38
Dr. Ernest Hayesemmie.schimmel@hotmail.comGoodyearActive$673.77
Noah Morarshakira.heaney@yahoo.comDaresteadActive$579.28
Sherri Streich DVMova_gutkowski94@yahoo.comLaguna NiguelActive$891.29
Jeff Sipesmartin51@yahoo.comPort StephensideInactive$1,190.05
Jeanne Klocko Ishayne_reynolds@hotmail.comLangworthportActive$42.77
Total$8,623.30

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.