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$213.70
INV002PaidPayPal$814.12
INV003UnpaidBank Transfer$637.64
INV004PaidBank Transfer$890.21
INV005PaidBank Transfer$116.75
INV006UnpaidPayPal$507.41
INV007UnpaidCredit Card$108.01
Total$3,287.84

Simple

Users

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

NameTitleEmailRoleActions
Elian HintzInternational Response Technicianelian.hintz@yahoo.comViewer
Jared BradtkeInvestor Configuration Associatejared.bradtke@yahoo.comMember
Asha GutkowskiInternal Accounts Liaisonasha_gutkowski@hotmail.comMember
Romaine MacejkovicDynamic Usability Consultantromaine.macejkovic@yahoo.comViewer
Lorine LeschFuture Group Strategistlorine_lesch67@yahoo.comAdmin
Liliane LeuschkeGlobal Division Assistantliliane_leuschke85@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Rollin Lind

Global Creative Analyst

rollin_lind32@hotmail.com

Viewer

Cassidy Sawayn

Dynamic Tactics Administrator

cassidy.sawayn78@hotmail.com

Viewer

Antonia Brekke

Internal Paradigm Planner

antonia_brekke68@hotmail.com

Member

Sylvan Jacobson

Internal Markets Executive

sylvan_jacobson@gmail.com

Admin

Roselyn Zemlak-Murphy

Regional Integration Architect

roselyn.zemlak-murphy15@hotmail.com

Member

Ruby Littel

Future Assurance Administrator

ruby_littel39@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Jerrod Zulauf

Regional Configuration Planner

jerrod_zulauf82@gmail.com

Viewer

Rosa Kuhlman

International Intranet Director

rosa.kuhlman@hotmail.com

Admin

Shane Murphy

Investor Usability Strategist

shane.murphy7@yahoo.com

Admin

Sadye Roob

Internal Infrastructure Liaison

sadye_roob29@hotmail.com

Admin

Shawn Rutherford

Global Assurance Analyst

shawn.rutherford19@hotmail.com

Admin

Sebastian Beahan

Lead Intranet Designer

sebastian.beahan64@gmail.com

Admin

Richmond Abshire

Future Assurance Analyst

richmond.abshire91@yahoo.com

Admin

Viviane Mueller

Dynamic Markets Planner

viviane.mueller@yahoo.com

Viewer

Jefferey Haley

Global Directives Director

jefferey.haley@hotmail.com

Admin

Robyn Ward

Direct Data Agent

robyn_ward91@gmail.com

Viewer

Thad Becker

Central Configuration Manager

thad.becker@hotmail.com

Viewer

Madonna Douglas

Central Mobility Architect

madonna.douglas17@hotmail.com

Viewer

Destini Ferry

Human Implementation Consultant

destini_ferry@yahoo.com

Viewer

Sid Green

Dynamic Usability Facilitator

sid_green@hotmail.com

Viewer

Effie O'Hara-Brekke

Product Security Technician

effie.ohara-brekke70@yahoo.com

Admin

Anna Hamill

Corporate Assurance Associate

anna_hamill@hotmail.com

Admin

Hermann Dickens

Senior Infrastructure Assistant

hermann.dickens@gmail.com

Member

Mason Jerde

Direct Factors Analyst

mason_jerde@yahoo.com

Admin

Bernita Ritchie

Senior Program Agent

bernita.ritchie9@yahoo.com

Viewer

Christop Kreiger-Veum

Direct Identity Coordinator

christop_kreiger-veum@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
Velma Hirthekrista_botsford@yahoo.comDoralInactive$107.48
Whitney Franey IVmariela.kemmer@gmail.comBorerbergInactive$828.25
Brandon Shields-Wisokynathaniel.feest18@yahoo.comLake JohanntonInactive$559.56
Sean Gislasonhanna_fadel86@hotmail.comRutherfordfieldInactive$617.97
Alexandra Beierlori11@hotmail.comWoodlandActive$318.31
Total$2,431.57

Basic table

Table with Images

