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$906.96
INV002UnpaidBank Transfer$865.97
INV003PendingCredit Card$713.59
INV004UnpaidPayPal$422.47
INV005PaidPayPal$863.54
INV006PaidBank Transfer$268.82
INV007UnpaidBank Transfer$202.71
Total$4,244.06

Simple

Users

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

NameTitleEmailRoleActions
Neil SauerGlobal Data Engineerneil_sauer@gmail.comViewer
Khalil HegmannCustomer Metrics Techniciankhalil.hegmann@hotmail.comMember
Turner JastCorporate Web Engineerturner_jast83@yahoo.comMember
Casper VeumProduct Communications Officercasper.veum@hotmail.comMember
Alexis HermanPrincipal Implementation Technicianalexis.herman@yahoo.comMember
Kamryn MaggioFuture Markets Plannerkamryn.maggio@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Lucio Dietrich

Central Accounts Producer

lucio_dietrich61@hotmail.com

Admin

Natasha Klocko

Corporate Security Coordinator

natasha_klocko74@gmail.com

Member

Leanna Kohler

Central Response Supervisor

leanna_kohler@hotmail.com

Viewer

Orin Spinka

Human Security Developer

orin.spinka82@hotmail.com

Member

Dena Bartell

Customer Paradigm Officer

dena_bartell@yahoo.com

Viewer

Edythe Jacobs

Regional Implementation Developer

edythe.jacobs13@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Braxton Cassin

National Brand Strategist

braxton.cassin@hotmail.com

Admin

Denis Gorczany

Forward Creative Specialist

denis.gorczany@yahoo.com

Member

Garrett Pfeffer

Dynamic Accounts Assistant

garrett.pfeffer38@yahoo.com

Viewer

Cheyenne Veum

Global Implementation Designer

cheyenne.veum@yahoo.com

Admin

Ezekiel Parker

Forward Creative Director

ezekiel.parker@yahoo.com

Member

Carlie D'Amore

Investor Integration Executive

carlie_damore75@gmail.com

Member

Brook Mraz

Customer Web Designer

brook_mraz@yahoo.com

Admin

Kaylin Berge

Investor Interactions Associate

kaylin.berge97@hotmail.com

Admin

Franz Hand

National Data Assistant

franz.hand6@hotmail.com

Viewer

Nelda Schamberger

Legacy Interactions Planner

nelda_schamberger62@gmail.com

Member

Norris McLaughlin

Legacy Optimization Facilitator

norris.mclaughlin0@hotmail.com

Admin

Joshua Wisozk

Human Functionality Strategist

joshua.wisozk@hotmail.com

Member

Javon Hartmann

Corporate Communications Designer

javon.hartmann@gmail.com

Member

Afton Trantow

National Usability Administrator

afton_trantow29@yahoo.com

Viewer

Derek Rosenbaum

Corporate Infrastructure Developer

derek_rosenbaum6@yahoo.com

Viewer

Alexanne Ritchie

Internal Markets Technician

alexanne.ritchie57@hotmail.com

Member

Piper Hauck

Customer Usability Supervisor

piper_hauck@yahoo.com

Viewer

Kris Corwin

Product Assurance Producer

kris.corwin50@yahoo.com

Viewer

Colten Tromp

Global Configuration Planner

colten_tromp@hotmail.com

Viewer

Darrin Heathcote

Senior Functionality Engineer

darrin.heathcote@yahoo.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
Chris Rueckeraditya.nolan92@yahoo.comPort JaymeInactive$685.94
Travis Keelingmae_rau@yahoo.comFort EveretteInactive$381.18
Dorothy Mullerjamel_jones76@gmail.comTuscaloosaActive$753.93
Wallace Kiehnjane.mckenzie@hotmail.comNaderviewActive$772.91
Melissa Yundtmilford_armstrong21@gmail.comCummingsportInactive$1,158.23
Total$3,752.19

Basic table

Table with Images

