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
INV001PaidPayPal$292.79
INV002PendingPayPal$917.54
INV003PaidCredit Card$489.52
INV004PendingBank Transfer$974.92
INV005PendingCredit Card$972.54
INV006UnpaidBank Transfer$593.56
INV007UnpaidBank Transfer$749.79
Total$4,990.66

Simple

Users

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

NameTitleEmailRoleActions
Shannon MrazCentral Group Technicianshannon_mraz48@yahoo.comViewer
Hipolito RolfsonForward Usability Liaisonhipolito_rolfson60@gmail.comViewer
Kiana CarrollDistrict Directives Directorkiana.carroll@gmail.comAdmin
Conrad HesselNational Quality Facilitatorconrad_hessel28@gmail.comViewer
Guy Schamberger-DuBuqueCustomer Optimization Technicianguy_schamberger-dubuque3@yahoo.comAdmin
Madison BernhardHuman Optimization Orchestratormadison.bernhard46@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Green Hintz

Global Mobility Developer

green_hintz@gmail.com

Viewer

Zackery Mayer

District Identity Developer

zackery_mayer@gmail.com

Admin

Katharina Nicolas

Lead Communications Strategist

katharina_nicolas@hotmail.com

Member

Mercedes Lynch

Future Security Representative

mercedes_lynch92@gmail.com

Member

Mack Goldner

Chief Markets Executive

mack_goldner17@hotmail.com

Viewer

Ashlynn Davis

Chief Mobility Engineer

ashlynn.davis@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Loren Koelpin

Forward Communications Associate

loren_koelpin61@yahoo.com

Admin

Pasquale Sanford

Regional Implementation Director

pasquale.sanford17@yahoo.com

Admin

Jennifer Batz

Direct Implementation Representative

jennifer_batz33@yahoo.com

Viewer

Javier Franecki

Investor Usability Orchestrator

javier.franecki34@yahoo.com

Viewer

Brando Okuneva

Future Division Consultant

brando.okuneva11@yahoo.com

Viewer

Leah Johns

Legacy Quality Liaison

leah_johns49@hotmail.com

Viewer

Jean Rolfson

Dynamic Applications Designer

jean.rolfson21@hotmail.com

Viewer

Santiago Friesen

International Optimization Associate

santiago_friesen@yahoo.com

Admin

Guadalupe Baumbach

Corporate Configuration Associate

guadalupe_baumbach67@yahoo.com

Admin

Lindsay Watsica-Corkery

National Data Strategist

lindsay_watsica-corkery@yahoo.com

Viewer

Stacy Gerlach

Direct Operations Representative

stacy_gerlach62@hotmail.com

Viewer

Marlon Schinner

Global Infrastructure Representative

marlon_schinner89@gmail.com

Viewer

Margarete Schuppe

Chief Identity Technician

margarete.schuppe75@yahoo.com

Member

Bessie Walsh

Investor Accountability Officer

bessie_walsh81@gmail.com

Member

Alvah Adams

Investor Metrics Supervisor

alvah_adams@yahoo.com

Viewer

Moriah Morar

National Security Coordinator

moriah.morar95@gmail.com

Member

Gerardo Kihn

Senior Usability Coordinator

gerardo.kihn35@gmail.com

Member

Talon Kiehn

Lead Data Agent

talon_kiehn72@gmail.com

Member

Hugh Koch

Customer Accountability Director

hugh_koch@hotmail.com

Viewer

Eryn Green

Global Research Producer

eryn.green4@yahoo.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
Jesus Littlecelestine_champlin@hotmail.comNewport BeachInactive$646.04
Darin Russel IIIrico38@yahoo.comSouth VenacesterActive$179.93
Norma Waterskathryne53@yahoo.comLakelandActive$373.48
Lora Stiedemanntara86@hotmail.comVernaburyActive$607.13
Wyman Buckridgejonathan.stokes83@gmail.comJenningstownInactive$552.30
Total$2,358.88

Basic table

Table with Images

