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
INV001UnpaidPayPal$888.39
INV002PendingPayPal$404.71
INV003PaidBank Transfer$908.57
INV004UnpaidCredit Card$194.24
INV005PendingPayPal$112.30
INV006PaidCredit Card$203.92
INV007UnpaidBank Transfer$103.79
Total$2,815.92

Simple

Users

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

NameTitleEmailRoleActions
Lenna LittleLegacy Accounts Strategistlenna.little79@yahoo.comMember
Earlene CruickshankForward Metrics Coordinatorearlene_cruickshank27@hotmail.comViewer
Bradly FlatleyCentral Intranet Administratorbradly_flatley@yahoo.comViewer
Madison BinsRegional Assurance Administratormadison.bins@hotmail.comViewer
Zoey ZulaufGlobal Quality Assistantzoey.zulauf@hotmail.comAdmin
Theron HesselGlobal Program Associatetheron.hessel@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Meta Batz

District Operations Administrator

meta.batz61@gmail.com

Admin

Armani McClure

National Paradigm Associate

armani.mcclure@gmail.com

Viewer

Buford Thiel

Legacy Metrics Producer

buford.thiel@gmail.com

Admin

Elinor Beatty

Dynamic Brand Strategist

elinor.beatty@yahoo.com

Member

Evert Boehm

National Interactions Analyst

evert_boehm@hotmail.com

Viewer

Xzavier Ankunding

Investor Usability Orchestrator

xzavier.ankunding@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Jefferey Hamill

Regional Tactics Administrator

jefferey_hamill49@yahoo.com

Viewer

Deondre Hettinger

Product Implementation Executive

deondre.hettinger@yahoo.com

Admin

Aimee Kub

Forward Brand Analyst

aimee.kub85@hotmail.com

Member

Reta Leannon

District Usability Agent

reta_leannon@hotmail.com

Admin

Ava Vandervort

Future Brand Developer

ava.vandervort@yahoo.com

Admin

Cielo Friesen

Global Branding Liaison

cielo.friesen@hotmail.com

Member

Thora Connelly

International Quality Representative

thora.connelly@hotmail.com

Member

Rosalinda Tillman

Senior Branding Administrator

rosalinda_tillman70@gmail.com

Viewer

Gene Purdy

Lead Response Facilitator

gene.purdy@gmail.com

Member

Breanna Carroll-Muller

Forward Quality Liaison

breanna_carroll-muller@yahoo.com

Admin

Hans Kirlin

Forward Metrics Liaison

hans_kirlin45@gmail.com

Viewer

Lemuel Anderson

Corporate Paradigm Officer

lemuel.anderson3@gmail.com

Admin

Demarco O'Keefe

Internal Web Strategist

demarco.okeefe@yahoo.com

Admin

Jazlyn Orn

District Implementation Specialist

jazlyn_orn76@gmail.com

Member

Jolie Emard

Product Directives Analyst

jolie.emard@yahoo.com

Admin

Loyal Torp

Customer Accounts Agent

loyal.torp3@hotmail.com

Member

Johnny Purdy

Internal Assurance Producer

johnny.purdy47@gmail.com

Member

Shanny Anderson

International Web Director

shanny.anderson@yahoo.com

Admin

Cary Volkman

Direct Directives Manager

cary.volkman50@yahoo.com

Member

Vaughn Walter

Future Accounts Strategist

vaughn.walter42@gmail.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
Dave Goldnerabelardo_roob61@gmail.comWest LupestadInactive$196.17
Hubert Simoniserling25@yahoo.comCuyahoga FallsActive$14.89
Mr. Lance Cronin-Swift MDignatius.cremin-schmeler@yahoo.comMorissettefieldInactive$399.39
Ricardo Loweagnes79@hotmail.comNew YvettesteadActive$895.94
Sheila Considineelwin_ullrich@yahoo.comAndrecesterInactive$661.93
Total$2,168.32

Basic table

Table with Images

