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$617.49
INV002PaidPayPal$808.67
INV003PaidBank Transfer$717.07
INV004UnpaidCredit Card$147.90
INV005PaidBank Transfer$918.34
INV006UnpaidCredit Card$847.36
INV007UnpaidCredit Card$994.40
Total$5,051.23

Simple

Users

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

NameTitleEmailRoleActions
Rafael JacobsFuture Brand Supervisorrafael.jacobs83@gmail.comViewer
Lauren ParkerProduct Integration Consultantlauren_parker55@yahoo.comMember
Homer ChristiansenProduct Data Executivehomer_christiansen@hotmail.comAdmin
Wilfredo SchambergerHuman Factors Orchestratorwilfredo_schamberger35@gmail.comViewer
Paul HowellNational Division Consultantpaul.howell@hotmail.comMember
Karson GoldnerCentral Markets Consultantkarson.goldner@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Gloria Ferry

Corporate Intranet Officer

gloria_ferry@hotmail.com

Admin

Anna Hoeger

Customer Metrics Technician

anna_hoeger@hotmail.com

Member

Rick Blick

Dynamic Operations Strategist

rick_blick@hotmail.com

Admin

Rolando Fahey

Corporate Marketing Manager

rolando.fahey28@gmail.com

Viewer

Molly Prohaska

Human Group Developer

molly.prohaska53@yahoo.com

Admin

Collin Daniel

Global Interactions Designer

collin_daniel16@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Gillian Flatley

District Configuration Administrator

gillian.flatley95@gmail.com

Member

Jamir Bernhard

Lead Integration Assistant

jamir.bernhard@yahoo.com

Viewer

Brett Ryan

National Accountability Officer

brett_ryan38@hotmail.com

Viewer

Marcus Bechtelar

District Applications Administrator

marcus.bechtelar@yahoo.com

Member

Dolores Kemmer

Human Operations Agent

dolores.kemmer@yahoo.com

Admin

Tom Rowe

Central Identity Analyst

tom_rowe76@gmail.com

Viewer

Leslie Green

Customer Intranet Engineer

leslie.green@hotmail.com

Member

Stanton Stamm

Legacy Communications Orchestrator

stanton_stamm@hotmail.com

Viewer

Mabelle Pfeffer

Human Tactics Supervisor

mabelle_pfeffer17@gmail.com

Viewer

Viviane Lubowitz-Huels

Forward Usability Producer

viviane_lubowitz-huels@hotmail.com

Viewer

Louise Kuhn

Global Program Manager

louise_kuhn19@gmail.com

Admin

Beverly Hills

International Identity Representative

beverly_hills33@hotmail.com

Viewer

Teresa Leuschke

Forward Data Technician

teresa.leuschke@hotmail.com

Member

Jayne Hegmann

Future Identity Facilitator

jayne.hegmann15@yahoo.com

Viewer

Enid Gutmann

Direct Intranet Analyst

enid.gutmann@hotmail.com

Admin

Wanda Jacobs

Human Branding Officer

wanda.jacobs43@gmail.com

Member

Demond Jacobs

National Integration Liaison

demond_jacobs@yahoo.com

Viewer

Alex Konopelski

Direct Group Technician

alex.konopelski0@gmail.com

Member

Francesco Wolf

Internal Data Architect

francesco.wolf58@gmail.com

Viewer

Amelie Anderson

International Implementation Facilitator

amelie_anderson@gmail.com

Member

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
Ceasar Koeppdon.macgyver@yahoo.comPlacentiaActive$308.63
Lindsey Stiedemanncolin46@gmail.comLake KarichesterActive$1,077.01
Anahi Harveyjasmine_hackett@hotmail.comEast RoyActive$489.55
Brendan Schmelerantonia0@yahoo.comAmericolandInactive$648.07
Clay Stantonvan2@hotmail.comBrownhavenActive$830.22
Total$3,353.48

Basic table

Table with Images

