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$565.02
INV002UnpaidBank Transfer$933.43
INV003PaidPayPal$973.65
INV004UnpaidBank Transfer$861.95
INV005PaidCredit Card$249.01
INV006UnpaidCredit Card$847.69
INV007PaidPayPal$425.68
Total$4,856.43

Simple

Users

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

NameTitleEmailRoleActions
Emily HilllDynamic Implementation Strategistemily.hilll@hotmail.comViewer
Gloria AnkundingSenior Markets Architectgloria_ankunding90@hotmail.comAdmin
Johnnie PagacNational Accounts Assistantjohnnie_pagac75@gmail.comMember
Meghan RohanDirect Identity Supervisormeghan.rohan@yahoo.comAdmin
Cassandre WindlerCustomer Group Producercassandre_windler@hotmail.comViewer
Doyle HahnChief Identity Plannerdoyle_hahn@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Steve Lesch

Regional Mobility Supervisor

steve.lesch@yahoo.com

Member

Ana Flatley

International Accounts Administrator

ana.flatley19@hotmail.com

Viewer

Troy Johnson

Global Tactics Officer

troy_johnson@hotmail.com

Viewer

London Price

International Infrastructure Strategist

london.price@yahoo.com

Viewer

Charles Swaniawski

Regional Marketing Designer

charles_swaniawski24@gmail.com

Member

Herbert Pfeffer

Direct Division Designer

herbert_pfeffer@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Margie Frami

Global Operations Planner

margie.frami@hotmail.com

Admin

Joe Weber

Global Data Technician

joe.weber@yahoo.com

Viewer

Nathan Becker

Investor Integration Designer

nathan.becker70@gmail.com

Viewer

Ramona O'Conner

Regional Identity Agent

ramona_oconner@gmail.com

Viewer

Lori Raynor

Direct Creative Orchestrator

lori_raynor3@gmail.com

Admin

Joe Johnston

Internal Metrics Architect

joe.johnston15@gmail.com

Viewer

Gene Turner

Forward Creative Planner

gene_turner@gmail.com

Admin

Bruce Towne

Regional Brand Officer

bruce.towne@gmail.com

Admin

Delmer Denesik

Direct Marketing Supervisor

delmer_denesik3@hotmail.com

Member

Walker Schmeler

Internal Tactics Officer

walker_schmeler@gmail.com

Viewer

Mary Oberbrunner

Dynamic Interactions Analyst

mary.oberbrunner@hotmail.com

Viewer

Bridget Zemlak

Investor Communications Architect

bridget.zemlak59@gmail.com

Member

Ernestine Tromp

Dynamic Solutions Analyst

ernestine_tromp@gmail.com

Viewer

Bert Wisozk

Lead Communications Director

bert.wisozk2@hotmail.com

Viewer

Sonia Russel

Human Metrics Agent

sonia_russel74@yahoo.com

Admin

Dallas Pollich

Lead Functionality Executive

dallas.pollich@hotmail.com

Viewer

Robin Altenwerth

Future Division Facilitator

robin.altenwerth72@hotmail.com

Admin

Dominic Watsica

Lead Accounts Architect

dominic_watsica62@yahoo.com

Member

Rodrick Rice

Chief Identity Director

rodrick_rice91@hotmail.com

Member

Bernard Lesch

Direct Research Planner

bernard.lesch22@hotmail.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
Ms. Justus Dachciara70@hotmail.comArlingtonInactive$60.46
Fernando Emmerichkaylah.crona37@gmail.comNew AstridburyInactive$694.92
Rafael Kertzmannjeanette_green36@gmail.comChelseatonActive$670.56
Dr. Vella Anderson Vdante.harber@yahoo.comSkylaboroInactive$191.31
Daphnee Jonesmax.huels57@yahoo.comBoyersteadInactive$182.08
Total$1,799.33

Basic table

Table with Images

