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
INV001PendingPayPal$549.68
INV002PendingPayPal$924.86
INV003UnpaidBank Transfer$329.17
INV004PendingBank Transfer$702.88
INV005PendingCredit Card$742.52
INV006UnpaidCredit Card$773.15
INV007PaidPayPal$636.61
Total$4,658.87

Simple

Users

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

NameTitleEmailRoleActions
Lavinia GorczanyPrincipal Marketing Plannerlavinia.gorczany16@yahoo.comViewer
Bertha ParisianLegacy Directives Liaisonbertha.parisian@yahoo.comMember
Stewart WindlerInternational Quality Specialiststewart.windler@hotmail.comAdmin
Helmer FraneckiInternational Solutions Officerhelmer.franecki26@hotmail.comViewer
Berenice RoweDynamic Marketing Technicianberenice_rowe@yahoo.comViewer
Shany HudsonInternal Markets Supervisorshany.hudson22@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Dorcas Klocko

Chief Brand Producer

dorcas_klocko@gmail.com

Viewer

Bret Morissette

Forward Communications Producer

bret.morissette83@hotmail.com

Member

Darrell Wehner

Dynamic Response Facilitator

darrell.wehner@yahoo.com

Viewer

Joanny Lind

Legacy Data Planner

joanny.lind41@gmail.com

Member

Nakia Swift

Legacy Usability Architect

nakia.swift@yahoo.com

Member

Elijah Altenwerth

International Intranet Architect

elijah_altenwerth86@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Malvina Turner

Human Accounts Supervisor

malvina_turner36@gmail.com

Member

Davonte Predovic

Forward Operations Technician

davonte.predovic53@yahoo.com

Admin

Destin Schaefer

Internal Division Officer

destin.schaefer45@hotmail.com

Member

Roger Miller

Principal Brand Executive

roger_miller@hotmail.com

Viewer

Orlando Lynch

Central Brand Developer

orlando.lynch@yahoo.com

Viewer

Tatum VonRueden

Senior Mobility Coordinator

tatum.vonrueden@hotmail.com

Member

Freeman Wolff

Global Implementation Coordinator

freeman_wolff@yahoo.com

Member

Jasper Mayert

Chief Factors Agent

jasper.mayert@yahoo.com

Viewer

Dion Metz

Forward Group Director

dion_metz@yahoo.com

Admin

Emely Bartoletti

Future Usability Technician

emely_bartoletti97@hotmail.com

Viewer

Justyn Torphy

International Division Engineer

justyn_torphy@hotmail.com

Viewer

Kattie Hermann

Product Functionality Liaison

kattie.hermann@hotmail.com

Member

Estella Franey

Dynamic Tactics Engineer

estella.franey@yahoo.com

Member

Jerald Blanda

Future Branding Administrator

jerald_blanda71@yahoo.com

Viewer

Adrianna Torp

Forward Assurance Facilitator

adrianna_torp71@yahoo.com

Viewer

Kaleb Zulauf

Principal Marketing Representative

kaleb.zulauf45@hotmail.com

Admin

Glennie Stehr

National Implementation Executive

glennie.stehr83@yahoo.com

Member

Irwin White

Dynamic Communications Associate

irwin_white87@gmail.com

Admin

Keshaun Nienow

Dynamic Division Manager

keshaun.nienow@hotmail.com

Viewer

Haven Ankunding

Dynamic Brand Assistant

haven.ankunding@yahoo.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
Dr. Alfred Denesikangelina65@yahoo.comTaniaworthInactive$669.17
Dr. Christina Waelchielza33@hotmail.comNorth AkeemworthInactive$931.04
Christine Wiegandeino27@yahoo.comVernatownActive$324.37
Nick Gerholdtelly51@gmail.comPort St. LucieActive$381.05
Katherine Robeljohnathan83@gmail.comEast ErnestoInactive$845.81
Total$3,151.44

Basic table

Table with Images

