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$721.08
INV002UnpaidPayPal$558.58
INV003PendingBank Transfer$764.34
INV004PendingPayPal$453.51
INV005PendingPayPal$475.96
INV006UnpaidBank Transfer$829.16
INV007PaidBank Transfer$253.45
Total$4,056.08

Simple

Users

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

NameTitleEmailRoleActions
Leda AdamsForward Solutions Supervisorleda_adams@hotmail.comAdmin
Deonte WatsicaNational Creative Consultantdeonte_watsica90@yahoo.comMember
Edwin HauckCustomer Directives Manageredwin_hauck17@gmail.comMember
Lucius DuBuqueForward Paradigm Facilitatorlucius.dubuque@gmail.comAdmin
Jeromy PourosNational Mobility Consultantjeromy_pouros@yahoo.comViewer
Payton CarrollDistrict Tactics Strategistpayton.carroll76@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Janae Pfannerstill

Principal Research Orchestrator

janae.pfannerstill85@hotmail.com

Member

Tyson Bashirian-Hagenes

Central Research Executive

tyson_bashirian-hagenes10@hotmail.com

Viewer

Jeramie Heaney

Chief Response Associate

jeramie.heaney@yahoo.com

Admin

Jeanie Douglas

Senior Metrics Assistant

jeanie_douglas18@hotmail.com

Member

Sylvia Weber

Chief Tactics Director

sylvia_weber52@hotmail.com

Viewer

Bridgette Becker

District Optimization Planner

bridgette.becker@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Ernestina Cummerata

Dynamic Directives Representative

ernestina_cummerata@yahoo.com

Viewer

Christelle Conroy

Investor Markets Administrator

christelle_conroy21@hotmail.com

Member

Kevin Koss

Investor Functionality Architect

kevin_koss36@hotmail.com

Member

Gillian Kuvalis

Central Marketing Orchestrator

gillian.kuvalis19@gmail.com

Viewer

Nicolette Sporer

National Integration Executive

nicolette_sporer@gmail.com

Admin

Susana Gleichner

Dynamic Marketing Strategist

susana_gleichner37@yahoo.com

Member

Carolanne Spinka

Principal Metrics Designer

carolanne.spinka@hotmail.com

Admin

Rebeka Quitzon

District Creative Architect

rebeka_quitzon@gmail.com

Admin

Edgar Morar

District Functionality Developer

edgar.morar@gmail.com

Admin

Mikel Abshire

District Creative Assistant

mikel_abshire@yahoo.com

Viewer

Constance Hodkiewicz

District Optimization Representative

constance_hodkiewicz@yahoo.com

Admin

Hugh Kuhlman

Principal Integration Developer

hugh_kuhlman@yahoo.com

Member

Roberto Rau

Global Interactions Analyst

roberto_rau78@yahoo.com

Admin

Carey Daugherty

Direct Marketing Architect

carey.daugherty84@hotmail.com

Viewer

Taya Halvorson

Principal Metrics Supervisor

taya.halvorson51@gmail.com

Viewer

Cedrick Pouros

Future Intranet Designer

cedrick.pouros90@gmail.com

Admin

Moriah Schultz

District Integration Orchestrator

moriah.schultz35@hotmail.com

Member

Delbert Hackett

Direct Quality Analyst

delbert_hackett75@gmail.com

Admin

Rebekah Spencer

Investor Creative Coordinator

rebekah_spencer@yahoo.com

Viewer

Nat Runolfsson

District Brand Strategist

nat.runolfsson@gmail.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
Maxine Jacobserika.mante@gmail.comTylerActive$301.20
Dan Turneroren.abernathy19@yahoo.comCremintonActive$87.14
Jaime Hillscoleman_stiedemann@yahoo.comFort LaurianefieldInactive$286.47
Kirk Krajcikcarmen_hessel81@hotmail.comSouth MoniqueburghInactive$629.77
Vickie Barrowsoscar_hettinger@yahoo.comKossboroughActive$196.97
Total$1,501.55

Basic table

Table with Images

