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
INV001PendingBank Transfer$936.07
INV002PendingCredit Card$450.38
INV003UnpaidCredit Card$475.63
INV004PendingCredit Card$908.77
INV005PaidPayPal$668.13
INV006PaidBank Transfer$830.02
INV007UnpaidCredit Card$654.95
Total$4,923.95

Simple

Users

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

NameTitleEmailRoleActions
Diane RyanProduct Accounts Architectdiane.ryan18@yahoo.comAdmin
Verlie KovacekGlobal Directives Liaisonverlie_kovacek80@hotmail.comViewer
Justin HaneDistrict Directives Officerjustin_hane@gmail.comAdmin
Vladimir CormierSenior Quality Coordinatorvladimir.cormier70@yahoo.comMember
Nina McGlynnFuture Infrastructure Producernina_mcglynn@gmail.comMember
Rhea MorarForward Solutions Supervisorrhea.morar@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Essie Romaguera

Human Accounts Specialist

essie_romaguera@gmail.com

Viewer

Dewey Bernier

Dynamic Branding Assistant

dewey.bernier76@gmail.com

Viewer

Loy Heller

Chief Optimization Designer

loy.heller@yahoo.com

Member

Merle Stamm

Investor Brand Representative

merle.stamm@hotmail.com

Member

Sidney Hane

Regional Data Strategist

sidney.hane82@hotmail.com

Admin

Tyler Paucek

Direct Infrastructure Designer

tyler.paucek92@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Barbara Streich

Corporate Directives Assistant

barbara_streich@yahoo.com

Admin

Agnes Maggio-Johns

Internal Markets Manager

agnes_maggio-johns@yahoo.com

Admin

Alia Turner

Investor Brand Consultant

alia_turner58@gmail.com

Admin

Rosalie Hermann

Principal Branding Supervisor

rosalie.hermann30@yahoo.com

Admin

Lester Rogahn

Internal Group Developer

lester_rogahn56@yahoo.com

Viewer

Rodolfo Kshlerin

Senior Implementation Analyst

rodolfo.kshlerin24@gmail.com

Viewer

Abe Goodwin

Product Program Agent

abe_goodwin81@yahoo.com

Admin

Jodi Shanahan

Central Mobility Manager

jodi.shanahan47@hotmail.com

Viewer

Annabel McDermott-Bernier

Lead Security Coordinator

annabel_mcdermott-bernier86@hotmail.com

Viewer

Cody Wiegand

Investor Security Designer

cody.wiegand18@yahoo.com

Viewer

Mae Reichert

Dynamic Implementation Consultant

mae_reichert50@yahoo.com

Admin

Timmy McClure

Forward Group Supervisor

timmy_mcclure30@yahoo.com

Viewer

Russel Anderson

Human Accountability Planner

russel_anderson3@gmail.com

Admin

Pamela Kunze

National Integration Designer

pamela_kunze93@gmail.com

Viewer

Nash Stroman

Principal Research Representative

nash.stroman@gmail.com

Member

Barbara Rogahn

Legacy Integration Agent

barbara.rogahn@hotmail.com

Admin

Gerald Hilpert

Lead Infrastructure Liaison

gerald.hilpert24@gmail.com

Admin

Deborah Purdy

District Program Representative

deborah.purdy56@yahoo.com

Admin

Alton Herman

International Response Administrator

alton_herman@yahoo.com

Admin

Jarvis VonRueden

Forward Data Liaison

jarvis_vonrueden75@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
Mr. Rigoberto Naderzita_boyle@gmail.comUplandInactive$307.61
Wayne Farrellsimon_lesch@hotmail.comNew JacobvilleActive$627.19
Edwin Mohrdariana_hudson50@hotmail.comAustinInactive$939.32
Bryan Kuhlmanleann.bruen21@gmail.comShawnaboroActive$1,021.96
Ms. Stephon Gislasonmaddison.koepp30@hotmail.comIrishavenInactive$790.83
Total$3,686.91

Basic table

Table with Images

