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$815.88
INV002PendingCredit Card$413.23
INV003PendingPayPal$794.92
INV004PendingBank Transfer$596.29
INV005UnpaidPayPal$666.85
INV006PendingBank Transfer$794.98
INV007UnpaidPayPal$546.75
Total$4,628.90

Simple

Users

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

NameTitleEmailRoleActions
Melvin AbshireGlobal Applications Officermelvin.abshire41@yahoo.comViewer
Paulette KossSenior Metrics Directorpaulette_koss61@gmail.comMember
Hailee GutmannForward Infrastructure Facilitatorhailee_gutmann@yahoo.comAdmin
Bethany SchambergerProduct Paradigm Technicianbethany_schamberger@gmail.comAdmin
Tomas BalistreriProduct Tactics Executivetomas.balistreri77@hotmail.comAdmin
Floyd McGlynnSenior Response Specialistfloyd.mcglynn38@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Rosendo Kertzmann

Forward Applications Liaison

rosendo.kertzmann37@hotmail.com

Viewer

Melanie Hartmann

Corporate Data Assistant

melanie.hartmann@gmail.com

Viewer

Sylvester Gleason

Legacy Applications Facilitator

sylvester_gleason@hotmail.com

Viewer

Paulette Fisher

Forward Metrics Manager

paulette_fisher@hotmail.com

Viewer

Fritz Reichert

Central Creative Orchestrator

fritz.reichert@hotmail.com

Member

Meghan Hudson

National Response Producer

meghan_hudson@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Imani Stroman

Internal Program Planner

imani_stroman74@yahoo.com

Member

Lori Orn

Forward Quality Consultant

lori_orn92@gmail.com

Member

Gordon Wilderman

International Usability Architect

gordon.wilderman15@gmail.com

Admin

Ismael Luettgen

Forward Identity Representative

ismael_luettgen31@hotmail.com

Admin

Ike Morissette

Corporate Branding Consultant

ike.morissette98@yahoo.com

Admin

Joy Fay

Product Branding Designer

joy.fay28@gmail.com

Admin

Abner Kuhic

Internal Implementation Associate

abner.kuhic78@gmail.com

Member

Pearl Kilback

Global Marketing Facilitator

pearl_kilback@hotmail.com

Viewer

Dashawn Cremin

Dynamic Response Orchestrator

dashawn_cremin88@gmail.com

Admin

Minnie Wisoky

Internal Marketing Developer

minnie_wisoky50@yahoo.com

Viewer

Doreen Brakus

Direct Usability Liaison

doreen.brakus94@hotmail.com

Viewer

Arthur Terry

International Response Consultant

arthur.terry52@yahoo.com

Viewer

Jay Hilll

Regional Communications Architect

jay.hilll36@yahoo.com

Admin

Lolita Tillman

Chief Mobility Director

lolita_tillman@gmail.com

Member

Leigh Waelchi

Central Paradigm Assistant

leigh.waelchi@yahoo.com

Member

Lester Hegmann

Senior Implementation Analyst

lester.hegmann87@hotmail.com

Member

Haleigh Kub

Lead Division Liaison

haleigh.kub31@gmail.com

Viewer

Deanna Koepp

Future Infrastructure Supervisor

deanna.koepp47@yahoo.com

Member

Ansley McClure

Legacy Intranet Designer

ansley.mcclure30@gmail.com

Member

Elizabeth Schuppe

Principal Optimization Officer

elizabeth_schuppe@yahoo.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
Vernon Zemlakmiguel70@hotmail.comFort LaurenActive$218.91
Zachary Binshaylie_blick33@gmail.comHillssideInactive$69.54
Colton Schuppejoanna.orn@hotmail.comBernadetteportActive$192.02
Eloisa Lindmilford84@hotmail.comSteubersideInactive$439.77
Oma McGlynngrant_krajcik@hotmail.comShirleycesterInactive$412.44
Total$1,332.68

Basic table

Table with Images

