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$203.26
INV002PendingPayPal$530.49
INV003UnpaidPayPal$582.00
INV004PendingPayPal$138.79
INV005UnpaidBank Transfer$396.41
INV006PaidCredit Card$249.45
INV007UnpaidBank Transfer$378.69
Total$2,479.09

Simple

Users

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

NameTitleEmailRoleActions
Ivory PfefferNational Program Executiveivory.pfeffer@gmail.comAdmin
Meghan Bins-HowellCustomer Research Developermeghan_bins-howell43@hotmail.comMember
Alfonso FeestInvestor Markets Agentalfonso_feest@gmail.comMember
Bridgette StantonDynamic Communications Supervisorbridgette_stanton@hotmail.comViewer
Tod ColeDynamic Branding Architecttod_cole1@gmail.comViewer
Helen CassinLegacy Mobility Architecthelen.cassin@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Arnold Heathcote

Principal Program Supervisor

arnold.heathcote@hotmail.com

Member

Virginie Torphy

Central Functionality Associate

virginie_torphy@hotmail.com

Viewer

Lauryn Orn

Customer Interactions Agent

lauryn.orn10@yahoo.com

Viewer

Mossie Lebsack

Central Tactics Specialist

mossie_lebsack@hotmail.com

Member

Riley Champlin

Central Interactions Engineer

riley_champlin@gmail.com

Viewer

Pinkie Stiedemann

Central Quality Orchestrator

pinkie.stiedemann76@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Arturo Borer

Forward Functionality Officer

arturo_borer34@gmail.com

Member

Yasmine Reinger

Human Functionality Technician

yasmine.reinger@hotmail.com

Member

Richard Bartoletti

District Interactions Analyst

richard.bartoletti@yahoo.com

Admin

Ruthe Stoltenberg

Regional Optimization Representative

ruthe.stoltenberg@gmail.com

Viewer

Anika Boyle

Regional Program Planner

anika.boyle86@yahoo.com

Viewer

Scotty Hills

International Infrastructure Manager

scotty_hills@hotmail.com

Admin

Xzavier Yost

District Integration Orchestrator

xzavier.yost57@hotmail.com

Member

Mireya Spencer

International Data Director

mireya_spencer@yahoo.com

Admin

Rosemary DuBuque

Human Markets Strategist

rosemary.dubuque@yahoo.com

Member

Gwen Powlowski

Principal Brand Manager

gwen_powlowski@hotmail.com

Admin

Marta Cremin

Corporate Accountability Technician

marta.cremin@hotmail.com

Member

Justina McLaughlin

Lead Paradigm Agent

justina.mclaughlin82@yahoo.com

Member

Ross Kuhn

Investor Identity Designer

ross.kuhn78@hotmail.com

Viewer

Eli Mohr

Global Configuration Orchestrator

eli.mohr35@hotmail.com

Admin

Christ Spencer

Regional Communications Technician

christ.spencer@gmail.com

Member

Ronny Nader

Global Division Analyst

ronny.nader@gmail.com

Admin

Hattie Witting

Senior Division Associate

hattie_witting38@hotmail.com

Admin

Lenny Marquardt

Direct Assurance Facilitator

lenny.marquardt@gmail.com

Member

Gilbert Gerhold-Sawayn

Forward Configuration Associate

gilbert.gerhold-sawayn@gmail.com

Viewer

Stanley Kemmer

Chief Optimization Designer

stanley.kemmer@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
Stewart Kochjettie_littel85@hotmail.comNew MattviewInactive$197.15
Jean Whiteverona76@gmail.comHarveyfieldActive$460.74
Winston Rohananabel9@yahoo.comNew FeliciaActive$1,163.81
Jesse Leannononie_beer@hotmail.comDanasideActive$233.87
Lois Pollichamalia_harvey0@hotmail.comNorth FreddiestadInactive$907.56
Total$2,963.13

Basic table

Table with Images