NameEmailLocationStatusBalance
Jeffery Kris
@tomas61
elmira55@gmail.comFrankiesideInactive$1,148.44
Cristina Boyer
@hannah21
martha4@gmail.comLowehavenActive$417.07
Bradford Klocko
@brandon.stark51
nya13@hotmail.comAdrielfurtInactive$77.43
Tyrone Strosin
@nichole27
jordan_bahringer@yahoo.comWest DarioActive$1,134.71
Antwan Lowe
@cordell41
maxwell25@hotmail.comBozemanInactive$95.83

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Fatima Wehnerbrianne5@yahoo.comSkokieActive$1,169.70
Jammie Harveykatrina39@gmail.comNew LavinasideActive$733.20
Hosea Sanfordarthur77@yahoo.comHilllfurtInactive$722.70
Macey Millsguadalupe.nienow@gmail.comHermanhavenInactive$63.65
Tom Marksdeangelo2@yahoo.comNew BrodysteadActive$41.95
Total$2,731.20

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kristopher Bruenkelli_rippin-marquardt10@yahoo.comBuena ParkInactive$1,041.66
Minnie Kris-Effertz Sr.pamela_marks@yahoo.comAndersonActive$860.10
Kathleen Johnsonrosie.donnelly81@hotmail.comKentwoodInactive$83.06
Dr. Belinda Borerralph_cartwright67@yahoo.comNew BraunfelsInactive$1,169.61
Myrtle Bauchwilson_stroman18@hotmail.comLake JavontechesterInactive$262.99
Total$3,417.42

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Cecilia DuBuquejamarcus.braun@gmail.comMenifeeInactive$248.79
Arnold Labadiesidney_raynor14@yahoo.comLake BrendanburyActive$1,005.66
Dr. Kirk Littlebrandi.boehm28@hotmail.comBodefieldInactive$1,171.17
Nelson Ullrichlinnea1@yahoo.comRichardsonInactive$390.78
Lester Breitenbergava.franecki89@yahoo.comLucienneshireInactive$809.42
Total$3,625.82

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
Archie Romagueraallen_schimmel11@yahoo.comEast ErichInactive$333.75
Cynthia Kubclark_baumbach@hotmail.comMarcellusworthActive$458.68
Nico Willmsjohnnie.gulgowski@hotmail.comLilianaworthInactive$240.93
Wade Pfeffer-Ricemaybell8@yahoo.comLas CrucesActive$641.48
Leon Jacobimanuel_rath40@hotmail.comCoral GablesActive$796.29
Total$2,471.13

Table with row selection

Card Table

NameEmailLocationStatusBalance
Karen Considinepayton.runolfsson49@yahoo.comMinervaboroInactive$587.93
Myra Bashirian-Nitzschebryan.ryan-kihn93@gmail.comNorth KennedistadInactive$985.41
Demetrius Boganadeline_doyle3@hotmail.comKirlinstadInactive$941.67
Lowell Beattymaureen_stoltenberg@yahoo.comHalvorsonfieldInactive$733.74
Zoila Bahringer IIIzechariah.goodwin@gmail.comBrocktonActive$368.58
Total$3,617.33

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
Reuben Krajciklorene.cruickshank88@hotmail.comLake LoycebergInactive$160.90
Glen Huelshawn.runte37@yahoo.comPreciousburghInactive$837.67
Flora Grimesestel27@hotmail.comSouth GateInactive$1,047.07
Erna Rath-Wilkinsonshane.wintheiser@hotmail.comNorth GlennastadInactive$1,093.32
Homer Connellyvalerie_volkman@hotmail.comBernicecesterInactive$1,143.07
Ashlynn Leschmarion_goyette3@gmail.comLake KaiaworthInactive$57.11
Brooke Klockorodrigo17@yahoo.comFort ColinfieldActive$322.65
Mertie Moorepaul.keebler30@yahoo.comLake MayburyActive$384.82
Randolph Nikolauskristine.reilly@gmail.comPort ColtenInactive$661.70
Dr. Will Morar PhDroberto_mayert40@gmail.comJerdefurtActive$332.23
Annabell Ortiz MDroxanne.christiansen60@yahoo.comAlihavenActive$670.81
Luna Reynolds-Feeney Vapril58@hotmail.comNew GarnetworthInactive$605.32
Edmond Hellermary5@hotmail.comLake MyrtlebergActive$949.35
Dr. Armando Towneclarence_oreilly@gmail.comBrownworthInactive$418.42
Miss Leigh Kemmerjean_bosco-huel17@hotmail.comHortenseboroInactive$1,011.87
Total$9,696.31

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.