NameEmailLocationStatusBalance
Myrtie Hills
@preston20
juan.kuphal@gmail.comPort MercedesvilleActive$38.28
Marta Sanford
@rodney.paucek17
adan_waters@hotmail.comPort WallacesteadActive$1,118.28
Austyn Leffler
@lyla.kuhic
georgia.huel@yahoo.comTracyInactive$844.75
Gertrude Pollich
@murray60
andrea.blick@gmail.comSierra VistaActive$531.09
Lucy Beer
@julie.reynolds
zane.parisian@yahoo.comJaneburghActive$485.79

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Misty Strackeclyde.conroy32@yahoo.comFort SpencerfieldInactive$286.55
Cristina Flatleylester.jacobson73@yahoo.comEllenportActive$346.72
Catharine Robertsbrandy86@gmail.comLake KellieInactive$3.80
Francisco Casperernestina_sawayn17@yahoo.comPort TomascesterActive$432.22
Max Kesslereduardo_bechtelar-purdy75@hotmail.comPrestonshireActive$1,101.42
Total$2,170.71

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Federico Kozeyaylin_cartwright@hotmail.comOlson-WardboroInactive$45.68
Vivian Friesenhilda.willms@hotmail.comLaredoInactive$532.47
Doris MacGyverjodi.beahan@yahoo.comEast KayActive$729.58
Jay Farrellalicia37@gmail.comColumbusActive$875.37
Jazmyne Hagenesalene45@yahoo.comKeelingfieldActive$909.05
Total$3,092.15

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Sage Effertzlorenza_quitzon@gmail.comTinley ParkInactive$773.15
Trystan Robertslibby_hamill84@yahoo.comEasterworthActive$154.75
Leticia Ebertmarguerite14@yahoo.comLittle RockInactive$638.38
Zetta Crist IIblair.torp70@hotmail.comNorth CharlestonInactive$173.82
Kayla Westaustin42@gmail.comSouth UbaldocesterActive$816.66
Total$2,556.76

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
Nichole Braunduane45@gmail.comSan LeandroActive$40.79
Eric Bradtketheresa.hoeger@hotmail.comJaskolskitownActive$322.15
Abraham Langworthglenn.miller2@hotmail.comEast HeatherfieldActive$166.70
Tim Hoeger Jr.merle52@yahoo.comWest New YorkActive$952.66
Marta Dachfae86@gmail.comLake FannyInactive$1,048.47
Total$2,530.77

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ms. Camille Watersflorence13@yahoo.comSalinasInactive$15.47
Tom Schmeleradell.von@hotmail.comLake JaredcesterActive$648.01
Jennifer Hanegerardo_blanda34@hotmail.comPort ShyannemouthInactive$935.27
Green Hilpertgeorgiana_spinka@hotmail.comEast PearltonInactive$518.15
Randal Lindterry_mante20@yahoo.comNorth DarreltonActive$174.09
Total$2,290.99

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
Harry Osinskisidney_littel90@hotmail.comSparksInactive$1,138.65
Mable Conroyfelicity.senger@yahoo.comLenachesterActive$940.91
Mr. Sylvester Zulaufstephany_steuber69@yahoo.comJazmyneportInactive$787.66
Dr. Fernando Smithmyra45@hotmail.comCarlshireActive$1,135.97
Mrs. Crawford Koelpin-Nikolausdusty67@hotmail.comWest WhitneytownInactive$733.46
Hector Pfannerstillmarcos.mclaughlin@yahoo.comOciestadInactive$1,018.59
Naomi Bogannasir.jast@yahoo.comWest MicheleshireActive$615.75
Meda Lesch-Friesengretchen87@gmail.comD'AmoreburyInactive$209.26
Damien Kertzmannjensen_wuckert@hotmail.comNew AltownActive$519.63
Osvaldo Kreigerbobby_stanton59@hotmail.comRolandoworthInactive$564.51
Alexandra Lang DDSbill.fisher@gmail.comVonboroActive$1,099.05
Tyree Mantevirginia.frami39@yahoo.comToy-FaybergInactive$1,070.20
Weldon Ankundingclaud_herman@hotmail.comEvelinemouthActive$678.62
Alessandro Schultz DDSjerome_reichel@hotmail.comNew SibylworthInactive$838.33
Sylvester Grimesicie.howell61@gmail.comNorth WadeportInactive$1,133.70
Total$12,484.29

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.