NameEmailLocationStatusBalance
Stephen Heidenreich
@lori74
reina79@hotmail.comGunnarbergActive$724.26
Stacy Rutherford
@raymond.wuckert52
braeden_hickle@yahoo.comSouth BrielleInactive$802.15
Timothy Prosacco
@stanley_wolf
heather37@hotmail.comFort FayeboroughActive$1,100.61
Clement Monahan
@cheryl_hilpert11
hanna_hilpert30@gmail.comHandstadActive$464.15
Craig Schamberger
@clovis.pagac86
marc_considine62@gmail.comPort RozellatonActive$216.99

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Tyrone Gulgowski Sr.johnny_gislason85@hotmail.comWilmingtonInactive$789.85
Mr. Sonny Mraz-Herzog IIIjulia55@hotmail.comLake FranciscoInactive$989.04
Dr. Harmony Farrellfanny.hyatt60@yahoo.comSouth KaseyInactive$1,137.31
Alysa Runolfssonnickolas_morissette6@gmail.comNew HowardshireInactive$434.43
Damon Kleinguadalupe.heathcote@hotmail.comFort RoycemouthInactive$981.92
Total$4,332.55

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lila Mohrgabriella.reinger@yahoo.comMerlinsideInactive$180.13
Elfrieda Beckerbrooke_moore59@gmail.comEast RosamondActive$677.20
Gideon Bogisichabbey_graham@yahoo.comDonnellychesterInactive$737.05
Alfred Grantaurelia.welch63@yahoo.comPadbergworthActive$515.26
Sierra Dietrichelijah_stracke@gmail.comSouth DedricActive$467.11
Total$2,576.75

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brandy Kassulkevernon89@yahoo.comEast MiguelcesterInactive$117.30
Mr. Harvey Zemlaktaylor_langosh@hotmail.comBrekkestadActive$418.77
Enrico Langoshkendra.hayes23@hotmail.comPort AsiafieldInactive$731.12
Mr. Gustavo Schmitt-Bartolettibrett_schuster61@yahoo.comCountry ClubInactive$201.36
Yoshiko Nicolas-Nikolausstephanie25@gmail.comNew EulafurtInactive$1,089.98
Total$2,558.53

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
Thea Rowebecky71@hotmail.comAliyachesterInactive$414.85
Bill Quigleyloma_deckow27@yahoo.comSouth ElsefortInactive$113.77
Cindy Wiza-Rennersydnie_lubowitz@hotmail.comNew SiennaActive$573.46
Opal Gislasoncornelius.smith@yahoo.comKochburyInactive$528.72
Bradly Goyettefloyd98@gmail.comCamylleburyInactive$1,158.36
Total$2,789.16

Table with row selection

Card Table

NameEmailLocationStatusBalance
Merle Renner Sr.bartholome78@gmail.comBeattyburyActive$698.65
Kristoffer Hettingerluis10@gmail.comNathanialsideInactive$994.75
Jennie Padbergyoshiko70@yahoo.comDallasActive$26.59
Pearl Powlowskikristie_hickle97@gmail.comSouth MadonnafieldInactive$1,055.05
Dr. Mabel Blickvickie.denesik@hotmail.comFremontActive$1,051.57
Total$3,826.61

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
Jodi Greenholttaryn69@hotmail.comKreigerlandActive$876.03
Tyrone Botsfordjane_kemmer@gmail.comLynwoodInactive$1,101.83
Monty Gradyisabelle_renner28@hotmail.comGrand RapidsActive$989.33
Faye Raynorsage50@hotmail.comNew JettlandActive$958.58
Edwin Trantowsaul.wisozk69@gmail.comWest MariannaActive$177.45
Elias DuBuquemarilyn.parisian@yahoo.comWest VanessaboroughActive$866.85
Philip Moore Vjessica66@yahoo.comNewellchesterActive$892.16
Gardner Feeneyjessica.grimes@yahoo.comEast RhiannonActive$387.80
Crystal Abbottkim45@gmail.comPearl CityActive$96.95
Reed Dickinoah.daniel51@yahoo.comTwin FallsInactive$1,190.58
Virginie Cristmac.russel@yahoo.comNorth CharlotteburyActive$710.41
Lynne Sporerdan28@gmail.comO'KoncesterInactive$791.39
Edith Deckow PhDdarrick.wehner@yahoo.comAlishatownActive$433.38
Gregory Gutmanntomas_bayer@yahoo.comNorth EbonytonInactive$1,162.06
Rosalie Trompshelley_kertzmann83@hotmail.comGleasonsteadInactive$256.45
Total$10,891.25

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.