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$334.74
INV002PendingCredit Card$143.95
INV003UnpaidCredit Card$307.28
INV004PendingBank Transfer$997.44
INV005PendingBank Transfer$519.32
INV006PendingBank Transfer$771.16
INV007PendingBank Transfer$343.65
Total$3,417.54

Simple

Users

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

NameTitleEmailRoleActions
Betsy RyanCustomer Configuration Supervisorbetsy.ryan94@yahoo.comViewer
Lauryn FarrellHuman Identity Assistantlauryn.farrell26@hotmail.comViewer
Clay TreutelDynamic Research Officerclay_treutel@hotmail.comMember
Patsy TowneDirect Functionality Specialistpatsy_towne@yahoo.comMember
Verna SchowalterInternal Security Technicianverna_schowalter54@hotmail.comMember
Noel GrimesChief Paradigm Agentnoel.grimes90@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Roland Hilll

Principal Optimization Orchestrator

roland_hilll@hotmail.com

Member

Jesse Jacobs

Legacy Web Architect

jesse_jacobs@yahoo.com

Member

Eldred Walker

Internal Response Developer

eldred.walker@gmail.com

Member

Carolyn Schuster

Dynamic Optimization Assistant

carolyn.schuster@gmail.com

Viewer

Lester Bode

Senior Program Manager

lester_bode@hotmail.com

Member

Alyce Lynch

Product Solutions Orchestrator

alyce_lynch@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Erica Watsica

Legacy Program Orchestrator

erica.watsica50@hotmail.com

Admin

Lucy Luettgen

Human Quality Manager

lucy_luettgen@yahoo.com

Admin

Hailee Breitenberg

Central Web Liaison

hailee.breitenberg@gmail.com

Viewer

Floyd Reichert

Principal Identity Strategist

floyd.reichert38@hotmail.com

Admin

Cheyanne Konopelski

Regional Configuration Representative

cheyanne_konopelski60@gmail.com

Member

Sue Mosciski

Human Tactics Agent

sue_mosciski33@hotmail.com

Viewer

Monique Dickens

National Security Assistant

monique.dickens39@hotmail.com

Member

Lula Gleichner

District Quality Officer

lula_gleichner44@hotmail.com

Admin

Kevin Ritchie

Internal Configuration Liaison

kevin.ritchie@gmail.com

Viewer

Raul Torp

Dynamic Factors Orchestrator

raul.torp36@yahoo.com

Member

Eloy Torp

Future Branding Associate

eloy.torp15@gmail.com

Viewer

Norene Waelchi

Corporate Response Officer

norene.waelchi@hotmail.com

Admin

Tasha Von

Lead Markets Developer

tasha.von54@hotmail.com

Admin

Clay Pfeffer

Internal Markets Director

clay_pfeffer55@gmail.com

Viewer

Mindy Lind

Investor Security Consultant

mindy_lind@gmail.com

Viewer

Victor Wiegand

Forward Response Consultant

victor_wiegand70@yahoo.com

Viewer

Arlene Kutch

Central Functionality Associate

arlene_kutch20@yahoo.com

Viewer

Santa Abbott

Forward Accountability Developer

santa.abbott40@yahoo.com

Member

Miguel Anderson

Forward Solutions Assistant

miguel_anderson31@hotmail.com

Member

Isabel Powlowski

Principal Quality Director

isabel.powlowski42@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
Everett Stammbeverly.grady@hotmail.comTerryviewInactive$500.95
Angie Legroswinifred_kerluke-sauer33@yahoo.comElliottonInactive$745.99
Ms. Archie Fritschgustavo.frami14@gmail.comLongmontActive$392.51
Fernando Beckerfelton_ryan@hotmail.comNew ThelmavilleInactive$859.64
Bessie Johnstonbernice_gerlach97@gmail.comRyleyfurtInactive$308.14
Total$2,807.23

Basic table

Table with Images

