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$625.82
INV002PendingBank Transfer$798.96
INV003UnpaidPayPal$422.19
INV004PaidCredit Card$392.61
INV005PaidPayPal$362.79
INV006UnpaidCredit Card$635.56
INV007PaidPayPal$784.28
Total$4,022.21

Simple

Users

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

NameTitleEmailRoleActions
Derick HowellNational Brand Specialistderick.howell82@gmail.comViewer
Foster GoodwinSenior Program Executivefoster.goodwin51@gmail.comViewer
Marianne MillerNational Branding Executivemarianne.miller@gmail.comAdmin
Rey MohrInvestor Program Liaisonrey_mohr@gmail.comMember
Rafaela GibsonLegacy Implementation Designerrafaela_gibson@yahoo.comMember
Kobe HayesForward Response Producerkobe_hayes23@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Rocio Greenholt

Global Program Developer

rocio.greenholt@yahoo.com

Viewer

Kayden Bradtke

Customer Brand Administrator

kayden_bradtke@yahoo.com

Viewer

Monica Walsh

Internal Web Manager

monica.walsh49@yahoo.com

Member

Jimmie Kertzmann

Internal Operations Producer

jimmie.kertzmann96@yahoo.com

Viewer

Janick O'Kon

Customer Factors Planner

janick_okon75@hotmail.com

Member

Sophia Dare

Internal Mobility Architect

sophia_dare59@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Emelia Wyman

Chief Communications Agent

emelia_wyman@hotmail.com

Member

Benny Hettinger

Human Assurance Strategist

benny.hettinger41@yahoo.com

Member

Earlene Kuphal

District Usability Analyst

earlene_kuphal@yahoo.com

Admin

Karl Sporer

Lead Interactions Manager

karl.sporer@gmail.com

Member

Ford Gleason

Global Implementation Supervisor

ford_gleason@gmail.com

Member

Terrence Bogan

Future Tactics Director

terrence_bogan85@hotmail.com

Viewer

Emilie Gislason

Product Usability Developer

emilie.gislason55@yahoo.com

Viewer

Columbus Witting

Customer Operations Manager

columbus_witting@yahoo.com

Member

Harvey Thiel

Regional Division Strategist

harvey_thiel@gmail.com

Admin

Linnie Witting

Direct Intranet Producer

linnie_witting36@hotmail.com

Member

Lucas Wolf

Direct Intranet Orchestrator

lucas.wolf98@hotmail.com

Viewer

Blanca Franecki

Principal Functionality Manager

blanca_franecki36@hotmail.com

Viewer

Santos Konopelski

Regional Functionality Assistant

santos.konopelski@gmail.com

Viewer

Kaci Romaguera

Lead Configuration Liaison

kaci_romaguera@hotmail.com

Member

Ernestina Langosh

Product Quality Consultant

ernestina_langosh78@gmail.com

Member

Letitia Cole

Customer Assurance Associate

letitia_cole@yahoo.com

Member

Merritt Auer

Legacy Communications Strategist

merritt.auer@yahoo.com

Admin

Nasir Okuneva

Central Configuration Consultant

nasir_okuneva@gmail.com

Member

Marjorie Emmerich

Principal Configuration Coordinator

marjorie_emmerich@gmail.com

Viewer

Elbert Kris

Human Assurance Specialist

elbert_kris@gmail.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
Kay Padbergarno_herzog-mohr57@hotmail.comZolashireInactive$629.74
Juanita Johnsonfrank99@hotmail.comWest MilfordmouthActive$954.90
Kathleen Fay DDSgina88@gmail.comDibbertcesterInactive$561.08
Bernard Kutchrosanna.larson48@yahoo.comLondontonActive$299.87
Pamela Thieltalon_herzog46@gmail.comWest EstebanburghInactive$485.88
Total$2,931.47

Basic table

Table with Images

