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$216.79
INV002PendingPayPal$959.33
INV003PaidCredit Card$408.16
INV004PendingCredit Card$144.00
INV005UnpaidPayPal$661.84
INV006PaidBank Transfer$455.05
INV007PaidBank Transfer$683.31
Total$3,528.48

Simple

Users

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

NameTitleEmailRoleActions
Alexis JohnsFuture Paradigm Administratoralexis.johns9@gmail.comViewer
Cristina CroninLead Data Liaisoncristina_cronin@hotmail.comAdmin
Hannah NienowProduct Assurance Liaisonhannah.nienow86@hotmail.comAdmin
Frida LoweSenior Division Agentfrida_lowe@gmail.comAdmin
Adah KlockoGlobal Interactions Engineeradah.klocko53@yahoo.comViewer
Everett O'ConnerNational Interactions Developereverett_oconner@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Jacquelyn Jones

Product Response Director

jacquelyn.jones@yahoo.com

Admin

Derek Macejkovic

Direct Mobility Officer

derek.macejkovic@yahoo.com

Viewer

Craig Cremin

Dynamic Security Designer

craig_cremin@yahoo.com

Member

Malcolm Luettgen

Lead Tactics Technician

malcolm_luettgen61@hotmail.com

Member

Ruthie Hettinger

Regional Factors Analyst

ruthie_hettinger80@gmail.com

Viewer

Pam Lesch

Corporate Implementation Associate

pam_lesch45@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Jimmy Schuppe

Lead Division Analyst

jimmy_schuppe80@yahoo.com

Member

Phyllis McLaughlin

Senior Web Administrator

phyllis_mclaughlin@gmail.com

Member

Lisette Kassulke

Global Web Representative

lisette_kassulke38@gmail.com

Admin

Maude Abbott

Principal Functionality Engineer

maude.abbott@hotmail.com

Viewer

Bella Metz

District Tactics Assistant

bella_metz19@yahoo.com

Viewer

Vanessa Koss

Investor Implementation Agent

vanessa.koss@gmail.com

Member

Orlando Dach

National Implementation Strategist

orlando.dach12@hotmail.com

Viewer

Daisy Purdy

National Intranet Associate

daisy_purdy@yahoo.com

Viewer

Otis Russel

Direct Web Coordinator

otis.russel@hotmail.com

Member

Joanne Satterfield

Investor Solutions Director

joanne.satterfield@hotmail.com

Viewer

Luther Brown

Forward Assurance Administrator

luther_brown@yahoo.com

Member

Edmund O'Keefe

Legacy Infrastructure Director

edmund.okeefe77@gmail.com

Admin

Taylor Rempel

Central Functionality Strategist

taylor.rempel@hotmail.com

Viewer

Zack Stoltenberg

Senior Division Assistant

zack.stoltenberg22@yahoo.com

Admin

Teri Heller

Senior Accountability Architect

teri.heller@hotmail.com

Admin

Winfield Denesik

Future Identity Engineer

winfield.denesik25@hotmail.com

Member

Liana Stamm

Human Paradigm Architect

liana.stamm91@hotmail.com

Member

Kristine Lesch

Product Paradigm Strategist

kristine_lesch@gmail.com

Member

Sheila Bednar

Principal Response Assistant

sheila.bednar@hotmail.com

Admin

Lily Kovacek

Human Functionality Agent

lily.kovacek@gmail.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
Dr. Louis Runtedorthy_gutkowski51@gmail.comCrooksfieldActive$648.35
Princess DuBuquezoey_carter@hotmail.comSouth JamieInactive$1,189.22
Jesse Dickensmartha_frami@gmail.comPort EnricofortActive$89.61
Gwendolyn Dickenslisa.casper@hotmail.comCutler BayActive$783.94
Patricia Lednermaia82@yahoo.comEast LouInactive$33.07
Total$2,744.19

Basic table

Table with Images

