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$140.12
INV002PaidCredit Card$431.84
INV003PendingPayPal$447.90
INV004PaidPayPal$282.70
INV005UnpaidBank Transfer$642.36
INV006UnpaidCredit Card$328.41
INV007PaidCredit Card$654.54
Total$2,927.87

Simple

Users

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

NameTitleEmailRoleActions
Cletus OkunevaForward Brand Managercletus.okuneva@yahoo.comAdmin
Janie GrimesInvestor Accounts Plannerjanie.grimes@hotmail.comMember
Edgardo CummingsSenior Brand Representativeedgardo_cummings61@gmail.comViewer
Jarred AufderharInternal Creative Orchestratorjarred.aufderhar@hotmail.comViewer
Mike CormierInternational Functionality Developermike_cormier@gmail.comMember
Ernesto CollierInvestor Directives Producerernesto_collier82@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jermaine Collins

Corporate Assurance Producer

jermaine.collins@yahoo.com

Member

Madge Schumm

Central Branding Specialist

madge_schumm87@gmail.com

Admin

Raymond Carter

Investor Accounts Liaison

raymond.carter@yahoo.com

Viewer

Greg Weissnat

Forward Creative Manager

greg.weissnat@gmail.com

Member

Ana Hansen

Global Applications Representative

ana_hansen@gmail.com

Member

Emmet Senger

Chief Integration Orchestrator

emmet_senger@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Jean Bergstrom

Regional Usability Associate

jean_bergstrom80@gmail.com

Member

Evert Sauer

Senior Integration Orchestrator

evert.sauer52@gmail.com

Member

Damon Pagac-Kuphal

Lead Functionality Director

damon_pagac-kuphal9@gmail.com

Member

Suzanne O'Hara-Weissnat

Corporate Creative Architect

suzanne.ohara-weissnat@hotmail.com

Member

Alexane Vandervort-Strosin

Internal Intranet Administrator

alexane.vandervort-strosin@hotmail.com

Viewer

Kristen Bayer

Customer Interactions Supervisor

kristen_bayer@yahoo.com

Member

Onie Gottlieb

Internal Metrics Coordinator

onie.gottlieb@hotmail.com

Admin

Loraine Corwin

International Quality Agent

loraine.corwin@hotmail.com

Admin

Alexandrea Gutkowski

Future Paradigm Facilitator

alexandrea_gutkowski@gmail.com

Viewer

Ora Zboncak

International Assurance Associate

ora_zboncak@hotmail.com

Admin

Crystal Rosenbaum

Dynamic Functionality Specialist

crystal_rosenbaum@gmail.com

Viewer

Lindsey Parisian

District Solutions Designer

lindsey_parisian@yahoo.com

Viewer

Christian Stroman

Principal Group Assistant

christian_stroman75@gmail.com

Admin

Agnes Kautzer

Legacy Intranet Consultant

agnes_kautzer71@yahoo.com

Admin

Tiffany Conroy

Chief Marketing Agent

tiffany.conroy@hotmail.com

Viewer

Christy Keeling

Investor Brand Engineer

christy.keeling68@yahoo.com

Admin

Kathy Conn

Customer Response Strategist

kathy.conn@gmail.com

Member

Connie Cormier

Corporate Factors Engineer

connie.cormier92@yahoo.com

Member

Blair Gleichner

Principal Interactions Developer

blair_gleichner51@yahoo.com

Member

Rafael Bergstrom

Chief Accounts Representative

rafael_bergstrom@hotmail.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
Mark Langlavern.kilback62@gmail.comGiovaniburghInactive$770.15
Edmund Bednarbritney_nienow@hotmail.comElyriaInactive$1,057.89
Angel Wiza-Bayer DDSheath85@yahoo.comEast ElsiefortInactive$920.52
Mae Cartwrightjaime_moen12@yahoo.comPort MaidaActive$996.49
Heidi Stehrlayla_hilpert@hotmail.comLoristadActive$522.39
Total$4,267.44

Basic table

Table with Images

