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
INV001PendingCredit Card$891.22
INV002UnpaidBank Transfer$218.79
INV003UnpaidPayPal$957.92
INV004UnpaidBank Transfer$934.04
INV005PendingBank Transfer$295.30
INV006PendingPayPal$856.74
INV007UnpaidBank Transfer$760.57
Total$4,914.58

Simple

Users

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

NameTitleEmailRoleActions
Hector LeschPrincipal Directives Managerhector.lesch66@yahoo.comViewer
Lorenzo SwiftRegional Quality Engineerlorenzo_swift30@gmail.comMember
Roderick RueckerHuman Metrics Engineerroderick.ruecker@hotmail.comMember
Dominic Goyette-RoobDirect Creative Executivedominic_goyette-roob14@hotmail.comViewer
Mckayla SchuppeChief Operations Representativemckayla.schuppe@hotmail.comViewer
Dewey MurrayForward Quality Engineerdewey_murray0@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Perry Feil

National Division Producer

perry.feil2@hotmail.com

Viewer

Dandre Nitzsche

Dynamic Interactions Representative

dandre_nitzsche@gmail.com

Admin

Paulette Pouros

Future Group Developer

paulette.pouros@hotmail.com

Member

Lillie Cole

Customer Identity Specialist

lillie.cole33@gmail.com

Viewer

Hank Ferry

Chief Optimization Supervisor

hank_ferry@gmail.com

Viewer

Jean White

District Optimization Associate

jean_white@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Yvette Shields

Product Branding Associate

yvette_shields@gmail.com

Viewer

Dayne Kuvalis

National Security Executive

dayne.kuvalis@hotmail.com

Member

Eula Effertz

Chief Metrics Architect

eula_effertz@hotmail.com

Member

Trey Bernier

Direct Identity Architect

trey_bernier60@hotmail.com

Member

Jerald Kunze

National Communications Director

jerald.kunze24@yahoo.com

Admin

Grady Wisozk

Investor Branding Planner

grady.wisozk75@gmail.com

Viewer

Davin Johns

Product Identity Director

davin.johns73@yahoo.com

Member

Ebony D'Amore

Direct Division Technician

ebony_damore18@yahoo.com

Member

Verla Wilderman

Direct Program Developer

verla_wilderman43@yahoo.com

Admin

Keshaun Jacobi

District Identity Producer

keshaun.jacobi56@hotmail.com

Admin

Greg Miller

Product Paradigm Producer

greg_miller@hotmail.com

Member

Mertie Hilpert

Principal Branding Architect

mertie.hilpert@gmail.com

Admin

Daryl Schmeler

District Configuration Assistant

daryl.schmeler@gmail.com

Viewer

Beulah Brakus

Internal Infrastructure Representative

beulah.brakus82@gmail.com

Admin

Murl Morissette

Human Interactions Producer

murl_morissette31@yahoo.com

Member

Clementine Barrows

Dynamic Branding Specialist

clementine.barrows99@hotmail.com

Viewer

Shemar Zulauf

Forward Implementation Agent

shemar_zulauf75@hotmail.com

Admin

Myra Halvorson-Kub

Legacy Creative Liaison

myra.halvorson-kub27@gmail.com

Member

Kane Koelpin

Principal Intranet Coordinator

kane.koelpin1@yahoo.com

Member

Adolphus Klocko

Global Division Producer

adolphus.klocko45@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
Donavon Lefflergracie_herman@hotmail.comCasas AdobesInactive$882.74
Abel Tremblayryann_cruickshank85@yahoo.comPort BayleefurtActive$975.87
Mr. Zane Vonrocky_corwin14@hotmail.comGleasonvilleInactive$365.37
Maynard Cassinmarian72@yahoo.comAveryworthActive$615.06
Dr. Glenda Kihn-Hermanneldora.lubowitz@gmail.comWest RamonatownActive$344.16
Total$3,183.20

Basic table

Table with Images

