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$695.04
INV002PendingBank Transfer$896.72
INV003PaidCredit Card$509.43
INV004PendingPayPal$426.77
INV005PendingCredit Card$391.12
INV006PaidPayPal$523.19
INV007PendingPayPal$565.12
Total$4,007.39

Simple

Users

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

NameTitleEmailRoleActions
Maximo TillmanDynamic Optimization Agentmaximo_tillman77@yahoo.comMember
Alexanne KoelpinCentral Program Designeralexanne_koelpin55@hotmail.comAdmin
Westley HirtheSenior Marketing Developerwestley.hirthe69@yahoo.comMember
Ethan HarrisGlobal Assurance Architectethan.harris60@gmail.comViewer
Sarah OlsonDistrict Mobility Representativesarah.olson71@gmail.comViewer
Gisselle KoeppFuture Operations Executivegisselle_koepp@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Charlene Padberg

Senior Branding Agent

charlene_padberg@gmail.com

Viewer

Lola Klein

Product Group Administrator

lola_klein48@hotmail.com

Member

Brooks Powlowski

Dynamic Applications Liaison

brooks_powlowski72@hotmail.com

Admin

Aubree Casper

Internal Usability Specialist

aubree.casper@hotmail.com

Admin

Chadd Paucek-Goyette

Future Creative Consultant

chadd.paucek-goyette98@yahoo.com

Admin

Elouise Kozey

Regional Program Strategist

elouise.kozey@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Arvel Metz-Hegmann

Future Accounts Producer

arvel_metz-hegmann@yahoo.com

Admin

Keyshawn Green

Principal Brand Engineer

keyshawn.green@gmail.com

Admin

Alfredo Nicolas

Regional Usability Assistant

alfredo_nicolas@hotmail.com

Viewer

Asha Nolan

Product Communications Technician

asha_nolan36@yahoo.com

Member

Rachael Wunsch

Lead Research Representative

rachael.wunsch73@gmail.com

Viewer

Selmer Reichel

International Configuration Representative

selmer_reichel@hotmail.com

Viewer

Elyssa Heller

Principal Functionality Representative

elyssa_heller@hotmail.com

Member

Nathanial Murphy

Direct Operations Developer

nathanial_murphy81@hotmail.com

Viewer

Beth Moore

Investor Configuration Architect

beth_moore88@gmail.com

Member

Hallie Farrell

Forward Infrastructure Facilitator

hallie_farrell18@hotmail.com

Admin

Aimee Cummings

Customer Paradigm Liaison

aimee.cummings91@yahoo.com

Admin

Fatima Jacobson

Forward Factors Designer

fatima.jacobson60@hotmail.com

Viewer

Shawna Hauck

Principal Optimization Executive

shawna_hauck90@hotmail.com

Member

Drew Dare

Direct Quality Assistant

drew_dare82@gmail.com

Admin

Alphonso Harber

Future Mobility Officer

alphonso.harber70@hotmail.com

Viewer

Chance Runolfsson

Legacy Communications Associate

chance.runolfsson19@yahoo.com

Member

Mavis Lemke

Central Quality Assistant

mavis_lemke99@yahoo.com

Viewer

Ewald Ullrich

Investor Communications Technician

ewald_ullrich46@gmail.com

Member

Amely Hodkiewicz

Forward Directives Planner

amely.hodkiewicz@gmail.com

Admin

Reagan Doyle

Corporate Branding Architect

reagan.doyle@hotmail.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
Dianne Weimannmargarette.cole@yahoo.comLonchesterActive$257.39
Colin Reichelbeverly17@hotmail.comSchmitthavenActive$854.10
Kathryn Walker IIIaaliyah56@gmail.comWolffstadActive$806.86
Amber Will-Cormierterry_mann29@hotmail.comSevernActive$452.36
Derrick Pricehailee_mitchell@yahoo.comCorwinmouthInactive$591.51
Total$2,962.22

Basic table

Table with Images

