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$236.03
INV002UnpaidCredit Card$544.47
INV003PaidPayPal$410.87
INV004UnpaidPayPal$928.32
INV005PaidPayPal$432.00
INV006PendingCredit Card$703.85
INV007UnpaidBank Transfer$280.14
Total$3,535.68

Simple

Users

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

NameTitleEmailRoleActions
Camren D'AmoreForward Creative Orchestratorcamren_damore@hotmail.comAdmin
Javier TremblayInvestor Tactics Assistantjavier_tremblay@gmail.comAdmin
Laurie HellerChief Accounts Liaisonlaurie.heller24@gmail.comAdmin
Margret EmardCustomer Communications Officermargret_emard36@hotmail.comMember
Kate LabadieDirect Applications Consultantkate.labadie29@yahoo.comAdmin
Velma CroninSenior Quality Orchestratorvelma_cronin45@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Mikayla Crona

Product Communications Representative

mikayla.crona34@gmail.com

Viewer

Lynn Walter

Forward Configuration Supervisor

lynn.walter@yahoo.com

Admin

Clifford Turner

Global Branding Representative

clifford_turner@hotmail.com

Member

Giovanna Emmerich

Future Mobility Coordinator

giovanna.emmerich52@gmail.com

Admin

Barbara Runolfsson

Senior Markets Associate

barbara_runolfsson25@gmail.com

Admin

Heidi Kilback

Global Directives Representative

heidi_kilback@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Wendy Keeling

Human Factors Producer

wendy.keeling@hotmail.com

Admin

Doris Haag

Product Functionality Coordinator

doris.haag1@yahoo.com

Member

Tyrone Williamson

District Data Supervisor

tyrone_williamson@gmail.com

Viewer

Julius Durgan

International Accounts Manager

julius.durgan61@gmail.com

Viewer

Violet Huels

Lead Brand Associate

violet.huels94@yahoo.com

Admin

Garry Cremin

District Solutions Manager

garry_cremin@yahoo.com

Viewer

Edmund Fay

Direct Integration Strategist

edmund_fay59@gmail.com

Viewer

Joanna Block

Human Identity Representative

joanna_block60@hotmail.com

Admin

Lora Beahan

Legacy Brand Representative

lora.beahan60@hotmail.com

Admin

Rory Flatley

Corporate Branding Specialist

rory_flatley@yahoo.com

Viewer

Felipa O'Kon

National Communications Planner

felipa_okon@hotmail.com

Member

Maggie Treutel

Regional Security Developer

maggie.treutel@yahoo.com

Viewer

Lori Huel

Principal Mobility Supervisor

lori_huel@hotmail.com

Member

Sandy Fay

Forward Applications Associate

sandy_fay@yahoo.com

Admin

Jody Batz

National Markets Agent

jody_batz48@gmail.com

Viewer

Stacy Mayert

Direct Usability Agent

stacy_mayert7@gmail.com

Viewer

Virginia Ortiz

Direct Functionality Consultant

virginia_ortiz36@gmail.com

Admin

Mitchel Gorczany

Forward Security Technician

mitchel.gorczany@gmail.com

Viewer

Stacy Kerluke-Schmitt

Senior Functionality Director

stacy.kerluke-schmitt@gmail.com

Member

Era Nolan

Central Configuration Manager

era_nolan68@yahoo.com

Admin

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
Tyler Sauerfay.wilkinson@gmail.comEast LeonorboroughInactive$873.90
Toy Kub Icolleen_hermann@gmail.comSouth EmeraldstadActive$1,195.35
Marcus Morissette IIIgene_jacobi80@hotmail.comSouth WernerInactive$194.43
Sonia Haleyirma71@hotmail.comWest GailActive$1,085.60
Charlene Thompsonmonty89@hotmail.comNew BritainActive$820.82
Total$4,170.10

Basic table

Table with Images

