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
INV001UnpaidPayPal$885.58
INV002PendingBank Transfer$824.70
INV003UnpaidCredit Card$292.82
INV004PaidCredit Card$615.50
INV005PaidCredit Card$870.50
INV006PendingCredit Card$359.90
INV007PendingPayPal$112.22
Total$3,961.22

Simple

Users

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

NameTitleEmailRoleActions
Winnifred VandervortProduct Intranet Technicianwinnifred_vandervort76@yahoo.comMember
Darron QuigleySenior Metrics Specialistdarron_quigley@yahoo.comMember
Ezequiel MayerDynamic Communications Agentezequiel_mayer@hotmail.comViewer
Chaya BruenInternational Intranet Architectchaya.bruen8@hotmail.comViewer
Euna KlockoDynamic Configuration Engineereuna.klocko@hotmail.comViewer
Tessie HaleyDynamic Interactions Facilitatortessie_haley@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Emilio Walter

Global Intranet Director

emilio.walter7@yahoo.com

Viewer

Aliyah Huels

Lead Paradigm Coordinator

aliyah_huels@hotmail.com

Viewer

Princess White

Chief Data Producer

princess.white@hotmail.com

Viewer

Candace Schmeler

Future Tactics Designer

candace_schmeler3@gmail.com

Member

Moshe Hilpert

District Accountability Coordinator

moshe.hilpert@hotmail.com

Viewer

Alexandrine Douglas

District Operations Manager

alexandrine.douglas@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Berry Bartoletti

Internal Tactics Administrator

berry.bartoletti98@yahoo.com

Viewer

Donnell O'Reilly

Chief Implementation Producer

donnell_oreilly@gmail.com

Admin

Douglas Larson

Chief Creative Specialist

douglas_larson7@gmail.com

Viewer

Julie Nienow

Global Quality Manager

julie.nienow@hotmail.com

Member

Eric Schamberger

Legacy Branding Coordinator

eric_schamberger75@yahoo.com

Viewer

Matteo Gleason

Regional Data Coordinator

matteo.gleason53@gmail.com

Member

Ewell Crist

Forward Accounts Analyst

ewell.crist81@hotmail.com

Viewer

Rylee Koepp

Dynamic Functionality Representative

rylee.koepp94@yahoo.com

Member

Ari Dare

National Quality Orchestrator

ari.dare@yahoo.com

Member

Ahmed West

Internal Implementation Manager

ahmed.west89@yahoo.com

Admin

Geovany Hegmann

Human Implementation Assistant

geovany_hegmann28@hotmail.com

Admin

Zoe Kunze

Central Integration Designer

zoe_kunze@yahoo.com

Member

Jordy Dach

District Brand Supervisor

jordy_dach@hotmail.com

Member

Kali Wilderman

Senior Interactions Engineer

kali.wilderman99@gmail.com

Admin

Tessie Ledner

Regional Response Representative

tessie_ledner55@yahoo.com

Member

Berry Schumm

Investor Web Administrator

berry_schumm4@hotmail.com

Viewer

Katharina Prohaska

Direct Tactics Orchestrator

katharina.prohaska77@yahoo.com

Viewer

Luna Barton

Product Response Officer

luna_barton4@gmail.com

Admin

Weldon Mayert

Legacy Interactions Designer

weldon.mayert@gmail.com

Admin

Astrid Spencer

Investor Operations Supervisor

astrid.spencer44@gmail.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
Miss Faith Abernathyruss.krajcik76@gmail.comMaratonActive$169.04
Wilson Graham DDSkevon.bednar68@hotmail.comDecaturActive$175.96
Shirley Hoegermaureen.boyer77@yahoo.comLake LuraburghInactive$323.46
Andy Ritchieamina_weber@yahoo.comFederal WayInactive$155.73
Jim Cummingsemelie47@gmail.comGeraldvilleActive$414.29
Total$1,238.48

Basic table

Table with Images

