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
INV001PaidCredit Card$295.72
INV002PendingCredit Card$360.22
INV003PendingBank Transfer$737.71
INV004UnpaidPayPal$527.17
INV005UnpaidPayPal$506.53
INV006UnpaidBank Transfer$908.89
INV007PendingBank Transfer$294.19
Total$3,630.43

Simple

Users

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

NameTitleEmailRoleActions
Rylee HarrisHuman Configuration Plannerrylee.harris@hotmail.comViewer
Nikki HilllInternal Mobility Coordinatornikki.hilll@hotmail.comAdmin
Ismael MacejkovicSenior Research Directorismael.macejkovic89@gmail.comViewer
Timmy HaagGlobal Communications Coordinatortimmy_haag26@hotmail.comMember
Destinee DickinsonInvestor Group Associatedestinee.dickinson@yahoo.comViewer
Myrtice HauckCustomer Accounts Producermyrtice_hauck@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Christop Lesch

Direct Paradigm Director

christop_lesch@yahoo.com

Viewer

Kylee Conn

Central Interactions Associate

kylee_conn@gmail.com

Viewer

Jessyca Boyle

Direct Program Assistant

jessyca_boyle@hotmail.com

Viewer

Jimmie Casper

Senior Intranet Strategist

jimmie_casper@gmail.com

Member

Muriel Shanahan

Customer Research Analyst

muriel_shanahan1@gmail.com

Admin

Jovani Pouros

Global Web Orchestrator

jovani.pouros87@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Emile Hermiston

National Metrics Facilitator

emile.hermiston32@hotmail.com

Member

Rosalind Morar

Chief Intranet Coordinator

rosalind_morar@hotmail.com

Admin

Jerome Hodkiewicz

Customer Security Engineer

jerome_hodkiewicz@gmail.com

Member

Jakob Lind

District Identity Facilitator

jakob.lind45@yahoo.com

Viewer

Dorris Huels

International Accountability Officer

dorris_huels81@hotmail.com

Viewer

Toy Price

Human Optimization Coordinator

toy.price65@hotmail.com

Member

Alfonso Zboncak

Chief Solutions Technician

alfonso.zboncak62@hotmail.com

Admin

Erik Kunde

Global Intranet Designer

erik_kunde@gmail.com

Admin

Amie Balistreri

Legacy Web Producer

amie.balistreri@hotmail.com

Member

Holly Hammes

Lead Assurance Orchestrator

holly_hammes@hotmail.com

Admin

Amani Blanda

International Division Developer

amani_blanda@gmail.com

Member

Korey Pollich

Global Interactions Technician

korey_pollich94@hotmail.com

Member

Flossie Thompson

National Quality Manager

flossie.thompson26@gmail.com

Member

Weldon Moen

Lead Communications Designer

weldon_moen88@yahoo.com

Member

Devonte Reilly

Principal Mobility Producer

devonte_reilly@hotmail.com

Member

Alvera Dibbert

Human Accounts Liaison

alvera.dibbert@yahoo.com

Member

Zelma Thiel

Lead Branding Orchestrator

zelma_thiel@gmail.com

Member

Roberta Murazik-Jacobs

National Solutions Agent

roberta_murazik-jacobs@hotmail.com

Admin

Arvid Kulas

Product Response Assistant

arvid_kulas@yahoo.com

Member

Clarissa Borer

Global Marketing Specialist