NameEmailLocationStatusBalance
Javier Jones DVM
@regina15
duane_murray@hotmail.comSouth JasonburyActive$1,129.94
Richard Green DDS
@jannie_langworth
francisca.thompson@gmail.comSpokaneInactive$1,151.21
Ms. Josephine Abshire Jr.
@ramona_marvin33
lillian_howell@yahoo.comNew HarrietvilleInactive$670.52
Magali Zboncak
@sophie.osinski
rose_cremin25@yahoo.comSouth JackyInactive$428.23
Erik Will
@sheridan37
randolph61@gmail.comMayaguezInactive$1,170.55

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Alvena Klein MDnina0@hotmail.comAbileneActive$854.67
Charlotte Spencernatasha.dooley@gmail.comFort MyriamburyInactive$644.61
Mrs. Krista Stiedemannabagail.hammes@yahoo.comReidlandInactive$131.04
Lera Wuckert IIIsamir.russel12@hotmail.comEast ScotActive$952.04
Merlin Turnerdiamond.thiel-leuschke@yahoo.comEast JohannInactive$437.73
Total$3,020.09

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Freeman DuBuqueayla4@gmail.comNorth ReggiechesterInactive$687.65
Antonietta Breitenbergdino.schroeder@hotmail.comRochester HillsActive$720.74
Maureen Bechtelarholly_crooks@gmail.comHuldasideActive$842.82
Leatha Wittingbret.skiles@gmail.comNorth ArmandochesterActive$87.40
Kasandra Beerlonnie.spencer25@yahoo.comMargietonActive$837.32
Total$3,175.93

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Adalberto Johnsannamae.crist26@yahoo.comNapoleonportInactive$127.91
Ilene Hartmannolivia.zieme@gmail.comNorth ChesterInactive$1,070.77
Camryn Daughertybryon.altenwerth@gmail.comNorth DerekActive$1,049.65
Dr. Daphne Streichjannie_gislason2@hotmail.comNew SadievilleInactive$825.27
Jorge Ritchiekatrina_ryan@hotmail.comOlentownActive$329.47
Total$3,403.07

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
Freddie Handlyla30@yahoo.comNew PeterInactive$1,053.66
Brigitte Pfeffercameron_terry75@yahoo.comPort AmandaburghInactive$452.64
Carlie Bernierjacob.gutkowski@hotmail.comNicklausshireActive$162.38
Reginald Bernhardafton.homenick@gmail.comNorth LaurenActive$1,120.05
Estrella Farrellsigurd54@gmail.comMesquiteActive$993.30
Total$3,782.03

Table with row selection

Card Table

NameEmailLocationStatusBalance
German Nitzsche Vjaniya.schoen@yahoo.comNolancesterActive$931.26
Kylie Williamsonpatrick65@yahoo.comEast CharleneActive$659.69
Carson Rosenbaumjaleel72@hotmail.comFort BrookmouthInactive$929.19
Leta Sawayncatherine_denesik@gmail.comHettingermouthInactive$1,122.39
Freda Collinsskylar.bartell38@hotmail.comJolietActive$916.74
Total$4,559.27

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
Orin Romaguera-Willmsollie69@yahoo.comFreeportInactive$238.27
Henry Konopelskiandrea.lubowitz@hotmail.comNealboroInactive$255.60
Mrs. Madyson Becker IIIhal_koss@yahoo.comEast EmmettInactive$83.96
Donald Morissette-Erdman IIcheryl_price@yahoo.comBaileyburghInactive$181.62
Celine Cartermerl.lowe@hotmail.comYostchesterInactive$1,009.31
Terrance McDermottjuan_jacobson@gmail.comRosellacesterInactive$116.07
Lyle Hagenesprince_ward76@yahoo.comLake MarthahavenActive$859.91
Josefina Volkmanarmani1@hotmail.comCentrevilleInactive$1,086.28
Marcos Harberlucile46@gmail.comFountainebleauInactive$90.26
Edith Krisdevon1@hotmail.comEast GarretchesterInactive$921.05
Elise Vandervortkaitlyn43@hotmail.comHacketttonActive$274.64
Alanis Quigleybeau78@gmail.comFort HattieburghInactive$433.17
Lena Monahanbrock_mraz43@hotmail.comEast JackInactive$66.77
Gunnar Schultzthomas_vonrueden22@yahoo.comOlympiaInactive$243.30
Chad O'Keeferyleigh20@gmail.comLake FletafortInactive$933.72
Total$6,793.93

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.