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$749.35
INV002PaidBank Transfer$962.98
INV003UnpaidCredit Card$475.28
INV004PendingCredit Card$342.86
INV005PendingCredit Card$364.18
INV006PaidPayPal$140.55
INV007UnpaidCredit Card$788.82
Total$3,824.02

Simple

Users

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

NameTitleEmailRoleActions
Whitney ZulaufLead Usability Administratorwhitney.zulauf31@yahoo.comAdmin
Terrence HillsPrincipal Communications Liaisonterrence_hills85@gmail.comMember
Winston RennerDynamic Creative Agentwinston_renner@hotmail.comViewer
Zachery RomagueraSenior Web Representativezachery_romaguera@yahoo.comViewer
Craig McGlynnDirect Assurance Associatecraig_mcglynn@yahoo.comAdmin
Ruthie NaderChief Creative Liaisonruthie_nader@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Lamar Bode

National Implementation Facilitator

lamar_bode@gmail.com

Viewer

Everardo Pouros

Customer Infrastructure Strategist

everardo_pouros65@gmail.com

Viewer

Frederik Dare

International Paradigm Supervisor

frederik_dare@gmail.com

Admin

Missouri VonRueden

Senior Identity Representative

missouri_vonrueden12@hotmail.com

Member

Reanna Collins

District Research Facilitator

reanna.collins33@yahoo.com

Member

Connor Bruen

Direct Tactics Architect

connor_bruen1@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Teresa Goyette

Corporate Interactions Strategist

teresa_goyette@yahoo.com

Viewer

Issac Hahn

Principal Security Strategist

issac.hahn@gmail.com

Viewer

Raoul Mohr

Lead Optimization Administrator

raoul.mohr@gmail.com

Viewer

Mafalda Zboncak

Product Creative Liaison

mafalda.zboncak58@hotmail.com

Admin

Nico Stokes

Legacy Tactics Associate

nico.stokes5@yahoo.com

Admin

Dorris Konopelski

District Research Technician

dorris.konopelski@gmail.com

Member

Enoch McKenzie

Customer Division Producer

enoch_mckenzie29@hotmail.com

Viewer

Mckayla Abernathy

Forward Solutions Supervisor

mckayla_abernathy@yahoo.com

Admin

Shanny Jast

Investor Research Architect

shanny.jast5@gmail.com

Member

Ivy Schuster

National Response Architect

ivy_schuster@gmail.com

Member

Timmy Jacobs

Global Tactics Director

timmy_jacobs@yahoo.com

Member

Newell Lubowitz

Central Research Liaison

newell_lubowitz@yahoo.com

Viewer

Hillary Schultz

Principal Interactions Engineer

hillary.schultz78@hotmail.com

Member

Kieran Tremblay

Central Branding Developer

kieran_tremblay@hotmail.com

Member

Selena Glover

Senior Program Assistant

selena.glover@hotmail.com

Member

Price Wiza

International Security Executive

price.wiza80@yahoo.com

Viewer

Jakob Kiehn

Global Interactions Director

jakob_kiehn@gmail.com

Admin

Lesley Streich

Legacy Marketing Representative

lesley_streich45@hotmail.com

Admin

Maximillian Abshire

Senior Optimization Producer

maximillian_abshire46@yahoo.com

Viewer

Leora Rolfson-Bogan

International Creative Agent

leora.rolfson-bogan54@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
Devin Wehnerkarlee_hauck28@yahoo.comBillburghInactive$935.30
Teri Whitegina.sawayn@gmail.comRaheemmouthActive$1,174.68
Casey Larkinoma67@gmail.comRutherfordsideActive$1,097.46
Brandy Harveykody.dicki@yahoo.comEast VellaActive$944.72
Arnold Boganalfreda.batz72@hotmail.comEast ChasityActive$1,169.07
Total$5,321.23

Basic table

Table with Images

