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
INV001PendingCredit Card$794.41
INV002PendingBank Transfer$255.19
INV003PendingBank Transfer$973.09
INV004UnpaidPayPal$123.10
INV005PendingBank Transfer$982.69
INV006UnpaidCredit Card$669.30
INV007PendingBank Transfer$169.69
Total$3,967.47

Simple

Users

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

NameTitleEmailRoleActions
Al BaileyNational Research Analystal_bailey@gmail.comViewer
Brad HegmannSenior Division Officerbrad.hegmann13@hotmail.comViewer
Carl KlockoDynamic Solutions Directorcarl.klocko@hotmail.comAdmin
Benjamin BlandaProduct Configuration Strategistbenjamin.blanda@hotmail.comMember
Freddie KesslerInvestor Metrics Plannerfreddie.kessler@yahoo.comAdmin
Talon BaileyCorporate Research Developertalon_bailey37@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Tamia Price

Human Security Representative

tamia.price@yahoo.com

Admin

Gertrude Fisher

Regional Division Manager

gertrude.fisher@gmail.com

Member

Kendrick Kertzmann

Customer Web Engineer

kendrick.kertzmann@gmail.com

Member

Cecilia Willms

Regional Implementation Administrator

cecilia.willms@gmail.com

Member

Adolphus Stiedemann

Principal Identity Officer

adolphus_stiedemann@hotmail.com

Admin

Christopher Volkman

Forward Functionality Officer

christopher_volkman59@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Matilde Lemke

Central Program Technician

matilde.lemke6@hotmail.com

Member

Eva Feeney

District Functionality Consultant

eva_feeney66@yahoo.com

Admin

August Homenick

Human Web Architect

august_homenick@gmail.com

Viewer

Gilda Prohaska

National Web Orchestrator

gilda.prohaska14@yahoo.com

Member

Hailey Keebler-Heidenreich

Product Usability Architect

hailey.keebler-heidenreich80@gmail.com

Member

Greg Ritchie

Dynamic Operations Supervisor

greg_ritchie88@gmail.com

Admin

Gerardo Shanahan

Direct Creative Associate

gerardo_shanahan@gmail.com

Member

Mason D'Amore

Chief Markets Facilitator

mason_damore@gmail.com

Member

Elizabeth Parker

Human Creative Producer

elizabeth.parker50@hotmail.com

Member

Cody Kerluke

Principal Accounts Consultant

cody_kerluke86@hotmail.com

Viewer

Garett Bernhard

International Paradigm Associate

garett.bernhard84@gmail.com

Admin

Chaz Lockman

Chief Optimization Manager

chaz_lockman@yahoo.com

Viewer

Noelia Schmidt

Senior Security Technician

noelia_schmidt79@hotmail.com

Member

Betsy Boyle

Central Paradigm Producer

betsy_boyle@gmail.com

Admin

Martha Lynch

Chief Accounts Architect

martha_lynch81@yahoo.com

Viewer

Alexander Grant

Corporate Branding Technician

alexander.grant43@hotmail.com

Viewer

Winston Walsh

Internal Infrastructure Liaison

winston_walsh@yahoo.com

Viewer

Leona Connelly

Dynamic Brand Technician

leona.connelly@yahoo.com

Viewer

Preston Howell

Legacy Creative Engineer

preston_howell@yahoo.com

Viewer

Olin Will

Legacy Integration Designer

olin.will@yahoo.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
Deborah Beerkelvin41@gmail.comLehigh AcresActive$187.32
Ms. Ryan Strosin Jr.alvis_hyatt@yahoo.comEast EstrellaviewActive$846.10
Newton Swiftalberta73@gmail.comNew RochelleActive$1,044.06
Wm Kling DDSkenny_harber@hotmail.comFort KaleyInactive$591.99
Renee Reynoldsgretchen.cartwright97@gmail.comEast OrloActive$759.45
Total$3,428.92

Basic table

Table with Images

