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
INV001UnpaidCredit Card$605.48
INV002PaidCredit Card$147.48
INV003PaidBank Transfer$708.78
INV004UnpaidBank Transfer$997.79
INV005PaidCredit Card$541.42
INV006PaidPayPal$803.61
INV007PendingPayPal$434.31
Total$4,238.87

Simple

Users

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

NameTitleEmailRoleActions
Carlos D'AmoreInternational Data Consultantcarlos_damore79@gmail.comMember
Mervin BergstromHuman Communications Representativemervin.bergstrom43@gmail.comMember
Eunice LittleLegacy Usability Analysteunice.little@gmail.comAdmin
Guadalupe DickiCorporate Creative Plannerguadalupe.dicki89@hotmail.comAdmin
Mack KrisPrincipal Implementation Consultantmack.kris@hotmail.comAdmin
Albert DickinsonDynamic Data Planneralbert_dickinson@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Martha Donnelly

Internal Functionality Agent

martha_donnelly@gmail.com

Admin

Kendra Hamill-Wiegand

Direct Division Coordinator

kendra_hamill-wiegand14@hotmail.com

Admin

Sunny Weimann

Legacy Paradigm Planner

sunny.weimann4@gmail.com

Viewer

Jayda Wintheiser

District Infrastructure Analyst

jayda.wintheiser9@hotmail.com

Admin

Shelly Russel-O'Connell

Investor Configuration Consultant

shelly_russel-oconnell@gmail.com

Member

Roderick Gutkowski

Future Operations Architect

roderick_gutkowski@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Vernon Rutherford

Principal Functionality Developer

vernon_rutherford@hotmail.com

Viewer

Charlotte Nolan

Corporate Factors Technician

charlotte_nolan7@hotmail.com

Admin

Jamie Douglas

Dynamic Web Supervisor

jamie.douglas36@gmail.com

Admin

Reagan Marks

Regional Optimization Assistant

reagan.marks@gmail.com

Member

Thomas Bergstrom

Central Infrastructure Technician

thomas.bergstrom35@hotmail.com

Viewer

Lizzie Schiller

Global Factors Manager

lizzie_schiller@gmail.com

Admin

Litzy Flatley

National Intranet Coordinator

litzy.flatley30@hotmail.com

Member

Tammy Hermann

Investor Identity Coordinator

tammy_hermann@gmail.com

Admin

Jerrell Rolfson

Investor Web Supervisor

jerrell_rolfson@hotmail.com

Admin

Dayna Nolan

Legacy Response Developer

dayna_nolan5@yahoo.com

Viewer

Dwayne Collier

Corporate Accountability Manager

dwayne.collier@gmail.com

Admin

Doyle Roberts

Corporate Group Facilitator

doyle_roberts@yahoo.com

Viewer

Ned Will-DuBuque

Customer Integration Technician

ned_will-dubuque@hotmail.com

Viewer

Herbert Goodwin

Principal Operations Officer

herbert.goodwin22@hotmail.com

Member

Darrell Champlin-Skiles

Future Factors Manager

darrell_champlin-skiles@yahoo.com

Viewer

Hayden Terry

Regional Quality Executive

hayden_terry@yahoo.com

Viewer

Tommy Gerlach

Internal Functionality Technician

tommy.gerlach26@gmail.com

Viewer

Otis Wolf

Legacy Research Associate

otis.wolf@gmail.com

Member

Drew Schneider

Regional Mobility Coordinator

drew.schneider@yahoo.com

Viewer

Gordon Wehner

Customer Applications Consultant

gordon_wehner4@hotmail.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
Lucas Schmittleroy66@gmail.comEast BrycenInactive$369.80
Monserrat Johnsonmelanie.considine88@gmail.comLake AdrienneboroughInactive$991.32
Johnny Millsart.farrell@gmail.comEast KittyActive$940.60
Onie Hagenesgrady.hamill92@gmail.comWillmsbergInactive$523.12
Terrence Considinehertha_steuber@yahoo.comGreat FallsInactive$488.67
Total$3,313.51

Basic table

Table with Images

