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
INV001UnpaidBank Transfer$196.12
INV002PaidCredit Card$318.64
INV003UnpaidPayPal$521.56
INV004PaidPayPal$241.83
INV005PaidCredit Card$706.80
INV006PendingPayPal$785.38
INV007UnpaidBank Transfer$244.00
Total$3,014.33

Simple

Users

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

NameTitleEmailRoleActions
Ewald WolffCorporate Integration Specialistewald.wolff45@hotmail.comMember
Ryann HartmannLegacy Response Specialistryann_hartmann5@hotmail.comAdmin
Ephraim PollichRegional Marketing Strategistephraim.pollich@hotmail.comMember
Lindsay CarterLegacy Factors Specialistlindsay_carter7@gmail.comAdmin
Rosendo McKenzieInternal Branding Producerrosendo.mckenzie30@gmail.comViewer
Jean GerholdGlobal Marketing Developerjean.gerhold@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Elaine Swaniawski

Investor Group Consultant

elaine_swaniawski33@yahoo.com

Admin

Johanna Doyle

Human Brand Officer

johanna_doyle@gmail.com

Member

Murphy Orn

Lead Interactions Facilitator

murphy.orn@yahoo.com

Admin

Madisen Purdy

Customer Paradigm Engineer

madisen.purdy71@gmail.com

Viewer

Ollie Schinner

Dynamic Brand Orchestrator

ollie.schinner24@yahoo.com

Member

Gwen Willms

District Division Producer

gwen_willms@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Thomas Kutch

Central Creative Representative

thomas_kutch57@gmail.com

Viewer

Sandy Schimmel

Corporate Web Facilitator

sandy.schimmel48@gmail.com

Admin

Merle Douglas

International Response Engineer

merle_douglas@hotmail.com

Admin

Estelle Ledner

Direct Operations Technician

estelle.ledner6@gmail.com

Viewer

Kay Sawayn

Direct Usability Developer

kay.sawayn@yahoo.com

Member

Josefina Considine

Product Research Executive

josefina_considine72@gmail.com

Viewer

Kasandra Schmitt-Swift

Corporate Quality Engineer

kasandra_schmitt-swift23@hotmail.com

Member

Ralph Fritsch

District Mobility Officer

ralph.fritsch53@hotmail.com

Viewer

Felicity Schumm

Chief Marketing Architect

felicity.schumm86@hotmail.com

Viewer

Harvey Robel

International Infrastructure Assistant

harvey.robel15@hotmail.com

Viewer

Horace VonRueden

Chief Directives Liaison

horace_vonrueden@hotmail.com

Member

Alexandrine Kshlerin

Senior Markets Architect

alexandrine_kshlerin@hotmail.com

Admin

Eli Wyman

Global Integration Developer

eli_wyman49@hotmail.com

Admin

Laverne Cole

National Assurance Agent

laverne.cole19@hotmail.com

Viewer

April Blick

Regional Usability Associate

april_blick53@yahoo.com

Viewer

Martha Kuhic

International Group Director

martha.kuhic93@hotmail.com

Admin

Fernando Trantow

Central Factors Representative

fernando.trantow77@gmail.com

Viewer

Derrick Kiehn

Central Optimization Engineer

derrick.kiehn@hotmail.com

Member

Dolly Turner

Human Applications Strategist

dolly_turner@gmail.com

Admin

Juana Nicolas

Customer Interactions Agent

juana_nicolas33@hotmail.com

Member

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
Shannon Hagenescyrus.jast@hotmail.comWest EmoryActive$221.02
Grady Vandervortmichael.cassin@yahoo.comReyesburghInactive$779.49
Christian Sauerkate.price@yahoo.comSofiahavenInactive$850.55
Adalberto Schmidtsigurd.larkin93@hotmail.comHesselportInactive$397.46
Alfred Millsernesto0@gmail.comWest JovannyInactive$419.76
Total$2,668.28

Basic table

Table with Images

