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
INV001UnpaidPayPal$186.23
INV002PaidCredit Card$243.23
INV003UnpaidPayPal$146.73
INV004PaidBank Transfer$244.64
INV005UnpaidPayPal$427.48
INV006UnpaidBank Transfer$452.85
INV007UnpaidBank Transfer$909.81
Total$2,610.97

Simple

Users

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

NameTitleEmailRoleActions
Guadalupe BorerSenior Functionality Technicianguadalupe.borer67@gmail.comMember
Wiley MonahanCorporate Division Directorwiley_monahan@hotmail.comMember
Constantin CummerataGlobal Program Producerconstantin.cummerata14@yahoo.comMember
Dortha PowlowskiForward Markets Facilitatordortha_powlowski13@yahoo.comViewer
Maryjane ArmstrongInternal Division Architectmaryjane_armstrong@yahoo.comMember
Bernice FeeneyDirect Integration Specialistbernice.feeney68@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Geraldine Parisian

Dynamic Creative Facilitator

geraldine_parisian@yahoo.com

Viewer

Juana Johnson

Product Solutions Assistant

juana_johnson30@gmail.com

Viewer

Lelia Lowe

Human Paradigm Analyst

lelia_lowe81@hotmail.com

Member

Brad Monahan

Regional Creative Coordinator

brad_monahan6@gmail.com

Admin

Sue Smith

Internal Research Coordinator

sue_smith59@yahoo.com

Member

Mikayla Becker

International Implementation Assistant

mikayla.becker68@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Sam Kertzmann-Ryan

Future Brand Supervisor

sam.kertzmann-ryan@hotmail.com

Viewer

Rose Treutel

Lead Intranet Facilitator

rose.treutel@gmail.com

Member

Ernestine Gibson

Chief Markets Strategist

ernestine_gibson@gmail.com

Viewer

Toni Koss

Legacy Applications Designer

toni.koss74@hotmail.com

Member

Nancy Hessel

International Accountability Administrator

nancy.hessel12@gmail.com

Admin

Gabriel Cruickshank

Human Quality Facilitator

gabriel.cruickshank19@hotmail.com

Admin

Darryl Gottlieb

Chief Web Associate

darryl.gottlieb69@yahoo.com

Admin

Alexys Wehner

Regional Mobility Engineer

alexys_wehner@hotmail.com

Admin

Kiera McKenzie

National Response Facilitator

kiera.mckenzie77@gmail.com

Member

Randal Baumbach

Dynamic Infrastructure Facilitator

randal_baumbach37@gmail.com

Member

Horace O'Connell

Investor Accountability Strategist

horace_oconnell77@gmail.com

Viewer

Seth Osinski

Forward Markets Developer

seth.osinski@gmail.com

Member

Marina Barrows

Investor Infrastructure Assistant

marina.barrows@gmail.com

Viewer

Katherine Renner

Dynamic Marketing Supervisor

katherine_renner@hotmail.com

Viewer

Raphaelle Murphy

Central Implementation Liaison

raphaelle.murphy48@gmail.com

Viewer

Joesph Grady

Investor Group Producer

joesph_grady@hotmail.com

Viewer

Beth McClure

Future Mobility Developer

beth_mcclure55@gmail.com

Admin

Roxanne Thiel

Investor Communications Engineer

roxanne_thiel31@gmail.com

Member

Julia Kutch

Global Optimization Supervisor

julia_kutch@hotmail.com

Admin

Coralie Nader

Legacy Optimization Designer

coralie_nader@hotmail.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
Adonis Lynchautumn.fay48@hotmail.comNew LeannaInactive$166.22
Milan Reingeralicia97@hotmail.comFunkviewActive$172.49
Todd Manteaudreanne21@gmail.comMarkscesterActive$1,141.70
Julius Gleichnertroy.davis@yahoo.comNew LeonmouthInactive$859.76
Myriam Abshirerichie.rolfson@hotmail.comBerniersteadInactive$582.53
Total$2,922.70

Basic table

Table with Images

