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$836.37
INV002UnpaidBank Transfer$865.59
INV003PendingCredit Card$154.07
INV004PaidPayPal$131.89
INV005PaidBank Transfer$423.08
INV006PendingCredit Card$152.19
INV007PaidBank Transfer$144.50
Total$2,707.69

Simple

Users

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

NameTitleEmailRoleActions
Stefanie PredovicCorporate Applications Consultantstefanie_predovic43@hotmail.comAdmin
Gabe BrakusHuman Quality Assistantgabe.brakus4@gmail.comViewer
Ali BogisichLegacy Brand Liaisonali.bogisich18@yahoo.comViewer
Elizabeth BinsPrincipal Division Agentelizabeth.bins22@yahoo.comViewer
Wayne SanfordProduct Markets Directorwayne_sanford46@gmail.comViewer
Dario HammesChief Usability Engineerdario_hammes25@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Obie Kautzer

Internal Intranet Technician

obie.kautzer@yahoo.com

Admin

Josephine Romaguera

Human Mobility Representative

josephine_romaguera22@gmail.com

Admin

Lelia Ankunding

Human Marketing Administrator

lelia.ankunding94@hotmail.com

Viewer

Tianna Botsford

Product Paradigm Specialist

tianna.botsford94@hotmail.com

Member

Wilson Doyle

Forward Infrastructure Representative

wilson_doyle@hotmail.com

Viewer

Janice VonRueden

Corporate Data Orchestrator

janice.vonrueden@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Rene Murphy

Lead Creative Analyst

rene.murphy@hotmail.com

Admin

Raquel Keeling

Regional Mobility Designer

raquel_keeling6@yahoo.com

Admin

Deborah Gutkowski

Regional Security Agent

deborah_gutkowski@gmail.com

Viewer

Reyes Bruen

Legacy Branding Assistant

reyes_bruen@gmail.com

Member

Kathlyn Braun

District Metrics Agent

kathlyn_braun@hotmail.com

Member

Lorenza Hegmann

Customer Usability Liaison

lorenza.hegmann@yahoo.com

Admin

Jody Jacobi

International Functionality Assistant

jody.jacobi@yahoo.com

Admin

Ashley Rice

Senior Creative Officer

ashley_rice@hotmail.com

Admin

Magnus Denesik

Regional Accountability Designer

magnus.denesik@gmail.com

Admin

Raul Hauck

Regional Group Consultant

raul_hauck@hotmail.com

Viewer

Kian Auer

Investor Web Agent

kian_auer12@hotmail.com

Admin

Isabell Prohaska

Regional Metrics Administrator

isabell.prohaska0@hotmail.com

Viewer

Tamara Donnelly

Direct Identity Executive

tamara.donnelly49@yahoo.com

Viewer

Jovani Auer

Investor Functionality Designer

jovani.auer80@hotmail.com

Member

Sonya Koss

Chief Applications Officer

sonya_koss@gmail.com

Viewer

Sibyl Schultz

International Brand Associate

sibyl.schultz57@yahoo.com

Admin

Nadia Von

Lead Assurance Associate

nadia.von98@hotmail.com

Member

Kristina Schowalter

Product Program Executive

kristina.schowalter@hotmail.com

Viewer

Bernard Wiegand

Chief Quality Liaison

bernard.wiegand10@gmail.com

Admin

Morton Fisher

Principal Directives Designer