NameEmailLocationStatusBalance
Calvin Wyman IV
@xander_larkin
dean_borer25@hotmail.comNew IsobelInactive$98.84
Laron Pfannerstill
@verna_bailey87
lula_bogisich@hotmail.comLake DougboroughInactive$567.77
Janet Torphy
@mason_price4
hiram1@gmail.comWest EmilevilleInactive$79.20
Randy Quigley
@orville18
lamar61@gmail.comLubowitzbergActive$190.37
Bill MacGyver
@bo.wiegand72
theodore6@hotmail.comSouth MacieInactive$1,049.38

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Brent Lakinjessyca52@gmail.comNorth CadentonInactive$124.76
Virgil Russelcali.crist@gmail.comNorth ShanyInactive$919.12
Nora Smith IIIrick.witting47@yahoo.comMarcelsteadActive$731.63
Antwan Bernierroosevelt8@gmail.comFort ZanderActive$632.49
Darrell Gutkowskiterence43@yahoo.comCarmichaelInactive$568.32
Total$2,976.32

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sandra Bartelltricia9@gmail.comDibberttonActive$296.42
Preston Abshirebilly.waters@yahoo.comFort AllenActive$66.34
Bud Schroedermarcus_gutmann31@gmail.comBentonvilleInactive$618.92
Abel Wizaolin_labadie57@gmail.comEast KarlportActive$462.69
Sallie Rippincristina86@yahoo.comNorth BetsyActive$656.44
Total$2,100.81

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Patsy Johnsonneoma_turcotte@yahoo.comPort JuddActive$543.81
River Labadiebethany70@gmail.comSouth CoreneActive$902.40
Edna Kirlingarnett.mccullough72@yahoo.comTauntonActive$268.51
Miss Trevor Johnsonerma48@hotmail.comTaylorsvilleActive$845.84
Gustavo Rueckerphilip_hilll@hotmail.comSacramentoActive$458.99
Total$3,019.55

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
Ms. Rupert Purdymadalyn.skiles@yahoo.comLake DallasActive$1,182.53
Essie Barton DVMquinn88@gmail.comEast AniyahhavenActive$860.21
Eldred Gottliebelsa.hackett@hotmail.comLangoshbergInactive$588.22
Millie Littlebrigitte37@gmail.comNew MyrtisbergInactive$852.13
Dr. Evie Conn IIessie.bernhard5@hotmail.comLake AdrainInactive$865.80
Total$4,348.89

Table with row selection

Card Table

NameEmailLocationStatusBalance
Tommy Beerthomas.schumm@hotmail.comFletcherchesterInactive$1,141.39
Opal Swiftkole11@gmail.comNew CharleyActive$260.21
Ms. Mandy Haagkellen_willms93@hotmail.comCarterfieldInactive$340.07
Shirley Murrayjessie.rath98@hotmail.comEddiesteadInactive$575.21
Jackie Mante-McKenzieolga_towne6@gmail.comNorth NakiabergInactive$267.52
Total$2,584.40

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
Jay Bahringerleonardo.hansen56@gmail.comNew ElsatownActive$546.57
Ivan Rohanlynne96@hotmail.comPotomacInactive$745.91
Wilbert Prosaccobarbara88@hotmail.comGuaynaboInactive$894.48
Jane Brakusmable1@hotmail.comPort MarisastadInactive$1,169.74
Coleman Schusterclaude.green@hotmail.comWest KathlynworthActive$521.76
Johnnie Connmamie25@hotmail.comMesquiteInactive$222.78
Jacynthe Goodwinkristopher32@yahoo.comShaniaboroInactive$315.65
Shelley Nader MDeldora14@yahoo.comStromanvilleInactive$239.58
Inez Torplevi3@hotmail.comHeidilandActive$708.07
Rosemarie Bergesammy_greenfelder@gmail.comPort GretchensteadInactive$824.23
Mae Kassulkeansel.ullrich45@hotmail.comKodymouthActive$895.37
Michael Ziemannbruce.steuber42@yahoo.comHowesteadInactive$229.20
Christopher Hyatterma21@gmail.comWest EmiliaboroActive$77.37
Dr. Aaron Cummingsbeulah53@yahoo.comSouth MerleActive$540.62
Salvador Gislasonjody.mann5@gmail.comLake GriffinInactive$277.18
Total$8,208.51

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.