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$157.05
INV002PaidPayPal$517.95
INV003PendingCredit Card$310.96
INV004UnpaidPayPal$795.14
INV005PaidPayPal$407.99
INV006PendingCredit Card$383.49
INV007UnpaidPayPal$950.13
Total$3,522.71

Simple

Users

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

NameTitleEmailRoleActions
Arnulfo WilkinsonGlobal Integration Representativearnulfo_wilkinson@hotmail.comAdmin
Marlon Kub-KuhnInternational Paradigm Agentmarlon.kub-kuhn36@yahoo.comAdmin
Idell VonNational Quality Technicianidell_von24@yahoo.comAdmin
Rachel OkunevaHuman Division Managerrachel_okuneva@gmail.comViewer
Caterina RomagueraCorporate Data Officercaterina.romaguera@hotmail.comViewer
Raquel HeaneyForward Solutions Orchestratorraquel_heaney@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Haley Ledner

Regional Functionality Associate

haley_ledner@gmail.com

Viewer

Neha Klocko

Corporate Data Architect

neha_klocko35@hotmail.com

Member

Marjorie Klocko

Principal Applications Strategist

marjorie.klocko@yahoo.com

Member

Myron Reinger

Regional Web Orchestrator

myron.reinger6@yahoo.com

Viewer

Zachary Mills

National Directives Developer

zachary_mills@gmail.com

Viewer

Adam Mraz

Internal Marketing Coordinator

adam.mraz@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Carlos Volkman

Human Web Director

carlos.volkman77@yahoo.com

Member

Audreanne MacGyver

International Interactions Executive

audreanne.macgyver@yahoo.com

Member

Marielle Simonis

Legacy Applications Developer

marielle.simonis48@hotmail.com

Member

Marion Lueilwitz

Future Creative Orchestrator

marion.lueilwitz@yahoo.com

Member

Gina Bernier

Senior Brand Liaison

gina.bernier@yahoo.com

Admin

Maggie Renner

Global Response Manager

maggie.renner37@gmail.com

Admin

Daren Gerhold

Dynamic Factors Analyst

daren_gerhold@yahoo.com

Member

Elyssa Schulist

Principal Web Architect

elyssa_schulist73@hotmail.com

Viewer

Judith Romaguera

Customer Creative Orchestrator

judith.romaguera3@gmail.com

Admin

Jannie Heidenreich

Dynamic Operations Liaison

jannie.heidenreich48@yahoo.com

Member

Laury Krajcik

Global Implementation Engineer

laury_krajcik63@gmail.com

Member

Vivien O'Connell

Legacy Security Facilitator

vivien_oconnell@yahoo.com

Admin

Jeffrey Nikolaus

Future Data Strategist

jeffrey.nikolaus34@gmail.com

Viewer

Elizabeth Lebsack

National Implementation Director

elizabeth.lebsack@gmail.com

Admin

Edna Grant

Principal Infrastructure Consultant

edna.grant56@hotmail.com

Member

Sylvia Runolfsson

Investor Configuration Developer

sylvia_runolfsson@hotmail.com

Admin

Buford Watsica

International Accountability Executive

buford.watsica@gmail.com

Admin

Mary Yundt

International Brand Representative

mary_yundt@hotmail.com

Member

Johnnie Halvorson

Principal Program Agent

johnnie_halvorson@yahoo.com

Viewer

Adrain Mills

Customer Applications Liaison

