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$396.18
INV002PendingCredit Card$753.27
INV003PaidPayPal$926.91
INV004PendingCredit Card$309.28
INV005PendingBank Transfer$669.34
INV006UnpaidPayPal$718.76
INV007PendingBank Transfer$464.54
Total$4,238.28

Simple

Users

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

NameTitleEmailRoleActions
Alexzander BeattyDistrict Intranet Architectalexzander.beatty6@yahoo.comMember
Chadrick SmithCentral Functionality Consultantchadrick_smith@gmail.comViewer
Hattie Mills-KochDirect Accountability Representativehattie_mills-koch1@gmail.comAdmin
Erin OsinskiNational Functionality Liaisonerin.osinski59@gmail.comMember
Golda JacobiLead Security Administratorgolda.jacobi@gmail.comAdmin
Misael QuitzonPrincipal Marketing Agentmisael.quitzon2@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Kyla Dickens

Corporate Creative Engineer

kyla.dickens@hotmail.com

Admin

Emile Hahn

Dynamic Intranet Facilitator

emile_hahn@hotmail.com

Admin

Andre Bergnaum

Legacy Accounts Designer

andre_bergnaum65@hotmail.com

Admin

Georgette Mueller

Direct Integration Agent

georgette_mueller@yahoo.com

Member

Ena Harvey-Koch

Customer Web Facilitator

ena.harvey-koch@yahoo.com

Member

Lorenza Osinski-Berge

Principal Implementation Coordinator

lorenza_osinski-berge45@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Desmond Hamill

Legacy Data Producer

desmond_hamill84@yahoo.com

Admin

Rae Jerde

Internal Integration Engineer

rae_jerde20@gmail.com

Member

Eli Miller

Regional Identity Executive

eli_miller@gmail.com

Viewer

Mack Von

Direct Applications Developer

mack_von@gmail.com

Admin

Martina Hintz

Corporate Division Orchestrator

martina_hintz4@yahoo.com

Member

Bethel Rempel

Investor Intranet Agent

bethel.rempel@hotmail.com

Admin

Odessa Ryan

Regional Accounts Analyst

odessa_ryan@hotmail.com

Admin

Kay O'Connell

Dynamic Marketing Facilitator

kay.oconnell43@hotmail.com

Member

Blair Boyle

Dynamic Group Coordinator

blair.boyle@gmail.com

Viewer

Bridget Schiller

Regional Brand Officer

bridget_schiller98@hotmail.com

Member

Leonora Mosciski

Internal Applications Technician

leonora.mosciski65@hotmail.com

Viewer

Hermina Gulgowski

Central Implementation Producer

hermina_gulgowski0@hotmail.com

Admin

Tara Armstrong

Regional Accountability Producer

tara_armstrong@hotmail.com

Member

Jessie Swift

Human Data Representative

jessie_swift@hotmail.com

Admin

Pierce Schumm

Internal Marketing Supervisor

pierce_schumm@hotmail.com

Member

Brent Oberbrunner

Direct Division Facilitator

brent_oberbrunner63@hotmail.com

Admin

Salvatore Considine

Central Factors Executive

salvatore_considine@hotmail.com

Member

Orrin Treutel

Dynamic Solutions Planner

orrin.treutel54@hotmail.com

Viewer

Bryce Jones

Chief Intranet Analyst

bryce_jones@hotmail.com

Viewer

Chris Kilback

Central Metrics Developer

chris.kilback@gmail.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
Eileen McCullough DVMsammy.schoen38@yahoo.comEast StantonchesterActive$793.13
Greg Cronajosiane.metz90@gmail.comMittietonInactive$264.28
Dr. Gilberto Kuvalissim61@hotmail.comWilfordviewInactive$74.88
Misty Lemkewilhelm.weissnat37@hotmail.comNew EuniceportActive$1,098.40
Ramon Wizabradley.stokes4@gmail.comNew UnaActive$931.49
Total$3,162.18

Basic table

Table with Images

