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
INV001PendingBank Transfer$873.67
INV002PendingBank Transfer$971.35
INV003PendingBank Transfer$454.59
INV004PendingPayPal$866.21
INV005PaidCredit Card$341.18
INV006PaidPayPal$365.94
INV007PendingCredit Card$476.46
Total$4,349.40

Simple

Users

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

NameTitleEmailRoleActions
Julian O'KeefeRegional Communications Coordinatorjulian_okeefe@gmail.comMember
Brooke WestRegional Intranet Orchestratorbrooke.west52@hotmail.comViewer
Brooke GreenholtInternational Creative Designerbrooke_greenholt@gmail.comViewer
Lloyd KassulkeCorporate Response Administratorlloyd.kassulke@hotmail.comViewer
Sherman CarrollCustomer Implementation Managersherman.carroll85@yahoo.comMember
Maurice GusikowskiGlobal Metrics Directormaurice_gusikowski69@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Flora Dare

Principal Implementation Architect

flora.dare@hotmail.com

Member

Helen King

Customer Data Producer

helen.king30@yahoo.com

Admin

Maryann Oberbrunner

Direct Directives Supervisor

maryann.oberbrunner@gmail.com

Viewer

Harriet Carter-Zulauf

Dynamic Group Assistant

harriet.carter-zulauf@hotmail.com

Viewer

Crystel Franecki

Investor Factors Orchestrator

crystel.franecki@yahoo.com

Member

Omar Moore

Corporate Mobility Developer

omar_moore28@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Amos Conroy

International Configuration Architect

amos.conroy3@hotmail.com

Member

Lue Romaguera

International Accountability Consultant

lue.romaguera14@hotmail.com

Admin

Christine Towne

Regional Marketing Specialist

christine_towne@hotmail.com

Viewer

Steve Monahan-Emmerich

Central Accountability Administrator

steve.monahan-emmerich@hotmail.com

Member

Salvador Bayer

Corporate Quality Designer

salvador.bayer@hotmail.com

Member

Kenny Champlin

Regional Optimization Designer

kenny_champlin@hotmail.com

Member

Casey Ratke

Legacy Infrastructure Supervisor

casey.ratke75@hotmail.com

Admin

Melvina Daugherty

Forward Tactics Manager

melvina_daugherty52@hotmail.com

Viewer

Andrew Roob

Global Marketing Strategist

andrew.roob@yahoo.com

Viewer

Tasha Nikolaus

Regional Metrics Technician

tasha_nikolaus@yahoo.com

Member

Adan White

Customer Markets Consultant

adan.white25@hotmail.com

Member

Willis Fisher

National Operations Developer

willis_fisher4@yahoo.com

Viewer

Shaina Haley

Human Functionality Technician

shaina_haley46@yahoo.com

Member

Harry Doyle

National Metrics Director

harry.doyle23@gmail.com

Member

Francesco Herman

Chief Identity Planner

francesco_herman97@yahoo.com

Member

Amelia Walter

National Integration Engineer

amelia_walter57@yahoo.com

Member

Alejandro Wisozk

Forward Infrastructure Agent

alejandro_wisozk67@yahoo.com

Viewer

Rocio Ledner

Legacy Branding Technician

rocio.ledner@yahoo.com

Viewer

Courtney Wunsch

Legacy Optimization Assistant

courtney.wunsch@yahoo.com

Viewer

Tatyana Blanda

Senior Functionality Specialist

tatyana.blanda@yahoo.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
Alisa Sauercayla.hegmann85@yahoo.comLeolaviewActive$289.06
Lynn Cummeratanina.sporer70@yahoo.comFrederickActive$703.88
Lupe Lehnerlee_zulauf79@gmail.comNorth ColesteadActive$466.11
Wilbur Ratkecrystal.greenholt@gmail.comBrookemouthActive$1,089.77
Aaron Shanahannicholas_sanford-bauch1@yahoo.comMonroeActive$905.42
Total$3,454.24

Basic table

Table with Images

