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
INV001PaidPayPal$618.58
INV002PaidBank Transfer$689.40
INV003PendingBank Transfer$662.32
INV004UnpaidPayPal$178.64
INV005PaidPayPal$413.60
INV006PendingBank Transfer$621.06
INV007UnpaidBank Transfer$127.56
Total$3,311.16

Simple

Users

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

NameTitleEmailRoleActions
Ella GreenfelderInvestor Research Technicianella.greenfelder69@yahoo.comAdmin
Anabel HammesCentral Factors Manageranabel.hammes3@hotmail.comAdmin
Rhonda HoegerCentral Configuration Administratorrhonda_hoeger@hotmail.comAdmin
Janelle KubHuman Paradigm Facilitatorjanelle.kub@hotmail.comMember
Mikayla BrownInvestor Accountability Officermikayla.brown@hotmail.comMember
Tyshawn RodriguezCustomer Operations Techniciantyshawn_rodriguez21@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ramona Schmidt

Lead Identity Engineer

ramona_schmidt63@yahoo.com

Member

Conrad Hettinger

Chief Identity Associate

conrad_hettinger63@yahoo.com

Member

Evan Corkery

Lead Directives Strategist

evan_corkery@yahoo.com

Admin

Pierre Effertz

Dynamic Branding Architect

pierre_effertz77@yahoo.com

Admin

Charlene Muller

Global Optimization Facilitator

charlene.muller45@hotmail.com

Viewer

Sadie Swaniawski

Global Communications Supervisor

sadie.swaniawski31@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Giovanni Cruickshank

Investor Web Coordinator

giovanni.cruickshank53@hotmail.com

Member

Grant Prohaska

Product Branding Consultant

grant.prohaska10@yahoo.com

Member

Cassandre Schmitt

Human Marketing Administrator

cassandre_schmitt@gmail.com

Member

Deontae Shields

Principal Markets Officer

deontae.shields@hotmail.com

Admin

Toy Greenholt

Customer Accountability Developer

toy_greenholt@hotmail.com

Viewer

Casimer Pfannerstill

Internal Response Specialist

casimer_pfannerstill72@yahoo.com

Admin

Edd Wisoky

Customer Program Developer

edd.wisoky99@gmail.com

Viewer

Xavier Quigley

International Security Manager

xavier_quigley@gmail.com

Admin

Darrel Connelly

Human Integration Technician

darrel_connelly@yahoo.com

Admin

Josefina Marvin

Forward Security Consultant

josefina.marvin@hotmail.com

Viewer

Elva Hauck

Future Optimization Supervisor

elva.hauck19@yahoo.com

Member

Natasha Collier

Customer Creative Director

natasha_collier@yahoo.com

Viewer

June Smitham

Internal Group Liaison

june.smitham69@yahoo.com

Admin

Marlene Reinger

Product Data Specialist

marlene_reinger@gmail.com

Member

Vernon Marvin

District Infrastructure Orchestrator

vernon.marvin8@hotmail.com

Viewer

Ernest Haley

Central Web Director

ernest.haley@hotmail.com

Member

Modesta Jast

Central Implementation Architect

modesta.jast84@yahoo.com

Viewer

Angelita Runolfsson

Customer Metrics Strategist

angelita.runolfsson@gmail.com

Admin

Otilia Dietrich

Future Accounts Consultant

otilia_dietrich@hotmail.com

Member

Blaise Johnson

Investor Paradigm Director

blaise.johnson@gmail.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
Henry Nicolaskristopher.kuhlman77@hotmail.comLubbockInactive$934.39
Glenda Lemkesilvia87@gmail.comErdmanburyInactive$919.34
Adele Kosselisabeth_thompson94@hotmail.comGilbertActive$716.58
Dr. Kenya Schambergerleonard86@hotmail.comSouth MeaganInactive$26.62
Troy O'Keefesoledad67@yahoo.comSouth OrlandInactive$120.45
Total$2,717.38

Basic table

Table with Images

