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
INV001PaidPayPal$530.33
INV002UnpaidPayPal$506.09
INV003PendingPayPal$946.89
INV004PaidCredit Card$816.94
INV005PendingCredit Card$456.18
INV006UnpaidBank Transfer$159.40
INV007UnpaidBank Transfer$287.12
Total$3,702.95

Simple

Users

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

NameTitleEmailRoleActions
Lucio BartolettiNational Accountability Orchestratorlucio.bartoletti75@hotmail.comViewer
Virginia MorarLead Brand Directorvirginia.morar13@hotmail.comMember
Sonia EmardForward Applications Coordinatorsonia_emard79@gmail.comViewer
Maddison SchoenRegional Infrastructure Facilitatormaddison_schoen@hotmail.comAdmin
Milton LindgrenChief Intranet Representativemilton_lindgren@yahoo.comAdmin
Skyla PfefferForward Accountability Specialistskyla_pfeffer@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Eden Harvey

Direct Web Architect

eden.harvey@hotmail.com

Viewer

Zander Kessler

Global Functionality Developer

zander.kessler@hotmail.com

Member

Robin Williamson

Central Operations Designer

robin_williamson16@yahoo.com

Admin

Lue Kuphal-Bernier

National Interactions Orchestrator

lue_kuphal-bernier@hotmail.com

Admin

Clara Corwin

Internal Paradigm Representative

clara.corwin88@hotmail.com

Member

Juliana Upton

Legacy Configuration Administrator

juliana_upton22@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Ahmed Wolff

Central Interactions Representative

ahmed.wolff64@hotmail.com

Admin

Jeromy Cummerata

Senior Markets Assistant

jeromy.cummerata@yahoo.com

Admin

Ora Mann

Global Group Liaison

ora.mann@gmail.com

Member

Asha Lindgren

District Creative Specialist

asha.lindgren@hotmail.com

Member

Reilly Dickinson

Dynamic Group Designer

reilly_dickinson@hotmail.com

Admin

Wilhelm Pagac

Human Research Analyst

wilhelm.pagac48@yahoo.com

Viewer

Octavia Herzog

Lead Mobility Strategist

octavia_herzog35@gmail.com

Admin

Arnulfo Lueilwitz

Forward Creative Administrator

arnulfo.lueilwitz75@gmail.com

Member

Daren Parisian

International Integration Coordinator

daren_parisian@hotmail.com

Admin

Austin Grady

Product Research Executive

austin_grady@yahoo.com

Admin

Macy Ryan

Chief Accounts Designer

macy_ryan@yahoo.com

Viewer

Vella Pollich

International Division Strategist

vella_pollich47@gmail.com

Viewer

Sonny Harvey

District Applications Representative

sonny.harvey64@yahoo.com

Viewer

Nedra Goyette

Direct Assurance Planner

nedra_goyette20@gmail.com

Member

Fannie Russel

Regional Solutions Engineer

fannie_russel@yahoo.com

Viewer

Garnet Pagac

Internal Branding Agent

garnet_pagac98@yahoo.com

Viewer

Clinton Erdman

Regional Group Administrator

clinton.erdman@yahoo.com

Admin

Valentin Hills

International Research Manager

valentin.hills34@yahoo.com

Admin

Destiny Anderson

Global Solutions Orchestrator

destiny.anderson48@hotmail.com

Viewer

Terrance Tremblay

Senior Factors Developer

terrance.tremblay@gmail.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
Jimmie Beatty Vadrianna_trantow@hotmail.comNorth MarvinboroInactive$1,060.42
Tasha Leschgonzalo_wolf30@gmail.comStanfordlandActive$851.49
Lee Batzhank.koelpin79@hotmail.comGrantchesterInactive$253.26
Miss Bessie Uptonkara.ward80@gmail.comPort NathaniallandActive$270.09
Jessica Torphywinston44@hotmail.comCummeratavilleInactive$1,046.74
Total$3,482.00

Basic table

Table with Images

