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
INV001PendingBank Transfer$114.13
INV002PaidPayPal$970.80
INV003UnpaidCredit Card$174.60
INV004UnpaidCredit Card$612.05
INV005PendingCredit Card$242.03
INV006PendingBank Transfer$861.19
INV007PendingCredit Card$270.75
Total$3,245.55

Simple

Users

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

NameTitleEmailRoleActions
Gail CollierChief Creative Specialistgail.collier@hotmail.comMember
Nicolette BalistreriDirect Program Coordinatornicolette.balistreri@yahoo.comMember
Benny CassinDistrict Intranet Liaisonbenny.cassin82@hotmail.comMember
Amy Padberg-VandervortCorporate Creative Coordinatoramy.padberg-vandervort@gmail.comAdmin
Minerva ChristiansenDistrict Directives Liaisonminerva.christiansen4@gmail.comAdmin
Kameron BatzChief Tactics Associatekameron.batz@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Augustus Turcotte

Chief Web Manager

augustus.turcotte5@gmail.com

Admin

Alek Hilpert

Corporate Directives Representative

alek_hilpert@hotmail.com

Viewer

Cameron Homenick

Senior Metrics Strategist

cameron_homenick46@hotmail.com

Member

Javier Little

International Infrastructure Orchestrator

javier_little@yahoo.com

Admin

Ramona Ankunding

Principal Markets Administrator

ramona.ankunding49@yahoo.com

Member

Francisco McGlynn

National Response Representative

francisco_mcglynn@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Emie Stanton

Legacy Communications Liaison

emie.stanton37@yahoo.com

Viewer

Toni Bruen

Direct Operations Administrator

toni_bruen@yahoo.com

Admin

Jennifer Torp

Principal Integration Officer

jennifer.torp67@gmail.com

Viewer

Jamie Lueilwitz

Internal Accountability Liaison

jamie_lueilwitz45@hotmail.com

Viewer

Maximo Wolff

Internal Research Director

maximo.wolff@gmail.com

Member

Stanley Hauck

Human Quality Associate

stanley.hauck@gmail.com

Admin

Gianni Emmerich

Senior Intranet Developer

gianni.emmerich@hotmail.com

Member

Steve Goodwin

Future Web Executive

steve.goodwin47@yahoo.com

Viewer

Vincent Schneider

Central Metrics Strategist

vincent_schneider21@gmail.com

Member

Alvis Gleichner

Human Integration Administrator

alvis_gleichner@gmail.com

Admin

Fermin O'Keefe

Global Configuration Manager

fermin.okeefe@hotmail.com

Admin

Lyric Pagac

Forward Operations Producer

lyric_pagac@gmail.com

Member

Arne Runolfsdottir

Customer Optimization Architect

arne.runolfsdottir14@yahoo.com

Member

Rozella Reinger

Corporate Metrics Supervisor

rozella.reinger@hotmail.com

Viewer

Kathlyn Lang

Human Intranet Representative

kathlyn.lang57@hotmail.com

Viewer

Alden Waters

Forward Research Director

alden.waters54@gmail.com

Member

Camryn Ernser

Forward Paradigm Executive

camryn_ernser@yahoo.com

Member

Marcella Casper

Customer Operations Developer

marcella_casper42@gmail.com

Admin

Marques Pacocha

Product Integration Representative

marques_pacocha@gmail.com

Viewer

Coty Konopelski

Regional Brand Designer

coty_konopelski45@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
Dianne Hackettthaddeus.swift44@hotmail.comMargarettafortActive$662.39
Caleb Wintheisergregorio.collier@hotmail.comChesapeakeActive$170.07
Neal Hoegerretta44@gmail.comAlexysburghActive$796.06
Clifton Gutkowskiyvette.dibbert@hotmail.comBessieworthActive$577.08
Catherine Boganlempi_harvey-hegmann@yahoo.comLavernamouthActive$276.00
Total$2,481.60

Basic table

Table with Images

