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
INV001UnpaidBank Transfer$434.74
INV002PendingCredit Card$181.73
INV003PaidBank Transfer$999.31
INV004PendingCredit Card$844.62
INV005PaidCredit Card$488.39
INV006PaidCredit Card$499.20
INV007UnpaidCredit Card$300.54
Total$3,748.53

Simple

Users

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

NameTitleEmailRoleActions
Norval AufderharProduct Marketing Engineernorval.aufderhar25@hotmail.comViewer
Zoe TreutelGlobal Quality Officerzoe.treutel8@yahoo.comAdmin
Heather MaggioDistrict Infrastructure Architectheather_maggio99@gmail.comMember
Daron CollinsDistrict Operations Representativedaron.collins8@hotmail.comViewer
Judy PagacLead Interactions Orchestratorjudy.pagac@gmail.comMember
Karolann LockmanDistrict Web Liaisonkarolann.lockman@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Ernestina Prohaska

Forward Factors Coordinator

ernestina.prohaska48@yahoo.com

Member

Adelia Zemlak

Future Interactions Analyst

adelia_zemlak@hotmail.com

Member

Aaliyah Kunde

Customer Metrics Agent

aaliyah_kunde@gmail.com

Admin

Damion Cole

International Metrics Engineer

damion_cole@yahoo.com

Admin

Ewell Schaden

Global Infrastructure Associate

ewell.schaden@gmail.com

Viewer

Jolie Trantow

National Integration Technician

jolie.trantow80@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Baron Hermann

Legacy Marketing Planner

baron.hermann@hotmail.com

Member

Freeda Borer

Human Branding Officer

freeda.borer@hotmail.com

Member

Carey Batz

National Mobility Strategist

carey_batz@hotmail.com

Viewer

Rachelle Glover

Internal Research Associate

rachelle.glover@hotmail.com

Viewer

Ida Leannon

Internal Markets Manager

ida.leannon93@gmail.com

Viewer

Kendra Romaguera

Product Branding Analyst

kendra_romaguera59@hotmail.com

Viewer

Gabriella Beahan

Central Operations Analyst

gabriella.beahan4@yahoo.com

Member

Muriel Brekke

Corporate Accounts Representative

muriel_brekke@yahoo.com

Member

Katlyn Cassin

Global Branding Agent

katlyn_cassin87@yahoo.com

Admin

Marianna Casper

Product Accountability Associate

marianna_casper98@yahoo.com

Member

Marcelino Hermann

Human Functionality Engineer

marcelino.hermann@gmail.com

Admin

Elyse McCullough

National Factors Coordinator

elyse_mccullough@hotmail.com

Viewer

Joana Hartmann

Direct Infrastructure Engineer

joana_hartmann@hotmail.com

Viewer

Shakira Nader

Chief Intranet Executive

shakira_nader30@gmail.com

Member

Felipa Krajcik

Customer Accountability Assistant

felipa_krajcik@yahoo.com

Admin

Leon Gorczany

Corporate Branding Orchestrator

leon_gorczany37@gmail.com

Viewer

Madelynn Little

Direct Response Director

madelynn_little@gmail.com

Admin

Jaquan Cremin

Regional Mobility Liaison

jaquan.cremin72@yahoo.com

Admin

Ismael Sauer

Human Intranet Liaison

ismael.sauer37@yahoo.com

Viewer

Ethel Klocko

Human Implementation Planner

ethel.klocko@gmail.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
Susie Hermannshane.ohara@yahoo.comZiemehavenActive$923.94
Faye Gottliebjay_christiansen@gmail.comMishawakaActive$215.79
Wilfred Gerholdastrid29@hotmail.comStehrportActive$328.91
Tamara Wunschangus.kovacek@hotmail.comWest AlessiaviewInactive$590.01
Kenny Ornkiarra_kessler@yahoo.comYonkersInactive$349.87
Total$2,408.52

Basic table

Table with Images

