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
INV001PendingPayPal$475.87
INV002PendingBank Transfer$757.19
INV003PendingCredit Card$442.74
INV004PaidPayPal$256.56
INV005UnpaidPayPal$637.17
INV006PendingBank Transfer$141.18
INV007PendingCredit Card$857.34
Total$3,568.05

Simple

Users

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

NameTitleEmailRoleActions
Jennifer WymanNational Usability Supervisorjennifer.wyman38@yahoo.comViewer
Marquise EmmerichFuture Research Technicianmarquise.emmerich85@hotmail.comViewer
Ruthie KozeyInternal Creative Producerruthie_kozey@yahoo.comMember
Kitty BayerInvestor Creative Engineerkitty_bayer51@gmail.comAdmin
Maria LefflerProduct Solutions Assistantmaria.leffler72@hotmail.comViewer
Patsy BartellDirect Configuration Technicianpatsy.bartell26@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Isaias Kohler

Chief Brand Coordinator

isaias_kohler@gmail.com

Admin

Augusta Torp

Legacy Group Assistant

augusta_torp94@gmail.com

Admin

Duane Hauck

Product Division Technician

duane_hauck61@gmail.com

Admin

Christopher Welch

Human Response Associate

christopher.welch52@yahoo.com

Member

Kaylie Wiegand-Witting

Legacy Assurance Producer

kaylie.wiegand-witting@hotmail.com

Admin

Corbin Kemmer

Lead Operations Consultant

corbin_kemmer45@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Domenica Kassulke

Direct Accounts Technician

domenica_kassulke@hotmail.com

Member

Vena Skiles

Regional Data Producer

vena_skiles@yahoo.com

Viewer

Angelita Larson

District Web Manager

angelita_larson@gmail.com

Admin

Elvie Hackett

Chief Creative Analyst

elvie.hackett@yahoo.com

Admin

Vladimir Marks

Corporate Directives Facilitator

vladimir.marks@yahoo.com

Member

Carlo Orn

Dynamic Creative Engineer

carlo_orn61@hotmail.com

Member

Juana Schoen

Future Program Engineer

juana_schoen24@yahoo.com

Viewer

Neal Hessel

Investor Creative Associate

neal_hessel98@yahoo.com

Member

Giles Weber

Internal Solutions Designer

giles.weber@hotmail.com

Member

Constance Mayer

Chief Implementation Producer

constance.mayer0@gmail.com

Member

Frank Nolan

Dynamic Security Supervisor

frank.nolan31@gmail.com

Viewer

Fannie Friesen

International Group Executive

fannie_friesen5@yahoo.com

Admin

Sabryna Herzog

Central Configuration Manager

sabryna_herzog@hotmail.com

Member

Hoyt Franecki

Global Interactions Facilitator

hoyt_franecki@gmail.com

Viewer

Murphy Cummings

Central Markets Orchestrator

murphy.cummings18@yahoo.com

Member

Alexandria Herman

Global Mobility Developer

alexandria.herman@hotmail.com

Viewer

Rosetta Ruecker-Torp

Investor Accounts Agent

rosetta_ruecker-torp@hotmail.com

Member

Aurelia Mills

Chief Markets Designer

aurelia_mills@yahoo.com

Viewer

Kathleen Farrell

Direct Branding Producer

kathleen.farrell96@hotmail.com

Admin

Geovanny Ward

Internal Group Administrator

geovanny.ward42@hotmail.com

Member

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
Peter Jacobsbradley_gutmann49@gmail.comWest SidneyInactive$526.07
Gwen Kihn-Walker MDalf_schaden@hotmail.comToyhavenInactive$970.25
Mildred Boganbobby46@yahoo.comBolingbrookActive$980.54
Kate Hansendemarco_jenkins@yahoo.comScrantonActive$232.67
Sheila O'Keefeletitia_harvey79@gmail.comParisiansteadActive$536.86
Total$3,246.39

Basic table

Table with Images

