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
INV001PendingBank Transfer$167.59
INV002UnpaidCredit Card$213.41
INV003UnpaidCredit Card$994.50
INV004PendingCredit Card$936.06
INV005PaidBank Transfer$566.50
INV006PendingCredit Card$903.68
INV007PendingPayPal$198.80
Total$3,980.54

Simple

Users

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

NameTitleEmailRoleActions
Jamie O'ConnerInternational Identity Associatejamie.oconner@yahoo.comViewer
Miguel ChristiansenDirect Interactions Specialistmiguel.christiansen@yahoo.comMember
Julia DooleyInternational Quality Strategistjulia.dooley@gmail.comAdmin
Alfred BauchForward Usability Assistantalfred.bauch56@hotmail.comAdmin
Ramona HeidenreichInternational Integration Producerramona.heidenreich@hotmail.comViewer
Loma HyattInternal Interactions Associateloma.hyatt72@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jerod Renner

Global Branding Associate

jerod_renner@hotmail.com

Viewer

Yessenia Crooks

Product Marketing Facilitator

yessenia_crooks@gmail.com

Admin

Eleanor Buckridge

Chief Solutions Designer

eleanor_buckridge73@hotmail.com

Viewer

Isai Lind

Chief Communications Analyst

isai_lind@hotmail.com

Admin

Cassandre Cummings

Lead Operations Architect

cassandre.cummings81@gmail.com

Admin

Sandy Parker

Direct Response Facilitator

sandy_parker61@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Caroline Hoppe

Principal Integration Supervisor

caroline.hoppe@gmail.com

Viewer

Kellie Price

Direct Security Agent

kellie_price@yahoo.com

Member

Mona Friesen

Dynamic Operations Representative

mona.friesen72@yahoo.com

Member

Winifred Cremin

International Response Planner

winifred_cremin@yahoo.com

Member

Sonja Satterfield

Product Optimization Facilitator

sonja.satterfield@yahoo.com

Admin

Burdette King

Global Accounts Director

burdette_king@gmail.com

Member

Serenity Balistreri

Dynamic Creative Technician

serenity.balistreri46@hotmail.com

Member

Juana Fisher

Lead Quality Representative

juana.fisher55@yahoo.com

Member

Ryder Parker

Central Accountability Architect

ryder.parker64@hotmail.com

Viewer

Andrew Dicki

Human Branding Manager

andrew.dicki40@gmail.com

Admin

Rickey Runolfsdottir

International Communications Specialist

rickey_runolfsdottir97@hotmail.com

Member

Casimer Dooley

Central Identity Facilitator

casimer_dooley@yahoo.com

Admin

Maggie Stroman

Customer Implementation Director

maggie_stroman@hotmail.com

Member

Dianna McDermott

Senior Functionality Producer

dianna.mcdermott@gmail.com

Admin

Westley Pagac

Principal Paradigm Assistant

westley.pagac97@gmail.com

Viewer

Jacynthe Huels

Dynamic Accounts Manager

jacynthe_huels@hotmail.com

Admin

Joey Oberbrunner

Corporate Response Architect

joey.oberbrunner@yahoo.com

Member

Jacklyn Reynolds

Human Assurance Developer

jacklyn_reynolds2@hotmail.com

Member

Lamar Konopelski

Dynamic Configuration Designer

lamar.konopelski@yahoo.com

Member

Jules Casper

Global Intranet Coordinator

jules_casper@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
Marielle Kirlin IVelisa.mayer3@gmail.comWest KristofferInactive$979.47
Joseph Hermannaudrey.miller@hotmail.comPort JuliobergInactive$747.48
Pedro McDermottrebecca18@hotmail.comEden PrairieInactive$133.96
Mr. Adam Yundt-Pouros Jr.franklin_heidenreich99@yahoo.comDorcassteadInactive$258.00
Ryleigh Hagenescicero.rohan@hotmail.comPort LaronsideInactive$189.75
Total$2,308.66

Basic table

Table with Images

