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$842.09
INV002UnpaidBank Transfer$975.90
INV003PendingCredit Card$366.10
INV004PendingCredit Card$673.86
INV005UnpaidCredit Card$801.69
INV006PendingCredit Card$922.11
INV007PendingCredit Card$130.25
Total$4,712.00

Simple

Users

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

NameTitleEmailRoleActions
Chase LefflerForward Markets Designerchase_leffler24@yahoo.comMember
Paul StehrChief Program Representativepaul.stehr@yahoo.comMember
Leone SchmidtInternational Data Technicianleone.schmidt98@gmail.comMember
Natalia ReingerForward Branding Facilitatornatalia.reinger21@hotmail.comViewer
Paige BeahanInternational Brand Administratorpaige_beahan25@gmail.comAdmin
Yvonne HeathcoteGlobal Infrastructure Associateyvonne.heathcote@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Johan Bartoletti

Central Creative Designer

johan.bartoletti@gmail.com

Member

Kira Ankunding

Product Research Director

kira_ankunding@gmail.com

Admin

Irwin Bosco

Internal Configuration Representative

irwin.bosco10@gmail.com

Viewer

Gideon Balistreri

National Integration Strategist

gideon_balistreri@yahoo.com

Member

Rowland Kiehn

Corporate Group Agent

rowland_kiehn92@gmail.com

Viewer

Yvette White

Global Directives Agent

yvette.white@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Chyna Parker

Forward Brand Coordinator

chyna.parker69@hotmail.com

Admin

Emerson Beer

Customer Security Executive

emerson.beer75@yahoo.com

Member

Jeanette Nader

Corporate Creative Representative

jeanette_nader@yahoo.com

Admin

Talon Zemlak

Customer Directives Agent

talon.zemlak90@hotmail.com

Admin

Sonia Powlowski

Senior Factors Coordinator

sonia_powlowski62@yahoo.com

Viewer

Jordan Sporer

Regional Brand Strategist

jordan_sporer26@yahoo.com

Admin

Nettie Halvorson

International Operations Manager

nettie.halvorson39@hotmail.com

Member

Keyshawn Hammes

Lead Tactics Consultant

keyshawn_hammes@hotmail.com

Member

Felipa Batz

Lead Accounts Orchestrator

felipa_batz36@yahoo.com

Admin

Akeem Padberg

Investor Metrics Strategist

akeem_padberg9@yahoo.com

Member

Jeanie Luettgen

Principal Communications Consultant

jeanie.luettgen63@gmail.com

Viewer

Karli Baumbach

Principal Paradigm Specialist

karli_baumbach80@yahoo.com

Member

Leola Fay

Future Accounts Assistant

leola_fay@gmail.com

Member

Kathlyn Stroman

Principal Tactics Officer

kathlyn.stroman@yahoo.com

Viewer

Crystel Gusikowski

International Operations Manager

crystel_gusikowski@hotmail.com

Viewer

Heath Hegmann

Direct Paradigm Director

heath.hegmann@gmail.com

Member

Andrew Gleason

Corporate Communications Consultant

andrew_gleason84@gmail.com

Viewer

Bernard Oberbrunner

Dynamic Research Designer

bernard_oberbrunner@gmail.com

Member

Curtis Schoen

Senior Markets Coordinator

curtis.schoen82@gmail.com

Viewer

Cameron Wisoky-Weimann

Dynamic Intranet Orchestrator

cameron_wisoky-weimann@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
Julio Franeckicoleman.jaskolski@gmail.comBuckridgevilleActive$429.55
Mr. Terrance Cummeratamarietta21@yahoo.comPort KeelysteadInactive$64.53
Cody Pourostianna.west14@yahoo.comSchimmelshireActive$921.29
Ronald Conroyvictoria.hettinger@yahoo.comBrownsvilleActive$788.07
Matthew Hintz Sr.leonie_thiel@hotmail.comCristbergInactive$658.65
Total$2,862.09

Basic table

Table with Images