NameEmailLocationStatusBalance
Susan Sanford
@juliana.kihn77
dayna_walter58@gmail.comPort RoelstadActive$677.60
Lindsay Powlowski
@brenden0
maida.stiedemann22@yahoo.comPort ColtonInactive$587.74
Ernest Kemmer
@filomena.mosciski
isabell.brekke23@hotmail.comWest LarissaActive$258.62
Clarence Russel
@mylene.bernier18
reynold27@gmail.comHarrisburgActive$386.78
Traci Heaney V
@rigoberto13
lenora.durgan@hotmail.comLake CarletonInactive$678.36

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Robyn Kubgino.oberbrunner86@gmail.comLake HaleyActive$255.24
Dr. Katrina Kreigeralvis.beer@gmail.comNorth PortActive$639.44
Marco Schuppebrycen_lockman31@yahoo.comHighlandActive$449.25
Ms. Sabrina Kohler DVMgilbert89@gmail.comBinstonActive$951.77
Catherine Moen IIIjillian49@hotmail.comBradtkeportActive$789.39
Total$3,085.09

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Norman O'Konheaven45@hotmail.comFort MarioActive$793.07
Natasha Hermannkaelyn11@hotmail.comPetalumaActive$634.10
Lucille Gusikowskiannetta30@yahoo.comOxnardInactive$471.03
Alex Turcottenorene.predovic@hotmail.comClaudsteadInactive$1,113.80
Tomas Keeblerpietro71@gmail.comNorth EmilActive$120.40
Total$3,132.40

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brandon Wisozkwarren25@yahoo.comVancouverActive$66.53
Abraham Kuhicjacques_waelchi15@hotmail.comHowebergActive$1,174.99
Lynn Goodwinnorval7@yahoo.comNorth MafaldafurtInactive$1,014.48
Domingo Predovickarlie_mcdermott@gmail.comPort ElianeInactive$1,183.95
Nicolas Hermanjermain13@yahoo.comPort HelenaActive$973.83
Total$4,413.78

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
Maria Vandervort IImichale27@gmail.comLake GerardoActive$693.11
Shaun Marksleilani.wisozk55@hotmail.comSouth WinstonActive$399.02
Hector Greensalvador59@hotmail.comMoisesportInactive$599.29
Constance Flatleycarlee62@hotmail.comKulasportActive$387.12
Brett Lebsackisaac_roob@gmail.comKannapolisInactive$847.93
Total$2,926.47

Table with row selection

Card Table

NameEmailLocationStatusBalance
Armando Flatleybrenna_doyle@gmail.comNew IsaacInactive$157.97
Marc Considinehanna11@yahoo.comEast BentonmouthActive$1,046.01
Tyrone Franecki-Harriseloisa25@yahoo.comGuaynaboInactive$263.71
Darrin DuBuqueroel_pfannerstill@yahoo.comLubowitzmouthActive$906.59
Martha Ullrichkurtis.lemke-kutch20@hotmail.comSouth WillowActive$115.19
Total$2,489.47

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
Julia Pfefferahmed_murray@gmail.comYorkInactive$362.95
Yvette Dooleyrebeka_parisian@yahoo.comFort MarciaInactive$284.14
Lowell Mullerjohnpaul.paucek@gmail.comNew BridgettestadActive$658.89
Felicia Wiegandnorris_white53@yahoo.comHonoluluActive$1,010.59
Joseph Shanahanbrenden54@hotmail.comWaterslandInactive$182.45
Frances Mosciskilexi38@gmail.comLake HaskellcesterActive$934.84
Don Marvinquinn_dooley15@hotmail.comMacon-Bibb CountyInactive$1,108.98
Elijah Auer IIIjose.marks@gmail.comSouth IdaInactive$1,190.94
Kelli Rutherfordorlo_auer@hotmail.comEast AddiestadActive$889.50
Raymond Kemmercatalina75@gmail.comHaltom CityInactive$694.34
Daniel Rueckerkelley_monahan@yahoo.comNitzschefieldInactive$741.87
Ernesto Quitzonlacy_jacobson45@hotmail.comNorth AbagailmouthInactive$1,152.41
Robin Dickinsonjazlyn83@gmail.comWindlercesterActive$1,066.96
Rolando Ullrichteagan.swift86@yahoo.comHoegershireActive$525.90
Gina Jacobirickey.jast37@hotmail.comKiehnfortActive$373.58
Total$11,178.34

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.