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$731.44
INV002UnpaidBank Transfer$770.39
INV003UnpaidCredit Card$280.44
INV004PaidPayPal$392.85
INV005PendingPayPal$370.72
INV006UnpaidCredit Card$345.62
INV007PendingCredit Card$939.80
Total$3,831.26

Simple

Users

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

NameTitleEmailRoleActions
Lyda OlsonCustomer Assurance Assistantlyda_olson70@hotmail.comMember
Alexzander DickiFuture Communications Produceralexzander.dicki@gmail.comAdmin
Darrin AndersonCustomer Group Managerdarrin_anderson98@hotmail.comAdmin
Margarete JohnstonDistrict Assurance Coordinatormargarete.johnston84@gmail.comAdmin
Chanel RosenbaumGlobal Applications Liaisonchanel_rosenbaum@yahoo.comAdmin
Newton TreutelLead Response Designernewton_treutel@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Marjorie Cole

Central Configuration Manager

marjorie.cole2@gmail.com

Member

Alycia Bahringer

Investor Implementation Agent

alycia.bahringer74@hotmail.com

Member

Francesca Erdman

Central Quality Facilitator

francesca.erdman@yahoo.com

Admin

Hattie Kassulke

Human Branding Consultant

hattie_kassulke@hotmail.com

Member

Celine Grant

Legacy Implementation Liaison

celine.grant83@hotmail.com

Admin

Madelyn Bayer

Corporate Division Coordinator

madelyn.bayer78@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Dariana Champlin

Direct Security Liaison

dariana_champlin92@yahoo.com

Admin

Tremayne Oberbrunner

Global Identity Representative

tremayne_oberbrunner@gmail.com

Member

Krystal Lang

Forward Branding Manager

krystal.lang78@gmail.com

Member

Randi Boyle

Dynamic Data Analyst

randi_boyle@yahoo.com

Member

Albin Hettinger

District Intranet Strategist

albin_hettinger@yahoo.com

Admin

Adeline Greenfelder

National Creative Liaison

adeline_greenfelder7@yahoo.com

Viewer

Laron Schaefer

Corporate Operations Officer

laron.schaefer19@yahoo.com

Viewer

Wyman Langworth-Huel

Principal Operations Director

wyman_langworth-huel@yahoo.com

Member

Sid Reilly

Chief Metrics Architect

sid.reilly34@hotmail.com

Viewer

Berta Tillman

Product Marketing Associate

berta.tillman44@yahoo.com

Admin

Berneice Koch

Direct Markets Engineer

berneice_koch93@yahoo.com

Member

Edward Bechtelar

Global Usability Planner

edward.bechtelar@yahoo.com

Viewer

Jesus Larkin

Regional Applications Specialist

jesus_larkin@gmail.com

Member

Alicia Bernhard

Central Functionality Officer

alicia.bernhard@hotmail.com

Viewer

Yasmeen Balistreri

Internal Paradigm Assistant

yasmeen_balistreri@yahoo.com

Member

Isaias Bruen

Human Mobility Developer

isaias_bruen14@gmail.com

Member

Jayde Johnston

Global Functionality Technician

jayde.johnston@hotmail.com

Admin

Claudie O'Conner

Central Tactics Officer

claudie.oconner12@hotmail.com

Admin

Dusty Lubowitz

Principal Quality Consultant

dusty.lubowitz@yahoo.com

Member

Trinity Blanda

Lead Program Designer

trinity.blanda@yahoo.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
Gladys Baileyrashad95@gmail.comBrownsteadInactive$856.92
Ms. Guadalupe D'Amoremalcolm.kovacek@gmail.comLaguna NiguelInactive$174.70
Dr. Brendan Klocko IIIbuck.crona@hotmail.comPort KatarinaInactive$80.95
Otis Witting DVMlessie89@yahoo.comDameonfurtActive$112.90
Dianna Klockojamil5@yahoo.comNorth DarrenInactive$873.95
Total$2,099.42

Basic table

Table with Images

