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
INV001UnpaidCredit Card$905.89
INV002UnpaidBank Transfer$815.07
INV003PaidCredit Card$748.24
INV004UnpaidPayPal$508.19
INV005PendingBank Transfer$102.70
INV006PaidCredit Card$778.43
INV007PendingBank Transfer$537.85
Total$4,396.37

Simple

Users

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

NameTitleEmailRoleActions
Berry VonProduct Group Assistantberry.von81@hotmail.comViewer
Krystina McClureCorporate Security Developerkrystina_mcclure77@gmail.comAdmin
Charity RempelProduct Accounts Specialistcharity_rempel@hotmail.comViewer
Reba WehnerDistrict Data Technicianreba_wehner@yahoo.comAdmin
Elton WehnerCentral Applications Assistantelton_wehner@yahoo.comMember
Domenica WolfNational Brand Strategistdomenica.wolf44@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Duane Homenick

Internal Branding Agent

duane.homenick71@yahoo.com

Admin

Heaven Johns

Global Tactics Architect

heaven_johns@hotmail.com

Viewer

Loma Lemke

District Applications Designer

loma.lemke19@gmail.com

Member

Floy Towne

Regional Usability Coordinator

floy.towne@yahoo.com

Member

Giovanni Heathcote

International Paradigm Associate

giovanni.heathcote@hotmail.com

Member

Danyka Franecki

Chief Data Manager

danyka_franecki63@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Emerald Dickinson

Lead Response Coordinator

emerald_dickinson@yahoo.com

Member

Mitchell Considine

Chief Quality Facilitator

mitchell.considine35@gmail.com

Member

Adrianna Dach

International Identity Engineer

adrianna.dach@gmail.com

Viewer

Janet Weber

Global Division Officer

janet_weber37@gmail.com

Viewer

Bridgette Botsford

District Response Designer

bridgette.botsford94@yahoo.com

Admin

Wilford Roob

Internal Usability Consultant

wilford.roob@gmail.com

Admin

Oma Denesik

Investor Identity Assistant

oma.denesik@yahoo.com

Viewer

Andreanne Green

Direct Assurance Planner

andreanne.green@hotmail.com

Member

Alba Jacobs

Product Intranet Specialist

alba_jacobs36@hotmail.com

Viewer

Edd Schmidt

Principal Division Orchestrator

edd_schmidt95@yahoo.com

Member

Leonard Goodwin

Central Tactics Liaison

leonard_goodwin@yahoo.com

Admin

Blaise Doyle

Future Metrics Planner

blaise_doyle@hotmail.com

Admin

Estelle Denesik

Senior Brand Officer

estelle_denesik69@hotmail.com

Viewer

Zion Hackett

Global Infrastructure Manager

zion.hackett@hotmail.com

Member

Jeramie Turcotte

Chief Tactics Orchestrator

jeramie_turcotte@yahoo.com

Member

Rachael Fay

Internal Infrastructure Consultant

rachael.fay@hotmail.com

Viewer

Herbert D'Amore

Principal Branding Representative

herbert.damore@yahoo.com

Viewer

Katherine Mertz

Chief Factors Strategist

katherine.mertz@gmail.com

Member

Caroline Kertzmann

Central Response Coordinator

caroline_kertzmann19@yahoo.com

Viewer

Karine Stehr

Investor Paradigm Assistant

karine.stehr14@yahoo.com

Member

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. Bryant Feestmargie.haag72@hotmail.comMenifeeActive$134.39
Brittany Hilpertdemond47@hotmail.comMantefortActive$57.93
Naomi Faheyjoanne.homenick@gmail.comTyrellburghActive$55.58
Bertha Bernier-Bashiriancelia46@gmail.comMedfordActive$1,146.79
Mr. Zachary Schusterdavon_kilback64@gmail.comFort KaitlinhavenInactive$984.18
Total$2,378.87

Basic table

Table with Images

