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$395.17
INV002UnpaidCredit Card$577.02
INV003PendingPayPal$230.34
INV004PaidBank Transfer$875.72
INV005PaidPayPal$716.23
INV006UnpaidCredit Card$255.54
INV007PaidCredit Card$878.34
Total$3,928.36

Simple

Users

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

NameTitleEmailRoleActions
Santina BeierCorporate Metrics Representativesantina_beier@yahoo.comAdmin
Karen FeeneyHuman Group Consultantkaren_feeney98@gmail.comViewer
Denise HoppeDynamic Infrastructure Officerdenise.hoppe98@hotmail.comViewer
Major Fadel-GoodwinFuture Interactions Supervisormajor.fadel-goodwin@hotmail.comMember
Bethel LittleChief Creative Analystbethel_little2@hotmail.comAdmin
Joseph DibbertInternal Solutions Supervisorjoseph.dibbert@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Sonia Reichel

Future Intranet Designer

sonia_reichel91@yahoo.com

Viewer

Sam Keeling

Customer Security Assistant

sam_keeling@hotmail.com

Member

Craig Rempel

Direct Quality Strategist

craig_rempel@gmail.com

Viewer

Minnie Osinski

International Integration Director

minnie_osinski7@yahoo.com

Member

Ambrose Rice

Principal Infrastructure Technician

ambrose.rice23@gmail.com

Viewer

Heather Simonis

Senior Marketing Analyst

heather.simonis@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Grayson MacGyver

Future Optimization Administrator

grayson_macgyver33@hotmail.com

Member

Gia Spinka

Forward Group Facilitator

gia.spinka@gmail.com

Member

Elenora Erdman

Forward Security Consultant

elenora.erdman@yahoo.com

Viewer

Earnestine Purdy

Central Integration Administrator

earnestine_purdy99@yahoo.com

Admin

Luke O'Conner

Central Assurance Liaison

luke.oconner@gmail.com

Admin

Brooke Cruickshank

Future Intranet Architect

brooke.cruickshank73@hotmail.com

Viewer

Sylvester Murray

Senior Mobility Planner

sylvester_murray57@gmail.com

Admin

Grayson Pfannerstill

Central Web Strategist

grayson_pfannerstill@hotmail.com

Member

Ignacio Pagac

Global Program Supervisor

ignacio.pagac@hotmail.com

Viewer

Ollie Renner

International Tactics Planner

ollie_renner75@hotmail.com

Member

Tiffany Anderson-Cartwright

Central Data Officer

tiffany.anderson-cartwright@hotmail.com

Admin

Lorena Bahringer

Future Operations Developer

lorena_bahringer2@yahoo.com

Member

Verna Mertz

Dynamic Accounts Manager

verna.mertz@gmail.com

Member

Carole Towne

Legacy Response Architect

carole.towne38@yahoo.com

Viewer

Jordon Barton

Customer Quality Facilitator

jordon.barton78@hotmail.com

Admin

Phyllis Emmerich

Future Markets Administrator

phyllis_emmerich@yahoo.com

Viewer

Susan Turner

Chief Web Planner

susan.turner@yahoo.com

Admin

Fannie Senger

Corporate Creative Planner

fannie.senger@hotmail.com

Member

Geovanny Blanda

Legacy Interactions Officer

geovanny.blanda51@gmail.com

Member

Geneva Metz

Customer Markets Producer

geneva.metz6@hotmail.com

Viewer

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
Irene Stehrjoshua49@yahoo.comNorth BilliechesterInactive$396.38
Robb White-Welchramon.reynolds@hotmail.comWest GennaroboroughInactive$587.45
Danny Friesenlucious39@yahoo.comPearlandActive$1,054.03
Thelma Pacochabecky70@hotmail.comNew JulieboroughInactive$1,040.64
Mya Haleydavonte.terry93@gmail.comWest AbigaleInactive$1,036.26
Total$4,114.76

Basic table

Table with Images