NameEmailLocationStatusBalance
Al Bartoletti
@jarrell.muller5
leta91@gmail.comSt. CharlesActive$199.50
Raegan Volkman Sr.
@hugh.hegmann-farrell27
peter11@gmail.comMaximusfieldInactive$416.59
Eleanor Doyle
@marty72
perry19@yahoo.comRoanokeActive$1,019.83
Tre Hettinger
@thelma.mueller40
david_haley@yahoo.comWest ElvaActive$37.26
Reanna Lind-Okuneva
@claire.wisozk
yvonne_prohaska@yahoo.comGermainehavenInactive$494.98

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mercedes Kossdora.bahringer85@hotmail.comEast GenovevafieldInactive$566.47
Yvonne MacGyvergeraldine.steuber71@gmail.comDalefurtActive$830.18
Mr. Rosemarie Dickiandrew.fadel@gmail.comNew RexActive$676.97
Ciara Wintheiserveronica77@yahoo.comOwensboroActive$1,007.74
Torrance Leschlillie.flatley@gmail.comNorth MorrisInactive$614.51
Total$3,695.87

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Hank Pouroslaisha.gerlach@hotmail.comDraperActive$480.65
Mya Reynoldsgino60@gmail.comNorth AndreaneInactive$403.58
Karl Ziemanneliane16@yahoo.comJastcesterInactive$386.30
Aliza Auerjean.ernser81@gmail.comFort GoldaportInactive$410.15
Rasheed Kriselisa.labadie3@hotmail.comNameworthActive$1,111.41
Total$2,792.09

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rhonda Hudsonlana.klein@gmail.comEast EthanActive$862.70
Casey Gottliebandrea68@yahoo.comLake BethActive$1,196.62
Ulices Sporergrace_nolan@gmail.comClevelandInactive$641.81
Ms. Daisy Weissnatkenyon.gottlieb@gmail.comLake HaileechesterInactive$325.67
Kellie Labadietara62@hotmail.comNew KeeleyActive$359.48
Total$3,386.28

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. Arthur Wisozk-O'Connell IIcamryn_waelchi@yahoo.comEast RichmondInactive$95.28
Billie Hermanjaniya62@gmail.comBoynton BeachInactive$503.22
Guadalupe Flatley PhDryann.greenholt@hotmail.comMurphystadActive$965.90
Rick O'Connelljane16@hotmail.comWest BrownhavenInactive$1,062.84
Willow Mayertbilly.durgan@hotmail.comFort ChadrickActive$741.33
Total$3,368.57

Table with row selection

Card Table

NameEmailLocationStatusBalance
Rosa Feest Iernestine_vonrueden@hotmail.comFort RhodaInactive$328.61
Emily Kshlerinsallie98@gmail.comBoehmchesterInactive$373.88
Freda Strackeinez_rau64@gmail.comEast MathiasInactive$1,179.51
Orval Beerjodi76@yahoo.comEast ThaddeusInactive$510.65
Ms. Moshe Fritsch IVjohann_beier0@yahoo.comBuckridgetownInactive$1,062.16
Total$3,454.81

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
Taylor Beahanorval.labadie21@hotmail.comNorth BrandiviewInactive$289.77
Micheal Franey PhDjazmyne11@gmail.comDurhamActive$1,116.96
Lowell Baumbachirene4@hotmail.comGreenholttonInactive$21.55
Stacey Greenlonnie_stark65@gmail.comSalvadorboroInactive$670.58
Sydnee Jacobspearl.hamill45@hotmail.comSouth WhittierInactive$353.25
Ruben Osinskimolly.mcdermott@yahoo.comPort St. LucieActive$423.92
Mr. Richard Jenkinssam_keebler26@hotmail.comThaddeusmouthActive$511.07
Michelle Pollichstewart.bogisich@gmail.comSouth AyanaInactive$473.75
Otho Gottliebgarrett.weimann@yahoo.comFlaviefieldActive$753.32
Hobart Moenangel66@gmail.comAdamsburghInactive$249.36
Emelie Considinedwight.casper90@yahoo.comFort MyersActive$1,087.30
Ernesto Jacobsonlynn.stracke85@hotmail.comEast RydersideActive$370.68
Sandra DuBuque IVdawn81@yahoo.comMitchellboroughInactive$1,135.36
Audrey Collinsgeoffrey17@yahoo.comNorth DeclanInactive$1,078.93
Jonathon Bashirianluisa_nienow@gmail.comEast MilanInactive$755.62
Total$9,291.42

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.