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$327.51
INV002UnpaidPayPal$681.23
INV003PendingCredit Card$258.18
INV004PendingPayPal$710.81
INV005UnpaidBank Transfer$219.82
INV006PendingCredit Card$181.64
INV007UnpaidCredit Card$628.96
Total$3,008.15

Simple

Users

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

NameTitleEmailRoleActions
Stanford KemmerGlobal Optimization Supervisorstanford_kemmer@hotmail.comAdmin
Ellis ZulaufForward Marketing Supervisorellis.zulauf8@gmail.comAdmin
Mia KlingHuman Communications Facilitatormia_kling@hotmail.comViewer
Alexandre PollichGlobal Intranet Facilitatoralexandre.pollich27@gmail.comMember
Amani DickensRegional Tactics Associateamani_dickens@hotmail.comAdmin
Elian RodriguezChief Functionality Designerelian.rodriguez@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jasen Lakin

International Assurance Executive

jasen_lakin36@yahoo.com

Viewer

Wilfrid Wehner

Chief Research Supervisor

wilfrid.wehner13@hotmail.com

Viewer

Micaela Erdman

Senior Branding Facilitator

micaela_erdman@yahoo.com

Admin

Arlo Mante

Customer Quality Coordinator

arlo.mante39@yahoo.com

Admin

Rose Schamberger

Global Accountability Consultant

rose_schamberger@yahoo.com

Admin

Louie Koch

International Response Designer

louie_koch@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Augusta Bosco

Senior Creative Manager

augusta_bosco36@yahoo.com

Admin

Fidel Paucek

Customer Directives Consultant

fidel.paucek@gmail.com

Member

Cordelia Abbott-Douglas

Legacy Applications Engineer

cordelia.abbott-douglas@gmail.com

Admin

Maximo Doyle

Legacy Quality Producer

maximo_doyle50@gmail.com

Admin

Loma Kozey

Chief Applications Specialist

loma_kozey@gmail.com

Member

Garry Abbott

Future Usability Manager

garry.abbott91@yahoo.com

Member

Gus Emard

Investor Implementation Executive

gus_emard37@yahoo.com

Admin

Benton Abernathy

National Quality Director

benton.abernathy@yahoo.com

Admin

Norbert Wilderman

Dynamic Paradigm Executive

norbert_wilderman98@yahoo.com

Member

Jaycee Ernser

Future Operations Analyst

jaycee.ernser@hotmail.com

Viewer

Jeramy Cummings

Senior Factors Associate

jeramy.cummings@gmail.com

Member

Bethany Lynch

Principal Factors Officer

bethany.lynch@hotmail.com

Admin

Weldon Stoltenberg

Principal Response Technician

weldon.stoltenberg@hotmail.com

Viewer

Isadore King

Dynamic Integration Strategist

isadore_king@gmail.com

Admin

Joe Bins

Central Branding Assistant

joe.bins86@yahoo.com

Admin

June Crist

Legacy Assurance Agent

june.crist31@hotmail.com

Viewer

Desiree Hagenes

Direct Program Facilitator

desiree.hagenes@hotmail.com

Admin

Kevon Hermiston

Forward Communications Liaison

kevon.hermiston52@hotmail.com

Admin

Earlene Lindgren

District Program Technician

earlene.lindgren57@hotmail.com

Member

Rollin Armstrong

Senior Infrastructure Technician

rollin_armstrong@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
Melanie Franeyalexys_denesik22@gmail.comLake JohnniefieldInactive$1,094.84
Jacquelyn Bechtelarmarques.cremin-dare@yahoo.comLake DixiecesterInactive$322.03
Paula Skilesduncan99@hotmail.comAdalbertoportActive$612.56
Sidney Stromanbraxton_mckenzie21@gmail.comWest CandicefortInactive$766.32
Olivia Kuvalisjudson.powlowski@hotmail.comIrvineActive$389.78
Total$3,185.53

Basic table

Table with Images

