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$685.89
INV002UnpaidPayPal$202.01
INV003PaidBank Transfer$451.91
INV004PendingCredit Card$824.57
INV005PendingCredit Card$251.98
INV006PendingBank Transfer$606.04
INV007PendingBank Transfer$682.38
Total$3,704.78

Simple

Users

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

NameTitleEmailRoleActions
Bailey AndersonPrincipal Mobility Officerbailey_anderson61@gmail.comViewer
Luigi ArmstrongDistrict Integration Liaisonluigi.armstrong28@gmail.comMember
Frank CarrollProduct Factors Associatefrank.carroll11@yahoo.comMember
Carrie LemkeNational Intranet Architectcarrie_lemke95@hotmail.comViewer
Sylvia KlingInvestor Optimization Coordinatorsylvia_kling@gmail.comAdmin
Rufus McLaughlin-StammHuman Communications Orchestratorrufus_mclaughlin-stamm@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Nick Huels

Lead Creative Representative

nick_huels47@yahoo.com

Admin

Danny Schulist

Regional Applications Planner

danny_schulist84@yahoo.com

Member

Jonathan Osinski

Product Group Producer

jonathan.osinski26@gmail.com

Viewer

Ayden Harris

Lead Web Agent

ayden_harris@gmail.com

Viewer

Danielle Bergstrom

District Intranet Representative

danielle_bergstrom@gmail.com

Member

Xander Rosenbaum

Lead Integration Officer

xander_rosenbaum@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Lowell Cronin

International Metrics Orchestrator

lowell.cronin75@yahoo.com

Admin

Constance Kirlin

Human Infrastructure Developer

constance_kirlin49@hotmail.com

Admin

Abel Gutmann

Internal Data Producer

abel.gutmann94@gmail.com

Admin

Corey Romaguera

Corporate Functionality Strategist

corey.romaguera16@yahoo.com

Admin

Francisco Schuppe

National Security Designer

francisco.schuppe@hotmail.com

Viewer

Christine Streich

Dynamic Applications Supervisor

christine_streich22@hotmail.com

Viewer

Elmira Blanda

Internal Infrastructure Producer

elmira.blanda22@hotmail.com

Admin

Blanche Feest

International Response Developer

blanche_feest73@gmail.com

Viewer

Vickie Schoen

Lead Configuration Supervisor

vickie.schoen@yahoo.com

Member

Tracey Volkman

Lead Intranet Associate

tracey_volkman@yahoo.com

Member

Leonie Waters

Legacy Assurance Engineer

leonie.waters6@gmail.com

Viewer

Raleigh Brakus

Human Response Engineer

raleigh.brakus34@gmail.com

Admin

Torey McClure-Hartmann

Legacy Program Orchestrator

torey.mcclure-hartmann15@yahoo.com

Member

Malcolm Grant

Senior Paradigm Analyst

malcolm.grant@hotmail.com

Member

Bobbie VonRueden

Customer Research Associate

bobbie.vonrueden35@gmail.com

Viewer

Rosalinda Braun

Lead Factors Administrator

rosalinda_braun64@hotmail.com

Viewer

Hillary Skiles

National Brand Developer

hillary.skiles20@yahoo.com

Viewer

Roberto Ritchie

Regional Program Assistant

roberto_ritchie2@hotmail.com

Viewer

Ronald Bernhard

Regional Applications Manager

ronald.bernhard12@yahoo.com

Viewer

Tyler Pagac-Grant

Lead Identity Engineer

tyler_pagac-grant@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
Clara Botsfordchristine35@yahoo.comOvaburyInactive$750.40
Kennedi Romagueraperry.prohaska7@gmail.comKulasworthInactive$1,162.76
Eulalia Walterstevie30@yahoo.comSt. PetersActive$198.41
Mr. Nikko Framilacey_reichert75@yahoo.comBartellboroughActive$648.29
Gabrielle Weissnat Sr.michael53@hotmail.comLorrainecesterActive$7.07
Total$2,766.93

Basic table

Table with Images