NameEmailLocationStatusBalance
Lydia Altenwerth
@dewayne.schaden57
rodger26@hotmail.comDaughertyfieldInactive$1,137.37
Isabel Ortiz
@nina_lubowitz
jacey_lemke@yahoo.comNorth UniquevilleActive$1,082.87
Mr. Virgil Deckow IV
@delpha89
adolphus63@gmail.comHeaneychesterActive$703.58
Alberto Hane
@consuelo17
marjorie.kling@hotmail.comHendersonInactive$464.84
Esther Zieme
@orlo_medhurst
brian.ohara@hotmail.comKihnboroActive$612.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Woodrow Treuteljoany.gibson@hotmail.comElzavilleActive$1,134.15
Beverly Hansen IIImarlen.hahn52@gmail.comState CollegeActive$716.32
Drew Ernserviolette_hodkiewicz22@gmail.comNew AbbyshireInactive$647.69
Iris Kozeyjulian.jaskolski92@gmail.comNorth GennarovilleInactive$1,108.15
Carla Legrosfannie.pouros@yahoo.comWauwatosaActive$608.95
Total$4,215.26

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ann Kirlinclint.pouros@gmail.comWest LeonoraviewInactive$459.04
Mrs. Freda Franeyelvie_leannon54@yahoo.comReedsteadActive$836.51
Janie Lubowitz Inathanial_toy@yahoo.comNew FloycesterActive$917.93
Tim Cassintrent8@hotmail.comNorth AlanaInactive$159.40
Dr. Duane Hilllgenevieve50@hotmail.comLake DedrickActive$51.55
Total$2,424.43

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kathleen Johnsjennie70@hotmail.comJovanycesterActive$156.19
Madeline Pagacbailee_wilderman36@yahoo.comMonserratviewInactive$297.36
Clarence Kunzefernando_renner@hotmail.comWymancesterActive$1,046.08
Marilyn Schummvernice96@gmail.comSanta AnaInactive$405.57
Luis Metzcharlotte_bins@gmail.comWardcesterActive$368.64
Total$2,273.84

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
Garrett Balistreritremayne.hodkiewicz@hotmail.comCorwinmouthActive$363.97
Ruth Baumbachjabari_berge@yahoo.comSchuppeboroActive$745.93
Jimmy Grantvirgie_pfannerstill30@hotmail.comNew ElectaActive$87.27
Antonia Cummerataalexane.keeling10@gmail.comSouth San FranciscoActive$661.51
Estelle Rowe IVjeffrey10@yahoo.comOsinskivilleActive$51.37
Total$1,910.05

Table with row selection

Card Table

NameEmailLocationStatusBalance
Isabel Jaskolskililian.mcglynn@hotmail.comBaldwin ParkActive$422.00
Alice Hilpert IIIvaughn53@gmail.comRyannboroughActive$138.53
Dr. Nicolas Turnershanna65@hotmail.comLubbockInactive$152.65
Tom Zulaufhalie.jerde73@hotmail.comWest NevaburghInactive$395.42
Walter O'Reilly Imalinda.baumbach@yahoo.comPort HerthafieldInactive$363.10
Total$1,471.70

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
Max Carroll Iona_erdman82@gmail.comWest ReidInactive$650.80
Kirk Cruickshankpreston_grady@gmail.comShanahanfurtInactive$612.08
Lorene Watersalphonso.reichert19@hotmail.comSouth EmilycesterActive$826.98
Julio Zulaufdelbert.kuvalis67@hotmail.comPort RosemarieburghActive$967.05
Jenna Dickibarrett_mosciski@gmail.comLake ConstantinInactive$175.97
Leah Muellercortney.runte1@hotmail.comShyannfurtInactive$141.52
Josephine Orn Vmylene.cremin@gmail.comHillardlandActive$141.22
Nathaniel Rempelelizabeth_bechtelar79@hotmail.comThielboroActive$1,073.68
Ms. Diane Erdmanernest_conroy39@gmail.comFort FlorianInactive$1,184.16
Ms. Sonya Doyle DVMalf_reilly@yahoo.comSouth FabiansteadInactive$176.46
Otis Wunschnikko.okeefe2@yahoo.comEast JuliusboroActive$288.91
Mrs. Tammy Graham-Grantgodfrey_powlowski@yahoo.comSouth JalenfurtActive$188.31
Wilfred Uptonmabel.hessel-nienow@hotmail.comJaymefurtInactive$535.14
Gail Osinskiella_jenkins93@yahoo.comLake ArturotonInactive$1,192.91
Willard Mayerhayden27@yahoo.comKellenshireActive$380.54
Total$8,535.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.