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
INV001PaidBank Transfer$300.39
INV002PaidCredit Card$361.25
INV003PendingPayPal$241.08
INV004PaidBank Transfer$915.65
INV005PendingBank Transfer$725.39
INV006PendingCredit Card$629.58
INV007PendingCredit Card$726.97
Total$3,900.31

Simple

Users

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

NameTitleEmailRoleActions
Carole VonRuedenLead Research Designercarole.vonrueden29@gmail.comAdmin
Doyle MacGyverCorporate Communications Plannerdoyle.macgyver15@hotmail.comMember
Casey HoegerDynamic Assurance Consultantcasey_hoeger4@gmail.comViewer
Kyle ColeSenior Infrastructure Directorkyle.cole@yahoo.comViewer
Abbie FeeneyFuture Research Designerabbie_feeney19@yahoo.comViewer
Dennis SchimmelProduct Markets Specialistdennis_schimmel56@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Carole Gusikowski

Internal Assurance Associate

carole_gusikowski@yahoo.com

Viewer

Lacy Sipes

Corporate Infrastructure Orchestrator

lacy_sipes22@gmail.com

Viewer

Kirk Batz

Customer Mobility Administrator

kirk.batz@yahoo.com

Viewer

Agnes D'Amore

District Markets Assistant

agnes.damore@gmail.com

Member

Andy Satterfield

Senior Communications Consultant

andy_satterfield@gmail.com

Member

Carroll Zboncak

Principal Identity Manager

carroll_zboncak@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Rene Gulgowski

Corporate Assurance Specialist

rene_gulgowski@gmail.com

Admin

Tina Kerluke

Central Directives Specialist

tina_kerluke52@yahoo.com

Member

Pam Mann

Lead Markets Administrator

pam.mann@gmail.com

Admin

Micaela Pfeffer

Dynamic Optimization Assistant

micaela_pfeffer29@yahoo.com

Admin

Felicia Abshire

Direct Functionality Executive

felicia.abshire@hotmail.com

Admin

Gretchen Wintheiser

District Operations Manager

gretchen.wintheiser37@hotmail.com

Member

Opal Gleason

Direct Creative Architect

opal_gleason@yahoo.com

Member

Natalie Emard

Legacy Accountability Facilitator

natalie_emard22@gmail.com

Admin

Valentin Hodkiewicz

Corporate Program Engineer

valentin_hodkiewicz72@hotmail.com

Admin

Willis Reynolds

Lead Accountability Associate

willis_reynolds5@gmail.com

Viewer

Nina Mayert

Lead Factors Architect

nina.mayert83@hotmail.com

Member

Israel Cummings

Lead Implementation Engineer

israel.cummings44@hotmail.com

Admin

Celestine Mayer

Internal Division Representative

celestine.mayer@gmail.com

Viewer

Fae Leannon

Regional Division Strategist

fae.leannon22@hotmail.com

Admin

Bethany Mertz

Human Mobility Manager

bethany_mertz56@yahoo.com

Admin

Delaney Feeney-Thompson

Direct Paradigm Analyst

delaney.feeney-thompson@gmail.com

Viewer

Demario Bashirian

Global Directives Developer

demario.bashirian34@hotmail.com

Viewer

Ernestine Kirlin

Regional Branding Technician

ernestine.kirlin@hotmail.com

Admin

Elouise Luettgen

Human Accountability Liaison

elouise.luettgen@yahoo.com

Member

Cecil Hodkiewicz

Future Marketing Developer

cecil_hodkiewicz66@yahoo.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
Marian Murray IIdarrel.cremin97@gmail.comRoyal OakInactive$148.48
Stanley McLaughlinmarisol64@hotmail.comO'KonboroInactive$694.76
Ms. Rita Bodemaxine26@hotmail.comRowland HeightsInactive$885.55
Mario Gerholdbenjamin30@hotmail.comNew WilbertonActive$1,066.80
Adam Padberg-Leannonfrederik_leffler@gmail.comLake AlfredaInactive$310.60
Total$3,106.19

Basic table

Table with Images

