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$840.99
INV002UnpaidCredit Card$453.21
INV003PendingBank Transfer$277.36
INV004PendingBank Transfer$171.42
INV005PaidCredit Card$300.30
INV006PendingCredit Card$405.10
INV007PaidPayPal$263.93
Total$2,712.31

Simple

Users

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

NameTitleEmailRoleActions
Vivianne HyattRegional Web Consultantvivianne_hyatt26@yahoo.comAdmin
Mossie KilbackHuman Mobility Executivemossie.kilback@gmail.comMember
Emilie HudsonDistrict Interactions Developeremilie.hudson13@hotmail.comViewer
Imelda Cruickshank-O'ReillyRegional Brand Managerimelda.cruickshank-oreilly@gmail.comViewer
Ayla MacGyverChief Configuration Representativeayla.macgyver7@yahoo.comAdmin
Vicky CassinGlobal Interactions Supervisorvicky_cassin92@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Destini Abbott-Okuneva

Principal Metrics Developer

destini.abbott-okuneva45@gmail.com

Member

Hilma MacGyver

Senior Mobility Executive

hilma_macgyver@yahoo.com

Member

Jody Rowe

District Directives Supervisor

jody_rowe24@gmail.com

Admin

Akeem O'Connell

Regional Creative Specialist

akeem_oconnell@gmail.com

Admin

Otha Nolan

Chief Implementation Executive

otha_nolan8@hotmail.com

Admin

Mack Steuber

District Security Associate

mack.steuber@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Jordan Ritchie

Chief Solutions Executive

jordan_ritchie1@hotmail.com

Member

Gladyce Torphy-Bergnaum

Human Program Administrator

gladyce.torphy-bergnaum36@hotmail.com

Admin

Lucinda Dare

Corporate Infrastructure Liaison

lucinda_dare@yahoo.com

Admin

Giovani Schmidt

Lead Marketing Director

giovani_schmidt@yahoo.com

Admin

Mary DuBuque

Legacy Response Liaison

mary.dubuque@gmail.com

Admin

Carlo Mohr

Principal Integration Orchestrator

carlo.mohr74@yahoo.com

Member

Twila Legros

Principal Usability Manager

twila.legros51@hotmail.com

Viewer

Dianna Terry

National Creative Coordinator

dianna_terry37@hotmail.com

Viewer

Abagail Turcotte

Regional Applications Representative

abagail.turcotte22@hotmail.com

Admin

Tatyana Sanford

Corporate Response Officer

tatyana_sanford97@gmail.com

Viewer

Dayne Walker

Regional Creative Orchestrator

dayne.walker77@gmail.com

Admin

Meagan Terry-Fritsch

Regional Web Liaison

meagan_terry-fritsch64@hotmail.com

Viewer

Naomi Stamm

Investor Directives Assistant

naomi_stamm@yahoo.com

Member

Alvera Bernhard

Corporate Factors Designer

alvera.bernhard@gmail.com

Member

Joany Feil

Global Data Consultant

joany_feil@hotmail.com

Admin

Ferne Morissette

Corporate Quality Associate

ferne_morissette47@hotmail.com

Viewer

Dawn Sanford

Central Response Engineer

dawn.sanford@yahoo.com

Viewer

Terrell Schiller

District Paradigm Coordinator

terrell.schiller@gmail.com

Admin

Agustin McDermott

Legacy Security Consultant

agustin_mcdermott0@yahoo.com

Member

Amani Reynolds

Product Security Coordinator

amani.reynolds@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
Rhonda Streichblanca99@hotmail.comSouth MeggiechesterActive$549.87
Orville Schulistlarue_jacobson@hotmail.comEusebioworthActive$139.65
Brittany Harveyelmira.howe59@yahoo.comWest CharleneInactive$763.04
Benny Bauch IIdelphia_kuhic33@hotmail.comGoyettechesterActive$457.81
Van Schamberger-Fahey Jr.winifred32@gmail.comLittletonActive$938.26
Total$2,848.63

Basic table

Table with Images