NameEmailLocationStatusBalance
Brittany Heidenreich
@buddy_lynch46
germaine.klocko-keebler@hotmail.comNorth VerlachesterActive$1,066.23
Jenna Cartwright
@walter_macgyver
caitlyn_roob90@gmail.comNorth BrandtportActive$437.86
Doug Robel
@jarrell65
brannon_mccullough@yahoo.comLexington-FayetteInactive$235.28
Blanca Jast
@coleman82
kim.schmidt26@hotmail.comKalliemouthInactive$743.75
Douglas Beatty
@shanon_beahan
isabella_schiller@hotmail.comSouth ElyssaportActive$96.23

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Loren Thieleldora_little@gmail.comHalvorsonviewInactive$889.27
Beatrice Berniernick3@hotmail.comDantemouthInactive$624.17
Preston McClurejessika.armstrong@hotmail.comDominicmouthActive$807.41
Chad MacGyverleo_hoeger@yahoo.comNew MarionInactive$913.43
Ralph Ullrichstone_brakus40@gmail.comNorth MeghanInactive$352.86
Total$3,587.14

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ann Jastvallie29@yahoo.comDouglasshireInactive$1,006.77
Eugene Jacobsgenoveva_cartwright@yahoo.comNew JefferyActive$407.82
Doreen Rathanahi42@gmail.comAmyworthInactive$491.73
Margie Ritchiebelle74@yahoo.comSamirsteadActive$1,028.19
Van Brakuslee50@yahoo.comNorth HudsonActive$1,033.17
Total$3,967.68

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Becky Wolfphyllis.smith47@hotmail.comEast KatrinaInactive$38.86
Georgia VonRuedengardner56@yahoo.comLynchbergActive$252.96
Jo Littel IIabigale.rice62@hotmail.comNew VanboroInactive$505.41
Mike Kubcamren45@hotmail.comFerminboroughInactive$931.58
Ella Gerlachkaycee.stehr@gmail.comErdmanlandInactive$583.94
Total$2,312.75

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
Leah Yundtlester_schaefer63@gmail.comErdmanburghInactive$1,080.75
Dr. Jan Webershaylee80@hotmail.comWittingfortActive$508.64
Eric Hellerclair.russel49@yahoo.comAndersonActive$226.65
Lula Mannhunter.kub20@yahoo.comNorth DarrenlandInactive$507.75
Brooke Gulgowskicordia_haley82@hotmail.comLake AlexandrotonInactive$854.98
Total$3,178.77

Table with row selection

Card Table

NameEmailLocationStatusBalance
Erin Turnerellsworth92@gmail.comSouth SheridanActive$191.82
Krista Wehnerofelia.kub-white@hotmail.comHebertonActive$521.50
June Kossnadia23@yahoo.comPort JessActive$53.16
Dwayne Kundesamir.koepp-schaden@yahoo.comEast KennedyshireActive$190.93
Rex Pollichedythe.hegmann@gmail.comTrechesterActive$818.14
Total$1,775.55

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
Glenn Barrowsjackie16@hotmail.comPittsburghActive$350.40
Jared Bruenclint_breitenberg@gmail.comWest LandenfieldActive$431.16
Lynn Zulauf PhDsam_leffler40@gmail.comSan Buenaventura (Ventura)Inactive$143.16
Teresa DuBuquevesta98@gmail.comPort YesseniaActive$966.10
Peggy Kshlerinmatteo1@yahoo.comRedondo BeachInactive$389.32
Ida Vandervortosvaldo33@gmail.comMarvinshireActive$736.29
Loretta Prohaskapercy95@yahoo.comPort JanessaworthInactive$301.18
Brad Marquardtnelle19@hotmail.comKosslandInactive$488.27
Brenda Morarpresley5@hotmail.comFort NoelActive$1,181.41
Gerardo Skilescrystel_dubuque@hotmail.comLake ArielleActive$70.12
Nicole Dibbertmuriel.hermann20@hotmail.comGarlandviewInactive$518.20
Miss Christine Murazikisabelle.daugherty-brown@gmail.comBoyercesterActive$84.99
Margarita Murazikpiper83@gmail.comMurielsideActive$281.71
Mrs. Desiree Spinkaemie.maggio8@hotmail.comUptonmouthActive$102.18
Mr. Lynn Prosaccogerard_smitham73@gmail.comWest OfeliatonInactive$192.06
Total$6,236.55

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.