NameEmailLocationStatusBalance
Timmy Dicki
@bert.corkery-hane32
wallace_effertz75@yahoo.comLake OsbornemouthActive$223.78
Caroline Bode
@marc73
mae_mckenzie@gmail.comLaverneboroInactive$777.01
Newell Gleason
@brown_kemmer
jamar94@yahoo.comEast JeramietonActive$1,062.35
Carey Connelly
@janie.vonrueden
leonardo_powlowski47@yahoo.comO'Hara-VolkmanburghActive$114.06
Emilio Beier
@lawrence.ohara
gabriel.donnelly64@hotmail.comEast JeromeInactive$746.55

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Camryn Conroylillie.trantow70@yahoo.comPort HermannchesterInactive$1,029.51
Pearline Kihntaryn_farrell23@gmail.comEast FabianstadActive$1,123.06
Jordan Rippinsantos.halvorson@gmail.comRapid CityActive$1,031.70
Taylor Adams Sr.gregory.kuhlman@hotmail.comGleasonboroughInactive$273.49
Ellen Ledner IIIbelinda.swaniawski@yahoo.comBaileyhavenActive$709.19
Total$4,166.95

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rudolph Maggioesperanza_hayes37@yahoo.comFort FrancescaActive$198.31
Patricia Quitzonjenny_emard48@gmail.comEast PattieActive$636.58
Adonis Westross.ritchie@gmail.comWest DarleneInactive$631.18
Aryanna Gutkowskieliane_kub@yahoo.comElnamouthActive$49.31
Jacqueline Blockal72@yahoo.comTreyboroActive$591.34
Total$2,106.72

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wilhelm Windlerfrances64@gmail.comWest DalelandInactive$719.09
Ross Klocko PhDdoreen_altenwerth@yahoo.comGeorgeviewInactive$293.05
Lawrence Mueller MDmargie50@hotmail.comAbelboroInactive$1,004.98
Ms. Juana Cronincarleton_langworth@hotmail.comNew TamiburghActive$853.37
Andreanne Hauck Vmichele.weimann71@hotmail.comOrasideInactive$339.19
Total$3,209.68

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
Nils Hodkiewiczmatthew_dach@gmail.comPort EdhavenActive$632.36
Jay Bergnaumchanel.kautzer51@hotmail.comBowieInactive$577.77
Roy Terry-Bartonkaley.paucek@hotmail.comLake NovellaportActive$329.78
Andre Starkjamil_kiehn89@hotmail.comWesley ChapelInactive$1,155.78
Armando Heidenreichfelix_thiel@gmail.comAlyssaboroInactive$922.06
Total$3,617.75

Table with row selection

Card Table

NameEmailLocationStatusBalance
Isaiah Ullrichmaegan_denesik48@hotmail.comSouth LynneActive$250.23
Vernon Rodriguezroxane25@gmail.comArelyshireActive$1,149.60
Theresa Altenwerthshannon79@yahoo.comErikaworthActive$345.92
Norman Harberserenity.gerlach30@hotmail.comHerzogworthInactive$114.54
Darin Smithamdavonte.upton41@yahoo.comRoswellActive$149.69
Total$2,009.98

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
Dr. Kenneth Dickensjennyfer71@yahoo.comSouth GiovannaburghInactive$562.00
Mr. Stefanie Robeleddie95@hotmail.comApopkaInactive$532.77
Kelley Borerleroy.botsford65@hotmail.comNew AltonportInactive$854.69
Ethel Pacochakeshaun_nicolas81@gmail.comEl PasoInactive$799.05
Molly Aufderharwilbur_mccullough@yahoo.comIdellamouthInactive$612.45
Margarete Hintz-Kulasward31@hotmail.comKohlerhavenActive$1,059.14
Chris Mayertdominic.bayer@yahoo.comTinley ParkInactive$13.97
Ray Gislasonjairo_mann80@gmail.comLake VernieActive$579.12
Reginald Schuster-Smithmabelle0@hotmail.comAbbotttonActive$472.96
Mr. Yasmin Schultzkeith.murazik@gmail.comNoviActive$83.31
Sheryl Wehnerlionel.nolan@gmail.comWest GrantvilleInactive$938.59
Breanne Nader-Yundtjohan.schmitt88@yahoo.comNew JodyActive$848.35
Bernice Gottliebconrad.thompson31@gmail.comBartolettisideActive$34.74
Brionna Walsharthur96@gmail.comBridgetburyActive$19.97
Reymundo Pollichmellie_schmitt48@hotmail.comLauderhillInactive$359.48
Total$7,770.59

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.