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$330.93
INV002UnpaidBank Transfer$352.74
INV003PendingPayPal$651.14
INV004PaidBank Transfer$621.18
INV005PaidBank Transfer$618.11
INV006PaidPayPal$960.31
INV007UnpaidCredit Card$471.86
Total$4,006.27

Simple

Users

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

NameTitleEmailRoleActions
Mertie FadelChief Applications Orchestratormertie.fadel31@hotmail.comAdmin
Weston HuelsChief Division Directorweston.huels59@yahoo.comMember
Fae GutkowskiLegacy Marketing Associatefae_gutkowski@gmail.comViewer
Yvonne KunzeInvestor Solutions Engineeryvonne.kunze8@hotmail.comViewer
Maurine BartellDirect Infrastructure Supervisormaurine.bartell@hotmail.comMember
Adelia HackettInvestor Applications Produceradelia_hackett@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Donald Bergnaum-Farrell

National Applications Planner

donald_bergnaum-farrell10@yahoo.com

Viewer

Prudence Stamm

District Markets Officer

prudence_stamm@yahoo.com

Viewer

Felicity Ondricka

National Functionality Facilitator

felicity_ondricka57@gmail.com

Admin

Jamel Harris

Internal Branding Architect

jamel_harris@gmail.com

Admin

Joy Hyatt

Product Interactions Executive

joy_hyatt66@yahoo.com

Member

Augustine Rosenbaum

District Program Engineer

augustine_rosenbaum@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Lori Kozey

Corporate Implementation Supervisor

lori_kozey@gmail.com

Member

Jonathan Funk

Internal Response Manager

jonathan.funk@hotmail.com

Viewer

Vallie Green

Forward Usability Planner

vallie.green@gmail.com

Member

Walton Sawayn

International Brand Strategist

walton_sawayn54@hotmail.com

Member

Nicolas Kovacek-Berge

Forward Research Facilitator

nicolas.kovacek-berge@gmail.com

Member

Candice Lemke

Investor Creative Manager

candice.lemke@gmail.com

Admin

Sophie Zemlak

National Factors Agent

sophie.zemlak@yahoo.com

Viewer

Wilmer Nader

Direct Interactions Specialist

wilmer_nader@hotmail.com

Member

Khalil Powlowski

Forward Applications Coordinator

khalil.powlowski33@gmail.com

Viewer

Russell Quigley

Senior Applications Engineer

russell.quigley96@gmail.com

Viewer

Annetta Walsh

District Infrastructure Specialist

annetta_walsh@gmail.com

Admin

Pauline Walker

Human Intranet Consultant

pauline.walker42@hotmail.com

Admin

Bella Schiller

Corporate Markets Developer

bella_schiller@gmail.com

Admin

Tyrell Wilkinson

Corporate Marketing Strategist

tyrell_wilkinson63@yahoo.com

Member

Romaine Huel

Human Accounts Developer

romaine.huel73@hotmail.com

Member

Esther Effertz

Investor Branding Supervisor

esther_effertz@gmail.com

Admin

Darrell Lindgren

District Accounts Assistant

darrell.lindgren@hotmail.com

Admin

Mertie Roberts-Koch

Global Interactions Representative

mertie_roberts-koch@hotmail.com

Viewer

Aleen Sipes

Principal Functionality Liaison

aleen.sipes49@yahoo.com

Admin

Sarai Haag

Human Infrastructure Developer

sarai.haag86@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
Patricia Kihn-Gutmannjerad74@gmail.comEast GeorgetteInactive$873.38
Tara MacGyverwyman.harris70@yahoo.comCoronaActive$224.65
Marian Thieljayson.johnson@gmail.comAstridportActive$1,166.95
Mr. Harold Wittingimani33@hotmail.comFort MadieInactive$1,177.34
Jackie Raynorflorian.treutel95@hotmail.comPittsburgActive$1,117.21
Total$4,559.53

Basic table

Table with Images

