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
INV001PaidBank Transfer$818.28
INV002UnpaidPayPal$356.14
INV003PendingCredit Card$403.83
INV004UnpaidBank Transfer$561.48
INV005UnpaidPayPal$974.20
INV006PaidBank Transfer$643.63
INV007PendingCredit Card$895.64
Total$4,653.20

Simple

Users

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

NameTitleEmailRoleActions
Isadore RodriguezGlobal Creative Technicianisadore.rodriguez23@gmail.comMember
Johnathon WhiteFuture Accountability Strategistjohnathon.white26@gmail.comMember
Edd ReichelForward Creative Strategistedd_reichel@yahoo.comAdmin
Alia StokesNational Quality Engineeralia.stokes67@hotmail.comMember
Easton ConsidineLegacy Creative Consultanteaston.considine39@gmail.comViewer
Glenna SchimmelRegional Infrastructure Associateglenna_schimmel9@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Elizabeth Howell

Dynamic Usability Liaison

elizabeth.howell@gmail.com

Viewer

Brittany Muller-Friesen

Legacy Integration Officer

brittany.muller-friesen95@gmail.com

Member

Everardo Stehr

District Implementation Administrator

everardo.stehr73@gmail.com

Member

Taya Daugherty

Dynamic Accountability Engineer

taya_daugherty@yahoo.com

Viewer

Jazmin Daniel

Internal Branding Officer

jazmin.daniel@yahoo.com

Viewer

Ellsworth Kuhic

National Solutions Manager

ellsworth_kuhic80@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Haven Mills

Human Paradigm Executive

haven_mills@yahoo.com

Viewer

Precious Heaney

Internal Applications Engineer

precious_heaney@yahoo.com

Member

Cecilia Beier

Chief Group Specialist

cecilia.beier1@yahoo.com

Admin

Nelle Hand

Direct Quality Planner

nelle_hand8@hotmail.com

Admin

Abbie Ryan

International Markets Facilitator

abbie.ryan7@hotmail.com

Member

Nicholas Konopelski

Regional Directives Technician

nicholas_konopelski@yahoo.com

Viewer

Reilly Wehner

Customer Accountability Director

reilly_wehner50@gmail.com

Member

Efren Buckridge

Dynamic Accounts Supervisor

efren.buckridge@gmail.com

Admin

Jaquelin Feeney

Chief Quality Architect

jaquelin.feeney@yahoo.com

Viewer

Jamison Emard

Principal Communications Agent

jamison.emard@hotmail.com

Admin

Hayden Collier-Wilderman

Internal Communications Consultant

hayden.collier-wilderman53@gmail.com

Member

Cooper Baumbach

Lead Accounts Liaison

cooper_baumbach@yahoo.com

Viewer

Caroline Bartell-Brekke

Product Branding Agent

caroline.bartell-brekke2@gmail.com

Member

Clementina Considine-Bruen

National Usability Representative

clementina.considine-bruen77@hotmail.com

Viewer

Mabelle Hermiston

Forward Marketing Specialist

mabelle.hermiston@gmail.com

Viewer

Michel Bashirian

Human Marketing Designer

michel_bashirian@hotmail.com

Admin

Eden Hand

Investor Research Architect

eden.hand@gmail.com

Admin

Elton Berge

International Implementation Engineer

elton_berge@yahoo.com

Viewer

Jeremie Weissnat

Dynamic Integration Specialist

jeremie_weissnat96@gmail.com

Member

Amaya Kris

Customer Metrics Officer

amaya.kris69@gmail.com

Admin

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
Dr. Sammy Schadenadelle.mayert@yahoo.comZiemebergInactive$241.89
Valerie Okunevajocelyn22@yahoo.comKentActive$426.18
Mr. Tracy Naderbud_keebler@gmail.comPort ArielleInactive$909.95
Vanessa Olson IVelinore57@hotmail.comAurelieburghInactive$836.05
Earnest Rennerlincoln3@gmail.comRathbergInactive$1,157.08
Total$3,571.15

Basic table

Table with Images