NameEmailLocationStatusBalance
Lora Mosciski
@kira.hand5
lue_sipes99@yahoo.comPalm Beach GardensInactive$682.40
Malcolm Graham
@leif.davis
raheem.huels92@gmail.comMaryburyActive$427.35
Chelsea Morissette
@maureen60
werner_kessler49@gmail.comLonburyInactive$933.07
David Moen
@wilhelm42
earnest_ernser35@gmail.comElyriaActive$880.71
Matt Purdy
@sigmund63
dillan.rogahn@hotmail.comRoelburghActive$284.16

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Bobbie Cassin MDmarianna_gottlieb78@hotmail.comWest DesireeInactive$1,028.77
Bryant Bechtelarchasity89@gmail.comFort CasimirshireInactive$1,131.81
Marty Stammnannie83@gmail.comSpring HillActive$267.27
Lorena Dibberttelly55@yahoo.comSarahshireInactive$316.04
Gerard Botsford-Brakuselwyn.schuster@hotmail.comWarwickInactive$401.11
Total$3,145.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gwen Crookspascale91@hotmail.comEast KoleworthActive$279.53
Camille Langjulio.simonis96@yahoo.comEast NakiaInactive$512.43
Allison Kesslerjules_walter@gmail.comNorth RodrigofieldActive$994.18
Alfred Hammes Jr.elmo.koepp60@yahoo.comTheronboroughActive$178.20
Carol Kirlindeonte_hilpert3@hotmail.comCrooksboroughInactive$774.17
Total$2,738.51

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nancy Reichertlacey3@yahoo.comBaileebergActive$691.24
Dwight O'Haradamien0@yahoo.comNorth TrishachesterActive$506.95
Julie Strosinjesse_lueilwitz@hotmail.comMacon-Bibb CountyInactive$203.96
Eduardo Leannon Vdianna52@yahoo.comNew WendyInactive$596.95
Herbert Koelpinvictor_bartoletti-harris@gmail.comPort MerrittInactive$1,098.15
Total$3,097.25

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
Joshua Ernser Sr.ayla68@yahoo.comEast ArmaniInactive$588.50
Marilyn Handerick.schinner@hotmail.comWest KaydenInactive$282.46
Adrian Gottlieb-Pacochaeunice1@yahoo.comCarmelInactive$1,105.54
Carmen Schmelersonya_rippin@yahoo.comKellerInactive$168.10
Sean Stokesleanne44@gmail.comYuba CityInactive$1,057.22
Total$3,201.82

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jose Koelpinyoshiko.tremblay@gmail.comWest CyrilcesterActive$401.51
Victoria Nikolausflavio2@hotmail.comLake IvyActive$184.90
Dr. Brandy Hudsondawson18@yahoo.comSpring HillActive$1,120.87
Mrs. Priscilla Sauertheresa63@gmail.comSouth NicoletteActive$63.36
Jodi Reichertzackery.hickle@yahoo.comWest DannieActive$321.68
Total$2,092.32

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
Shannon Spencerjed.grady@yahoo.comPamelasideActive$773.25
Mark Raynorkari76@yahoo.comNorth ManuelActive$119.35
Forrest Danieladriel_williamson@hotmail.comPort HayleestadActive$729.04
Gina Ratkeyasmine_hayes@hotmail.comNorth SimoneboroughActive$667.34
Raymond Moen-Jacobsonalicia_connelly@yahoo.comLelachesterActive$967.57
Mr. Max Schimmel DDSkathryn.barrows30@gmail.comNorth RodrigolandActive$645.82
Melody Mayercamden_kessler48@yahoo.comFort AugustavilleActive$821.75
Gabriel Kirlingarfield20@gmail.comJenavilleInactive$879.67
Yvette O'Haradion16@yahoo.comJoanyburghActive$541.19
Norma Toyroxanne.legros@yahoo.comNew ChelsieActive$910.45
Emma Hoppeeduardo48@hotmail.comNorth FelipaInactive$785.77
Dr. Kelley McKenzieverdie_crist@hotmail.comNorth AdrielInactive$111.04
Mattie Torp-Beattypeyton71@gmail.comNorth ZoilalandInactive$441.14
Ramiro Herzogcleve.huels26@hotmail.comMerlcesterActive$347.64
Mr. Sidney Treutelwendell.volkman-yost@yahoo.comWest TysonInactive$65.36
Total$8,806.38

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.