NameEmailLocationStatusBalance
Marcos Kling-Beier
@louise_fadel
tracy15@gmail.comEast IgnacioshireInactive$419.72
Erma Gutkowski
@luis_ohara74
morris41@gmail.comWintheiserstadActive$292.47
Marvin Hills
@burdette91
francisco_marvin1@yahoo.comBrownmouthInactive$1,014.88
Emily Haag
@mac35
lindsey_jerde@yahoo.comWest JoesphActive$664.69
Wilbert Luettgen
@betty58
arturo.hahn66@hotmail.comWest GeneralInactive$1,103.22

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Teri Sawaynwilla_senger@gmail.comSanta ClaritaActive$1,135.68
Fred Torphysherry.heathcote@yahoo.comDonnamouthActive$805.98
Retta Nicolas Sr.levi_runte@yahoo.comVinelandInactive$111.63
Dr. Esther Blockclint39@hotmail.comNorth LunacesterInactive$585.46
Rafael Walterconnie.abernathy63@gmail.comGeovanymouthActive$352.72
Total$2,991.47

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gladyce Howelltod_christiansen@gmail.comLake FaustinoActive$328.47
Lorenz Schuppestone.price@gmail.comEast TaureanInactive$62.06
Kaylin Rippin IItristin_smitham17@gmail.comIdaho FallsActive$840.29
Tyrel Keelingira_kemmer@gmail.comPort JerryburyInactive$405.78
Miss Henrietta Bosconicola.boyle3@gmail.comCartervilleInactive$682.55
Total$2,319.15

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Alden Walter-Murphyjamie11@gmail.comSouth AlbertfieldActive$644.98
Tammy Waelchicharlene_ryan9@hotmail.comWest JeraldActive$615.21
Theodora Bailey-Kuhic Jr.orie88@yahoo.comLolaburghActive$34.45
Paul Boscoangelina_wintheiser33@hotmail.comHerminiovilleInactive$92.42
Freddie Rippinpamela_gottlieb96@yahoo.comArden-ArcadeInactive$272.32
Total$1,659.38

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
Ramon Grahamruby_raynor@yahoo.comZboncakviewActive$138.87
Fannie Powlowskidarren_swaniawski@yahoo.comCrookssteadActive$115.04
Mrs. Mamie Carrollismael.hilpert@gmail.comAldenchesterActive$412.52
Delores McDermottelisha_kuphal@hotmail.comDeondresteadInactive$722.60
Eleanor Altenwerthsue_walter70@yahoo.comNew DeliaInactive$501.28
Total$1,890.31

Table with row selection

Card Table

NameEmailLocationStatusBalance
Raleigh Willfrederique.hilll97@yahoo.comLednerfortInactive$1,185.96
Thora Lebsackelta.pacocha@hotmail.comNew DedricInactive$1,044.64
Blake Reynoldsisrael59@gmail.comPort ScarlettActive$1,046.64
Lynn Monahanruby.hartmann7@yahoo.comNovavilleInactive$280.51
Lola Swaniawskiemma61@hotmail.comLake SunnysteadInactive$885.73
Total$4,443.48

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
Salma Kundenichole.langosh@gmail.comBayleefieldInactive$316.62
Gillian Millertre_upton@hotmail.comLucycesterActive$757.18
Brandon McCullough Vannie_mills28@gmail.comJerdeboroughActive$15.42
Roscoe McGlynnsabrina50@yahoo.comKilbacklandActive$267.80
Mr. Freddie Koelpinerick.hauck@yahoo.comSilver SpringActive$456.72
Elena Osinskimolly84@hotmail.comNew MoisestonActive$324.97
Mr. Ronnie Kuphalgarry73@gmail.comNew FridachesterActive$284.11
Stephon Zemlakjimmie.walsh97@yahoo.comNew OrphaboroughInactive$293.93
Kaylin Gerholdjoyce_balistreri85@hotmail.comYasminbergActive$1,102.27
Shannon Nikolausflorence_willms@hotmail.comNew ReeseActive$551.98
Jaime Jacobslela.cremin38@gmail.comSelenaviewInactive$972.14
Daryl Reynoldsalbert7@gmail.comKellerActive$795.97
Laurence Baumbachlamar.konopelski36@yahoo.comGutkowskifieldActive$789.31
Green Hyatttomas26@gmail.comWest MerletonActive$1,057.49
Ms. Jose Russelgeneva.boyer@hotmail.comCoral SpringsInactive$318.01
Total$8,303.92

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.