NameEmailLocationStatusBalance
Carole Zulauf
@keagan.heaney97
lavon_kassulke@gmail.comEscondidoActive$309.52
Whitney Hauck
@selina.dickens84
destany_zulauf@gmail.comChanellefurtActive$1,022.09
Ernest Jacobson
@cheyenne_cartwright-pfeffer
otha53@gmail.comAnnashireInactive$165.26
Deanna Schroeder
@karlie.hilpert
mustafa_mcclure81@yahoo.comWest DrakestadActive$280.88
Todd Okuneva
@roscoe_leuschke
marques.simonis61@yahoo.comWest OtisInactive$578.27

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ramona Runolfsson PhDchadrick35@gmail.comVivienhavenActive$638.50
Judith Halvorson PhDsigmund.hackett95@yahoo.comWarwickActive$1,034.48
Terrence Beahanbuddy24@gmail.comFort SilasviewInactive$834.77
Maryann Ryan Jr.dudley82@gmail.comPort MarshallActive$327.05
Ian Smithamaugusta.turner@yahoo.comFort MonserratcesterInactive$33.43
Total$2,868.23

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Harry Langoshcassandra.ankunding@hotmail.comNorbertoburghInactive$561.25
Michele Hoppe DVMabner84@hotmail.comTopekaInactive$492.75
Kristopher Jast-Kulasjacinthe66@hotmail.comHellerfurtInactive$1,089.74
Aaron Tromplazaro.terry@yahoo.comJayceboroActive$740.21
Samuel Wardveda.schoen@yahoo.comWest OleInactive$1,066.32
Total$3,950.27

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jan Rohangennaro_krajcik79@yahoo.comKuvalistonInactive$816.57
Alexander Schaeferchadd.hickle@hotmail.comNew TyshawnworthActive$307.57
Nina Harveybrisa_oconner3@gmail.comRooseveltstadActive$1,108.48
Jerry Labadie DVMkeith_upton63@hotmail.comFloviewActive$707.02
Jacquelyn Kilbackquinton.schamberger42@gmail.comKansas CityInactive$1,165.26
Total$4,104.90

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
Jackie Dibbertnelle_kub19@hotmail.comNew LillyInactive$265.05
Eunice Schuppemalvina99@yahoo.comFort JalenburyActive$338.23
Marilyn Hoegereve82@gmail.comPollichviewInactive$914.40
Carlton Beattycaleb80@yahoo.comPortervilleInactive$673.47
Jerald Fisherjamil.hoeger5@yahoo.comJavonteportInactive$127.74
Total$2,318.89

Table with row selection

Card Table

NameEmailLocationStatusBalance
Courtney Wisozkroxane_wisoky@yahoo.comPort RomafortActive$807.08
Dr. Terence Boganeula.crooks@gmail.comSavionfieldInactive$753.21
Dawn Hintz DVMweston.rolfson37@hotmail.comLueilwitzlandActive$261.85
Joann Howellchyna.mueller@gmail.comBotsfordsteadInactive$651.25
Kathy Kilbackllewellyn_hane@gmail.comCedar ParkInactive$990.72
Total$3,464.11

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
Mrs. Carmen Botsfordguido.hauck56@yahoo.comFriesenvilleInactive$732.58
Miss Miranda Prosacco-Schulistwilbert37@hotmail.comNew LeoneActive$146.38
Mrs. Camille Ziemetamia.satterfield67@yahoo.comPort EraActive$341.42
Bradford Steuberkylee43@gmail.comPort NelsonburyActive$500.23
Hilda Kertzmannlupe98@hotmail.comLake RonaldochesterActive$32.59
Seth Coletanner_lind-lakin14@gmail.comEast MaximusActive$1,088.23
Leslie Brakusgraham23@gmail.comWest SamActive$530.88
Dr. Sylvester Windleralena36@yahoo.comEast AydentonInactive$1,003.26
Elisa Prohaskaclaude_daugherty48@gmail.comWest DarylsideActive$750.34
Salvador Douglasgerald43@gmail.comNorth GuyInactive$939.90
Jonathon Marquardtwilford.corkery@hotmail.comCupertinoInactive$38.88
Janie Gerlacheleonore.blick65@yahoo.comEau ClaireInactive$425.31
Mark Welchbud64@yahoo.comFarmington HillsInactive$768.99
Mrs. Erin Hillsdale.bergstrom@yahoo.comJakubowskibergActive$994.31
Blanca Rempeltrace49@hotmail.comEulessActive$430.48
Total$8,723.78

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.