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
INV001PendingPayPal$111.74
INV002PendingPayPal$290.91
INV003PaidBank Transfer$105.45
INV004PendingPayPal$824.00
INV005UnpaidPayPal$308.39
INV006PaidCredit Card$347.40
INV007PaidPayPal$430.18
Total$2,418.07

Simple

Users

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

NameTitleEmailRoleActions
Karianne MorarSenior Group Plannerkarianne.morar@yahoo.comViewer
Jordyn BergeChief Assurance Strategistjordyn_berge@gmail.comAdmin
Abigale WilliamsonPrincipal Operations Analystabigale_williamson@hotmail.comAdmin
Ida LindgrenDynamic Interactions Engineerida.lindgren97@gmail.comViewer
Cathy KoeppSenior Quality Representativecathy_koepp@gmail.comMember
Louvenia BergeGlobal Security Developerlouvenia.berge@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Stone Bailey

Regional Factors Director

stone_bailey@yahoo.com

Admin

Glennie Heaney

Direct Tactics Coordinator

glennie_heaney88@hotmail.com

Viewer

Terry Glover

Product Research Administrator

terry_glover62@hotmail.com

Viewer

Eloise Streich

Lead Accountability Strategist

eloise.streich51@gmail.com

Member

Durward Koelpin

Internal Branding Assistant

durward_koelpin@yahoo.com

Member

Dangelo Bradtke

Customer Group Specialist

dangelo.bradtke@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Augustine Waters

Regional Applications Manager

augustine.waters68@gmail.com

Admin

Trycia Yundt

District Directives Strategist

trycia_yundt92@gmail.com

Viewer

Heaven Dare

Dynamic Factors Director

heaven_dare76@hotmail.com

Member

Brown Pfannerstill

Regional Creative Coordinator

brown.pfannerstill@gmail.com

Viewer

Monroe Moen

National Interactions Coordinator

monroe_moen5@yahoo.com

Viewer

David Green

Legacy Brand Associate

david.green@yahoo.com

Admin

Reinhold Reilly

Central Infrastructure Architect

reinhold.reilly@gmail.com

Member

Simone Flatley

Customer Accounts Orchestrator

simone.flatley73@gmail.com

Admin

Obie Becker

Dynamic Usability Officer

obie_becker5@yahoo.com

Admin

Taryn Mosciski

Product Paradigm Analyst

taryn.mosciski@hotmail.com

Viewer

Jana Bogan

Direct Web Analyst

jana_bogan@yahoo.com

Viewer

Princess Hane

Human Infrastructure Specialist

princess.hane@hotmail.com

Member

Loyce Cronin

Customer Solutions Strategist

loyce_cronin@gmail.com

Member

Elody Nienow

Lead Data Specialist

elody_nienow9@gmail.com

Member

Mathew Schmeler

District Group Officer

mathew.schmeler@yahoo.com

Member

Russel Dickinson

Corporate Web Administrator

russel.dickinson@yahoo.com

Member

Seamus Will

District Program Facilitator

seamus_will13@gmail.com

Admin

Calista Robel-O'Connell

Product Solutions Manager

calista_robel-oconnell@hotmail.com

Member

Jaylen Rempel

Principal Program Executive

jaylen_rempel@hotmail.com

Member

Xander Bergnaum

Customer Quality Associate

xander.bergnaum@hotmail.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
Perry Zulaufkimberly_volkman19@yahoo.comPerth AmboyActive$106.37
Chad Beattyteresa41@gmail.comFort AronburghInactive$914.97
Gerard Bechtelarjackie9@hotmail.comPort SageActive$373.70
Traci Hahnmartin68@yahoo.comMelissatonInactive$132.35
Heather Kihn IVeverette62@yahoo.comSouth AbbeyfurtActive$199.68
Total$1,727.07

Basic table

Table with Images