NameEmailLocationStatusBalance
Darnell Jaskolski
@katarina9
clyde.mohr@yahoo.comKautzerboroInactive$512.82
Ora Cormier
@wilmer_lueilwitz33
brennon_stanton@yahoo.comFeeneycesterActive$1,136.99
Jackie Wiegand
@fredy_conroy
elizabeth.krajcik11@yahoo.comDawnburyInactive$959.38
Andrew Price
@wyatt_sawayn
cyrus.schuster@yahoo.comPort IsactownActive$625.43
Joanne Conn
@silas53
diana_gleason@yahoo.comFort LorenzfieldActive$243.86

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Donnie Corwinantwon.wyman59@gmail.comLake EmiliestadActive$711.66
Dr. Allen Yostmarjorie13@yahoo.comElnoravilleInactive$518.57
Jacqueline Schneiderguy29@yahoo.comDeshawnlandInactive$715.05
Fannie Grahamamelie4@hotmail.comCortezstadActive$688.55
Al Robelbret_keebler@gmail.comMosciskiportActive$507.94
Total$3,141.77

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Erick Ortiz DVMdayton.olson@yahoo.comBeattyportActive$31.90
Margarita Fisherdakota_robel@gmail.comOnasideInactive$862.14
Mrs. Dorothy Jacobihelen_senger@gmail.comTracyActive$845.15
Rafael Zulaufjeffry.krajcik@yahoo.comNew AurelieInactive$603.29
Lois Stiedemann-Barrowsbethel_rogahn60@yahoo.comFort AbdielActive$833.35
Total$3,175.83

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Florence Strackealene.bradtke@hotmail.comPort GeovanyhavenActive$874.89
Terry Gusikowskialvah.wisozk@hotmail.comPort OkeyvilleActive$1,140.16
Justin Mayerlonzo.stanton30@hotmail.comJohnsonburghInactive$733.78
Angelina Wymancandace_mohr@gmail.comBloomingtonActive$810.06
Julio Strosinluigi.johnston@yahoo.comWest ZackaryboroughActive$908.78
Total$4,467.67

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
Gerard Krismagdalen.schroeder97@hotmail.comNikolasboroughActive$780.90
Terry Grant DDSgarry.osinski95@hotmail.comGoyetteworthInactive$422.30
Louise Prosaccoblake79@yahoo.comEast LedaInactive$1,168.29
Josefina Rippin-Hegmannkiara_kiehn92@hotmail.comPierreviewActive$1,092.49
Cornelius Quitzonlauriane64@yahoo.comSouth MarianeburyActive$443.70
Total$3,907.68

Table with row selection

Card Table

NameEmailLocationStatusBalance
Joe Reichelmya_roob67@gmail.comHaywardInactive$31.30
Mable Weimannhoyt_parisian-purdy30@yahoo.comGorczanyboroInactive$555.50
Maria Christiansenfelipa_koss@hotmail.comShreveportActive$1,081.05
Enrique Lemkekendall52@yahoo.comPort ReinholdtownActive$596.74
Laurence Heidenreich-Macejkovicstan.klocko94@yahoo.comLorenzastadInactive$36.82
Total$2,301.41

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
Meredith Satterfield Iyvonne.labadie@gmail.comWelchburghInactive$715.12
Jamie Schoentorey_treutel76@hotmail.comOttislandActive$73.21
Phyllis Leuschkejanae_schaden-connelly@gmail.comMadisonActive$438.29
Rolando Grantmichele24@yahoo.comEast JudeviewInactive$1,057.92
Jeannette Wunschaimee.mills16@gmail.comOntarioInactive$454.41
Leslie Huelsarchibald.ernser-mayer@yahoo.comWatersshireInactive$1,088.89
Christina Zboncakjessica.schuster@gmail.comAlecfurtActive$562.74
Pearl Schinner PhDmaci.blick@yahoo.comFort WainoInactive$132.57
Francis Grantreynold_damore@yahoo.comOttiliecesterActive$944.40
Miss Kathryn Turneremmanuel_king@gmail.comPort TannerhavenActive$596.81
Lester Stiedemanncatherine_mohr40@gmail.comSouth DonnieInactive$601.39
Karl Morissettewyatt.cormier@gmail.comNew HermanhavenActive$1,004.96
Bryant Hodkiewiczgeorgianna_heaney@gmail.comNorth MarinaInactive$531.42
Hope Kundejerry_stehr98@hotmail.comSouthfieldInactive$335.11
Vivian Sporerniko_koelpin@gmail.comJosianneworthActive$688.25
Total$9,225.49

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.