NameEmailLocationStatusBalance
Ronald Marks
@dustin_collier77
ramon.kassulke28@yahoo.comEdnaworthInactive$420.82
Scotty Medhurst II
@xavier_wolf
ramona65@hotmail.comWest NorwoodhavenInactive$353.90
Dr. Minnie Kutch
@brendon66
jerald.schultz36@gmail.comEast ChristopherInactive$1,033.15
Adell Rodriguez
@joanne_ebert
clark.mueller@gmail.comGrimesviewActive$869.41
Carmen Langosh
@preston.miller
zion_schuppe@gmail.comBayonneActive$556.21

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Delpha Rodriguezjorge33@gmail.comStarktownActive$967.21
Anna Kiehndonna_yost93@gmail.comWillmsbergInactive$210.22
Frank Bahringerdestany_padberg@hotmail.comZiememouthInactive$748.63
Della Schadencarla.ondricka9@yahoo.comArmandoburyInactive$1,189.21
Philip Framisherman_hoppe33@yahoo.comFort GunnermouthInactive$953.24
Total$4,068.51

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jeannie Keeling-Littelnatalie.berge-yundt70@hotmail.comValdostaActive$1,060.26
Dr. Javier Zemlak IIIamira_will@hotmail.comElainetonInactive$238.19
Lloyd Blockjeannie1@gmail.comEast RitafortActive$1,148.24
Nathanial Weimannalbert_corkery53@hotmail.comEast HenriettecesterActive$377.98
Coleman Cartwrightlucia96@hotmail.comRunolfsdottirtonActive$360.51
Total$3,185.18

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rosemary Morissettepierce.stroman74@hotmail.comMillsshireInactive$1,113.69
River Handcleveland88@gmail.comNew AnsleyInactive$1,122.58
Jarrod Danieldarla74@gmail.comEast BernieceInactive$612.34
Doyle Ziemannkailey_barton38@gmail.comAngeloportInactive$424.67
Walter Auerernesto.vonrueden88@gmail.comMelissasideActive$1,156.72
Total$4,430.00

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
Gregory Kulastyra26@yahoo.comNorth AbnersteadActive$975.69
Ernesto Sengerdeon_lakin11@gmail.comWest ByrontownInactive$1,122.59
Marianna Morissetterodger.dach@gmail.comCamronsteadInactive$57.13
Michelle Kozeyrose_gerlach61@yahoo.comLake NevaActive$673.93
Donald Walkermilo_zulauf60@yahoo.comLurlinebergInactive$60.24
Total$2,889.58

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kellie Dachcolt_hintz@yahoo.comDebratonActive$462.29
Hattie Jonesvito.jaskolski59@hotmail.comWaterlooInactive$670.40
Rogelio VonRuedenfranklin.effertz@hotmail.comWest AshleemouthInactive$586.08
Stone Andersonmary.rodriguez@hotmail.comWalthamInactive$480.40
Howard Corkerykory_schaden5@gmail.comThompsonviewActive$1,148.44
Total$3,347.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
Freeda Beerbertha.yundt@hotmail.comErnestinahavenInactive$664.54
Candelario Adamsdebbie53@hotmail.comPort FelipeboroughInactive$1,081.31
Norman Medhurstdora_koepp@hotmail.comAlanisfurtInactive$924.23
Darren Mohrstewart_keebler66@hotmail.comDarrenportInactive$852.75
Dixie Hettingercasper_bergstrom@gmail.comZiemefortActive$977.32
Phil Roobbertha.murazik40@gmail.comBeulahboroughActive$5.12
Joy Ankunding IVerik.ortiz@gmail.comIrvingInactive$921.75
Henrietta Gorczanynick_bailey-borer81@hotmail.comMeridianInactive$957.31
Dwight Lubowitz-Johnsonyasmine94@hotmail.comPlanoActive$384.43
Marian Russeldanielle20@gmail.comEast EldonInactive$915.49
Isaac Stammsonya.keebler20@yahoo.comFisherchesterActive$72.60
Dorcas Blanda MDjakayla_nicolas@hotmail.comNew HughshireInactive$309.24
Mrs. Carol Thielnikki.kunze@hotmail.comCitrus HeightsActive$912.15
Lorena Oberbrunnerlila_kshlerin@yahoo.comJaylonworthInactive$1,086.16
Skyla Rempelalyson.satterfield8@hotmail.comFort ShannytownActive$694.64
Total$10,759.04

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.