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$211.33
INV002PendingCredit Card$576.36
INV003PaidCredit Card$353.69
INV004PendingPayPal$499.79
INV005UnpaidBank Transfer$503.43
INV006UnpaidBank Transfer$108.66
INV007PendingBank Transfer$389.12
Total$2,642.38

Simple

Users

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

NameTitleEmailRoleActions
Kaleb JonesInternational Communications Designerkaleb.jones99@yahoo.comAdmin
Florence JonesInternal Usability Technicianflorence_jones25@yahoo.comViewer
Bridie HartmannFuture Paradigm Coordinatorbridie.hartmann@gmail.comMember
Lourdes SwaniawskiInvestor Markets Designerlourdes.swaniawski85@hotmail.comMember
Monica BednarNational Directives Associatemonica_bednar@gmail.comMember
Evelyn SpinkaSenior Communications Officerevelyn.spinka@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Vanessa Walter

Human Operations Facilitator

vanessa.walter@hotmail.com

Admin

Bryana Walker

District Markets Manager

bryana.walker@yahoo.com

Admin

Alma Conn

Regional Tactics Developer

alma.conn31@gmail.com

Viewer

Ibrahim Bins

Direct Metrics Officer

ibrahim_bins48@gmail.com

Viewer

Wendell Aufderhar

Internal Paradigm Director

wendell_aufderhar@gmail.com

Member

Florian Prosacco

Central Paradigm Consultant

florian_prosacco64@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Tabitha Block

Direct Identity Executive

tabitha_block@gmail.com

Viewer

Kate Botsford

Chief Directives Supervisor

kate.botsford35@gmail.com

Viewer

Cheyenne Willms

Forward Web Liaison

cheyenne.willms0@yahoo.com

Admin

Neoma Bechtelar

Internal Web Strategist

neoma.bechtelar27@gmail.com

Viewer

Brandy Green

Forward Tactics Representative

brandy.green51@hotmail.com

Admin

Dewey Gutkowski

Chief Division Technician

dewey.gutkowski@hotmail.com

Viewer

Sven Crist

Corporate Mobility Administrator

sven.crist@gmail.com

Viewer

Terrence Littel

Senior Communications Supervisor

terrence_littel@hotmail.com

Admin

Joanna Wolff

Dynamic Infrastructure Producer

joanna.wolff94@hotmail.com

Member

Odessa Halvorson

Customer Branding Architect

odessa_halvorson@yahoo.com

Viewer

Domingo Erdman

International Security Administrator

domingo.erdman10@gmail.com

Viewer

Phil Lueilwitz

Principal Web Supervisor

phil_lueilwitz13@yahoo.com

Viewer

Shannon Dickens

Central Communications Producer

shannon.dickens@hotmail.com

Viewer

Jason Beer

Investor Web Technician

jason_beer60@hotmail.com

Admin

Emma Schoen

Customer Directives Strategist

emma_schoen50@hotmail.com

Viewer

Manley Huels

Internal Research Consultant

manley_huels@yahoo.com

Member

Roberta Erdman

International Data Producer

roberta_erdman92@yahoo.com

Admin

Wade Carroll

Global Implementation Planner

wade_carroll77@yahoo.com

Admin

Consuelo O'Conner

Product Markets Facilitator

consuelo_oconner@yahoo.com

Member

Myah Ryan-Rowe

Regional Branding Director

myah_ryan-rowe98@yahoo.com

Admin

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
Dillan Oberbrunner DVMjennings_lubowitz59@gmail.comFort JoannievilleInactive$331.40
Marie Bradtkebonnie_schowalter@yahoo.comKailynfurtInactive$802.71
Kerry Schambergercydney_hessel63@yahoo.comAltoonaInactive$1,032.54
Ulises Ortizfletcher34@hotmail.comBendInactive$89.24
Ona Nitzschenellie.baumbach-russel13@hotmail.comSouth CarolynshireActive$333.32
Total$2,589.21

Basic table

Table with Images