NameEmailLocationStatusBalance
Sara Yost
@federico_farrell
velda_simonis76@gmail.comSouth WavaActive$22.21
Jaime Kuphal
@clotilde37
roosevelt.batz67@gmail.comStantonfurtActive$46.90
Arturo Feeney
@clotilde24
tomasa.padberg@hotmail.comOrnhavenInactive$1,074.56
Sherman Pfannerstill
@una.robel
diego.ritchie86@gmail.comPalo AltoActive$492.18
Alan Towne
@abel.hodkiewicz81
maritza30@hotmail.comCristopherhavenActive$887.71

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Roy Schultzrandal40@hotmail.comOkunevatonInactive$341.41
Karl Kovacekscottie6@hotmail.comShanahanvilleInactive$1,101.91
Clifton Ryanpenelope_bode37@hotmail.comConwayActive$811.69
Mr. Steven Bartellransom_christiansen95@gmail.comEast RoseInactive$277.08
Harriet Labadielila35@hotmail.comJodiesideInactive$926.28
Total$3,458.37

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ms. Myra Torpnash_breitenberg-emard@hotmail.comFayettevilleInactive$871.68
Erik Ondrickahilario.koss30@hotmail.comBrodyportInactive$180.42
Cecil Trantowleopoldo_lehner89@gmail.comBerkeleyActive$681.48
Gilbert Townecristal45@yahoo.comPort CristianportActive$210.84
Dr. Vincent Mohrporter_bartell89@gmail.comLake GretchenInactive$598.07
Total$2,542.49

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kathy Walker DVMprincess.emard@hotmail.comBrownhavenActive$812.29
Iris Dietrichjosiah.okuneva@hotmail.comNew EthanActive$1,059.20
Damon Rowerubye.bashirian13@yahoo.comHoegerlandActive$8.39
Cora Gerholdcarolina_hamill@gmail.comEast LeoneActive$508.33
Angela Macejkovicervin73@gmail.comLindenInactive$241.37
Total$2,629.58

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
Margarita Abbottdelpha_sauer79@yahoo.comBergnaumchesterActive$939.60
Flora Wuckertrussell23@gmail.comNorth JavierworthInactive$651.19
Brad Parker Izola.gibson@yahoo.comNew JefferyActive$184.13
Jake Rippinvinnie.romaguera@hotmail.comPort MathiastownActive$481.43
Abraham Littelcassandra10@yahoo.comBarnstable TownActive$622.29
Total$2,878.64

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cary Hahnelizabeth_sauer30@gmail.comEvietonInactive$280.82
Neal Schmittvance_rogahn@yahoo.comHillshavenActive$257.70
Alex Willmscornelius41@hotmail.comWest MadgeInactive$966.97
Gregory Ratkecarolyn_balistreri-bednar40@gmail.comNashville-DavidsonActive$127.52
Timmy Mayertkhalid13@yahoo.comSusiehavenInactive$496.21
Total$2,129.22

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
Jennie Lebsacksamara8@gmail.comChazportActive$549.29
Kara Johnston-Bergstromchrist_feil90@gmail.comBettieburghActive$412.82
Mark Vandervortpierce62@gmail.comNorth TerrellboroughInactive$48.10
Clifford Hellermelissa_funk10@gmail.comFort MckenzieActive$477.95
Mrs. Patsy Bahringergrayce_dickinson@yahoo.comSoledadsideInactive$727.23
Dorothy Renneraugustine_moen@gmail.comPort GissellefieldActive$496.06
Myron Baumbachwilton_damore@hotmail.comNorth DavidbergActive$777.45
Russell Volkman-Orndarrin.oreilly29@yahoo.comKetteringInactive$775.84
Denise Veumwarren.yost@gmail.comLaceyInactive$404.72
Dana Koelpinarturo_stokes@gmail.comSouth MayalandInactive$390.67
Malcolm Rempelaaron.herzog44@yahoo.comWest JamieActive$480.54
Mr. Michael Kautzerhyman.collier@gmail.comCleveland HeightsInactive$449.49
Wayne Christiansenfaustino.morissette39@gmail.comOrlandoInactive$535.89
Marta Walkerguiseppe_corwin8@yahoo.comWhite PlainsActive$398.34
Claire Murraydixie77@gmail.comO'ConnerfurtInactive$866.95
Total$7,791.34

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.