NameEmailLocationStatusBalance
Edith Gusikowski
@lilyan23
paris_armstrong85@gmail.comAureliemouthInactive$1,041.45
Roderick Roberts
@cory_hoppe
milton_nienow@yahoo.comJordonboroughActive$532.85
Amos Nolan
@kade_stanton
johnathon31@hotmail.comPort EloiseportActive$422.08
Jana Kertzmann
@diana26
yazmin_lehner85@yahoo.comAngeloworthInactive$16.01
Jimmy Kemmer
@joshua.jerde
maximillia.abernathy43@yahoo.comTurnercesterActive$36.69

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. John Bednaradelle67@yahoo.comLake RyannlandActive$154.20
Sheldon Douglas DVMayana.orn26@hotmail.comPlanoInactive$856.36
Malcolm Doylebo.schaefer67@gmail.comFort JairoportActive$1,065.66
Tabitha Hartmann PhDclaude15@hotmail.comWilllandActive$1,080.11
Mrs. Laverne Kuvalisedmond14@hotmail.comFort HowardActive$887.38
Total$4,043.71

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lana Tillmanviviane_champlin@gmail.comSouth KhalidchesterInactive$113.43
Sadie Zemlak PhDjeremie78@yahoo.comNew JazmynActive$989.00
Kellie Huelszakary.berge57@gmail.comEast MckennaActive$737.11
Colin Kubeuna3@gmail.comIsaiasviewInactive$820.53
Scott Hansen PhDmaribel_stracke@gmail.comBaytownInactive$345.37
Total$3,005.44

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wilbert Boehmmax.beier68@yahoo.comWarwickInactive$1,073.65
Garrett Kuhlmancarlotta63@yahoo.comLelandboroughActive$390.58
Ramona Gibsonleatha.little@yahoo.comPort KennyfieldActive$69.12
Kenneth Gulgowskiluigi_rice84@gmail.comMountain ViewInactive$873.18
Ebony Ferryaudra_stiedemann@yahoo.comNew JadenbergActive$626.13
Total$3,032.66

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
Alberto Schmelerapril.goyette@gmail.comFayettevilleInactive$490.55
Darla Greencortney.fay4@gmail.comLake CrystelworthInactive$539.12
Jerome Trantowadelia9@yahoo.comPort EuniceboroughInactive$972.26
Andre Brekkepenelope.ledner@gmail.comNorth SalvatoreActive$793.50
Wm Buckridgerolando33@yahoo.comKuvalisworthInactive$408.66
Total$3,204.09

Table with row selection

Card Table

NameEmailLocationStatusBalance
Felix Mrazfriedrich.heller@yahoo.comNew KacietonInactive$990.92
Guadalupe Johnson-Haagabdul_beatty@gmail.comYoststeadInactive$959.91
Frankie Konopelskiannabell.osinski@gmail.comEast RicolandActive$370.93
Hugh Lynch IVlouvenia.stokes@hotmail.comSchultztonInactive$1,174.13
Clara Parkereaster_gerhold@gmail.comReichelworthActive$998.03
Total$4,493.92

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
Jean Emarddena_damore@gmail.comArvelmouthActive$688.42
Jonathon Reichelcarleton_roberts@hotmail.comLaurelfurtActive$480.04
Carlos Feeneymaximillia31@hotmail.comEast JanickfieldActive$820.69
Justin Doyle Ialberto.cruickshank64@hotmail.comSpring ValleyActive$602.47
Ramiro Gradyjedidiah11@yahoo.comNew GertrudeInactive$774.49
Mr. Roberto Schulist IIdestin16@gmail.comLake AdahchesterActive$380.73
Isaac Bartolettimittie.wiza@hotmail.comLake RethaActive$361.10
Aubrey Mitchell-Schmelershane39@yahoo.comWest CovinaActive$259.39
Kimberly Hermistonernestina_senger@yahoo.comLeuschketownActive$69.35
Cora Gradyeaston_sporer3@yahoo.comSouth DonavonchesterActive$585.95
Herbert Wisokymireya_barton95@hotmail.comLovelandActive$589.24
Marlon Streichlessie_stiedemann58@gmail.comMacGyverhavenInactive$1,036.18
Gary Rohanmyah76@hotmail.comCorbintonActive$405.49
Sheryl Terryjasper.rath@gmail.comSouth SedrickInactive$661.62
Guy Bogisichkristin34@yahoo.comNew AlleneActive$1,180.11
Total$8,895.27

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.