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
INV001UnpaidBank Transfer$276.50
INV002UnpaidPayPal$339.15
INV003PaidCredit Card$747.84
INV004PendingPayPal$532.74
INV005UnpaidCredit Card$791.87
INV006PendingCredit Card$798.18
INV007PaidBank Transfer$588.15
Total$4,074.43

Simple

Users

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

NameTitleEmailRoleActions
Juana DonnellyChief Program Facilitatorjuana_donnelly89@gmail.comMember
Candace FraneyPrincipal Functionality Producercandace.franey@hotmail.comMember
Hollis SchadenLegacy Mobility Facilitatorhollis_schaden@gmail.comViewer
Toney HalvorsonInvestor Web Directortoney.halvorson54@gmail.comMember
Charlene ThompsonPrincipal Markets Developercharlene_thompson@yahoo.comViewer
Jace TreutelLead Solutions Developerjace.treutel68@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Jo Fay

Dynamic Paradigm Executive

jo.fay@yahoo.com

Member

Ralph Wunsch

Internal Applications Executive

ralph.wunsch@hotmail.com

Viewer

Felipe Bahringer

Legacy Infrastructure Executive

felipe_bahringer@hotmail.com

Viewer

Erick Sporer

Forward Configuration Officer

erick.sporer@hotmail.com

Admin

Ramona Grant

Human Functionality Assistant

ramona_grant@gmail.com

Admin

Roxanne Ratke

Forward Tactics Orchestrator

roxanne.ratke@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Rita Considine

International Research Liaison

rita.considine@yahoo.com

Member

Chadrick Kohler-Koss

Product Interactions Orchestrator

chadrick_kohler-koss4@hotmail.com

Member

Darryl Howell

Human Optimization Administrator

darryl.howell@gmail.com

Viewer

Quinten Cremin

Global Configuration Representative

quinten_cremin56@yahoo.com

Admin

Eldred Schaden

District Implementation Planner

eldred_schaden@hotmail.com

Viewer

Gaetano Wilkinson

Global Infrastructure Developer

gaetano_wilkinson16@gmail.com

Member

Clifford Cassin

Global Operations Planner

clifford_cassin@hotmail.com

Viewer

Tillman Berge

International Program Producer

tillman_berge99@hotmail.com

Admin

Connie Terry

Human Research Agent

connie_terry25@yahoo.com

Viewer

Josefina Thompson

Future Factors Technician

josefina.thompson@gmail.com

Admin

Keshawn Armstrong

Future Paradigm Director

keshawn.armstrong@gmail.com

Viewer

Edgar Aufderhar

Lead Brand Representative

edgar_aufderhar@gmail.com

Admin

Charles Schultz

Internal Communications Specialist

charles.schultz80@gmail.com

Viewer

Rachael Sauer

Internal Web Director

rachael.sauer@gmail.com

Viewer

Camden Oberbrunner

Human Optimization Producer

camden_oberbrunner@yahoo.com

Admin

Brennon Schoen

Future Configuration Officer

brennon.schoen74@gmail.com

Viewer

Nicholaus Keeling

Chief Applications Strategist

nicholaus.keeling@hotmail.com

Viewer

Jadyn Fisher

Product Usability Assistant

jadyn_fisher72@gmail.com

Viewer

Raheem Frami

Direct Group Director

raheem.frami92@yahoo.com

Member

Leland Batz

Principal Implementation Agent

leland.batz25@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
Lura Schulistgiuseppe.ondricka@gmail.comMoorebergActive$1,176.92
Bessie Beattygene.schumm26@hotmail.comCarlottaboroughInactive$102.78
Joey Block IVarthur68@gmail.comLazaroboroActive$1,075.52
Rita Lindgrenflorencio.sawayn@hotmail.comLos AngelesActive$942.10
Hortense Watsica-Andersondarla10@hotmail.comGusikowskiworthInactive$36.71
Total$3,334.03

Basic table

Table with Images