NameEmailLocationStatusBalance
Lyle Turner
@chadrick.doyle
audie.luettgen47@hotmail.comLake AntoniacesterInactive$390.64
Stephen Bradtke
@meagan_hirthe
delia23@yahoo.comJudyfortActive$303.11
Fredrick O'Kon PhD
@elenora73
delia.conroy@hotmail.comEdaworthInactive$255.66
Mr. Frederick Stehr
@zechariah_feeney96
nico_schinner@gmail.comGuaynaboActive$1,017.40
Adam Miller
@morgan_erdman78
dejuan.price44@hotmail.comCruickshankfortInactive$24.04

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dana Hirthebryon53@gmail.comTexas CityInactive$939.74
Peter Schuppe IIImadeline78@yahoo.comKittyvilleInactive$848.85
Fredrick Hilpertcamilla.ritchie11@hotmail.comPort JackystadActive$1,085.02
Suzanne Kemmer DVMvesta.langosh80@hotmail.comNorth JaylonInactive$175.23
Patrick Breitenbergkay_bernier@yahoo.comMoenshireInactive$553.93
Total$3,602.77

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ms. Patricia Cronineliane12@yahoo.comBartolettitonActive$64.83
Don Huelscitlalli25@gmail.comBrentsideInactive$646.94
Ramona Ferrylesley.schaefer53@yahoo.comHeathcotevilleInactive$853.46
Nina Dickidereck10@yahoo.comSouth ChynasteadInactive$411.44
Lee Hansenglen_kuhic@yahoo.comCrystalburyActive$180.29
Total$2,156.96

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ms. Marie Ryanbrandi96@gmail.comClovisportActive$198.95
Kent Adamsvirgie5@gmail.comDevynfortInactive$800.28
Dr. Julian Waters Ijanae.weimann@yahoo.comSouth FrederickbergInactive$782.73
Allison Borerxzavier_konopelski5@yahoo.comBethvilleInactive$673.28
Orville Wolfbrisa.cruickshank@yahoo.comTrevorsteadActive$640.89
Total$3,096.13

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
Annie Welchalva.hessel19@yahoo.comRunolfsdottirportActive$670.46
Sonia Barrowskacey.oconner46@hotmail.comCronintownInactive$919.88
Ernesto Fadeljeramie_reinger@hotmail.comSatterfieldtonActive$165.53
Darrel Ondrickadovie_beier10@gmail.comNorth LorichesterInactive$897.35
Rosalie Durganjefferey80@yahoo.comWest FrancislandActive$492.59
Total$3,145.81

Table with row selection

Card Table

NameEmailLocationStatusBalance
Vera Wehner Ithaddeus69@hotmail.comWilmingtonActive$820.92
Sean Walterdavid30@hotmail.comMedhursttownInactive$722.52
Donald Jacobijosue.weber3@hotmail.comZionchesterInactive$401.70
Erick Kerlukedeclan46@yahoo.comNorth EverardotonInactive$384.03
Gretchen Spencerkelsie_lynch@yahoo.comLake AnnieInactive$506.27
Total$2,835.44

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
Loretta Grimesamalia.considine79@yahoo.comWest DexterActive$475.33
Micheal Grimesamerica.robel19@yahoo.comLake AlannasteadInactive$429.87
Shane Grahamforest_ortiz@yahoo.comPonceInactive$865.04
Harry Leannonvalentin54@gmail.comFort DameonActive$765.76
Kelley Effertzantonio.cassin10@gmail.comLake EwaldtonInactive$47.90
Darnell Moen Sr.angeline.treutel58@hotmail.comPort LeannworthInactive$296.95
Wilma Framilou_braun@yahoo.comWintheisersteadInactive$702.43
Edith Schulistlori76@hotmail.comNorth KathryneboroughActive$1,094.54
Krystal Quigley Sr.arely25@hotmail.comLake PaulinelandActive$512.83
Frances Beckerhoward.kutch@gmail.comSouth AlyssonmouthInactive$1,174.46
Glenn Spencergarfield77@gmail.comSouth ZoeyInactive$182.94
Cora Sporermadaline_wisoky@yahoo.comSouth RubyeInactive$167.33
Joan Baumbachuriel.franey@yahoo.comMitchellworthActive$97.57
Jodi Walker IValbin_douglas@hotmail.comDetroitActive$312.47
Dustin Crooksgabriella.shields@yahoo.comNorth EmmieActive$1,178.47
Total$8,303.89

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.