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$329.60
INV002UnpaidPayPal$663.11
INV003PaidPayPal$152.42
INV004UnpaidPayPal$992.40
INV005PendingPayPal$800.54
INV006UnpaidBank Transfer$909.73
INV007PendingPayPal$490.70
Total$4,338.50

Simple

Users

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

NameTitleEmailRoleActions
Nellie StromanRegional Solutions Directornellie.stroman@yahoo.comMember
Immanuel ThompsonDynamic Configuration Consultantimmanuel.thompson@hotmail.comAdmin
Arjun ZulaufForward Configuration Administratorarjun.zulauf@hotmail.comAdmin
Shad D'AmoreGlobal Solutions Analystshad_damore82@hotmail.comMember
Francesca HintzNational Interactions Agentfrancesca_hintz16@yahoo.comViewer
Layla Greenfelder-SchuppeRegional Directives Agentlayla_greenfelder-schuppe@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Alfredo Simonis

Legacy Intranet Specialist

alfredo_simonis@gmail.com

Viewer

Sabryna Jones

Chief Metrics Representative

sabryna_jones@gmail.com

Member

Lupe Denesik

Regional Directives Liaison

lupe.denesik26@yahoo.com

Viewer

Bella Howell

Dynamic Group Engineer

bella.howell@gmail.com

Viewer

Brice McLaughlin

National Functionality Executive

brice.mclaughlin7@yahoo.com

Viewer

Chadrick Bosco

Direct Intranet Liaison

chadrick_bosco58@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Keyon Hoeger

Investor Group Architect

keyon.hoeger79@gmail.com

Member

Dell Wehner

Direct Group Specialist

dell.wehner44@yahoo.com

Member

Kraig Bailey

Future Identity Supervisor

kraig.bailey23@hotmail.com

Viewer

Jackeline Watsica

Forward Markets Planner

jackeline_watsica@gmail.com

Admin

Cayla Altenwerth

Senior Tactics Coordinator

cayla_altenwerth14@hotmail.com

Member

Mario O'Reilly

Internal Functionality Director

mario_oreilly@gmail.com

Admin

Blake Olson

Future Paradigm Assistant

blake_olson@gmail.com

Member

Loma Pfannerstill

Customer Integration Analyst

loma.pfannerstill62@yahoo.com

Viewer

Russ White

Human Optimization Administrator

russ.white@yahoo.com

Member

Brittany Mann

Senior Infrastructure Developer

brittany_mann@gmail.com

Member

Lillian Nicolas

Senior Division Assistant

lillian_nicolas@hotmail.com

Member

Kody Homenick

Dynamic Configuration Consultant

kody_homenick59@yahoo.com

Viewer

Maverick Gleichner

District Implementation Facilitator

maverick_gleichner6@yahoo.com

Member

Lela Skiles

Legacy Paradigm Planner

lela_skiles28@gmail.com

Viewer

Louisa Barrows

Central Operations Administrator

louisa_barrows@gmail.com

Member

Janessa Beier-Stehr

Investor Interactions Producer

janessa_beier-stehr23@hotmail.com

Admin

Nannie Wolf

Central Intranet Assistant

nannie_wolf@hotmail.com

Viewer

Ashlynn Runolfsdottir

Internal Operations Liaison

ashlynn_runolfsdottir31@gmail.com

Member

Immanuel Haley

Investor Communications Facilitator

immanuel.haley3@hotmail.com

Admin

Kathleen Parisian

International Metrics Agent

kathleen.parisian@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
Mr. Travis Lefflergloria30@yahoo.comNew CeceliabergActive$838.17
Pat Hudson-Labadieanthony_robel57@gmail.comDannychesterInactive$688.91
Ethel Reillyarlie82@gmail.comStokesboroActive$1,048.18
Jimmy Roberts DVMalyce49@yahoo.comEast MaryjaneInactive$385.83
Clayton Wehnerroderick_stokes@hotmail.comBettieboroActive$307.98
Total$3,269.07

Basic table

Table with Images