NameEmailLocationStatusBalance
Elizabeth Bergnaum
@virgil_wiza
shelly.becker@yahoo.comNaomivilleActive$256.48
Eliezer Lemke
@jacqueline.roberts
pat64@gmail.comHodkiewiczburghActive$359.37
Cathrine Shanahan
@may.stracke22
marcos.wolf26@gmail.comBiankabergInactive$301.05
Tevin Emard II
@geraldine_fahey-breitenberg92
jill4@gmail.comAlliefieldActive$138.01
Kristi Braun
@jeremy32
faye29@gmail.comSouth PedrovilleInactive$604.31

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Sylvan Padbergcarl26@hotmail.comNew DrakeshireActive$405.52
Stuart Jenkinslucille.denesik@yahoo.comOniestadActive$606.82
Moriah Lindmaximillian.jacobs82@hotmail.comNew TristinInactive$506.88
Christian Denesikalvera73@yahoo.comNorth ZoilaboroActive$75.60
Mr. Jacklyn Daugherty Sr.krista_konopelski39@hotmail.comLehnerburghActive$1,139.31
Total$2,734.13

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lelia Christiansendean85@hotmail.comMcLaughlinmouthActive$390.09
Aylin Torpaddie_koelpin90@hotmail.comWest LeliavilleActive$987.80
Alfredo Ferrykariane78@hotmail.comSouth JenniferActive$943.25
Shaun Kertzmannalthea_kreiger@hotmail.comArafurtInactive$49.76
Kristie Romaguerarenee28@gmail.comCristiansideActive$133.47
Total$2,504.37

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Claude Morarroy.williamson66@hotmail.comJanaportInactive$627.88
Flora Collinshomer33@hotmail.comLake JulesvilleActive$390.69
Cecil Jacobijayme10@yahoo.comCaseyworthActive$250.43
Zaria Casperalfonso.hodkiewicz@yahoo.comPort CelestinoActive$296.93
Miriam Schummkelli_cruickshank9@yahoo.comPricefurtActive$1,050.19
Total$2,616.12

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
Peggie Hegmannmaximo_ullrich@hotmail.comConnviewActive$620.89
Heidi O'Keefe-Franeckinicolas54@hotmail.comSouthavenActive$90.88
Rachael Harberscot99@hotmail.comGerlachboroughInactive$466.16
Chelsea Rutherfordzelma.smith@yahoo.comPort BrayanfortActive$450.47
Dave Price Vpaula.carroll@yahoo.comCranstonInactive$113.33
Total$1,741.73

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lowell Spinkaivan_bogan19@gmail.comRhiannonburyActive$1,112.53
Amely Flatleygranville42@yahoo.comBoynton BeachInactive$241.41
Micheal Rutherfordleola.funk@yahoo.comFort WayneActive$746.32
Gene Hudsonlynn47@gmail.comMazieburghInactive$960.12
Mr. Sage Cartwrightjeremy.nikolaus38@hotmail.comWest HarrisonActive$879.08
Total$3,939.46

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
Madilyn Treutelmelissa_hilll@gmail.comNew AshleighActive$725.31
Lois Doyledavion88@hotmail.comBlocktonInactive$1,096.21
Heather Corwin DVMeula41@hotmail.comWest ChandlerfortActive$766.29
Rachel Harberjerry_schiller@gmail.comNorth AngieActive$977.06
Merle Jastarmando56@hotmail.comWebertonInactive$1,135.20
Marty Swaniawskikrista.rogahn@yahoo.comTrantowburyInactive$572.86
Camila Fayglennie.reinger@gmail.comJamalstadActive$591.57
Joyce Collier IIIlauretta_rowe8@hotmail.comWaukeganActive$917.78
Rene Ritchiedarnell_russel@hotmail.comLake MiamouthActive$1,019.77
Roslyn Kilback-Prohaskaleona.mosciski91@gmail.comKearnyActive$844.10
Reginald Morissetteotis36@hotmail.comOverland ParkActive$928.53
Walter Lowe IIIhelen.jakubowski@gmail.comEvanportActive$74.47
Dr. Ben Beattyeverette.legros@hotmail.comFriscoInactive$580.55
Colin Wizacody.hudson@gmail.comOak ParkActive$41.42
Aletha Lockmanhortense.bergstrom@yahoo.comWest KristyActive$490.25
Total$10,761.37

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.