morton.fisher91@gmail.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
Nathaniel Abshire IVmelissa.nicolas@hotmail.comCambridgeInactive$954.98
Beatrice Manntherese52@yahoo.comWest AdolfohavenInactive$945.35
Gregory Treutelpearline.johnston@gmail.comEast MossieviewInactive$0.26
Elvira Heaneyniko.senger29@yahoo.comCorkeryworthInactive$51.02
Vernon Hellernoemie.marvin@yahoo.comOrnburghInactive$556.64
Total$2,508.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Clark Glover
@jon.kreiger55
alex_breitenberg@hotmail.comLake VivianburghInactive$781.49
Ginger Hoeger
@dovie.bechtelar
franz.brakus@yahoo.comAthens-Clarke CountyInactive$985.89
Caroline Cummings
@clifton_friesen83
alysson.reilly16@gmail.comLake PriceInactive$930.33
Carolyn Green IV
@oran_lang
eloisa_cremin67@gmail.comSouth BettieworthInactive$823.57
Mr. Gerard Lowe
@thurman40
layne31@yahoo.comLake PhilipfortInactive$803.32

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lee Smithwalter_effertz@yahoo.comRogahnviewInactive$378.46
Violet Stanton IIIamya.cremin@hotmail.comRunolfsdottirviewInactive$329.03
Mr. Ron Kerluke-Klein Vhubert_conn51@hotmail.comWest UrielviewInactive$1,047.29
Ricardo Reingerlelah.schmeler@hotmail.comNew ChristianaActive$422.78
Ed Rueckeraliyah54@yahoo.comMauricefortActive$453.44
Total$2,631.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dr. Cameron Altenwerthbrennan.hermann@hotmail.comNew CotyActive$671.16
Ms. Rita Powlowskitremayne_harvey11@yahoo.comZoilaburyInactive$16.72
Toni Goyettegardner_gulgowski76@yahoo.comColbyboroughActive$754.94
Dr. Erik Rennerreyna88@yahoo.comGastonhavenActive$590.63
Ms. Florence Herzogterrence_feeney99@gmail.comPort RachaelActive$935.04
Total$2,968.49

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Christy McCluretiana.marks25@yahoo.comNew RosinaInactive$104.71
Eduardo Sipespearl75@hotmail.comLake LorenzaActive$945.53
Jack Mullerjulian_simonis45@yahoo.comNew GerardInactive$895.66
Mr. Devin Gorczany DDSlula.huel56@gmail.comEast ArnoldoInactive$141.36
Vanessa Daughertyclarabelle.klein@hotmail.comHarrisfieldActive$418.83
Total$2,506.09

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
Jacob Kulasantwon.bailey90@yahoo.comBrekkesideInactive$1,180.37
Clinton Weimann Jr.ted.christiansen74@yahoo.comKathlynfieldInactive$135.75
Dwayne Farrellrebeca_rohan@gmail.comFort SeanActive$1,083.21
Lucille Collier IVashtyn_okuneva@hotmail.comSavannahboroughActive$1,171.82
Delbert Turcottelowell29@gmail.comWest MadysonInactive$302.29
Total$3,873.44

Table with row selection

Card Table

NameEmailLocationStatusBalance
Miss Ginger Weissnatdawn.dibbert52@gmail.comFort MontanastadInactive$557.53
Mr. Jeremy Cartermaia60@gmail.comNorth LexieActive$82.68
Janie Larsonchester.collier6@gmail.comPaucekburyActive$96.93
Mrs. Belinda Huelselisha82@hotmail.comBrendentownActive$862.00
Amelia Bechtelarraheem.gottlieb93@gmail.comAdrielportActive$1,143.37
Total$2,742.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
Kendra Champlinmiller_jaskolski@yahoo.comLake RoryInactive$983.62
Darren Bruen-Ryanpattie.spencer23@yahoo.comLake LarueInactive$1,042.91
Miss Angel Erdmanviviane73@yahoo.comSouth CordietonActive$142.40
Melissa Douglas MDemelie43@yahoo.comNorth CoreneInactive$88.80
Kim Bins DDSthea.kuhlman@gmail.comFort HoldenshireInactive$216.54
Mr. Sean Kuvalisroslyn.kuhn@hotmail.comPlantationActive$898.16
Drew Kohlermadaline.armstrong41@gmail.comColtonActive$1,015.72
Melvin Fisherdarrel_flatley@yahoo.comDarelandInactive$379.38
Kerry Miller Sr.clifton30@yahoo.comFort DulceActive$415.87
Marlon Greenholt-Veumaddison_boyle@yahoo.comPort BradbergInactive$822.63
Clyde Thompsonamelia.fisher22@gmail.comChanelleportActive$618.77
Janice Skilesvirginie95@yahoo.comFond du LacInactive$647.94
Lyle Kirlinfrederic51@hotmail.comLake FabiolalandActive$799.90
Ana Langworth-Beahankattie_kling27@gmail.comNew YasmineActive$762.46
Malcolm Schinnercassandre.boyle@hotmail.comSouth ValleyActive$1,146.24
Total$9,981.34

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.