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$143.83
INV002UnpaidPayPal$812.28
INV003UnpaidCredit Card$122.70
INV004UnpaidPayPal$758.58
INV005PendingBank Transfer$362.26
INV006PaidBank Transfer$202.84
INV007PaidBank Transfer$646.78
Total$3,049.27

Simple

Users

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

NameTitleEmailRoleActions
Maiya HackettInternational Mobility Administratormaiya_hackett@gmail.comAdmin
Lenora PaucekInternational Quality Supervisorlenora.paucek23@yahoo.comViewer
Dwayne VolkmanInternational Data Associatedwayne.volkman30@hotmail.comViewer
Gloria JonesPrincipal Response Liaisongloria.jones@hotmail.comAdmin
Michelle WillmsDistrict Marketing Analystmichelle.willms@hotmail.comAdmin
Janae MaggioFuture Applications Architectjanae.maggio@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Alva Corwin

Central Applications Director

alva.corwin58@gmail.com

Viewer

Elsa Connelly

Human Group Designer

elsa.connelly44@yahoo.com

Member

Rafael Jacobs

Lead Directives Technician

rafael_jacobs93@gmail.com

Member

Jaunita Schimmel

Corporate Marketing Strategist

jaunita_schimmel@yahoo.com

Admin

Sunny Hudson

Dynamic Operations Strategist

sunny.hudson88@gmail.com

Admin

Wade Kiehn

Product Tactics Strategist

wade_kiehn22@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Merlin Parisian

Corporate Program Architect

merlin_parisian40@gmail.com

Member

Myrna Abbott

Future Applications Liaison

myrna_abbott1@gmail.com

Admin

Krystina Hermiston

National Branding Associate

krystina_hermiston@gmail.com

Member

Candelario Sauer

International Assurance Technician

candelario_sauer@yahoo.com

Member

Chelsie Abbott

District Response Administrator

chelsie.abbott@hotmail.com

Viewer

Ebony Lang

Corporate Intranet Assistant

ebony.lang@gmail.com

Viewer

Arnulfo Rath

Direct Implementation Planner

arnulfo_rath8@hotmail.com

Admin

Leroy Kihn

Regional Web Facilitator

leroy.kihn@hotmail.com

Member

Eusebio Johnson-Gusikowski

Corporate Accounts Technician

eusebio_johnson-gusikowski64@gmail.com

Member

Lafayette Thompson

Global Program Assistant

lafayette_thompson32@hotmail.com

Viewer

Karl Wolff

Legacy Solutions Engineer

karl_wolff@gmail.com

Member

Tracy Stoltenberg

Forward Mobility Supervisor

tracy.stoltenberg8@hotmail.com

Member

Hubert Flatley

Product Usability Analyst

hubert_flatley@yahoo.com

Admin

Jean Dickens

District Functionality Planner

jean.dickens84@yahoo.com

Viewer

Gladys Kuhic

Chief Quality Manager

gladys.kuhic@yahoo.com

Member

Valerie Blick

Chief Tactics Facilitator

valerie.blick@hotmail.com

Member

Vivian Mann

Investor Accounts Director

vivian_mann@yahoo.com

Member

Dora Cremin

Direct Infrastructure Orchestrator

dora_cremin@hotmail.com

Member

Cielo Lesch

Chief Group Associate

cielo.lesch@gmail.com

Viewer

Camille Shanahan

Internal Directives Facilitator