NameEmailLocationStatusBalance
Carolyn Sawayn
@tracy_wilkinson
maggie_blanda7@yahoo.comNorth RaphaelleburyInactive$679.10
Sonia Huel
@elisabeth.ondricka-christiansen
emie_zemlak26@yahoo.comWindlerburghActive$71.77
Jordan Ryan
@monte_volkman19
alphonso_renner69@gmail.comNew DillonviewActive$363.50
Janis Predovic
@roosevelt_mraz8
juwan_kozey@hotmail.comPerrisActive$570.20
Clay Feil
@rae24
antwon.fritsch35@gmail.comEast ModestoActive$989.28

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Laurence Williamsonceasar_hudson51@yahoo.comSouth SaraiActive$43.88
Teresa MacGyvergermaine47@yahoo.comNew RebekahstadActive$268.37
Mrs. Carrie Ernserfavian43@hotmail.comWest VivastadActive$304.51
Hannah Langangie.adams@gmail.comChapel HillActive$714.77
Jill Maggiovictoria.willms34@yahoo.comDavieActive$319.88
Total$1,651.41

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shelia Hartmannicie81@gmail.comElianelandActive$797.84
Dr. Tommie Robel-Turcottegerson61@hotmail.comCaldwellActive$336.53
Shaun Harber-Yundtismael66@gmail.comWest LaruetonActive$10.88
Cornelius Bayermurphy38@yahoo.comPort RomaineportInactive$25.90
Catherine Buckridgelucius_kulas-borer@yahoo.comRestonInactive$277.72
Total$1,448.87

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Sharon Schambergernia.kris26@hotmail.comEast GeorgianaInactive$27.65
Shelly Boehm IIIberniece.kris45@gmail.comNorth WardbergInactive$140.78
Mr. Trevor Parisian IIzane.thiel31@gmail.comEast DavinworthInactive$172.56
Natasha Smithrhea_bruen22@yahoo.comParisianburyInactive$616.37
Jo Tremblayloma30@hotmail.comTomasatownActive$109.51
Total$1,066.87

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
Lela Torppatience_smitham11@hotmail.comPearlandActive$731.79
Marvin Mannamber22@hotmail.comConncesterActive$814.57
Darnell Schaefer Sr.ofelia.schmidt46@yahoo.comMaxwellboroughActive$59.06
Amanda Leschstella66@gmail.comFort MerleActive$327.01
Leona Schmidtadelbert.swaniawski@yahoo.comWildermanshireInactive$617.52
Total$2,549.95

Table with row selection

Card Table

NameEmailLocationStatusBalance
Loren Robelphoebe.dach86@hotmail.comRedlandsInactive$1,093.54
Clayton Bruenanjali1@gmail.comGainesvilleActive$796.31
Joanna Hodkiewiczadela50@hotmail.comEast MillerActive$1,019.73
Chad Mayertwilford.lubowitz8@yahoo.comSouth VivaActive$361.69
Bonnie Hagenesbilly_shields47@yahoo.comFort AlekshireActive$1,128.61
Total$4,399.88

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
Doreen Anderson MDbrandon_orn-pagac@yahoo.comPort SydnieInactive$838.83
Abel Handjaylan.farrell59@hotmail.comEl CentroActive$834.13
Lydia Wehnerelda.keeling68@hotmail.comEast AllisonInactive$162.01
Dr. Bradford Quigleykarl61@hotmail.comLeonardofieldActive$838.19
Valerie Zulaufrogelio50@gmail.comNorth KasandrasteadActive$525.66
Glenda Grimesdillon.kunze96@gmail.comFeestcesterActive$331.91
Mr. Jerald Hintzwilber57@gmail.comNorth EarnestineworthInactive$250.38
Silvia Homenickorval_torp1@gmail.comMissoulaInactive$943.05
Annie Ullrichmarina_feest51@yahoo.comHagenesfieldInactive$154.46
Blanche Gerlachrebekah.jones73@yahoo.comNikolausstadInactive$637.01
Evan Lindgrenhallie_block@yahoo.comCorkeryfortInactive$379.66
Steve Braun IIunique19@gmail.comEnterpriseActive$310.05
Elsie Klingroman.cartwright92@yahoo.comBergstromtownInactive$876.40
Mr. Bryant Stammdeion.williamson@hotmail.comWisokytonInactive$263.95
Chad Terrylazaro.boyle-emmerich13@yahoo.comSan BrunoActive$186.30
Total$7,531.99

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.