NameEmailLocationStatusBalance
Curtis Zemlak MD
@eunice14
kelli.kuvalis@hotmail.comPoincianaInactive$243.54
Dr. Marlene Upton
@shari_cummings
jeanne_stehr20@hotmail.comFort CorneliusInactive$982.43
Johanna Ward
@ludwig.kreiger
jaclyn_kreiger@hotmail.comNew BrandistadActive$152.94
Ms. Maggie Bartoletti
@ellen96
asa_grimes77@hotmail.comReynoldsteadActive$1,148.50
Mrs. Carla Prosacco
@glen.mayer50
reyes.howell28@gmail.comWest CeciliaInactive$509.83

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Sherman Harber Sr.wendy.pollich11@hotmail.comFort GeorgefieldActive$733.91
Ambrose Shieldsmiracle_reynolds29@yahoo.comMacGyvervilleActive$449.38
Cecil Larkinaimee25@yahoo.comSchowaltershireActive$465.99
Theron Flatleypayton_davis98@hotmail.comFort SonnyboroughActive$566.94
Mrs. Yvette Cummeratadarby14@yahoo.comFort DavontefortInactive$272.51
Total$2,488.73

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ben Braunthad77@hotmail.comDonaldtonInactive$795.03
Trevor Witting Iofelia.farrell20@hotmail.comNorth AgnesActive$536.12
Judd Cruickshankstanton60@yahoo.comBrekkeboroActive$622.89
Zakary Danielanne.flatley@yahoo.comRowland HeightsInactive$368.60
Fern Gibsonjosh_lueilwitz@yahoo.comPaucektownInactive$57.06
Total$2,379.70

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Karson Treuteljenifer.powlowski37@yahoo.comWolfsteadActive$103.28
Mrs. Annette Johnsrafael99@hotmail.comPort JasonActive$560.98
Charles Schowalter Idell_schinner@gmail.comLake DiegostadActive$928.29
Glen Boyletavares_gottlieb25@gmail.comHarberboroughActive$574.52
Billie Bradtkekristin_halvorson@hotmail.comNew LucashavenInactive$649.98
Total$2,817.05

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
Penny Upton-Connellyginger.oreilly16@hotmail.comEthyltownActive$559.38
Wendy Jacobskaelyn_yundt@yahoo.comNew CamilleInactive$536.52
Wesley Kemmersusan.collins69@hotmail.comFort TobyInactive$466.16
Kurt Powlowskijeannette_murphy78@hotmail.comConnellystadInactive$732.97
Patty Klockodomingo60@hotmail.comMacejkovicsideInactive$1,150.89
Total$3,445.92

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Orpha Jacobikathleen_hickle@hotmail.comNorth EdwinboroInactive$694.20
Sergio Fritsch Sr.dale_feest58@hotmail.comJakubowskibergInactive$834.68
Armani VonRuedenelbert60@gmail.comYuba CityInactive$21.20
Angie Flatleykeyshawn.botsford91@gmail.comNorth AlvinActive$471.64
Chris Stoltenbergeunice37@gmail.comVinelandActive$618.61
Total$2,640.33

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
Donald Schneiderjeramy.pacocha@yahoo.comPort FannybergActive$1,076.57
Iliana O'Connellhershel.bosco@hotmail.comBrakusmouthActive$980.23
Mr. Wayne Kshlerinjoy_lubowitz@gmail.comFort BurdetteInactive$395.70
Miss Carrie Larsonmagali5@yahoo.comKoelpinsideInactive$489.64
Clark Schulistana69@yahoo.comRochester HillsActive$752.19
Fannie Cummerata Igino.effertz-nolan85@gmail.comEstefaniachesterInactive$558.82
Jaleel Bruennelson_hickle38@yahoo.comJacobibergInactive$331.95
Patrick Bednarsara_doyle@gmail.comTrevorworthActive$669.04
Levi Stammflorian22@hotmail.comVirgilboroughActive$103.88
Llewellyn Oberbrunnerallene4@gmail.comEast AbigaylefortActive$625.05
Raul Tillmanpamela_huel33@hotmail.comSchuppechesterActive$1,123.60
Meghan Shieldselias_beer@gmail.comDianalandInactive$774.69
Willy Gleasonwalter_beier@yahoo.comRoobportInactive$896.35
Irvin Wymanrosemarie_grady80@yahoo.comFort ReynoldtownInactive$38.44
Ignacio Hammesvinnie90@yahoo.comRosemeadInactive$327.74
Total$9,143.89

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.