camille.shanahan62@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
Laurence Watsicaray21@yahoo.comNew MaximilliastadInactive$462.45
Jeanette Bechtelarotilia69@yahoo.comSuffolkActive$777.21
Justice Kochdiane.halvorson@hotmail.comSouth GlenstadInactive$579.84
Dina Schultz-Blockmorris_bailey76@gmail.comSouth AldafieldInactive$213.19
Dorothy Douglassuzanne90@gmail.comPort AnnabellviewActive$4.56
Total$2,037.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Mrs. Conrad Marks
@jorge.predovic73
hermann54@yahoo.comGrantfieldActive$832.55
Ms. Ora Rolfson
@mario6
adrianna.morar50@gmail.comRosinacesterActive$932.90
Ernestina Jaskolski
@germaine97
mario_osinski76@hotmail.comQuitzonboroughInactive$186.74
Consuelo Weissnat
@jonathon35
glen.conroy1@hotmail.comO'ConnerburghInactive$1,017.12
Jonathan Bogisich
@francis_volkman-cummings98
salvatore.jast43@yahoo.comOlsonsteadActive$279.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Geneva Rathmarion.gulgowski@gmail.comEast KennatownInactive$771.39
Dagmar Millermelba.mueller27@yahoo.comNorth KathleenportInactive$321.75
Lenna Kuhlmanmaximillian_feeney@hotmail.comNicolasburghActive$99.68
Christa Pacochaantonietta_oconnell-swift@gmail.comSeattleInactive$106.97
Bridget Danielcelia10@gmail.comPort OdessatownInactive$1,136.73
Total$2,436.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Caleigh Flatleylaury.hettinger92@yahoo.comPort PrestonboroInactive$81.62
Amos Torphynoel_terry59@gmail.comNorth RhettInactive$1,162.00
Ms. Judith Lebsackbrooke83@hotmail.comNew RosieActive$943.34
Joseph Greenfelderdarla16@yahoo.comRosemeadActive$567.18
Doris Gulgowski Jr.jessie_bechtelar@yahoo.comNorth EfrainInactive$616.39
Total$3,370.53

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Bernie Skilesagnes_nader@gmail.comEast VanessavilleActive$316.46
Taurean Kerlukeeino.cormier90@yahoo.comEast DoriancesterInactive$643.58
Cathy Turcottehilda4@hotmail.comNorth DavonteInactive$235.30
Naomie Skilesdexter_white87@gmail.comMcCluretownInactive$381.95
Salvador Shanahanisaac30@gmail.comPort AlphonsofortInactive$75.22
Total$1,652.51

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
Maurice Schummbret.welch71@hotmail.comWest JaysonActive$782.98
Grady Klockobrandy74@gmail.comWest RaoulActive$1,002.50
Edward Douglashunter.kulas80@yahoo.comHarbercesterActive$945.52
Shane Strosinjan82@yahoo.comCincinnatiInactive$134.22
Claudia Hyattashley79@gmail.comEast DeltastadActive$237.23
Total$3,102.45

Table with row selection

Card Table

NameEmailLocationStatusBalance
Van Brakusisabel83@hotmail.comNorth LizethviewActive$105.63
Elda Emmerichsterling5@yahoo.comEast PriscillasideActive$1,040.83
Lorenzo Kovacek Itheron.hilpert41@gmail.comSouth KiannaInactive$393.19
Daniel Smithamkristine_reichel@yahoo.comNorth TrishaActive$331.34
Lela Buckridgecrystel_heaney@hotmail.comNew VictoriaInactive$101.03
Total$1,972.02

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
Geoffrey Bartonorie51@gmail.comSouth SusieInactive$170.40
Allen Hermanraymundo64@gmail.comPricesteadInactive$397.73
Brisa Quitzonjordan_hodkiewicz-wuckert@yahoo.comGilbertfurtInactive$974.37
Jessica Kemmeral_lemke10@gmail.comJesseboroughActive$646.88
Amos Ratkeaubrey21@yahoo.comBozemanInactive$1,108.43
Marcia Stiedemannzelda95@gmail.comWest ItzelburghInactive$1,152.27
Raquel Schultzdustin.ward19@yahoo.comRebekahshireInactive$581.43
Billie Macejkovicmadison_runolfsson@gmail.comGenesistownActive$844.82
Nichole Leschjustin_farrell@hotmail.comHauckchesterActive$851.61
Ross Gorczanymarco_windler16@hotmail.comGaithersburgInactive$123.11
Rosa Binstyson_morar70@hotmail.comSouth ChancechesterInactive$332.16
Elijah Kemmerruben31@gmail.comJosiemouthActive$671.85
Beverly Dooleyhenry_hermiston@hotmail.comEast HilarioboroInactive$671.40
Queen Konopelskimarietta.kutch-mcdermott@yahoo.comBlockburghActive$16.14
Mr. Oscar Vonpam15@hotmail.comNorth EffievilleActive$317.05
Total$8,859.65

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.