NameEmailLocationStatusBalance
Laurence Weimann
@fred.bauch54
jacey.prohaska8@gmail.comEast DaniellemouthInactive$1,083.57
Pauline Kuhlman-Jenkins
@yesenia89
joyce98@hotmail.comPort TerenceActive$1,186.00
Phyllis Koepp
@cara69
arvel24@hotmail.comHiloActive$162.65
Virgil Grady
@marilie_quitzon
cornelius.blick-collier61@hotmail.comNew RochelleActive$124.37
Leah Lebsack
@jasmin_bartell43
vanessa38@yahoo.comHayleefurtInactive$31.65

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Edmond Strosinsonia.weimann7@hotmail.comMyleneboroughInactive$745.95
Phil Schinnermaximilian.christiansen@yahoo.comAtlantaActive$912.58
Phyllis Tillmanmaegan.ebert@gmail.comClarabellefieldActive$444.31
Ira Langosh-Hudsoncathy.durgan@yahoo.comFaesideInactive$711.93
Melanie Bashirianjameson_harvey@hotmail.comBraunportInactive$168.88
Total$2,983.65

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Miss Marjorie Bednar-Strosinverna.herman43@gmail.comKertzmannlandActive$568.27
Dr. Santiago Cronarafael.mosciski@gmail.comFort CristallandInactive$42.97
Marion Fritschjanie.wiegand3@gmail.comBartolettitonActive$128.04
Sidney Kuphallavinia_yundt64@gmail.comBernadineworthActive$72.87
Vicky Grimesjordi.swaniawski25@hotmail.comChristiantonInactive$240.56
Total$1,052.71

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ignacio Grimeseverardo_rogahn@yahoo.comPollichhavenActive$438.94
Jane Bashirianchance_emmerich73@hotmail.comNew WinnifredburghInactive$12.84
Roosevelt Mertzpattie23@hotmail.comKihnbergActive$1,066.88
Frederick Mayertgiuseppe68@yahoo.comPort CaliActive$591.75
Florence Stoltenbergcassandra.donnelly@yahoo.comLake AvafurtActive$215.66
Total$2,326.07

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
Janis Rosenbaum Inikko.cronin34@hotmail.comCamrynburyActive$256.39
Dr. Ruben Caspertara.koss@gmail.comEvelynmouthActive$1,026.78
Francisco Framiamara33@hotmail.comNew JeramyInactive$198.62
Isabel Smithamnoble77@gmail.comDaniellandInactive$527.84
Miss Joann Donnelly-Gibsontanner.baumbach@gmail.comOlsonfieldActive$1,118.61
Total$3,128.24

Table with row selection

Card Table

NameEmailLocationStatusBalance
Miss Marta Denesikevan.tillman6@yahoo.comPort JerelActive$661.19
Matthew Rennersammy45@hotmail.comSouth BenActive$545.28
Betsy Sporerelmer_kiehn@gmail.comWest ArnulfoInactive$895.43
Mr. Rene Herzogkylie4@gmail.comRicetownInactive$469.61
Clifton Watsicadeontae_corwin@yahoo.comSouth KhalilActive$603.45
Total$3,174.96

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
Julian Jaskolski-Kassulkesherwood12@hotmail.comAbbottvilleActive$665.53
Erica Wittingmariano.kuvalis55@gmail.comWest LitzyviewInactive$621.04
Erica Ritchiefrida_hayes66@hotmail.comLake DarronbergActive$120.60
Cedric Rempelbennie.nitzsche20@yahoo.comSan RamonActive$436.06
Angelica Willshanon.ankunding@yahoo.comYucaipaActive$976.27
Kenny Hoppemoshe.rau61@yahoo.comNew MisaelportInactive$61.10
Sophia Wardskylar_lemke33@yahoo.comTinley ParkInactive$1,126.30
Terry Donnellymarley.gibson@hotmail.comPort AntoinetteActive$79.18
Eugene Sanfordterrell_wyman@hotmail.comTuckahoeActive$137.01
Jose Hanseneinar97@yahoo.comLake WillismouthActive$15.65
Geoffrey Smithmallie.labadie@yahoo.comJacinthetownInactive$87.56
Jim Mullersedrick.ortiz@yahoo.comFort AdamtonInactive$283.11
Patty Macejkovicjamaal_robel88@gmail.comNew MichaleInactive$771.76
Marjorie Waelchibo.collins87@yahoo.comMilpitasActive$333.75
Geneva Halvorsonderick_davis@hotmail.comNew CordeliatonInactive$1,167.73
Total$6,882.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.