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$608.89
INV002UnpaidBank Transfer$955.32
INV003UnpaidBank Transfer$658.20
INV004UnpaidCredit Card$402.68
INV005UnpaidBank Transfer$604.14
INV006PendingCredit Card$774.05
INV007UnpaidPayPal$682.23
Total$4,685.51

Simple

Users

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

NameTitleEmailRoleActions
Clarissa BrekkeCustomer Usability Managerclarissa.brekke69@hotmail.comViewer
Price HilpertCentral Functionality Architectprice.hilpert45@hotmail.comViewer
Hayley DeckowDirect Usability Strategisthayley_deckow49@yahoo.comMember
Schuyler HilllNational Quality Producerschuyler.hilll97@yahoo.comViewer
Wilbur HoweFuture Branding Analystwilbur.howe@yahoo.comMember
Brandyn JacobsGlobal Optimization Supervisorbrandyn_jacobs96@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Miguel Towne

Forward Data Assistant

miguel_towne45@yahoo.com

Admin

Kristofer Rippin

Lead Optimization Technician

kristofer_rippin@hotmail.com

Viewer

Kallie Turcotte

Investor Factors Engineer

kallie.turcotte81@gmail.com

Member

Merle Hills

Internal Solutions Producer

merle.hills10@yahoo.com

Viewer

Laura Collier

Dynamic Creative Officer

laura_collier38@gmail.com

Viewer

Vickie Ankunding

National Metrics Associate

vickie.ankunding31@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Luz Miller

Senior Directives Specialist

luz_miller6@yahoo.com

Viewer

Cory Conroy

Regional Infrastructure Representative

cory.conroy@yahoo.com

Viewer

Julia Shanahan

District Infrastructure Agent

julia.shanahan@yahoo.com

Admin

Lorena Schowalter

Global Solutions Agent

lorena.schowalter@yahoo.com

Admin

Gabriel Schinner

Global Interactions Specialist

gabriel_schinner94@yahoo.com

Admin

Santa Dibbert

Internal Identity Executive

santa_dibbert@hotmail.com

Member

Sam Treutel

International Accounts Representative

sam.treutel31@gmail.com

Viewer

Lacey Huel

Customer Factors Technician

lacey_huel16@hotmail.com

Member

Floyd Collier

Chief Metrics Representative

floyd_collier1@yahoo.com

Member

Travis Jast

International Tactics Agent

travis.jast77@yahoo.com

Admin

Kailyn Predovic

Direct Web Director

kailyn_predovic77@hotmail.com

Admin

Rosella Rogahn

Corporate Branding Developer

rosella_rogahn@yahoo.com

Member

Lance Stracke

District Web Director

lance.stracke@yahoo.com

Admin

Kaylah Morar

International Directives Assistant

kaylah.morar@gmail.com

Member

Luther Moore

Regional Division Facilitator

luther.moore72@gmail.com

Member

Hudson Sawayn

Human Web Architect

hudson_sawayn34@yahoo.com

Viewer

Walton Batz

Central Program Officer

walton.batz6@gmail.com

Member

Shanel Carroll

Customer Branding Director

shanel.carroll16@yahoo.com

Member

Travis Price-Lehner

Dynamic Intranet Orchestrator

travis.price-lehner82@yahoo.com

Member

Etha Lindgren

Product Security Architect

etha_lindgren@hotmail.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
Betsy Beckershanny49@gmail.comWest KennethtonInactive$252.91
Jonathon Stiedemannlaurel65@gmail.comNorth TerrenceActive$692.47
Mekhi Kovacek-Lednerjulius_davis67@hotmail.comO'ReillyburghInactive$838.00
Brionna Jacobijosephine_kling43@gmail.comPort RosemariesideActive$862.06
Greyson Ebertclara.feil71@yahoo.comFort RolandshireInactive$1,035.10
Total$3,680.54

Basic table

Table with Images