clarissa_borer@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
Donald Botsfordkatharina_gislason10@gmail.comHowelltonInactive$100.95
Jack Crooksjoelle.watsica70@gmail.comKyrastadActive$69.60
Brandon Marquardtmikayla33@gmail.comMedhurstworthActive$441.10
Guillermo Lindjairo_walter@hotmail.comRio RanchoInactive$453.26
Eugene Wisozkvada.heathcote@gmail.comKristoffercesterInactive$577.17
Total$1,642.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Felicia Wisozk
@rodolfo.ullrich68
halie.hammes29@hotmail.comKarellechesterInactive$650.72
Cheryl Cummerata
@thomas68
roselyn_jerde@gmail.comLake AlexbergInactive$96.21
Dr. Spencer Runte
@nicholaus39
laverne.schuppe84@gmail.comWest GeorgiannacesterActive$343.18
Tomas Adams
@aaron16
tyrell.paucek60@hotmail.comFort CollinsInactive$782.70
Stacy Gottlieb
@liam.klein66
adolfo.klein@hotmail.comManhattanActive$221.80

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Alberto Hane-Farrellvernon.zieme@yahoo.comLake MadalineworthInactive$670.75
Richard Ankundingkimberly68@yahoo.comJacobiburghInactive$1,178.46
Ms. Lynda Hermanncarolyne.krajcik83@gmail.comVonsteadInactive$186.91
Jordan Waelchigregoria53@hotmail.comFunkfieldActive$1,068.62
Sophia Quigleyashleigh_weber@yahoo.comSouth CarolannemouthActive$205.76
Total$3,310.50

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Elizabeth Schoensven.moore@yahoo.comBaumbachfieldActive$441.16
Evelyn Johnstonflavio.cremin58@hotmail.comPortageInactive$149.23
Marlene Hillsderek_rowe16@yahoo.comHoppetonActive$1,045.64
Ruby Morissettegiovanna34@gmail.comEast CortneyInactive$1,110.00
Bridget Gislasonmonte_reinger@yahoo.comReidburyActive$464.28
Total$3,210.31

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Carole Bergnaum-Hillssanford_ullrich@yahoo.comLas VegasInactive$61.21
Darren Hanezula97@yahoo.comMalindasideInactive$424.70
Olga Ziemeima21@hotmail.comLake ErinworthActive$1,009.29
Heidi Lakinoral58@hotmail.comSouth FredyActive$735.48
Elisa Hilpert-Klingvada.ondricka20@gmail.comMurrayboroActive$161.20
Total$2,391.88

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
Dr. Eddie Marvin IVlois_hessel44@yahoo.comSouth MaddisonInactive$5.75
Robyn Connellycydney51@gmail.comNew DanikabergActive$122.57
Merle Hettinger-Kesslerila64@yahoo.comGreat FallsInactive$1,160.18
Terrence Abernathyalison.donnelly44@gmail.comBurlesonInactive$486.98
Jaime Doylerasheed_damore77@hotmail.comPort FloydshireActive$292.14
Total$2,067.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Patsy Lubowitzbaylee.dibbert6@hotmail.comJarrellchesterInactive$1,111.59
Leslie Spenceravis_graham@hotmail.comMacGyverhavenActive$727.40
Marguerite Jacobsonlaury8@hotmail.comPort MaureenInactive$818.73
Rick Cummingsholly.emard83@hotmail.comRaubergInactive$1,054.58
Courtney Hirthececilia20@yahoo.comMcLeanInactive$1,119.80
Total$4,832.10

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
Darlene Jacobsondagmar_damore@yahoo.comFort ChadrickInactive$383.87
Debra Schadenreese_lakin@yahoo.comMethuen TownInactive$412.00
Alex Collinsguy.abbott@yahoo.comVallejoInactive$841.53
Pat Boylesimeon75@yahoo.comWizahavenActive$965.04
Garry Spinkamajor69@hotmail.comSan RafaelInactive$857.80
Martin Ferrycharity.grimes@gmail.comHutchinsonActive$701.03
Sandy Wisokyotis_steuber@hotmail.comBuckfurtActive$923.35
Guillermo Cassincamilla_kilback@hotmail.comWest NoelsteadActive$161.79
Jeanette Ondrickasavannah.rolfson36@gmail.comNorth LempifortActive$714.30
Melanie Keeblerole_blanda@gmail.comWest ManuelsideActive$1,048.82
Geraldine Roobkhalil33@yahoo.comWest EraboroInactive$196.87
Timmy Nader-Homenickaudrey8@hotmail.comKentonshireActive$133.61
Melba Watsicaoleta_monahan@hotmail.comMarkshavenActive$236.31
Tina Howeora.toy89@hotmail.comMemphisActive$992.69
Gwendolyn Prosaccodevonte78@gmail.comSouth HelgaInactive$419.03
Total$8,988.04

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.