NameEmailLocationStatusBalance
Lee Lehner
@stella75
phoebe.considine64@hotmail.comSouth GreenInactive$872.46
Elizabeth Gerlach
@laverna_leannon
rickey45@gmail.comPort LaverneInactive$819.20
Mathew Haag
@ed0
nathen_cummerata@yahoo.comNorth KennaActive$1,186.18
Kristine Gleichner
@macy62
kallie_feeney63@gmail.comWest AliaburghActive$256.81
Malcolm Pfeffer
@santa_grimes32
cali_kerluke42@yahoo.comFort SidmouthActive$754.11

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Fernando Turnergerard23@hotmail.comMayaguezActive$1,193.31
Gayle Townegerry.rippin34@hotmail.comFort BiankaInactive$488.05
Tami Murray Sr.antonette.cartwright@hotmail.comJennyferburghActive$133.64
Jessie Erdmanbrionna93@hotmail.comPort TrinityInactive$533.87
Eduardo Bartonyvette_turcotte@gmail.comRocky MountActive$988.01
Total$3,336.88

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rochelle Grady DVMstacey_mccullough39@yahoo.comHildatownActive$1,043.83
Bethany Sengermarianna_kuhlman@hotmail.comRozellaburyActive$1,117.17
Angelo Lindgrenpeter.renner@yahoo.comOrlandoInactive$1,141.96
Jeff Heidenreichgilbert_daugherty@hotmail.comWisozkfurtActive$1,141.65
Nadine Watsicawinston.heidenreich@yahoo.comLake EldridgeInactive$1,054.58
Total$5,499.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Vincent Kinglonzo50@yahoo.comVitobergActive$342.69
Maurice Bahringerarno_beer@hotmail.comSimonishavenInactive$636.63
Zachary Breitenberg-Ernsermaxwell_greenholt29@yahoo.comLiavilleInactive$138.45
Wm Ziemannglen.cormier2@hotmail.comLake LuciustownActive$1,108.42
Delores Powlowskijada.rau@yahoo.comSt. LouisActive$281.33
Total$2,507.52

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
Betsy Leschcristopher80@gmail.comHartfordInactive$308.91
Dr. Emanuel Connellykianna25@yahoo.comNathenboroInactive$548.35
Loretta Cristenola_bins@gmail.comNapoleonsteadInactive$492.42
Patty Kovaceknayeli.becker38@yahoo.comReillyshireInactive$493.09
Kristine Andersonjeromy.kreiger@gmail.comBerwynActive$359.54
Total$2,202.31

Table with row selection

Card Table

NameEmailLocationStatusBalance
Gloria Champlinbobbie_bauch@yahoo.comFrancescotonInactive$1,079.63
Jacqueline Dickinsonkameron.white@gmail.comUllrichtownActive$660.20
Faye Bogisichmarge_thompson1@yahoo.comErnsershireInactive$468.22
Alan Keelingdax8@gmail.comBoehmshireInactive$1,004.05
Ernest Reicheltyrique3@gmail.comKeiracesterActive$151.91
Total$3,364.01

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
Evan Rohanmadeline.carroll89@gmail.comLake JorgeInactive$721.40
Darrel Millercoleman_fahey44@yahoo.comNorth ArnoburghActive$1,174.19
Mr. Brian Smitholen16@gmail.comKaydenburghActive$1,072.51
Shirley Bartonjonathon_west83@gmail.comTremblayvilleActive$1,182.94
Greg DuBuquepat91@hotmail.comPort NapoleonbergActive$273.69
Reginald Grimesdandre_fay35@yahoo.comSouth GuadalupeInactive$668.74
Pat Kulasfelipe_yundt@hotmail.comSouth ColumbuscesterInactive$797.59
Yolanda Hellerpolly.willms13@yahoo.comNew NovellashireInactive$1,108.90
Wilbert Jacobseva5@yahoo.comFort LeslieInactive$1,187.11
Alton Lindshyann.cronin@hotmail.comNicolasboroActive$905.04
Ruth Swiftmellie99@gmail.comWest ShakiraActive$1,181.21
Faye Langoshfredy_daugherty@yahoo.comWest EverettmouthActive$1,007.74
Melinda Boyerwilliam_fahey90@hotmail.comLillianboroActive$1,118.47
Belinda Litteldagmar_boyer@yahoo.comLoravilleInactive$1,142.48
Sally Leuschkesandy77@gmail.comLuettgenlandActive$427.72
Total$13,969.73

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.