NameEmailLocationStatusBalance
Alisha O'Kon Sr.
@christine99
lester_baumbach@hotmail.comKearachesterActive$558.00
Karla Hoppe
@amanda_funk67
julian.harvey5@yahoo.comTuscaloosaInactive$806.51
Meredith Jaskolski
@billy_oberbrunner
luis33@gmail.comRoanokeInactive$548.65
Jessie Beahan
@precious_hettinger
herminio_schmitt86@yahoo.comLittelburyActive$540.16
Carolanne Larkin-Adams
@charlene.macejkovic
edwin.grady81@yahoo.comNorth CydneyviewInactive$1,173.80

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Keara Mills PhDdelbert.kemmer@yahoo.comNorth StacyshireActive$34.93
Vivian Stantonkayla.mills46@hotmail.comNew SadietonActive$14.46
Ward Tremblaygeorge63@hotmail.comBeckerburghInactive$219.75
Sheldon Handlynn3@yahoo.comCobytownInactive$1,107.47
Silvia Schustertamara37@hotmail.comSouth MaegantownInactive$802.57
Total$2,179.18

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Thora Pacochakristopher10@yahoo.comLake SusanfurtInactive$1,113.83
Jon Cormiertyrone.moen68@yahoo.comEast ZakarysteadInactive$841.01
Vickie Hammesvincent.waelchi@gmail.comJacobsonmouthInactive$788.95
Alberto Schimmelmathew69@hotmail.comEsperanzaportActive$320.67
Miss Faith Rogahnmartin_hayes@hotmail.comEast LouveniastadInactive$184.86
Total$3,249.32

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Orville Bartellsheryl25@yahoo.comTallahasseeInactive$686.38
Dr. Adeline Gerholdmicheal_corwin@hotmail.comClarksvilleInactive$1,099.97
Karla Ritchie PhDcarlos_durgan8@yahoo.comYonkersActive$244.53
Jerald Gloverleonor_thompson@yahoo.comSouth HillardmouthActive$1,103.79
Gavin Boyergilda3@hotmail.comGuadalupetownActive$182.83
Total$3,317.50

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
Miss Angelina Morargiovanni_schultz47@gmail.comSouth CrystelActive$69.59
Mrs. Simeon Robelmercedes.funk@yahoo.comMontgomeryInactive$653.38
Judy Bruenalberta.lebsack47@gmail.comCasperfurtActive$677.33
Mikayla Brakuseileen.cormier53@gmail.comBrowncesterInactive$454.14
Lilly Gloversusanna_swaniawski@yahoo.comThompsonsteadInactive$512.54
Total$2,366.98

Table with row selection

Card Table

NameEmailLocationStatusBalance
Abraham West-Schustergayle.schumm@yahoo.comSwaniawskisteadInactive$54.54
Rolando Schoenmicheal53@yahoo.comSan JoseActive$1,035.16
Geoffrey Gutmannkimberly_kirlin@gmail.comNew DylanviewInactive$128.77
Nancy Goodwinellsworth99@hotmail.comStillwaterInactive$842.38
Amparo Torphaley.kuhlman-heathcote@hotmail.comKundefurtInactive$619.53
Total$2,680.38

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
Mr. Lorenzo Kutchalisha.maggio@hotmail.comMaudievilleInactive$418.66
Verna Brekketara73@gmail.comEast JamalboroActive$1,052.91
Miss Sherri Schulistemanuel.grady79@gmail.comNorth CandidoActive$831.81
Wilfred Thompsonkristie80@yahoo.comLake ChandlerburghActive$491.11
Mrs. Dana Weissnatastrid79@gmail.comDavisviewActive$370.12
Gladys Torpvirginia.schulist@hotmail.comWest OdaInactive$6.94
Dr. Allan Bailey DVMbrando_weimann6@yahoo.comGaithersburgInactive$572.30
Florence Kautzertracy20@hotmail.comLake GarnettInactive$916.49
Bertha Lindgrendomingo.brown@hotmail.comPort MadgeInactive$1,086.28
Erma Kutchmarcia14@hotmail.comLowellActive$840.37
Claudine Dickinsonidella_hauck@yahoo.comPort OrlandoInactive$1,170.00
Donald Schultzarne.schulist6@gmail.comSydnieburyActive$917.45
Glenn Halvorsontami7@hotmail.comHagenesworthInactive$193.22
Orie Feestadaline.dare@gmail.comNickolasfortInactive$558.79
Teri Jaskolskirene.mcglynn64@yahoo.comWalnut CreekActive$844.19
Total$10,270.64

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.