NameEmailLocationStatusBalance
Miss Ruby Kozey
@jamarcus.trantow10
pablo_renner@yahoo.comFort CedricActive$566.99
Myrtis West
@james_heidenreich-hoeger54
donny_yost@hotmail.comHauckbergActive$110.83
Patricia Reilly I
@augusta.donnelly85
mara24@gmail.comSouth AltoncesterActive$577.24
Fay Stark-Thiel
@keith30
alayna_stehr@hotmail.comWest MollyActive$334.86
Doug Bartell IV
@georgia58
gregoria_harvey68@hotmail.comMelindalandActive$807.86

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Korey Manngeneva.kreiger15@hotmail.comNorth GabrielInactive$1,143.84
Muriel Walkernellie50@yahoo.comOrtizsteadInactive$555.30
Wesley Langlora87@yahoo.comBrekkecesterInactive$1,150.77
Lacy Connelly-Hettingerjeannie.kozey@hotmail.comLake RogelioActive$118.34
Libby Krisessie61@gmail.comPort FrancesActive$603.11
Total$3,571.36

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cheryl Dickens IIIastrid.gleichner31@gmail.comLake RickActive$639.27
Jett Kertzmannrosemary82@gmail.comGreenfelderburyActive$291.19
Chaz Gloverjoanne.grimes21@hotmail.comWest PreciousActive$1,172.24
Ms. Elvira Rolfsonerna.hilll@gmail.comVincenthavenActive$211.04
Geoffrey Wisozkwalton41@yahoo.comDavieInactive$392.58
Total$2,706.32

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Melvina Ziemannkristine_blanda5@yahoo.comNew PeteActive$119.33
Roy Aueraudrey_jacobson@yahoo.comEast VirgieActive$185.36
Molly Grimesruben20@gmail.comSouth SheilabergActive$97.58
Dr. Leda Hillsedward_runte@hotmail.comFort OwensteadInactive$718.45
Guillermo Halvorsonbernadette_altenwerth@hotmail.comLake RenehavenInactive$631.19
Total$1,751.91

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
Taylor Koelpinsilas70@gmail.comEast MichaelaInactive$57.42
Lukas McGlynndee.thiel85@hotmail.comGulgowskiportInactive$195.89
Alonzo Nikolaus IIIerick7@yahoo.comEast JuliechesterInactive$148.83
Fernando Hauckterry.kunde@yahoo.comNorth PhilActive$345.19
Lola Haag IIIjamison_effertz61@gmail.comLake AliceInactive$159.87
Total$907.20

Table with row selection

Card Table

NameEmailLocationStatusBalance
Wava Bechtelarcristal69@yahoo.comEast AlexandraburghInactive$1,187.03
Myrtis Nikolaus-Fadelnicole.pagac23@hotmail.comDeKalbActive$503.96
Robin Yundtsimon63@yahoo.comMelisaburghInactive$950.31
Jerry DuBuquemiriam_pfeffer@hotmail.comFindlayInactive$940.60
Ms. Emma Beercaroline_will@yahoo.comDustymouthInactive$406.36
Total$3,988.26

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
Rosalie Wolfcristian.prosacco54@gmail.comClintonfieldInactive$801.90
Sandra Hegmann DVMdennis.glover64@hotmail.comHarrisshireInactive$328.54
Eula Hickleperry.feest17@gmail.comNorth AlActive$545.99
Grant Howelltyrique.morar3@hotmail.comAlyshasteadActive$256.81
Darnell Fisherannie.labadie7@gmail.comSouth CamronActive$639.45
Mr. David Kovaceklouie20@gmail.comSouth UriahstadActive$858.10
Carlton Pagacsally37@gmail.comMeridianActive$210.74
Makenna Wilkinsonalexis44@gmail.comLehiInactive$1,130.13
Grayson Schusteralbert.swift46@yahoo.comSouth WhitneyInactive$24.93
Allen Cartwrighttelly41@gmail.comGoldnerboroActive$521.97
Haleigh Padbergjarvis.roberts75@hotmail.comOciefieldActive$78.51
Presley Schmeler DDSsamantha73@gmail.comQuincyActive$727.50
Kellen Sanfordtomas_kuhic@yahoo.comWest MarcusInactive$41.82
Miss Cathy Hilpertpatti.herman@hotmail.comDowners GroveInactive$781.30
Dannie Beerpatrick36@gmail.comAreciboActive$1,057.31
Total$8,005.00

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.