NameEmailLocationStatusBalance
Jodi Weber Sr.
@telly73
michelle_klein@gmail.comColorado SpringsInactive$698.01
Sammy Feest DDS
@coby_mccullough
erik.rice76@hotmail.comAishamouthInactive$225.39
Rick Purdy Jr.
@ilene.trantow
ozella29@hotmail.comSouth NolanInactive$590.67
Ed Runolfsson
@santiago.mosciski-feeney1
joaquin.hirthe97@gmail.comPort AlexanderInactive$913.56
Cody Wilkinson
@loy77
kathryn_johnston@yahoo.comMckenzielandInactive$380.40

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Tracey Ziemeariane_bartell0@hotmail.comSalinasActive$386.03
Freda Kuphalchristop_abernathy98@gmail.comNoblevilleInactive$914.00
Guadalupe Kossdestiny.breitenberg@gmail.comZiemestadInactive$794.55
Courtney Windlerpalma_roberts97@hotmail.comNorth AdalbertovilleActive$1,122.47
Dr. Ronnie Torpcatharine.goyette76@hotmail.comHillstonInactive$175.88
Total$3,392.93

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Garrett Kemmermikayla_kreiger40@hotmail.comFort MaddisonInactive$1,058.62
Kristie Jerde DVMlucienne.langosh-reichert@gmail.comFort EmeliaActive$535.80
Glen Hagenesbrianne_romaguera23@yahoo.comMarinaboroughInactive$622.61
Al Hermanmercedes_schiller16@hotmail.comSan AngeloInactive$1,107.59
Gilbert Kuhlman Jr.ephraim_davis@gmail.comWest TristiansideActive$306.25
Total$3,630.87

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jamie Koch IVclarissa_armstrong34@hotmail.comMarcelolandActive$602.12
Melvin Beattyrafael13@gmail.comWest LeonorInactive$971.78
Marta Beckerjacey_homenick83@yahoo.comSouth PresleytownActive$1,095.51
Oscar Satterfield PhDaudreanne_bahringer36@gmail.comIcieviewActive$1,041.34
Felix Hoppeabigail_daniel@gmail.comGoyettefortActive$930.82
Total$4,641.57

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
Mr. Ben Bergstrommelvin.macgyver81@yahoo.comEast JasperActive$809.66
Jo Feestdashawn.batz16@yahoo.comHettingersteadInactive$730.40
Wilfred Balistrerierica.gibson23@gmail.comElijahburyActive$762.84
Jamie Swaniawskigennaro_carroll@gmail.comKochsteadActive$1,068.23
Lois Westteagan.cremin69@hotmail.comStillwaterInactive$577.77
Total$3,948.90

Table with row selection

Card Table

NameEmailLocationStatusBalance
Charles Creminkaley.hand@hotmail.comRatkeworthInactive$995.95
Malcolm Bradtkealison.damore14@hotmail.comCurtissteadInactive$682.23
Jean Auerlucie_koch@hotmail.comWest DamionbergInactive$124.69
Carrie Lakin-Bartonsanta81@gmail.comWuckertsteadActive$901.53
Annie Gloverleon_roob@yahoo.comEast JadenActive$242.19
Total$2,946.59

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
Leah Prosaccocornelius4@hotmail.comSouth DarianasideActive$1,062.42
Justin Dare Vesteban.nader68@hotmail.comMcLaughlinviewInactive$1,007.45
Marcos O'Reillyabdullah40@hotmail.comNoviInactive$315.92
Frances Spenceradan91@hotmail.comLake AbdullahActive$1,054.23
Earl Schadenolen.medhurst41@hotmail.comEast IgnatiusboroughActive$1,128.28
Hattie Leannonali.rohan47@hotmail.comPalm DesertActive$20.47
Miranda Herzogkenna_kozey-kohler36@yahoo.comBristolActive$930.06
Dr. Myra Hermanamanda70@hotmail.comLake DevinInactive$94.24
Terry Grimesflorian8@yahoo.comPort LisaworthActive$552.27
Wilson Dickensgunnar_lueilwitz52@hotmail.comEast ShyannActive$547.86
Rodolfo Hillsaditya7@gmail.comNorth KristinaActive$854.65
Kara Abbottangus.durgan82@gmail.comDes MoinesInactive$727.14
Claude Nitzschekip_runte9@gmail.comTorpfortInactive$367.39
Dr. Simon Croninrasheed.jacobi29@yahoo.comPassaicInactive$1,032.41
Kelli Dietricholiver_mcglynn@yahoo.comUplandActive$900.08
Total$10,594.87

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.