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
INV001UnpaidCredit Card$995.19
INV002PendingPayPal$320.87
INV003UnpaidCredit Card$309.78
INV004UnpaidBank Transfer$169.36
INV005PaidPayPal$665.37
INV006PaidPayPal$741.03
INV007UnpaidCredit Card$848.88
Total$4,050.48

Simple

Users

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

NameTitleEmailRoleActions
Norbert HoweSenior Implementation Supervisornorbert_howe@hotmail.comAdmin
Baby Quitzon-BauchRegional Directives Assistantbaby_quitzon-bauch91@hotmail.comMember
Merlin SanfordGlobal Metrics Engineermerlin_sanford36@gmail.comMember
Delbert AbshireFuture Interactions Techniciandelbert.abshire98@gmail.comMember
Lulu SchinnerCorporate Creative Producerlulu_schinner@gmail.comMember
Alize KovacekLead Accounts Executivealize.kovacek@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Trevion Stamm

Legacy Identity Coordinator

trevion.stamm0@hotmail.com

Member

Marilie Sanford

Dynamic Group Agent

marilie_sanford@yahoo.com

Admin

Trevor Strosin

Customer Functionality Analyst

trevor.strosin8@hotmail.com

Member

Lizeth Hoppe

Principal Branding Agent

lizeth_hoppe35@yahoo.com

Viewer

Craig Hessel

Regional Factors Technician

craig.hessel@gmail.com

Admin

Lowell Cronin

Dynamic Assurance Developer

lowell_cronin7@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Lauretta Pagac

Dynamic Quality Officer

lauretta.pagac38@hotmail.com

Member

Trisha Runolfsdottir-Glover

National Directives Representative

trisha_runolfsdottir-glover26@yahoo.com

Member

Deja Bergnaum

Human Applications Administrator

deja_bergnaum46@gmail.com

Member

Randi Hilpert

Product Solutions Supervisor

randi_hilpert93@hotmail.com

Admin

Maritza Braun

Central Functionality Associate

maritza_braun89@hotmail.com

Viewer

Pansy Kris

Regional Interactions Technician

pansy.kris@hotmail.com

Viewer

Beryl Bergnaum

Corporate Brand Consultant

beryl.bergnaum@yahoo.com

Admin

Karlee Rodriguez-Goyette

Dynamic Metrics Designer

karlee_rodriguez-goyette@hotmail.com

Member

Claudie Stamm

Central Program Technician

claudie.stamm@hotmail.com

Member

Luciano Ondricka

Forward Metrics Coordinator

luciano_ondricka33@hotmail.com

Member

Jed Bechtelar

District Directives Producer

jed.bechtelar64@hotmail.com

Member

Pinkie Carroll

Product Accounts Supervisor

pinkie_carroll13@yahoo.com

Viewer

Paxton Larson

Dynamic Paradigm Representative

paxton_larson@gmail.com

Admin

Elta Pagac

Senior Operations Director

elta.pagac31@yahoo.com

Viewer

Geovanny Boehm

Central Paradigm Planner

geovanny_boehm@gmail.com

Admin

Neal Skiles

Legacy Web Producer

neal.skiles@yahoo.com

Admin

Jerrell Kulas

Direct Web Supervisor

jerrell.kulas54@yahoo.com

Member

Casimir West

Future Operations Developer

casimir_west@hotmail.com

Viewer

Chet Leannon

Dynamic Web Designer

chet_leannon49@gmail.com

Member

Idella Rowe

District Program Liaison

idella_rowe65@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
Elmer Krajcikmaybell_ryan27@hotmail.comEast ClarabelleActive$1,170.85
Miss Martha Pollichdarrel_gibson19@yahoo.comMidwest CityInactive$178.34
Thomas Hickleleda14@yahoo.comFort AntonettaInactive$265.38
Marcus Strosincolin_powlowski77@hotmail.comWest CitlallifieldActive$1,018.34
William Thompsondelaney2@hotmail.comHicklefurtActive$281.01
Total$2,913.92

Basic table

Table with Images