NameEmailLocationStatusBalance
Roman Bosco
@fred56
lea90@gmail.comNorth JulianInactive$1,181.63
Sonja Kuhic
@gust_langworth
kip21@yahoo.comNitzscheshireInactive$746.86
Sadie West
@lukas_sporer75
adolfo_crona@gmail.comWest LeratonInactive$899.23
Ms. Janie Moen
@evans.aufderhar44
micaela81@gmail.comSouth MadysonActive$173.72
Eddie Lakin
@icie14
gerardo.klein66@hotmail.comCarmelamouthActive$649.83

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Tiffany Kuhnrico.veum37@hotmail.comSouth TrecesterActive$707.97
Jodi Hartmannsadye.schumm@hotmail.comFort BabyshireInactive$699.65
Jessie Streichbridie.batz@gmail.comHemetActive$476.55
Ed Kundeolaf.tillman89@yahoo.comCarolynportInactive$632.66
Molly Boehm-Vandervortwallace75@hotmail.comNew BerthahavenActive$311.17
Total$2,828.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ken Reynoldsodessa32@yahoo.comHilllcesterActive$1,064.55
Peter VonRuedenmacy_boyer@gmail.comWest KarianneActive$289.99
Tracy Abbottabelardo_kozey44@hotmail.comWunschfortInactive$59.35
Josefina Vandervortwellington51@hotmail.comLehnerbergActive$1,011.13
Evelyn Kirlinyasmeen95@hotmail.comProsaccoportActive$392.83
Total$2,817.85

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Delbert Prosaccopedro_cartwright8@yahoo.comPort HazelInactive$1,076.52
Miriam Larkinnorbert.nitzsche@yahoo.comNewtonInactive$865.58
Lynda Krajcikmonroe58@hotmail.comSt. JosephActive$934.53
Jeremiah Rosenbaumarnulfo57@hotmail.comCaguasInactive$648.86
Lucille Howehaley85@hotmail.comNew ReubenActive$992.41
Total$4,517.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
Alexandra Strackedudley_gusikowski@hotmail.comElissaboroughActive$977.46
Stanley Reynoldsfelicita_cremin56@gmail.comNew LydiaburghInactive$623.88
Dave Hermanmelody.johnston10@gmail.comJaquelinsideInactive$597.90
Dr. Willard Ullrichfred_weber@hotmail.comCyriltownActive$471.63
Dennis Mohrjany.kshlerin51@hotmail.comKendale LakesActive$109.75
Total$2,780.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Alyssa Schillerjana79@yahoo.comFort BridgetfurtActive$321.49
Beth Friesenrobert_thiel@hotmail.comEugeniaportInactive$850.62
Kristopher Wolfansley.nicolas@hotmail.comOmahaActive$1,175.81
Muriel Funkenid.veum@hotmail.comOrlohavenInactive$359.54
Alvin Fritschisabel_bartell@yahoo.comConnellyvilleInactive$642.05
Total$3,349.51

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
Sheri Runolfsdottirvena.von@gmail.comClydesideActive$406.52
Lula Schroeder-Bauchjackeline21@hotmail.comViviennebergActive$68.28
Gayle Kubirving.casper16@yahoo.comLake NataliaActive$101.26
Alma Cummings MDmeredith26@yahoo.comSouthavenActive$19.84
Manuel Boylealden.rohan39@yahoo.comConnerfieldActive$854.72
Grace Kunzeashton16@hotmail.comYucaipaActive$931.87
Debra Boyermckayla69@yahoo.comPort HollielandActive$908.50
Sharon Nienowamara0@hotmail.comBeavercreekActive$964.76
Jill Lindathena92@gmail.comFort CarolyneInactive$902.98
Melinda Brownanya.kiehn64@hotmail.comNew GenevieveInactive$1,032.73
Randall Rohanmeta.rolfson95@yahoo.comSugar LandInactive$461.63
Noah Labadieroosevelt.will63@hotmail.comJaquanboroInactive$143.32
Blanca Zemlakedward_dickinson14@yahoo.comPembroke PinesInactive$121.14
Mr. Joey Balistreritrisha_romaguera11@hotmail.comGardnermouthActive$1,188.68
Isaac Whitehyman.fisher80@hotmail.comKihntownInactive$554.00
Total$8,660.23

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.