NameEmailLocationStatusBalance
Terry Heidenreich
@dustin_harber0
billie73@gmail.comWilkinsonworthInactive$753.38
Valerie Bayer
@german80
blair84@yahoo.comHubertmouthActive$760.40
Domingo Emmerich
@larue75
shanny.fisher43@gmail.comSouth DanielleInactive$712.39
Maxine Miller
@delia_flatley
angelica_shields86@gmail.comSouth EmeliaActive$799.72
Jan Emmerich
@jalen_dietrich19
camilla.lakin73@yahoo.comKailynstadInactive$1,150.15

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Krystal Cormiermarilou_homenick37@gmail.comWest NicklausmouthActive$73.62
Steve Heaneydesmond_wintheiser73@yahoo.comSilasboroInactive$154.24
Lorene Schummsantos.moore-torp36@gmail.comLake DeanActive$1,038.22
Erma Rippinlibby.reynolds23@hotmail.comConroeActive$610.42
Jessica Smithadolphus.gutmann80@hotmail.comHayleyburghActive$269.38
Total$2,145.88

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Matt Kingbrown.wolf@hotmail.comPompano BeachInactive$890.51
Diana Buckridgekeyon.walsh@gmail.comGaylechesterActive$742.56
Angelica Mertzjonathan80@yahoo.comWillardchesterInactive$747.89
Willard Kautzermariah_bernhard-medhurst@gmail.comNorth JavonteActive$1,152.91
Genevieve Erdmanaglae_nitzsche@hotmail.comEast GloriaInactive$832.13
Total$4,366.00

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dominick Mohranjali97@yahoo.comIowa CityInactive$855.75
Elmer Kemmeralyson.wiza30@hotmail.comEl Dorado HillsActive$592.51
Andrea Grahamtanya52@yahoo.comRivertonActive$238.65
Marion Gutmannenrico.erdman@gmail.comCollierstadActive$859.33
Evelyn Bartellmonty_dach6@gmail.comArmandmouthInactive$217.08
Total$2,763.32

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. Clifford Marvinantone_thiel@hotmail.comKundeportActive$445.76
Emanuel Hegmannprudence.stokes@hotmail.comLowellviewInactive$333.52
Emilio Goldnerjosephine15@yahoo.comWest MossieActive$612.89
Krystal Kautzerdorcas2@hotmail.comSouth AlberthaActive$318.98
Alton Reillyelvie79@yahoo.comPort RosaleeboroInactive$257.55
Total$1,968.70

Table with row selection

Card Table

NameEmailLocationStatusBalance
Hugo Gutkowskiassunta_rempel8@gmail.comNew SilashavenActive$378.89
Claudia Schaefermckayla.kohler@gmail.comMelisaburyActive$780.58
Nellie Rodriguez Jr.kendall_bogisich@gmail.comSchmelerviewInactive$640.78
Rick Ernser IVmina.gorczany@yahoo.comKathrynstadActive$821.11
Olivia Barrowsirma73@yahoo.comOsbaldotownActive$211.52
Total$2,832.88

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
Javier Koelpincolt_howe@yahoo.comReggietonInactive$850.32
Woodrow Fisherdemond_abernathy@yahoo.comLake TrevionsideInactive$563.83
Andres Bogangregoria_jacobi-corwin27@gmail.comHaverhillActive$956.32
Lula Simonistheodora.murray@gmail.comNew JarodfurtActive$939.05
Francisco Schusterelecta55@hotmail.comKadelandActive$533.08
Myron Smithamjaquelin.stoltenberg@yahoo.comLake ErnaActive$224.62
Jamie Wintheiser-Balistreriernie.waters-kreiger@hotmail.comDaxchesterInactive$1,191.18
Viola O'Reillyherminio93@gmail.comNew PeterActive$663.08
Karla Franeycristina_lesch49@hotmail.comRosenbaumbergActive$791.56
Eugene Gloverlisette_pfeffer79@hotmail.comMiavilleActive$327.43
Dr. Matthew Kuvaliseaster_breitenberg@yahoo.comJeniferfurtInactive$882.82
Lynn Schumm Sr.isaac1@gmail.comTheronmouthInactive$623.85
Nicholas Thompsonjanie.schroeder@yahoo.comSouth MayboroActive$1,066.89
Miss Martha Hermann-Kunzerosalyn46@gmail.comBoscofortInactive$1,172.94
Alexander Considine IImaryjane.wolf55@yahoo.comNew RaphaeltonActive$937.66
Total$11,724.63

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.