NameEmailLocationStatusBalance
Kyle Conn-Schowalter
@chesley_ankunding
margarete_towne@hotmail.comPort HailiesteadInactive$40.17
Jimmy Schimmel
@velva32
mandy_koelpin1@gmail.comPort ShawnsteadActive$397.99
Loren Johns
@joany.wyman
naomie.considine16@gmail.comDublinInactive$125.75
Clyde Gulgowski
@beulah84
theron46@gmail.comAuermouthInactive$692.07
Clara Rath
@karley_graham38
kathleen17@hotmail.comDeonhavenActive$97.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mack Bernierjessica.kutch13@yahoo.comJohnsburyInactive$189.79
Antonia Kiehncasimir.kshlerin@hotmail.comRamonfortInactive$264.26
Edward Manterosina42@hotmail.comOaklandInactive$1,171.36
Marion Toyethelyn_maggio90@hotmail.comLake JudeInactive$499.61
Leo Hilllpearl.trantow21@hotmail.comFort NicholausInactive$35.58
Total$2,160.60

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kelly Cartermaynard.rice@yahoo.comWest EinotonActive$600.06
Erik Thompsonjordan_treutel98@hotmail.comLake SelenaInactive$670.97
Mona Oberbrunnermartine_cruickshank38@hotmail.comWest VernieActive$1,067.11
Shirley Mueller Jr.lydia_larson15@hotmail.comStiedemannlandInactive$506.35
Elijah Tillmanjonathan_weissnat4@hotmail.comBettieburghActive$567.37
Total$3,411.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Orville Johnstonalvis.ziemann@gmail.comRauchesterActive$900.49
Jessie Bartolettivalentin1@gmail.comGabriellehavenActive$5.42
Ramon Weimanncullen.bergstrom76@gmail.comLake KathrynmouthActive$398.84
Beverly Bernierofelia_ryan14@hotmail.comDollyportInactive$348.09
Monique Batzallan_blanda41@hotmail.comCoeur d'AleneActive$692.19
Total$2,345.03

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
Felicia Ziemegino_leffler@gmail.comNorth KadinstadActive$364.63
Diane Kulas DVMcarmelo28@yahoo.comArlington HeightsActive$770.20
Dora Friesenjudah15@gmail.comEast JamaalcesterActive$695.37
Tyrone Mohrnoemy_shields93@hotmail.comEast InesActive$744.51
Ginger Townedillan_boehm-dach71@yahoo.comLake JoesphboroActive$100.49
Total$2,675.20

Table with row selection

Card Table

NameEmailLocationStatusBalance
Willie Hillllondon.price50@gmail.comAnn ArborActive$508.37
Margarita Bergezion.douglas@hotmail.comDanburyActive$805.58
Erica Trantowsandy_turcotte@yahoo.comEast FredashireActive$237.79
Marie Hyatt PhDmohamed_wisoky@yahoo.comCaguasActive$617.39
Jerald Huelsabner44@gmail.comWest BennyviewInactive$414.44
Total$2,583.57

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
Mr. Timothy Haleylorna70@yahoo.comPort AlexiemouthActive$1,020.61
Kristine Gloveralessia77@yahoo.comSawaynhavenInactive$644.80
Alberto Uptonalena_blick@gmail.comBinscesterInactive$110.17
Hilda Boehm Idelia.satterfield7@gmail.comEast JaylinstadActive$1,168.01
Ryan Runolfssonhettie_zieme42@gmail.comShemarstadInactive$930.77
Andre Romaguerajared99@gmail.comFort LambertActive$279.49
Nadine Wolfjaime87@hotmail.comSouth EloisaActive$999.89
Fannie Boyledelta34@gmail.comPort MaverickInactive$1,053.20
Janie Macejkoviclouvenia.fahey54@gmail.comWittingfortInactive$1,183.39
Elvira Wilkinsonboyd.kertzmann42@hotmail.comSatterfieldhavenActive$1,097.36
Eugene McDermottxzavier_stracke99@hotmail.comRogahnsideActive$162.37
Cory Heller IIjaunita.buckridge87@yahoo.comSouth TobinboroInactive$264.90
Miss Mattie Schoengardner.reichel@gmail.comJustinetownActive$98.21
Eric Sauermonique_abernathy-cole29@gmail.comVeumburghInactive$191.54
Andres Wardjaden.thiel96@gmail.comMeaganvilleActive$341.37
Total$9,546.08

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.