NameEmailLocationStatusBalance
Sheldon Pouros
@pattie.kulas44
modesta.rohan@gmail.comRunolfsdottirsideActive$325.80
Marcella Fritsch
@afton_jakubowski98
abe_gutkowski@yahoo.comSanfordInactive$922.11
Sonja Kshlerin
@joana_hartmann37
valerie.oconnell85@hotmail.comAbnerviewInactive$736.50
Garry Mills
@maria.sanford2
candice.lind23@yahoo.comPort AmbrosetonActive$1,166.54
Regina Graham-Treutel
@noel.mueller60
demario_erdman@yahoo.comMantecaInactive$967.02

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dominic Okunevatrever.koepp52@yahoo.comNorth RoxanetownInactive$296.33
Shelia Marvin DVMwilburn44@gmail.comSengerburghInactive$256.27
Marguerite Welchjayce_towne8@yahoo.comWest EugeneInactive$344.60
Bonnie Homenickmaggie_reilly14@hotmail.comCaguasInactive$491.02
Elaine Bednarluther_satterfield84@hotmail.comEast OrieInactive$764.89
Total$2,153.11

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Byron Wymancatherine.stiedemann86@yahoo.comSouth GarfieldstadActive$687.16
Naomi Dach IIInovella69@yahoo.comPort WilhelmsteadActive$1,074.53
Sophia Gibsonclay_larkin17@yahoo.comEast IsidroportInactive$952.49
Sergio Boyerheaven.abshire0@yahoo.comPort AliyahavenInactive$168.39
Kristie Ricetrisha_simonis@yahoo.comEast ScottyInactive$669.65
Total$3,552.22

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Angelica Kozey Vnellie_brekke@hotmail.comFort RomanshireInactive$745.66
Noel DuBuquepatricia.boehm@yahoo.comWest CleoActive$744.62
Hazel Torpalba.johns@gmail.comMaureenbergActive$981.85
Yvette Kunzedarrin22@gmail.comNew VerlievilleActive$444.86
Mr. Terry Stammviola.von@yahoo.comSouth DavonInactive$363.11
Total$3,280.10

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
Lila Weberkeenan_fisher78@hotmail.comMeredithvilleInactive$588.14
Marian Bergedarien24@gmail.comSchultzfieldInactive$1,094.82
Willard Schummscot_rippin@yahoo.comPompano BeachActive$601.57
Rodolfo Turcottebrent43@gmail.comMillerviewActive$956.11
Douglas Windlerharvey_dubuque@hotmail.comLake KendallburyInactive$15.26
Total$3,255.90

Table with row selection

Card Table

NameEmailLocationStatusBalance
Eloise Lednerleonard4@hotmail.comSouth AgustinamouthActive$667.82
Christian Rempelsolon84@yahoo.comRomagueramouthActive$463.30
Miss Hannah Beierdominique98@gmail.comPatiencechesterActive$563.80
Bethany Gusikowskielenor.blanda@yahoo.comAreciboInactive$44.23
Thomas Lehnerarnoldo49@gmail.comNew MackworthInactive$516.98
Total$2,256.13

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
Katie Millergarrick32@hotmail.comLake FredericshireInactive$268.46
Sean Hilllemmitt.pagac@hotmail.comNorth TreInactive$788.71
Bob Klocko-Stiedemannnestor_barrows12@yahoo.comFort EthylInactive$198.29
Emilio Satterfieldelyssa.senger@hotmail.comJohnstonhavenInactive$539.66
Marshall Bauch PhDjustyn85@yahoo.comBrooklyn ParkActive$1,060.47
Angela Jenkinsjorge_nikolaus@gmail.comChristiansenviewInactive$952.72
Jody Cormierstephen21@gmail.comNicholauschesterActive$879.56
Wade Predovicayla_gutkowski@yahoo.comHuelsteadInactive$4.86
Rolando Veummavis.greenholt@yahoo.comLake ZackActive$1,035.17
Mack Lowemittie23@hotmail.comPort ArthurInactive$188.79
Camille Wildermanparker_mitchell@hotmail.comFort SydnicesterInactive$938.46
William Kuhic PhDcorrine.volkman7@yahoo.comGerdabergActive$1,001.54
Lynn Boscojayda_olson@gmail.comMaldenInactive$610.83
Mandy Mayertbeau_stroman@gmail.comWest PrudencetonInactive$386.20
Angelica Conroyteresa.goldner98@hotmail.comPort SonyaActive$786.26
Total$9,639.98

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.