NameEmailLocationStatusBalance
Mrs. Roy Reynolds
@furman59
jacob_stiedemann@hotmail.comDaytonviewInactive$322.04
Melissa Hoppe
@jade_lemke
gerard_stark7@hotmail.comConnbergInactive$896.28
Ray McCullough
@madeline36
luke3@gmail.comHermannfieldActive$992.14
Hoyt Kutch Sr.
@cara.murphy8
winnifred_hauck50@yahoo.comNew AnthonyInactive$257.39
Jessica Halvorson
@willie.lubowitz
delbert_powlowski@yahoo.comWest EltonstadInactive$298.06

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Elenora Hartmanngarry.krajcik@gmail.comHarbercesterInactive$182.02
Jerome Rogahnrhianna.conn@hotmail.comIansideActive$103.57
Krystal Rogahnryley34@hotmail.comEast KattielandActive$1,043.31
Dr. April Romagueraluther.donnelly59@hotmail.comGilbertInactive$411.33
Alex Cummeratakay.ortiz@hotmail.comGerholdbergInactive$755.09
Total$2,495.32

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Baby Lynchgiovani_collier@hotmail.comPort ParkerInactive$587.88
Christian Kochjonathon.feest2@gmail.comDachsideInactive$573.86
Jerrell Kuvaliskaycee10@yahoo.comSouth CornellvilleActive$1,182.72
Faye Will-Nader IIIgertrude4@hotmail.comLake LouInactive$488.87
Mrs. Karen Framirolando48@yahoo.comFridaboroActive$751.21
Total$3,584.54

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Miss Myrna Abbottwallace_bergstrom@hotmail.comLake CarlihavenActive$438.71
Ms. Edith Pourosgillian.hills78@hotmail.comWest KeatonhavenInactive$433.36
Kyle Stokesgayle.jacobi22@yahoo.comShyannchesterActive$419.29
Miss Rachel Keebler IIImichele50@hotmail.comCaguasInactive$686.14
Shelly Labadieglenn.wilkinson27@hotmail.comYvonneboroActive$246.95
Total$2,224.45

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
Ewald Cormierdante76@gmail.comPort JaclynActive$910.65
Richie Emmerich Jr.traci_beier@gmail.comWest NeomamouthInactive$780.74
Avis Beattybrad.torp57@yahoo.comMaxsteadActive$227.72
Marta Satterfieldkoby.durgan40@hotmail.comHettingerboroActive$305.63
Shaniya Kleinlyle_kunde@hotmail.comPort AlvahtownInactive$614.21
Total$2,838.95

Table with row selection

Card Table

NameEmailLocationStatusBalance
Abraham Bruen DVMjackeline.stehr6@yahoo.comRosannaburghActive$590.87
Rasheed Medhurstcalvin.prohaska91@yahoo.comBreitenbergstadInactive$549.13
Alene Grahamdewey.bashirian77@yahoo.comNew MagnusInactive$672.78
Miss Alysa Kris IVwoodrow_grant54@hotmail.comEulahviewActive$362.61
Eva Stiedemanneverett.hartmann79@yahoo.comLoniefortActive$56.38
Total$2,231.77

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
Ferne Kuhiccameron14@gmail.comEast KatelynnboroActive$328.46
Luciano Bartolettiroberta87@yahoo.comTempleActive$810.87
Maritza Barton-Runtejenna_swaniawski@gmail.comSofiaworthInactive$671.72
Toy Crooksjanis81@yahoo.comTrantowchesterInactive$468.91
Molly Mullerharmony_herman@hotmail.comBayonneActive$1,156.74
Dr. Afton Vandervortjuana_wiegand@gmail.comHammondActive$835.07
Dr. Loyce Heaneyrodrick_klein@yahoo.comBertsteadActive$996.75
Cesar Thielaubrey.lockman@gmail.comEast EulastadActive$572.28
Dwight Bergesylvia68@gmail.comTheresevilleInactive$411.13
Jared Reingermiriam_langworth78@hotmail.comEdenportActive$189.26
Columbus Fritschkelley.kirlin@yahoo.comTurnerburyActive$97.83
Salma D'Amorebradley10@gmail.comRubyestadActive$1,059.60
June Schuppemozelle.kohler@yahoo.comPort FernebergInactive$864.44
Mrs. Kendra Hesselkelvin22@gmail.comTorphyvilleActive$907.51
Sue Mertzangel.mclaughlin@hotmail.comPort WadesteadInactive$286.49
Total$9,657.06

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.