NameEmailLocationStatusBalance
Darryl Schowalter-Harvey
@ardith.jast94
kaylah_donnelly@hotmail.comOshkoshActive$704.46
Dennis Lebsack
@gaston.pfeffer22
benedict49@yahoo.comOkunevafurtActive$133.54
Colin Bosco
@iva.kshlerin37
andreane80@yahoo.comPort KatherineActive$1,083.82
Inez Deckow
@max.mitchell
william80@hotmail.comLake RaeActive$1,189.21
Kari Gulgowski Jr.
@fidel53
antwon_turcotte66@yahoo.comBartonsteadActive$1,013.74

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Adam Whitebreanna.wilkinson@gmail.comHillsmouthInactive$355.91
Santiago Johnstonmarisol.wisozk48@gmail.comWestchesterActive$104.45
Jeremy Littelpiper.ratke@yahoo.comSouth PorterworthInactive$118.21
Joyce Ebertdangelo.torphy-cronin@gmail.comReichelstadActive$763.58
Spencer Cummerataalene.johns@gmail.comKnoxvilleInactive$122.33
Total$1,464.48

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cristina Pouroskaela_legros@gmail.comClarkshireActive$12.27
Roberta Pacochalorena28@yahoo.comEast RhiannonsideActive$1,060.04
Holly Swiftjarret.corwin28@hotmail.comSouth DiannaActive$164.27
Rogelio Uptonstuart14@yahoo.comNorth JamilvilleInactive$1,066.25
Kelli Kertzmanngeovany_renner@yahoo.comMiloboroughInactive$550.32
Total$2,853.15

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mindy Greenewell_torp1@yahoo.comEunashireInactive$603.55
Kelli Bauch-Hirthesheila_spinka53@hotmail.comWest KatrinachesterActive$584.67
Matthew MacGyvermose.mccullough55@hotmail.comJarodcesterActive$774.91
Olga Toymarley50@gmail.comRockvilleActive$506.55
Charlene Reichelsebastian_mckenzie@yahoo.comFort KarenActive$791.28
Total$3,260.96

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
Elbert Creminantonio_bartoletti@gmail.comHuntington BeachActive$232.67
Ms. Priscilla Moen-Jenkinsdestini.block@hotmail.comWest AnastasiaInactive$133.79
Bonnie Schimmel Jr.nat_mante51@yahoo.comEast MartinasteadInactive$781.52
Lorena Vandervorthyman46@yahoo.comLake PeggieActive$905.78
Ms. Rita Thompsonzelma39@hotmail.comOak ParkActive$1,014.60
Total$3,068.36

Table with row selection

Card Table

NameEmailLocationStatusBalance
Alexandra Collinsrhoda_dickens@yahoo.comStevievilleActive$923.58
Franklin Torpaugustine_jacobson6@yahoo.comEwellburyActive$249.17
Jackie Quigleykailee.hagenes14@hotmail.comRandaltonInactive$572.68
Dr. Phil Ondrickahope45@gmail.comWest CarleyInactive$1,136.94
Ronnie DuBuque PhDemanuel_padberg@yahoo.comFort ElenorsideActive$862.41
Total$3,744.78

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
Mrs. Debra Langworth IVcristobal_homenick69@yahoo.comHirthebergInactive$135.80
Vivian Feileloy_brakus@gmail.comFort LeoraActive$352.40
Nettie Mertzduncan43@hotmail.comKristofferlandActive$413.59
Debbie Wittingdarius16@gmail.comLake LaishaportInactive$171.07
Bobbie Flatleygordon.glover@yahoo.comKokomoInactive$843.39
Annie Jaskolski Vcarter45@yahoo.comJohnssteadActive$306.06
Dr. Dewey Marvinnyasia40@yahoo.comEast YadiraInactive$808.43
Suzanne Baumbachabby_dubuque63@yahoo.comWest LucasInactive$138.79
Maurice Hagenessantiago1@yahoo.comOak LawnActive$25.71
Daisy Wilkinsonethelyn.murray@yahoo.comPort KeenanboroInactive$993.69
Dr. Tracy Bartelljamil23@gmail.comWardboroughActive$579.37
Velma Feeneykaela90@hotmail.comRennerburyInactive$121.90
Jaime Emmerichloy_gutkowski@hotmail.comNew CristobalActive$98.14
Corey Beierhazel.mayer76@gmail.comEarnestinevilleInactive$683.89
Lawrence Will PhDbrody_schimmel36@gmail.comGoldnertownActive$194.49
Total$5,866.72

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.