NameEmailLocationStatusBalance
Leona Wisoky
@christiana_wehner38
breanna_kris27@hotmail.comBatzboroActive$664.55
Mabel Rice
@gussie_klocko98
nash.mckenzie@yahoo.comAbigalemouthInactive$682.22
Karla Orn
@verdie.donnelly16
jarrod69@hotmail.comClevelandActive$622.35
Bradley Wiegand
@jessyca.roberts53
gladyce_streich42@hotmail.comTerrysideActive$342.81
Kendra Will
@laila.purdy84
muriel86@hotmail.comSmithammouthInactive$924.22

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Nichole Heaneyfreda.becker52@yahoo.comWinston-SalemActive$612.45
Jared Treutelselena10@yahoo.comLake RodrigoportInactive$1,081.35
Jodi Hegmannansel.collier@yahoo.comSouth FredaActive$413.43
Mike Bartolettikendra97@yahoo.comHuntington ParkActive$120.52
Ramiro Mann MDsanford26@hotmail.comCollinschesterActive$1,091.93
Total$3,319.68

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Annette Lockmanterrell.reichert@gmail.comMoentownInactive$806.68
Heather Crist DVMmireille_windler-bartell@yahoo.comNorth JulianaInactive$360.67
Monica Feeney-Faheydeontae_cole35@gmail.comSt. LouisInactive$953.73
Dr. Bryant Kertzmannmckenzie.larson@gmail.comNew SaigeInactive$1,072.58
Colleen Williamsonhobart_king83@gmail.comColtonInactive$768.96
Total$3,962.62

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Winifred Ullrichhilda90@gmail.comClarecesterInactive$543.30
Opal Wolff IIdianna22@gmail.comCatalina FoothillsActive$514.49
Christopher Batz IIgus_franecki86@hotmail.comHuntersvilleActive$990.80
Angelo Gerlachdurward.huels@hotmail.comLake QuinnmouthActive$723.90
Carroll Becker IIralph_moen12@gmail.comElyriaInactive$1,177.70
Total$3,950.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
Horace Ernsermontana_bartell86@gmail.comYosttonInactive$670.52
Mack Shanahan-Schillerhector89@gmail.comLake LonzoActive$697.62
Claudia Wilderman DDSpayton86@yahoo.comNorberttonActive$440.45
Tracey O'Connell DDSnikita.hintz@hotmail.comMaggiofieldActive$136.93
Donald Labadiewiley.graham@gmail.comClevelandInactive$873.42
Total$2,818.94

Table with row selection

Card Table

NameEmailLocationStatusBalance
Andrea Shields IVclovis_kohler@gmail.comNorth DorothylandInactive$156.20
Gabriel Deckowmiracle_schimmel@yahoo.comSalemActive$608.06
Joe Spencerjohnathon.stroman29@yahoo.comLake LaviniaActive$353.92
Daisy Murazikhattie_pagac@hotmail.comSouth TristinActive$1,137.15
Ian Faydino63@gmail.comCoopershireInactive$132.28
Total$2,387.61

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
Emilio Quitzon DVMhenderson.morar46@yahoo.comMayertshireActive$655.95
Howard Farrellfelicia.tromp@hotmail.comBaileyfortInactive$201.41
Miss Helen Bayerlilly_gulgowski@hotmail.comDeontonInactive$1,059.28
Kendra Rogahnmafalda78@hotmail.comTrystantonInactive$1,160.66
Melinda Marvinrickie_kilback@yahoo.comEast AmericatonActive$557.51
Rodolfo Klockodolores.beer19@hotmail.comLueilwitzburyActive$41.93
Mr. Cody Gradymathew_nader@yahoo.comNew BrennaActive$167.15
Jeremy Rempel Vkassandra49@yahoo.comRohnert ParkActive$211.51
Mrs. Tricia Morardaren_klocko@yahoo.comWest BernieActive$818.77
Eunice Dibbertzella_jones-weber@yahoo.comRogersInactive$317.82
Miss Shawna Harveymaximillian.treutel28@gmail.comFriesenmouthActive$660.83
Heather Padbergmalika.conroy@hotmail.comAlvinaboroughInactive$592.93
Lance Ryankarlie.gutmann@yahoo.comMavericksteadInactive$604.11
Mr. Kent Spinkanicklaus_littel@yahoo.comJaedenboroActive$809.05
Jeffery Mayertiva12@yahoo.comJuanitaworthActive$950.85
Total$8,809.76

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.