adrain.mills62@yahoo.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
Ahmad Mooreearnestine_kihn67@hotmail.comPowayActive$68.87
Enoch Schneiderstuart_kuphal82@yahoo.comEncinitasInactive$790.06
Tara Ziemann PhDzander.braun@gmail.comAlbanyActive$1,113.25
Jorge Rennerdave.emmerich30@yahoo.comSouth IrvingshireInactive$602.02
Shelley Macejkovicleah.hayes@yahoo.comNorth MosesInactive$1,109.05
Total$3,683.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Randall Hessel
@florence_daniel
myra_windler75@gmail.comSanta RosaInactive$883.28
Kolby Koch
@debbie_fritsch
mitchell_hessel@gmail.comRosettastadInactive$582.96
Alan Lubowitz
@madelynn.donnelly
leland23@hotmail.comXavierfieldInactive$28.56
Elton Lindgren DDS
@mathew_king0
jodi_connelly@yahoo.comJohnstonvilleActive$964.77
Patience McGlynn
@erin_leuschke
sylvia.hudson@gmail.comLake EzequielfieldActive$347.77

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lawrence Konopelskiraymond.kuphal-daniel69@gmail.comEast ZitaInactive$1,065.95
Mariana Reynoldsmustafa94@yahoo.comLegrosworthInactive$808.30
Ms. Ervin Stokeskaley_paucek14@gmail.comParisiantonInactive$682.44
Bernardo Padberglucy_olson@gmail.comGerholdburghInactive$558.76
Martin Greentyler.gerlach41@yahoo.comMitchellfortInactive$427.52
Total$3,542.97

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Fermin Raujaime.rau10@hotmail.comLynchboroughInactive$199.67
Rolando McGlynnemilio8@yahoo.comFranciscaviewInactive$1,067.71
Dr. Mertie Kihnlewis15@hotmail.comSouth LayneshireActive$382.48
Kim Kuhicneha.haag@yahoo.comNew ColemanmouthInactive$325.39
Della Torpalfonso4@hotmail.comStamfordInactive$468.50
Total$2,443.75

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Alexzander Rennerroman43@yahoo.comSouth BaronActive$94.47
Arturo Faheyannie81@gmail.comNew DuaneActive$76.73
Lynette Kesslermaggie_mohr4@yahoo.comLittlevilleInactive$615.97
Dr. Dallas Cruickshankbillie17@yahoo.comErnieportActive$35.36
Mrs. Yolanda Stokeserica_torphy41@gmail.comFort MarcossideActive$210.55
Total$1,033.08

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
Ollie Dachjerod_kautzer@gmail.comSchmelersideInactive$423.64
Dr. Terrance Flatleypearlie_volkman22@hotmail.comLake AbelardoActive$131.90
Zion Goldnerpatricia.kuvalis52@hotmail.comAlvertabergActive$833.01
Kendra Kerlukeverner_senger69@hotmail.comSt. CloudActive$99.53
Tristian Kozeyhorace.kessler92@gmail.comEvertmouthActive$307.06
Total$1,795.14

Table with row selection

Card Table

NameEmailLocationStatusBalance
Brett Stammwilson36@yahoo.comBlue SpringsInactive$530.63
Maximilian Kleindianna_waters@yahoo.comWest NinaActive$951.82
Mrs. Hilda Sengeraryanna_denesik17@hotmail.comEast DavonInactive$1,048.08
Angelica Crooksroscoe.cummings88@yahoo.comJasenstadInactive$405.44
Aliya Adamssammy.dicki@gmail.comFort CurtisActive$292.57
Total$3,228.54

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
Bertha Boyerriley.schuppe14@hotmail.comFort OlivershireActive$952.17
Evelyn Pricebeth_langworth97@yahoo.comLake MelanytownInactive$566.56
Saul Beerlena71@hotmail.comSydniesteadActive$713.79
Mark McDermottmax_jenkins@yahoo.comNorth JohnnieviewInactive$936.24
Lelia Quitzonboyd.weber80@gmail.comPort ElnaActive$12.69
Terrill Lednersteven.batz@hotmail.comAriannahavenActive$999.20
William Reillytracy41@gmail.comSalemInactive$390.89
Dr. Wilford Townesalvatore_boyle@hotmail.comWest LanceboroActive$1,037.56
Clair Nikolaus IIIdenise.renner@hotmail.comGulgowskitonActive$920.81
Norman Weissnatcyril6@gmail.comWatersboroActive$581.83
Katrina Parisianerik47@hotmail.comAlysonworthActive$499.68
Maribel Dare-Dooleymaria_reichert@hotmail.comLake BethelActive$598.64
Mrs. Orrin Collieramanda_donnelly66@gmail.comNew EmmanuelleInactive$952.40
Major Lubowitzminnie94@hotmail.comMcCulloughboroughActive$375.60
Sheila Huelabraham.kemmer79@yahoo.comHoldenfortInactive$355.37
Total$9,893.43

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.