NameEmailLocationStatusBalance
Harvey Kautzer-Towne
@brigitte_mohr73
kenyon.grant@yahoo.comMiami BeachInactive$1,080.39
Darren Moore DVM
@jamison61
cynthia29@gmail.comWest VivienbergInactive$304.72
Wilma Aufderhar-Casper
@meaghan_mcclure
bart_quitzon@gmail.comWest PrudenceActive$120.12
Angelo Rippin
@laverne12
tristin27@hotmail.comJordanworthInactive$573.79
Dr. Carroll Powlowski
@kurtis.parker44
jamie17@hotmail.comLake EmilyInactive$51.95

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Kristina Heaneyberyl79@gmail.comFort BobbyshireInactive$1,065.68
Alberta Olsonfatima.bruen61@hotmail.comWest YazminsteadInactive$867.51
Geneva Franeckiraymundo.krajcik@hotmail.comKreigermouthInactive$276.56
Ms. Holly Romaguerawalton86@gmail.comNorth MakenzietonInactive$355.78
Albert Streichcandelario_murphy@yahoo.comPerryviewInactive$995.13
Total$3,560.66

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mathew Hicklepeggie.bailey20@gmail.comWesley ChapelInactive$576.71
Luke Williamsonlorine.ratke87@hotmail.comDibbertchesterInactive$1,094.49
Esther Marksmaurine.koch23@gmail.comEast AdrienActive$1,106.88
Sonja Naderkiarra.kub@gmail.comMrazfortActive$991.78
Diana Kessler Sr.anthony_price@gmail.comFort SebastianInactive$414.72
Total$4,184.58

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ramiro Stokesantonetta.jacobson29@hotmail.comJolietInactive$752.77
Wilma Barrowsmartine.kutch52@gmail.comFort EmmanuelfortInactive$130.57
Myra Muller-Bartolettiicie.streich6@gmail.comKulasburyActive$831.45
Cheryl Deckow DVMlane.beer@hotmail.comFlower MoundActive$649.78
Miss Wendy Franeckilera89@gmail.comSt. LouisActive$91.80
Total$2,456.37

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
Ian Boyerclaudia0@gmail.comNew JazlynInactive$19.79
Emilio Wolffethan.lang90@yahoo.comWest AllisActive$567.91
Frances Hahncora15@gmail.comCheektowagaInactive$1,113.44
Maria Roobonie_gerhold@hotmail.comGreenburyInactive$285.00
Nora Hegmanncharles.waters@yahoo.comPatienceviewActive$196.01
Total$2,182.15

Table with row selection

Card Table

NameEmailLocationStatusBalance
Eileen Aufderharnapoleon17@hotmail.comSouth LinniefurtActive$287.90
Dr. Philip Abernathycaleigh.haley-wolf73@yahoo.comPort KeaganInactive$236.55
Rachael Wilkinsonhollis36@yahoo.comFort NataliaActive$832.62
Emily Ondrickabailee_bernhard23@hotmail.comFort ConnerInactive$30.44
Rachael Spinkamona42@hotmail.comLaviniavilleActive$328.18
Total$1,715.69

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
Mrs. Emily Schneiderelyse64@yahoo.comQuintonburyInactive$404.45
Paul Reichertsavanah_fritsch22@gmail.comEast AngelaInactive$1,107.90
Florence Stiedemann Vnona7@gmail.comBalistreristeadActive$209.16
Kerry Luettgenannalise.swift@yahoo.comCarlsbadInactive$559.00
Loren Kautzernoe.kub@hotmail.comJesseshireInactive$951.45
Harriet Bernierdevin_hansen@yahoo.comPort MerleInactive$1,176.34
Lance Williamsonbobby_powlowski36@gmail.comLake JoaquinburyInactive$127.16
Daniel Handchance.considine66@gmail.comWest RosemarieActive$978.66
Hugh Jacobsnaomi.shields@hotmail.comCarson CityActive$1,093.79
Tammy Bergstrom MDgerhard33@hotmail.comJaviervilleActive$723.32
Kenny Greenfelderstephanie.stiedemann@yahoo.comSouth TreboroActive$733.05
Ms. Pam Rueckerambrose_wisozk38@gmail.comEast ElijahActive$1,126.77
Dr. Lori Abernathyalek50@hotmail.comBlacksburgActive$1,108.21
Cecil Hammesjerald.cremin11@yahoo.comEast TessieInactive$309.07
Nick Hauckskylar_turner85@gmail.comSouth GeorgettecesterInactive$854.90
Total$11,463.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.