NameEmailLocationStatusBalance
Terence Streich
@grady_witting
amalia_stark94@gmail.comNorth CatherineActive$457.81
Jesus Bartell
@dallas.flatley18
rylee.lehner@gmail.comSouth CyrilportInactive$290.83
Angie Grant
@cassidy57
citlalli30@hotmail.comChamplinviewActive$971.03
Sarah Pacocha
@martin_padberg
roxane_morar@hotmail.comWest LurlineInactive$993.32
Ada Homenick IV
@lavonne84
jade_doyle@gmail.comFort CharlieInactive$960.28

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marilyn Kautzerapril.murray59@gmail.comMarcelinaburyActive$1,122.85
Marilyn Balistrerikeshawn_swaniawski@hotmail.comWest KelsiemouthActive$47.29
Bonnie Sengerkeira11@hotmail.comLake JaydonburyActive$486.28
Lionel Graham Jr.darrell_murphy16@yahoo.comCamarilloInactive$787.45
Pete Runtestevie.gusikowski9@hotmail.comSouth GlennieInactive$332.65
Total$2,776.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Manuel Rath Jr.leilani_dickens@yahoo.comEl CajonActive$861.91
Hector Mayertcristal_oconnell5@gmail.comDickensstadActive$547.16
Alyssa Kassulkecelestine.mclaughlin52@yahoo.comElmerstadActive$76.02
Malcolm Emmerichjackie_reinger@hotmail.comObiefurtActive$277.64
Thomas Sawaynrosa_will48@gmail.comMcCulloughhavenActive$831.25
Total$2,593.98

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Diana Kubannalise_stokes59@hotmail.comWest ShannychesterInactive$54.63
Deborah Yundtkylie40@yahoo.comNorth VelvatonInactive$323.32
Cheryl Mohrcarley81@hotmail.comNorth CamillehavenInactive$99.09
Dr. Jackie Cristpierce.oreilly13@hotmail.comSouth BettyemouthInactive$926.40
Keith Funkcasimir_leuschke@hotmail.comFort KevinworthActive$966.22
Total$2,369.66

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
Ernesto Wildermanvernice_denesik11@yahoo.comRodrigotonInactive$993.68
Joan Bogan-Gloverted77@yahoo.comNorth JaketownInactive$970.16
Ms. Tasha Denesiksamara.damore4@gmail.comWelchfortActive$1,151.52
Constance Jakubowskibessie.harris52@hotmail.comCreminhavenInactive$734.79
Randy Reillybuddy12@hotmail.comCristobalboroughInactive$962.47
Total$4,812.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kendra McClure IIImarlene_champlin47@hotmail.comWunschcesterInactive$70.27
Cassandra Carrollflo.sporer42@hotmail.comJohannboroInactive$944.66
Paul Kesslerprince.koelpin60@yahoo.comSouth BrandoburyActive$351.68
Kristin Kunzehubert33@hotmail.comSchillertownInactive$1,100.98
Kari Denesik DVMdiamond_ernser69@hotmail.comWest CovinaActive$643.77
Total$3,111.36

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
Ms. Mamie Wolffdestini.quigley58@gmail.comOdieburyInactive$955.54
Dwayne Bednar DDSdomenica_reilly@gmail.comHeathcotetonInactive$909.69
Inez Buckridge IVlenny_hintz@hotmail.comPittsfieldInactive$1,164.33
Estelle Connellybridie_hauck61@gmail.comAlafayaActive$611.94
Milton Smithmariana6@hotmail.comOakland ParkActive$67.45
Mrs. Nettie Kubhyman.wiza11@gmail.comWilmalandActive$101.42
Rosemarie Rippinangelo_mann41@yahoo.comWest PercivaltonActive$499.75
Julie Schillermose_schaden@hotmail.comArmstrongstadActive$783.65
Erika Ratke Ilindsey.homenick44@hotmail.comKirklandActive$21.21
Valerie Wizadomenick62@yahoo.comLake KristinaActive$294.69
Dana Romagueraparis92@gmail.comWest BurleytownActive$686.74
Samuel Jaskolskivladimir.gutkowski51@hotmail.comBlazechesterInactive$1,152.75
Maurice Greenfelderkarina.tillman13@hotmail.comWest RockyboroActive$1,154.03
Valerie Davisbarry61@hotmail.comTrudietonActive$214.95
Catherine Cormier Iwendell.renner@gmail.comRudychesterActive$1,070.73
Total$9,688.87

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.