NameEmailLocationStatusBalance
Adrienne Nolan
@ulises69
maurine_johns@hotmail.comFountain ValleyActive$1,137.18
Colin Bins
@jo.little19
london61@yahoo.comTexas CityActive$443.43
Elaine Hegmann
@raphaelle_prohaska
elza30@yahoo.comFort AlexandraInactive$1,021.53
Jonathon Corkery
@kendra_mcclure
valentin44@yahoo.comLake MaximoActive$763.92
Dewey Wintheiser
@ricky.lowe47
kennith10@hotmail.comJustustonActive$355.98

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Elaine Beahanfatima.mosciski@hotmail.comFort HerminioActive$175.73
Miss Charlotte Hodkiewicz Jr.willa80@yahoo.comPort KameronsteadActive$31.47
Kelly Hegmannskyla15@hotmail.comNew MathildeActive$603.57
Mattie Mantejude.tremblay@yahoo.comPourosburghActive$958.48
Frankie Koelpinjudy.schulist7@gmail.comTreutelmouthInactive$358.61
Total$2,127.86

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Nicolas Keeblerjarod.lind@gmail.comPort VanceInactive$433.86
Robin Ullrich PhDlaila_kuhlman@gmail.comLake MayInactive$190.00
Salvatore D'Amoresienna_hane95@gmail.comWoodlandActive$1,062.70
Frederick Schoenmaybelle_labadie@gmail.comSawaynfieldActive$757.95
Pauline Swiftfleta.schiller@gmail.comPine BluffInactive$36.50
Total$2,481.01

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Horace Tillmangregg_wolff@gmail.comFort FedericoInactive$128.71
Phillip Bashirianfiliberto_romaguera@yahoo.comEdgarworthActive$690.30
Claire Skiles-Sipesquincy_glover41@gmail.comPort EmmetInactive$872.39
Earnest Carrolldewitt_volkman60@gmail.comWest MariahtownActive$1,181.82
Emilio Walshkellie_kunze83@hotmail.comSarahboroInactive$9.97
Total$2,883.19

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
Bryant Mayertroxane_buckridge5@gmail.comNew LeifInactive$903.00
Judith Lemke IIIlitzy32@hotmail.comPort MustafaboroInactive$583.37
Felipe Welchnoel_hirthe88@hotmail.comBrooklyn ParkActive$448.88
Omar Gradyalexandre.bode@yahoo.comAshburnActive$125.59
Mindy Feest Vreginald.altenwerth34@hotmail.comSouth ElliefieldInactive$234.42
Total$2,295.26

Table with row selection

Card Table

NameEmailLocationStatusBalance
Bobby Kuphalrashad.padberg@hotmail.comAlanaburghInactive$281.11
Dexter Mosciskidolly_howe8@yahoo.comSawaynfortActive$662.09
Bruce Corwindelmer.swaniawski-lang23@gmail.comEast EileenshireActive$40.41
Mr. Norman Mitchellshirley_hartmann79@gmail.comRubenfieldInactive$498.18
Miss Tasha Bashirianmalika.kertzmann13@gmail.comLauderhillActive$178.53
Total$1,660.32

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
Enrique Quigley IIIselina.gibson@yahoo.comFort KearaActive$517.88
Brian Bartonrodger_kreiger@hotmail.comGreen BayActive$692.56
Mr. Jerry Turnerjoaquin_hegmann@gmail.comOrangeInactive$1,078.11
Pearl Dickimurl.kling2@yahoo.comBostonInactive$345.93
Shirley Windlershaniya_jast@hotmail.comChristinefurtActive$961.01
Jared Schroederroxane_batz60@gmail.comKuphalfurtInactive$560.70
Steve Flatleykurt80@gmail.comDanashireActive$983.66
Mr. Wilfred Terryabbie.halvorson13@hotmail.comSan Luis ObispoActive$1,193.86
Tonya Ferryjarret80@hotmail.comWest ElzaActive$216.61
Santiago Kutch Jr.zoe.corkery67@yahoo.comLake DanielleActive$892.99
Terry Lindjeromy.block64@hotmail.comZiemannbergInactive$347.23
Jesse Walkerlysanne_ritchie2@gmail.comEmardboroughInactive$785.26
Brett Hansen PhDcamille.padberg@hotmail.comFort AshleemouthActive$525.61
Lindsey Schulist-Rohanjovan18@yahoo.comPort RaulfieldInactive$40.49
Erick Bergelela_erdman17@hotmail.comMichalebergInactive$146.33
Total$9,288.23

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.