NameEmailLocationStatusBalance
Ignacio Runolfsdottir
@hazel_kilback
ellis_cronin@hotmail.comLethastadInactive$284.31
Natalie Von
@brennan10
brenda29@hotmail.comPort NathanielstadActive$74.79
Myra Heaney
@henriette44
vada25@yahoo.comEdinburgInactive$627.60
Tyler Ortiz-Crist
@yvonne.harvey79
alberta_stiedemann@gmail.comFort EmelieworthActive$335.20
Pamela Schmitt
@stephen_nitzsche
laverne98@yahoo.comNew RochelleInactive$510.19

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Madison Nitzschefausto6@gmail.comPort LillianaActive$592.56
Claire Hettingermarcus_zulauf65@gmail.comNorth PortActive$381.11
Mr. Neil Barton IIorlando.goyette0@gmail.comWest AnthonyboroughInactive$749.56
Fred Cronaflorence.bins-keebler@gmail.comNorth LeannchesterInactive$106.41
Donnie Kuhlmantillman_gorczany@hotmail.comNew AlonzoInactive$1,012.81
Total$2,842.45

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Parker Emmerichalexa.streich40@yahoo.comSchmidtstadActive$608.13
Mrs. Selmer Uptonesteban.kerluke@yahoo.comNew LuisacesterActive$230.69
Bradley Williamsonvincent.skiles-will@gmail.comFordfieldInactive$322.28
Guy Stiedemannevan30@gmail.comDentonActive$892.98
Mamie Dickiquentin_wisozk@yahoo.comSouth AntoniosideInactive$950.09
Total$3,004.17

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Eric Pouros IIIparis.hickle@gmail.comNorth NoahviewInactive$338.59
Aaliyah Deckowyessenia_gottlieb-parker33@yahoo.comMagdalenatonActive$171.75
Mr. Bruce Roweeddie1@gmail.comNorth SvensteadInactive$863.26
Melyna Rolfsonjake96@hotmail.comDeckowsideInactive$1,015.75
Mrs. Gia Brownrobert_jaskolski12@yahoo.comNew IdaActive$1,058.28
Total$3,447.63

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
Jana DuBuque IVedmond_shanahan78@gmail.comKshlerinhavenInactive$1,193.90
Tiffany Olsoncorene.hills@yahoo.comAdamsfieldActive$352.13
Rebekah Champlinkatheryn33@hotmail.comIowa CityInactive$491.31
Viviane Linddwayne_koepp13@gmail.comHectorworthInactive$589.35
Bella Kassulkeardella.pacocha@gmail.comEden PrairieInactive$633.41
Total$3,260.10

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jordan Hermanearnestine_nienow16@yahoo.comVolkmanfortInactive$945.85
Esther Mitchellshelly97@yahoo.comLake SantiagoActive$1,090.14
Miss Catherine Kuhn-Rempelotilia.wolff@yahoo.comEast AnnetteActive$723.25
Eleanor Donnellyessie_schmitt@gmail.comKuvalisstadActive$1,082.85
Dianna Breitenbergsavion.hettinger15@yahoo.comSchmidtburghActive$105.64
Total$3,947.73

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
Vera Hilllelton_mann14@yahoo.comBrentwoodInactive$245.53
Audie Bogan-Kuhlmanwanda88@yahoo.comEast WavalandInactive$124.27
Cynthia Danieldino.leffler@hotmail.comLeticiaportInactive$1,022.71
Mr. Felton Krajcikdalton46@gmail.comGerardoboroughInactive$310.25
Scott Bartontommie.bauch@gmail.comRickeyfortActive$1,135.47
Justice Hudsondrew7@yahoo.comSouth JonathanInactive$422.48
Shyanne Hermanjeffery_robel-gulgowski28@gmail.comMcKenziemouthActive$320.78
Mr. Elijah Kundeapril_weissnat95@gmail.comElmerfortInactive$6.98
Miss Irma Bahringervita.hermiston99@hotmail.comFort ChaimActive$236.70
Yolanda Blickjohnathan_anderson67@hotmail.comAvasideActive$686.89
Orlando Sipeshugo.gerhold42@yahoo.comEncinitasActive$1,167.09
Lucy Stoltenbergsigurd.hyatt@yahoo.comEast RuthbergInactive$1,147.68
Mr. Gabrielle Crist PhDashly.weissnat48@gmail.comCassintownActive$1,002.33
Angelica Terrystacey_gulgowski39@hotmail.comGeorgetownInactive$1,034.50
Joanne Reingerdebra_lesch@hotmail.comPort UniqueburghActive$1,085.04
Total$9,948.70

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.