NameEmailLocationStatusBalance
Clifford Torp
@justin24
ian.kuhic@hotmail.comNew LaurianeInactive$230.59
Ms. Marcelo Waelchi
@junius76
evelyn41@gmail.comWest UrbanviewInactive$90.98
Mr. Cali Bashirian MD
@bethany_beier
earline.rempel-reichert@gmail.comWest FloActive$204.76
Boyd Torp
@oliver.reichel
alene.will60@hotmail.comLangvilleInactive$605.29
Andrew Quigley
@alberta_farrell
curtis.schoen@gmail.comSawaynworthInactive$613.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Joshua Trompallan_stroman@yahoo.comCamillachesterActive$599.45
Miss Filomena Kosseric64@gmail.comKuphalshireInactive$564.01
Sheila Runolfssonsergio39@gmail.comTwin FallsActive$1,083.80
Dr. Marina Abshirequinten_lind@hotmail.comFort DevynviewActive$1,140.77
Patty Kreiger DVMlexi_fahey@hotmail.comHyattburyActive$22.59
Total$3,410.62

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Raul Millsjohnnie_lind@gmail.comWinston-SalemActive$1,012.61
Caden Rolfson-Langoshchaz57@gmail.comGutkowskibergActive$504.29
Berry Kassulkemegane.morar75@hotmail.comOrlandotownInactive$473.42
Gregg Adams MDjuliet_krajcik80@gmail.comEast DawsonActive$746.49
Marshall Spencerivan.windler33@gmail.comNew TobinfurtActive$247.05
Total$2,983.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rachel Franeyarne_adams@hotmail.comKenyaburyActive$645.13
Jodi Connellyarthur.okeefe@gmail.comSouth PhoebeInactive$440.10
Miss Stewart Bechtelarmarjorie27@hotmail.comAnaheimActive$1,194.04
Domenico Franecki MDleslie_treutel@yahoo.comAnaheimInactive$277.23
Dr. Estefania Klockofredrick31@hotmail.comLake BobbyworthActive$927.41
Total$3,483.91

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
Chaz Ernserdelbert97@hotmail.comLake KielcesterInactive$310.60
Norman Kuphal-Swaniawskilorraine86@gmail.comRennerbergActive$247.59
Rodney Jakubowskiconrad_mcglynn55@gmail.comPlainfieldInactive$329.20
Orville Heidenreichwilfrid47@yahoo.comNorth FilomenaInactive$906.43
Tanya Homenickwm_king79@gmail.comLake AvalandInactive$1,016.24
Total$2,810.06

Table with row selection

Card Table

NameEmailLocationStatusBalance
Norma Emmerichjodi.corkery@gmail.comNew KierasideInactive$712.98
Vivian Wiegand PhDguadalupe.oconnell21@yahoo.comNorth BethesdaInactive$536.48
Braxton Bodelawrence55@hotmail.comCandiceshireInactive$282.93
Maryann Funkcarmel.collier71@yahoo.comSkilesfieldInactive$77.27
Zachary Wintheiserbertram31@gmail.comSouth BrionnastadActive$452.85
Total$2,062.51

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
Liliana Feilronnie.spencer-lemke9@gmail.comMorissettebergInactive$552.86
Mr. Maurice McGlynncarl51@hotmail.comCoconut CreekActive$924.57
Ella Harveyerik34@yahoo.comEast LucienneInactive$116.77
Evelyn Fritschcyrus.schulist9@hotmail.comDorotheatonInactive$441.58
Thelma Littledonald.schaden79@yahoo.comBountifulActive$689.41
Ross Mannlaney_sanford89@yahoo.comNorth MadilynActive$501.70
Benny Auerphillip_ankunding-vandervort@yahoo.comHyatttonActive$1,117.57
Gladys Webermissouri.considine64@hotmail.comAnaheimInactive$599.28
Mr. Christy Feeneycarter81@gmail.comHassieboroInactive$531.19
Heidi Donnellyfreida_kuhic-hudson@hotmail.comHuntington BeachActive$1,085.99
Dorothy Hilpertharriet_schuster@hotmail.comFort MarjolaineInactive$310.59
Gordon Rolfsonedgar_nader28@yahoo.comTinamouthInactive$483.42
Charlene Dickiron96@gmail.comWest MelissaActive$250.22
Montana Gottliebwilbert85@gmail.comBrookhavenActive$486.49
Luke Strosintonya.will68@yahoo.comEmmaleeboroughActive$534.57
Total$8,626.21

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.