NameEmailLocationStatusBalance
Ana Schmeler
@shana65
immanuel_cassin0@yahoo.comWest ReubenburghInactive$1,179.68
Tre Price
@judith_lemke86
timothy35@hotmail.comEdenshireInactive$143.43
Karianne Larkin
@vincent_heidenreich
clay.bernier@gmail.comGoldenlandInactive$169.06
Leonora Funk
@cecelia.morar22
katrine.nicolas@hotmail.comChapel HillActive$1,036.40
Franklin Vandervort
@luigi.boyle
jeffrey_abbott32@hotmail.comFadelstadInactive$1,011.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jaime Goyette IIchet_considine@yahoo.comBrayanlandActive$860.73
Xander Emmerichsam90@gmail.comDominiclandActive$139.93
Miss Luz D'Amorekayla35@yahoo.comFort QueenviewInactive$631.29
Mr. Alize Wardamy86@yahoo.comHaverhillInactive$1,036.19
Dr. Cedric Hillsjim28@yahoo.comLake LaverneActive$442.73
Total$3,110.87

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Merl Bergstromtodd94@hotmail.comSan DiegoActive$426.25
Alexandro Wilkinson IIphillip_ledner@hotmail.comFisherviewActive$543.31
Ubaldo Beahannikolas44@gmail.comCarminestadInactive$633.74
Archie Dachayana.turcotte@hotmail.comBryanActive$928.67
Mrs. Fannie Heathcotejodi20@hotmail.comWolfportInactive$1,125.92
Total$3,657.89

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dominick Emmerich DDSviva_goodwin@gmail.comFlorissantInactive$14.30
Emmett Oberbrunnertaylor.smith@yahoo.comSpinkavilleActive$1,119.80
Adrian Schneiderdale_pouros@hotmail.comWest AdrianacesterActive$1,181.80
Dr. Kevon Greenfelderluigi_carter@gmail.comMullerburghInactive$954.37
Audrey Bartoletticora.labadie59@hotmail.comLake DaxActive$280.06
Total$3,550.33

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
Teri Danielkatrina54@yahoo.comNorth ChanelActive$910.81
Dr. Loren Murazikjune.gutmann@yahoo.comKannapolisInactive$346.79
Gabriella Heaneyroscoe_marvin22@yahoo.comHarleysteadInactive$206.06
Lamar Pfannerstillkay59@hotmail.comFort RudolphInactive$1,061.60
Lula Daniel Sr.drew.murazik3@hotmail.comPort TyreekInactive$217.24
Total$2,742.50

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ricky Murphy PhDtheodore.murphy@hotmail.comNorth JamaalchesterActive$891.32
Malinda Jacobsbryan_sauer26@hotmail.comFort BradtonActive$957.85
Lester Considinejennie66@hotmail.comImafortInactive$815.55
Dr. Irwin D'Amoremattie_bradtke@gmail.comConsidinesteadInactive$351.85
Agnes Kunzeallison31@hotmail.comNorth MargaritamouthInactive$316.08
Total$3,332.65

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
Clifton Handbrittany_friesen15@gmail.comAbdielhavenActive$354.22
Declan Schulistcoty2@yahoo.comCheyenneActive$322.32
Rebeka Rowe MDsadie.gusikowski@gmail.comPort BrittanyInactive$544.59
Rodolfo Hansen PhDwendell66@yahoo.comWilberfortInactive$430.40
Ms. Ashley Schmelermelinda.hudson60@gmail.comReichelburghActive$5.44
Miss Dominic Robertselbert82@gmail.comBrennancesterActive$872.15
Sylvester Breitenberglewis_ortiz93@hotmail.comYvonnestadInactive$500.89
Beatrice Maggiomarisa98@yahoo.comEast GladycechesterActive$427.39
Deborah Cassinnoah29@yahoo.comFort ArmandActive$7.85
Gerardo Corkeryanita11@hotmail.comDecaturInactive$434.41
Leona Brown-Pacochascott.lebsack@yahoo.comIdellatownInactive$146.11
Melissa Schimmelharvey_muller@hotmail.comKilbackboroActive$399.96
Morris Kihncoty.macgyver25@gmail.comDeborahportActive$977.29
Greyson Hansenalberto_wisozk13@yahoo.comFishersInactive$877.36
Mr. Keyon Streichelfrieda18@yahoo.comLucilechesterActive$897.89
Total$7,198.27

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.