NameEmailLocationStatusBalance
Tommy Grimes
@gianni.hickle94
chyna_larkin@gmail.comGottliebportActive$546.90
Mona Moore
@julian_conn43
armando70@hotmail.comJoanytownInactive$671.72
Kyle Reichel
@johnathon26
shaniya94@hotmail.comLake MohamedActive$631.68
Agnes Maggio
@juvenal_casper-kertzmann29
joaquin42@hotmail.comLebsackfurtInactive$1,040.98
Nicole Rogahn
@brayan30
enola.upton@hotmail.comAshleyviewActive$395.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Steven Bruenhailey_windler-klein71@hotmail.comEden PrairieInactive$340.96
Joey Homenickomari_kerluke-douglas86@gmail.comHuelslandActive$967.16
Vincent Wymanzoey.mills4@gmail.comFreeportInactive$896.89
Mercedes Lebsackisai95@yahoo.comPort CordiaInactive$276.33
Judith Dare Jr.josiane.hegmann@hotmail.comWolfftownActive$241.32
Total$2,722.66

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Leonard Raukaylin45@yahoo.comEast SarinaActive$780.62
Francis Mitchellconor27@hotmail.comEast JonburghInactive$1,165.79
Mr. Lyle Larkinmarina68@hotmail.comTrompbergInactive$250.75
Lyle Cassin-Schroederjaquan87@yahoo.comShayleetonInactive$129.92
Cecil Funk PhDkatlyn_aufderhar@gmail.comReichertshireActive$703.07
Total$3,030.15

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Miss Ann Bruenbret20@yahoo.comAgustinstadInactive$678.01
Deanna Cronaolaf.fahey41@yahoo.comMohrcesterActive$998.62
Mr. Daryl Pfefferrosemarie63@yahoo.comSouth LoycehavenActive$326.71
Myrtle Ullrichjairo.lakin49@hotmail.comLeschcesterInactive$65.45
Maryann Roob Sr.annamarie_ullrich@hotmail.comPort VinceActive$49.20
Total$2,117.99

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
Dixie Fritschgeovanny96@hotmail.comEmileboroughActive$169.05
Patti Schillerhalle35@gmail.comCitrus HeightsActive$1,159.98
Yvette Hagenesulices98@yahoo.comJarrettchesterInactive$40.45
Terry Hilllcreola.satterfield@yahoo.comYasminfortInactive$956.49
Robin Jacobsreva57@hotmail.comSanta CruzActive$765.40
Total$3,091.37

Table with row selection

Card Table

NameEmailLocationStatusBalance
Max Kihnjenifer_satterfield@gmail.comGreshamActive$168.62
Sheryl Strackececilia.schmeler@hotmail.comPort ImeldaworthActive$679.58
Justin Hanefriedrich90@hotmail.comBeavercreekInactive$1,177.88
Rhonda Effertznikki_barton12@hotmail.comNew AbagailInactive$1,196.42
Elijah Turnerbrook_adams-monahan@hotmail.comNoviInactive$1,004.04
Total$4,226.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
James Hermistonalaina85@gmail.comBellevilleInactive$697.73
Evan Kleineveline1@gmail.comNorth VirginiabergInactive$1,187.26
Dr. Frank Satterfieldnicholas42@gmail.comWest DayneActive$1,188.08
Dr. Jay Marvinamerico_kunde@gmail.comNewtonInactive$115.92
Joe Dickens IIItamia_stiedemann@hotmail.comAvahavenInactive$650.72
Donald Jastmarilie_ryan16@gmail.comJupiterInactive$15.74
Edmund Schaefertyrel86@gmail.comMaureenbergInactive$22.89
Rosemary Altenwerthvella85@yahoo.comWest KadetonInactive$130.45
Margaret Hermistoncooper87@yahoo.comSeanvilleActive$1,136.40
Claudia Borer IIIcassie20@yahoo.comCathryntonInactive$1,065.55
Garry Kihndevin_anderson23@yahoo.comEinoportActive$482.30
Felipe Blockjarvis.walker40@hotmail.comBobbiestadInactive$607.33
Hazel Nicolasmariano.schneider54@gmail.comLuettgensideActive$776.50
Lori Hahnmitchel.cremin@hotmail.comWest RussActive$208.12
Denise Hansenmaybell.champlin5@gmail.comPort JeffereyInactive$921.13
Total$9,206.12

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.