NameEmailLocationStatusBalance
Shany Blanda
@jayden_mertz63
eva_champlin@gmail.comPort JeremiahActive$841.75
Lori Wisozk
@hank57
teresa37@gmail.comBeckerfurtActive$264.17
Walter Reilly-Boehm
@kirsten.mckenzie40
brielle_mayer33@yahoo.comPort EstacesterInactive$435.86
Grayson Carroll
@yvonne5
kaya.crooks@yahoo.comGwentonActive$318.88
Rowan Dickens
@victoria_mitchell65
chesley33@gmail.comLake ThomasbergActive$523.91

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marilou Ondricka Ialberta56@hotmail.comKarleylandActive$1,142.01
Arlene Franeyabel_sauer@gmail.comNorth ArttonInactive$452.15
Winona Ullrichraoul_kozey@hotmail.comPort GabrielsteadActive$269.38
Mrs. Lynda Nikolauscorene_will69@yahoo.comNew JayActive$479.32
Theresa Nolanlonnie_abshire4@yahoo.comLake RoscoeInactive$830.44
Total$3,173.30

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Zelma Powlowskielinore35@hotmail.comWest MarianochesterInactive$935.42
Ms. Vickie Bergnaumfern_wyman@hotmail.comSouth AlvinaworthInactive$1,012.52
Mr. Ricardo McGlynnvaughn_wuckert@hotmail.comBayervilleActive$445.13
Randy Kunzecarol_bernhard@gmail.comSouth TraciActive$841.36
Rosie Schadenluis10@gmail.comWest ConcepcionshireInactive$476.29
Total$3,710.72

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mason Bechtelar DVMgarret4@hotmail.comWest AllisActive$269.42
Tevin Bogisichalvis62@hotmail.comBurnsvilleInactive$326.07
Cloyd Connarvel_reinger83@yahoo.comSouth BiankaInactive$1,173.09
Haley Hueljerod.hackett81@yahoo.comVonRuedenportActive$484.89
Miss Ella Ernsermarjolaine.marvin32@yahoo.comLake KennithboroInactive$665.46
Total$2,918.93

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
Justin Gibsongayle_ernser32@yahoo.comTabithahavenActive$311.12
Randal Simonisjazmin22@yahoo.comLas VegasActive$822.64
Maryjane Feeneysonja45@gmail.comZboncakportActive$965.86
Bruce Ratkevicki.hayes25@gmail.comMaritzabergActive$1,119.47
Emelia Heathcote Jr.nella_kuphal37@hotmail.comJohannaworthInactive$657.16
Total$3,876.25

Table with row selection

Card Table

NameEmailLocationStatusBalance
Molly Keeblerjeffrey82@hotmail.comPawtucketActive$1,080.69
Clarence Altenwerthgertrude_stracke@gmail.comWest WestonhavenInactive$986.84
Leila Prosaccoadella_mann29@gmail.comNorth EdnaboroughActive$917.20
Nichole Herzoghallie_hahn@hotmail.comNorth MelindaburyActive$793.36
Leona Collinstony_corwin36@gmail.comNorth OlenInactive$863.68
Total$4,641.77

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
Malinda Sauergilberto_quigley@hotmail.comStantonburyInactive$1,104.37
Antonetta Kesslerruby.wolff@gmail.comFort BreanaInactive$927.75
Amanda Medhurstedyth.greenfelder93@gmail.comLake RayportInactive$439.14
Perry Gutmann IIwendy.padberg18@hotmail.comArmstrongburyInactive$449.56
Tina Greenseth_bode39@yahoo.comNorth KielInactive$1,179.58
Mr. Bernard Wisozkelwyn_wehner@yahoo.comNew MarleneActive$816.06
Katherine Croninlukas_renner@hotmail.comNorth DannyInactive$316.11
Gwen Wisokyjed95@yahoo.comSouth SigridshireInactive$831.35
Susan Borerdarrell97@yahoo.comWillytownInactive$363.20
Ora Franeyedgar.roberts@yahoo.comSan MateoActive$1,096.38
Traci Bogisichfrancesco28@gmail.comEast ScottActive$766.78
Jerry Dibbertkristine98@gmail.comTexas CityActive$463.76
Becky Kuhicmariela_gislason2@yahoo.comRosemarietonActive$222.60
Rodney Hauckalexandria_medhurst21@yahoo.comPort TabithaInactive$8.95
Mrs. Beaulah Collier Jr.jaime.denesik82@hotmail.comEast EssieActive$306.93
Total$9,292.52

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.