NameEmailLocationStatusBalance
Dino Haley
@stacey.grady5
marcos.bahringer@gmail.comJannieburyInactive$421.16
Brett Gusikowski
@bert54
tomasa.spinka@hotmail.comHuntingtonInactive$298.06
Alaina Hirthe
@frankie72
brandi65@yahoo.comEnterpriseActive$196.17
Dr. Guy O'Keefe MD
@rachael7
ethan_mcglynn@yahoo.comWest GayleInactive$862.43
Ricky Bergstrom
@delbert_swaniawski14
rudolph6@hotmail.comEast KarleeInactive$348.65

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Westley Grimesrubye22@hotmail.comTerrancechesterActive$634.95
Estelle Huel-Weimanneloy53@hotmail.comLake EzekielInactive$115.92
Iris Johnstonshannon.mohr@gmail.comEast NapoleonInactive$367.17
Vera Waelchijerry56@yahoo.comDantefieldActive$988.89
Etha Kuvalisdelores_schmitt83@gmail.comFort RexburyInactive$936.14
Total$3,043.07

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Nina Stiedemann DDSbonnie_jones47@gmail.comFort SavanahshireActive$766.65
Ross Yostbrian_dickinson@gmail.comFort KathleenviewInactive$351.24
Rosemarie Dach-Feil IIIpatrick42@gmail.comBuckridgecesterInactive$891.55
Lorraine Rohanmae_hodkiewicz21@gmail.comEvansvilleActive$815.54
Sylvester Faylenore.douglas86@hotmail.comChesleychesterActive$1,086.59
Total$3,911.57

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Danielle Koss Vleona.howell86@gmail.comJovanshireInactive$1,009.04
Jonathon Schimmelviolet53@yahoo.comEast PriceboroughActive$583.53
Kali Millerviola53@gmail.comWaterburyInactive$716.26
Dr. Dave Herzogabel_hagenes@hotmail.comEast IvahInactive$864.05
Zion Bogandavion94@yahoo.comOlatheInactive$257.47
Total$3,430.35

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
Orpha Mannalysha.bailey@yahoo.comJarrodportInactive$955.52
Earnest Grady MDroy93@yahoo.comAbdullahstadActive$208.99
Ericka Wunschrosemarie48@hotmail.comSouth AnastasiaActive$921.06
Jan Wardchloe.bashirian@gmail.comEfrenfieldInactive$532.90
Rosie Darerandal16@yahoo.comPagacmouthActive$980.80
Total$3,599.27

Table with row selection

Card Table

NameEmailLocationStatusBalance
Miss Becky Wisokyjuliet_kuhlman@yahoo.comWorcesterInactive$871.75
Carole McLaughlingene_mertz@gmail.comEast WilfredInactive$934.31
Patrick Murrayethel51@gmail.comAlbertoviewInactive$1,052.21
Miguel Morissettelaverna52@gmail.comWest KaelynfieldInactive$686.76
Mya Paucekjulian_oconner@hotmail.comSouth NathanaelActive$665.41
Total$4,210.44

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
Oscar Kochemelie_feil18@hotmail.comEast VincenzoActive$62.51
Billie Leuschkelaura_green@hotmail.comPort BradfordshireInactive$786.10
Ms. Talon Boylegraham.botsford24@yahoo.comSpinkaviewInactive$573.59
Felicia Hand IIirma36@gmail.comCarissahavenInactive$661.32
Miss Rose O'Haramay68@yahoo.comPeabodyActive$240.10
Mr. Christian Robelsanford18@yahoo.comSan JoseActive$466.54
Kristy Klingblanca_crona58@yahoo.comHarrisonfieldActive$446.35
Gerson Jaskolskijune.yost22@hotmail.comJennieburghActive$356.05
Ed McLaughlindouglas.kulas76@gmail.comPurdytonActive$342.85
Mr. Bryan Franeckiherminio.bartell-sawayn35@gmail.comGilbertmouthInactive$835.69
Leatha Funklloyd2@yahoo.comNorth NorwoodInactive$798.24
Audrey Weimannleola65@gmail.comSelmerburghInactive$20.31
Miss Cecilia Waelchijacob.lueilwitz35@hotmail.comNorth AmiyamouthInactive$837.01
Mrs. Lukas Gottliebkim.schneider97@yahoo.comNew ShayleeActive$191.37
Leslie Veumfranklin.lockman@yahoo.comHamptonInactive$1,152.46
Total$7,770.49

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.