NameEmailLocationStatusBalance
Sheldon Walsh-Romaguera
@osvaldo74
rogers48@gmail.comJakubowskichesterActive$341.04
Kate Goldner
@drake_lind
hunter.wyman42@hotmail.comNew MargaritalandInactive$741.60
Tammy McClure
@uriel_beahan
cyrus_mueller@hotmail.comGrimesportInactive$1,090.02
Tiffany Hills
@aracely.wunsch33
krista85@yahoo.comApple ValleyActive$907.94
Annette Franecki
@arianna.collier36
demetris67@hotmail.comSouth EtheltonActive$1,100.36

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lionel Cronajan.rau17@gmail.comAlanisshireActive$572.27
Curtis Kirlineugene86@gmail.comReingerstadActive$113.08
Wilson Batzeli_reynolds43@yahoo.comBergnaumsideActive$1,067.31
Rochelle Hanearden_hegmann@gmail.comEast IzabellaActive$656.01
Mr. Theodore Rolfsonjedediah80@yahoo.comEast PreciousbergActive$2.00
Total$2,410.67

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Janie Sauerfletcher_reichert48@hotmail.comHarveyboroughActive$1,062.02
Thomas Rath Vdrew_hayes@hotmail.comWaltershireInactive$594.57
Mrs. Hattie Lednerblair1@hotmail.comLake AsalandInactive$769.96
Randal Kundeniko_walker@yahoo.comSouth JovannyhavenInactive$337.54
Angie Blickalfreda_padberg16@gmail.comMarietownInactive$368.18
Total$3,132.27

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Marsha Strosinthaddeus_pagac97@gmail.comAlohaInactive$1,105.91
Amber Millsquincy_metz0@gmail.comBernhardboroughActive$906.44
Melanie Wuckerthenri35@hotmail.comEast JanelleInactive$838.30
Gayle Gorczanypresley_rau95@gmail.comChelseybergInactive$198.87
Rogelio Tremblay Vpayton24@gmail.comSigmundfurtActive$881.03
Total$3,930.55

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
Edith Pagaceliane.homenick@hotmail.comAdellbergInactive$539.68
Ms. Alice Hamill PhDcleve.lowe@hotmail.comLinniemouthActive$264.73
Maggie Cole IIbrody_paucek63@yahoo.comKundeshireInactive$71.74
Cornelius Andersonmarie_fahey@yahoo.comMorganfortActive$95.25
Alyssa Swaniawski Iemie85@hotmail.comWest AllisInactive$779.78
Total$1,751.18

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ms. Jackie Hahnnicole24@yahoo.comFort MauricioInactive$276.68
Sherman Barton-Sanfordamparo_schimmel@hotmail.comWest SonyasteadActive$559.34
Clay Sanford-Cruickshankxavier_parker@hotmail.comGorczanylandActive$1,025.01
Mrs. Jessie Prosacco PhDjakayla9@gmail.comNew UrielActive$616.71
Regina Rutherfordmaybell.collier-gutkowski16@gmail.comKemmerstadActive$105.43
Total$2,583.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
Dr. Wade Blanda-Olsonmarcelo48@gmail.comLake RooseveltstadActive$113.18
Evan Crookslaurence_ferry75@hotmail.comFlower MoundInactive$8.01
Estelle Wardcarlee_stokes88@hotmail.comChristafurtActive$549.71
Georgia Mohrbuford65@yahoo.comTheresavilleActive$248.89
Johanna Kutch-Hirtheforrest66@hotmail.comLa CrosseActive$1,197.43
Edith Strackevincent_hilpert47@yahoo.comLake ArielActive$1,142.60
Kenny Douglasanna_beier@hotmail.comNorth BrookeviewActive$962.34
Jim Bergeanibal85@gmail.comMaximillianbergActive$68.36
Leona Schowalter Vkyleigh.will6@gmail.comJakubowskifurtInactive$416.25
Cody D'Amorecorrine_beahan67@yahoo.comErwintownActive$733.14
Suzanne Rau-Wunschjovani_hilll89@gmail.comFort PierceInactive$660.24
Carmen MacGyverarch.hintz18@yahoo.comCarlottamouthActive$208.68
Judith Auerjenifer_mosciski69@yahoo.comNorth ReaganvilleActive$1,132.24
Chester Kunzejabari.oconner49@hotmail.comStammbergActive$456.28
Gloria Dickensregan_schulist71@yahoo.comLake DouglaschesterActive$1,055.27
Total$8,952.62

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.