NameEmailLocationStatusBalance
Tillman Ledner
@enrique_huels
hermina.kuhn@yahoo.comNorth AliaburyInactive$319.82
Sheila Jast
@nick.hansen
louise7@gmail.comOak LawnInactive$806.09
Muriel Fay
@tracy_auer
tina_mills62@yahoo.comNorth HestersteadActive$228.40
Patrick Hansen
@joel67
jerome_keebler67@yahoo.comEast VincenzaburghInactive$653.99
Kacie Sporer
@sonja43
clint.rath41@hotmail.comBoscoworthActive$926.20

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Eloise Mertzhomer59@yahoo.comDaughertyworthInactive$223.44
Clotilde Hahn Vlonnie71@yahoo.comRoyportActive$659.42
Marguerite Wizaelaine.nader64@hotmail.comKarenfurtActive$752.44
Miss Geovanny Effertzsherman.hand@yahoo.comNorth LaceyInactive$964.25
Magnolia Schummtamara79@hotmail.comFadelviewInactive$318.29
Total$2,917.84

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Yazmin Bergejeffrey_king0@yahoo.comSilver SpringActive$1,173.56
Lesley Maggiomaggie.dickens@gmail.comMorissetteshireInactive$834.71
Damon Townelewis.mohr@gmail.comNew AudraInactive$1,044.78
Angelica Stracke Vfloyd.christiansen77@gmail.comNolanhavenActive$612.04
Roslyn Gibson IVramon71@hotmail.comLake MarciastadActive$130.63
Total$3,795.72

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mrs. Tad Mitchellcristobal_ferry@gmail.comEast LaurynsideActive$60.85
Nathan Manntrevor44@hotmail.comWest JordynInactive$405.90
Kristie Bergstromgonzalo20@yahoo.comScotfieldActive$808.54
Jacquelyn VonRuedenhershel_bartoletti@hotmail.comRitchieburyActive$144.56
Doug Konopelskibranson81@hotmail.comJettietownInactive$1,072.41
Total$2,492.26

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
Quentin Halvorsonlura_oberbrunner@gmail.comFort CoycesterActive$535.95
Merl Larsonshana53@gmail.comNapaInactive$351.40
Merle Hodkiewiczandre_graham@gmail.comTillmantownActive$975.69
Asia Runtelaila42@yahoo.comLynchfurtActive$1,056.32
Sidney Schummkelli_predovic@hotmail.comFort MarkInactive$1,036.20
Total$3,955.56

Table with row selection

Card Table

NameEmailLocationStatusBalance
Tommy Blicklindsay.glover68@yahoo.comLake EdmondInactive$161.60
Lucas Lebsackmathew.hamill@hotmail.comWunschvilleInactive$381.00
Abdiel Robel DVMhelene58@hotmail.comLake TraceyInactive$824.17
Debbie Abernathyana65@yahoo.comEast ColemanActive$275.94
Flossie Lockmanannamarie58@gmail.comNorth EmmaActive$389.46
Total$2,032.17

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
Ricky Grimesheather82@gmail.comJeaniebergInactive$1,087.86
Khalid Schadenida_koss@yahoo.comDeKalbActive$1,143.59
Khalil Schusterroger_heathcote@yahoo.comBirminghamActive$1,140.85
Ocie Grimesgrant.kihn-hermann43@gmail.comHempsteadInactive$158.17
Dr. Mae Walsh Ikelly37@hotmail.comWest AudraActive$512.16
Hector O'Connergenoveva73@yahoo.comKirlinbergActive$73.07
Gordon Steuberclint_witting@yahoo.comAlexandrovilleInactive$502.68
Mr. Anthony Crooksshawn_jerde@hotmail.comRomaguerashireActive$342.20
Hubert Monahanhenrietta_oberbrunner@yahoo.comEscondidoActive$423.40
Cody Satterfieldjody96@yahoo.comStokesstadInactive$472.07
Karl Legrosdave.brown@yahoo.comAlfredtownActive$1,045.85
Alison Osinskisylvester.swift@gmail.comGusfortActive$443.01
Abelardo Bernierjovanny22@gmail.comLarkinburyInactive$151.60
Pearl Terryunique_roberts@yahoo.comBurdetteviewActive$231.16
Preston Millsfrancisco.hammes32@gmail.comColtonActive$812.90
Total$8,540.57

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.