NameEmailLocationStatusBalance
Aurelio Hintz
@meredith.pfeffer3
catherine_crona-vonrueden79@yahoo.comWest CarterActive$569.64
Jesse Breitenberg
@brice83
van_kuvalis60@yahoo.comSanta AnaActive$230.79
Nellie Koss
@lamont.padberg-kohler98
marguerite.conn0@hotmail.comThe VillagesInactive$634.38
Agnes Cummerata
@wilbert1
kennedi97@gmail.comWest JaylenboroActive$729.90
Elvira Fritsch
@alexander17
gloria.pagac@hotmail.comPort ErnestoActive$1,047.30

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Teresa Kochvincenzo_lueilwitz58@gmail.comGrand JunctionActive$98.43
Reta Muller MDjohnnie_kling24@hotmail.comLedaportInactive$838.58
Arlene Mosciski-Kovacekpatti.medhurst@gmail.comEbertcesterInactive$1,080.19
Irving Larkinevan_crist@yahoo.comCristaltonInactive$1,060.15
Otilia Robertsdomenic43@yahoo.comEast VirginieActive$691.19
Total$3,768.54

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alfredo Barrowsmary.conn40@gmail.comReillyfortInactive$601.04
Nathan Sanfordalan.collier@gmail.comFort HenriInactive$1,198.80
Kayden Stammrachael_treutel3@hotmail.comNorth ArnoldInactive$241.34
Guadalupe Ortizlance.walker@hotmail.comCasimirchesterActive$889.43
Clay Funkrandy_purdy67@gmail.comNew RavenportActive$449.88
Total$3,380.49

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mrs. Myron Beerherbert.zemlak@hotmail.comEast ChelseyInactive$844.65
Miss Eliseo Bahringer MDeula.grimes-wehner73@gmail.comModestoInactive$22.98
Janie Mooremathew.lemke@hotmail.comHellerfurtInactive$1,028.44
Evelyn Moraralexandra_feil43@hotmail.comStamfordActive$845.59
Hardy Lubowitzimani_rodriguez@yahoo.comSouth LynnActive$592.02
Total$3,333.68

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
Rosa Weberelsie47@yahoo.comWintheiserworthActive$927.35
Jeremiah Osinski Sr.leo_treutel82@yahoo.comAufderharvilleInactive$58.09
Jenny Baumbachelliott.johnson@yahoo.comEast KurtisboroughActive$73.35
Lula Schneidermarta.powlowski70@hotmail.comSevernInactive$694.84
Wendell Armstronglambert.stiedemann95@yahoo.comWest KoreyActive$935.71
Total$2,689.34

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lilyan Millersophie86@gmail.comNolanviewActive$632.43
Columbus Hoppeangie.leannon31@yahoo.comWest JabariportActive$147.24
Roxanne Rempel DDSjo_kuhlman61@yahoo.comWoodburyActive$257.22
Alma Schambergeramos.hilpert37@gmail.comErdmanhavenActive$980.94
Anabelle Predovicgarett86@hotmail.comSouth CieloInactive$335.40
Total$2,353.23

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
Edwin Brekke MDshawn55@gmail.comKeaganburghActive$615.03
Issac Ullrichdayna.dicki@yahoo.comTrentsideActive$800.92
Randall Herzogsam_beahan@hotmail.comBel Air SouthInactive$883.49
Guillermo Langoshpearl_koss58@yahoo.comZiemannfurtActive$443.84
Vivian Schneidermodesta2@gmail.comDickensfurtActive$363.63
Jeanne Hahnbernadette.padberg@gmail.comPort ArthurActive$1,066.93
Nelson Welchlane.turner48@hotmail.comLake MonroeActive$799.50
Nat Hermistonmaxine2@yahoo.comWuckertstadInactive$327.53
Miracle D'Amoremike.kling-carter52@hotmail.comTamaracInactive$645.60
Avery Beahanoscar_leffler@hotmail.comAlfredaboroInactive$740.44
Abraham Bartellanthony.kreiger@hotmail.comNorth CamilleActive$488.67
Uriah Wilderman Sr.tom28@gmail.comPort GertrudeInactive$359.93
Helena Sipes Sr.joanna.champlin24@hotmail.comGrapevineInactive$1,167.85
Lesly Boylejeremy.orn77@hotmail.comWest LyricInactive$671.74
Tracy Schneider Iila_senger@hotmail.comWaipahuInactive$789.56
Total$10,164.66

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.