NameEmailLocationStatusBalance
Bob Rolfson-Schaden
@sam.toy
bonita_hettinger5@hotmail.comSouth JaniesideActive$523.99
Claud Reilly
@ora69
kay_green@gmail.comJuniusvilleInactive$1,073.13
Earl Bailey
@edwin.macgyver
lee95@hotmail.comAustenvilleActive$1,005.81
Rosalia Pacocha
@bobby_adams
imogene_towne@hotmail.comLas CrucesActive$752.45
Vernice Harris
@luigi_watsica33
hazel72@hotmail.comLuciousportInactive$204.43

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Norwood Kassulkekiley54@hotmail.comMarquardtfieldActive$366.26
Frederick Baumbachgregory.wunsch@gmail.comWest GailboroActive$803.81
Adela Veumgrant_zieme@yahoo.comWaukeganInactive$137.93
Drew Auerdonald_jaskolski0@gmail.comLake HillaryActive$889.56
Mohammad Jerdeandy.osinski24@hotmail.comSouth RoyalchesterActive$1,069.48
Total$3,267.04

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Pearl Schowalterizaiah_bednar@gmail.comAuburnInactive$654.52
Mr. Manley Langoshkelly_konopelski@gmail.comHuelfieldActive$458.74
Candace Webersean.lowe-waters@gmail.comMargarettetownInactive$616.65
Darnell Westnathaniel_watsica26@hotmail.comSioux CityActive$10.34
Lenny Gusikowskihugh_shields84@hotmail.comLemkeboroughInactive$71.87
Total$1,812.12

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ed Robelraul41@hotmail.comFort ParisActive$642.79
Krystal Kilbackcayla49@hotmail.comDearbornInactive$302.37
Ayden Leannontheresa37@gmail.comNew GersonActive$79.90
Kara Whitecalvin41@yahoo.comNew KadenActive$428.64
Easter Manntoni.huel@hotmail.comBogisichtonActive$337.91
Total$1,791.61

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
Elta Windlerjesse_wunsch54@gmail.comWest RettaInactive$150.36
Keith Creminjean58@yahoo.comEast NovellaInactive$607.79
Mr. Jackie Connellywillow.leannon96@hotmail.comNew HildegardboroughInactive$828.58
Maci Gleichneramos.lindgren@gmail.comCandacestadInactive$806.68
Shirley Romaguera IIamir.walsh-wisozk85@hotmail.comNew IdellsideInactive$131.00
Total$2,524.41

Table with row selection

Card Table

NameEmailLocationStatusBalance
Bartholome Adamsjane11@hotmail.comIcieshireInactive$712.49
Marley Flatleyrex.abbott15@yahoo.comDaremouthInactive$315.17
Leopold Borerkarina52@gmail.comRichardsonInactive$416.76
Tamara Carroll Sr.joel_kovacek35@hotmail.comWest JulianamouthInactive$370.94
Bruce Bogannatalie.ryan63@hotmail.comFond du LacInactive$328.60
Total$2,143.96

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
Buster Morissettemargie.daugherty@gmail.comFort JosianestadInactive$1,028.49
Tony Adams Vcayla.legros66@gmail.comWest HoraceActive$543.86
Dr. Bo Romaguerawesley.weimann@yahoo.comWest ConnorInactive$981.74
Krystal Lednerirma_rolfson96@hotmail.comBaileyfortInactive$963.34
Mrs. Adrienne Spinkaquincy.shields@hotmail.comHaylieboroughActive$572.10
Josiane Osinskihope.jacobs@gmail.comO'KeefefieldActive$614.19
Dr. Pietro Pacocha Jr.brandi.carroll@yahoo.comMrazfurtInactive$54.53
Adriel Jast Sr.leone_kulas@gmail.comTillmansideInactive$772.08
Arturo Nitzschemyra_brakus83@gmail.comLangworthburghInactive$765.35
Dana Turnerpriscilla_romaguera35@yahoo.comBuckfieldInactive$849.54
Felix Streichisaac_becker97@yahoo.comFort EmilActive$485.14
Mr. Charlie Carterriver.swift19@gmail.comGideonmouthInactive$861.61
Mr. Armani Tremblay IVaaron_kuphal85@gmail.comPaulalandInactive$662.37
Dave Howell IIIrobin.kohler@hotmail.comLake AniyahInactive$393.59
Johanna Runtevladimir.nolan59@gmail.comSouth KavonInactive$198.60
Total$9,746.53

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.