NameEmailLocationStatusBalance
Edward Carroll
@clara_blanda31
brent17@hotmail.comEast SandrineActive$1,146.05
Paulette Bins
@shane.yundt
herman_stracke@hotmail.comEast CarlottaActive$397.12
Ronnie Kertzmann
@elvira99
kristy65@hotmail.comEast NayeliInactive$346.77
Antone Hintz
@tremaine_blick-reichel89
sophie.crona19@hotmail.comRosemariefieldActive$677.23
Isabel Ernser
@latoya.renner
roosevelt.cole@gmail.comManhattanInactive$1,192.57

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kenneth Rodriguezmalcolm19@yahoo.comLake AntoniaActive$87.59
Jarrod Halvorsonwebster_pfannerstill59@hotmail.comYorkActive$948.74
Vickie Huelskaelyn.kohler75@gmail.comLeannburyInactive$654.60
Miss Lukas Starkafton6@hotmail.comSouth BulahInactive$1,123.33
Lester Rennerraleigh_yundt@hotmail.comAiyanafieldInactive$1,077.81
Total$3,892.07

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Madilyn Stokesmaegan.bartell5@gmail.comWadesteadActive$250.88
Kelli Gerholdmauricio_bergstrom57@hotmail.comFort HardyActive$967.53
Luis Ondrickaashtyn.christiansen@gmail.comCastro ValleyInactive$679.25
Mr. Rex Heathcote-Bahringerjabari.zulauf21@gmail.comNew AbdulActive$598.52
Melissa Beattykristofer_zieme@gmail.comMaggioburyInactive$118.10
Total$2,614.28

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Stewart McDermott Vkent56@hotmail.comLake RowansideInactive$188.27
Henry Hahn IIIdarrin.howe@yahoo.comHellerburyInactive$1,121.15
Rodney Hartmannkarl_ritchie@gmail.comRyanvilleActive$1,164.37
Everett Cummeratasandy_schmeler@gmail.comKovacek-KuhlmanworthActive$899.16
Erma Pagacmollie.roberts96@hotmail.comMaricopaActive$1,142.74
Total$4,515.69

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
Merritt Dibbert-Heathcotejosh_quitzon@yahoo.comPort DarrellsideActive$54.12
Donnell Mayertnora.mosciski98@hotmail.comHowardburyActive$896.67
Cameron Wisokyramiro_wisozk@hotmail.comSchultz-CruickshankshireActive$820.82
Korbin Bauchgarrett11@gmail.comLake JennifertonActive$17.94
Vivien Lueilwitz-Waelchidaren.gusikowski@gmail.comIgnatiusburyInactive$1,116.49
Total$2,906.04

Table with row selection

Card Table

NameEmailLocationStatusBalance
Chelsea Quitzonangelo.hamill@hotmail.comSheldonburyActive$992.14
Daryl Schroeder-Johnstongertrude_wehner@hotmail.comLynchstadActive$73.53
Nannie Mohr MDdevin.littel43@yahoo.comPort RomainesideInactive$89.26
Anastacio Wilkinsondillan33@gmail.comWest ElizaActive$380.42
Rubie Davisjeannie54@gmail.comEulessInactive$82.26
Total$1,617.61

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
Randall Westsamir_wehner92@hotmail.comPort JamesInactive$180.78
Lionel Dibbert-Kulasaxel.okuneva@yahoo.comLake ElisabethInactive$1,047.33
Mario Kingchristie66@yahoo.comBartlettActive$1,199.98
Rogelio Boganelenora_williamson73@gmail.comSonyaboroughInactive$392.44
Deshaun Reillyellen_hansen@yahoo.comDietrichstadInactive$829.53
Shawna Russelviviane.gutkowski24@yahoo.comBeattytownInactive$420.63
Emely Runolfsdottirwilbert_shanahan81@yahoo.comMullertonInactive$47.46
Mr. Albert Heaney PhDanjali.vonrueden63@gmail.comSouth BeaubergInactive$252.25
Saul Okuneva-Kubvilma12@gmail.comNorth BilliechesterInactive$650.10
Lon Kertzmannowen17@hotmail.comFredrickstadActive$1,131.16
Mr. Rufus McGlynn Sr.makayla_doyle55@gmail.comEast SandyActive$317.27
Corene Jacobijuanita.muller49@gmail.comLloydviewInactive$1,188.42
Hipolito Framibarbara.aufderhar27@yahoo.comSanfordInactive$1,128.11
Sanford Lebsack MDevan_fisher6@gmail.comAlhambraActive$239.74
Fatima Deckowmargaret_macejkovic3@hotmail.comNorth JeremieActive$403.98
Total$9,429.18

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.