NameEmailLocationStatusBalance
Julia Effertz
@asia32
yvonne_beier@yahoo.comNorth ElvisstadInactive$1,072.37
Mr. Ramon Rice
@chasity72
noe_labadie@yahoo.comGrahamlandActive$1,089.70
Lorraine Marks
@madge.mertz85
ally.konopelski96@gmail.comFort MargaretteActive$309.16
Johnathan Fritsch
@lily_ratke
keyon15@yahoo.comNorth AllielandInactive$61.06
Alfonso D'Amore
@marley0
katrine76@hotmail.comWest AudraportInactive$691.63

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ann Nolanshanel66@yahoo.comWellingtonInactive$417.82
Tricia Lowemagali_hessel@yahoo.comSouth MichealshireInactive$1,053.70
Allen Zboncak IVressie.jast@hotmail.comLas CrucesInactive$715.99
Frank Vandervort-Crookslottie_hills42@hotmail.comWest RussellActive$727.11
Sheri Lynchjuliana34@gmail.comWest TimothyInactive$809.84
Total$3,724.46

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Chelsea Baileyzoey63@hotmail.comSanfordInactive$526.95
Jessie Stokesneva_hansen84@hotmail.comMyriamtonInactive$1,017.84
Velma Nolanshaina61@gmail.comTauntonInactive$262.73
Brent Naderkale.zemlak11@yahoo.comLake KayleyActive$1,160.34
Gregg Kesslermark.sauer87@hotmail.comPort ThomasInactive$1,126.96
Total$4,094.82

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Marcia Kochwellington.pollich56@gmail.comPort NikohavenInactive$787.49
Ted Runolfsdottirmark_purdy@hotmail.comVacavilleInactive$1,141.09
Maggie Lueilwitzkevin25@gmail.comPort JefferyburghInactive$458.23
Omar Schultzgraham15@gmail.comFlintInactive$496.17
Billy Framidesiree.rath@gmail.comSouth JoesphActive$348.33
Total$3,231.31

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
Mario Brownray5@gmail.comWest LorenzInactive$658.59
Rose Reinger-Volkman DDSbeth83@yahoo.comMilpitasActive$382.34
Dr. Frances Hackettamely.kunde21@gmail.comBotsfordboroInactive$969.50
Dr. Bradley Stammelmo86@gmail.comPort AniyabergInactive$736.83
Roy Gulgowskijermey.herzog@hotmail.comLake BernitahavenActive$1,112.59
Total$3,859.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Thelma Jerdeted.hettinger24@yahoo.comNorth EmmettActive$1,146.43
Elena Macejkovickayley73@yahoo.comAlexanderfurtActive$856.33
Eddie Bayertiana14@gmail.comSchadenboroActive$1,168.78
Dr. Denise Bode DDSjuvenal58@hotmail.comPort ZulaActive$238.34
Ms. Gayle Schmelerodie.cummings@gmail.comLake IgnacioInactive$1,195.61
Total$4,605.49

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
Charlene Haaglitzy_mraz@gmail.comNorth ReaganInactive$1,071.51
Darrel Kovacek DVMalan92@yahoo.comBoscotownActive$1,024.27
Rolando Sipeskali79@hotmail.comAshburnActive$655.24
Dale Kuvalismack.marquardt@gmail.comSouth IvyburghActive$776.88
Lynda Spencercallie71@yahoo.comLompocActive$1,043.12
Alfonso Cummeratashanie_price2@yahoo.comEliassteadActive$68.90
Marvin Strosinstacey.rutherford@gmail.comDecaturInactive$590.05
Dallas Reillyorion9@gmail.comLake AlenefortInactive$867.10
Santiago Cormier DDShillard98@gmail.comHiramboroughActive$320.41
Jacob Simonisjanelle.osinski@gmail.comWinstonmouthActive$709.19
Harold Prosaccobrianne.hartmann@gmail.comRoderickvilleActive$199.20
Dwayne Dickinsonlizzie_stamm@gmail.comAlyciaportActive$776.39
Ron Gerholdanne.hahn21@yahoo.comBaileybergInactive$755.89
Mr. Warren Koelpinaiden_nitzsche84@yahoo.comCarletonchesterActive$888.88
Ron VonRueden-Kulas PhDmarisa_swaniawski25@gmail.comWest JaydonActive$1,069.34
Total$10,816.37

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.