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
INV001PaidBank Transfer$691.28
INV002PendingBank Transfer$239.31
INV003PendingPayPal$664.11
INV004PaidPayPal$515.36
INV005PaidPayPal$385.95
INV006PaidBank Transfer$230.23
INV007UnpaidPayPal$924.42
Total$3,650.66

Simple

Users

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

NameTitleEmailRoleActions
Hosea BatzForward Metrics Specialisthosea_batz@gmail.comAdmin
Yoshiko AbbottDirect Accountability Administratoryoshiko_abbott@hotmail.comViewer
Aliza KeeblerNational Brand Designeraliza.keebler32@hotmail.comMember
Jaycee GreenNational Implementation Engineerjaycee_green46@hotmail.comViewer
Raphaelle DoyleForward Integration Agentraphaelle_doyle@gmail.comViewer
Claud MayertDistrict Infrastructure Representativeclaud_mayert94@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Libbie Emmerich

Legacy Group Agent

libbie.emmerich@gmail.com

Admin

Alicia Kessler-Ward

Product Directives Associate

alicia_kessler-ward0@yahoo.com

Viewer

Shaniya Runte

Global Metrics Architect

shaniya_runte@gmail.com

Viewer

Era Weimann

District Configuration Officer

era_weimann@gmail.com

Member

Nayeli O'Keefe

Chief Integration Producer

nayeli.okeefe49@hotmail.com

Member

Lesley Haley

District Research Coordinator

lesley_haley3@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Eli Barrows

Lead Communications Representative

eli_barrows67@yahoo.com

Member

Benjamin Morar

Senior Markets Analyst

benjamin.morar@gmail.com

Viewer

Loy Swaniawski

Customer Implementation Facilitator

loy_swaniawski@hotmail.com

Admin

Shanel O'Hara

Direct Brand Agent

shanel.ohara74@hotmail.com

Admin

Felipa Barton

Dynamic Branding Manager

felipa.barton56@yahoo.com

Viewer

Norwood Huels

Product Directives Director

norwood_huels@yahoo.com

Member

Nadia Mayer

International Functionality Architect

nadia_mayer@yahoo.com

Admin

Penelope Conn

Forward Solutions Engineer

penelope.conn98@gmail.com

Viewer

Nichole Stark

Legacy Response Technician

nichole.stark@yahoo.com

Viewer

Reggie Torphy

Regional Integration Assistant

reggie_torphy66@gmail.com

Admin

Nasir Keebler

Investor Metrics Orchestrator

nasir_keebler@hotmail.com

Member

Lucius Douglas

Legacy Optimization Representative

lucius_douglas@hotmail.com

Admin

Richard McDermott

Human Optimization Developer

richard.mcdermott86@gmail.com

Member

Hillard Rogahn

Product Solutions Facilitator

hillard.rogahn16@yahoo.com

Viewer

Maia Herman

International Branding Representative

maia_herman85@gmail.com

Member

Cleveland Boyer

Future Integration Executive

cleveland.boyer52@gmail.com

Admin

Elijah Graham

International Factors Planner

elijah.graham@hotmail.com

Member

Keely Langosh

Future Functionality Developer

keely.langosh52@hotmail.com

Viewer

Adela Stehr

Forward Directives Facilitator

adela.stehr@yahoo.com

Admin

Otilia Langosh

Regional Assurance Liaison

otilia.langosh@yahoo.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
Ernest Skiles DVMclara.schaefer@hotmail.comPort LisetteviewInactive$142.23
Alonzo Homenickjettie_feeney19@gmail.comFort CassandrastadActive$608.91
Jorge Gutkowskiarnulfo.kub95@gmail.comWest CoryburyActive$131.33
Mr. Irving Sengerdavin28@hotmail.comWest RebecalandInactive$721.88
Mamie Sanforddejuan_deckow@gmail.comHanevilleActive$659.88
Total$2,264.23

Basic table

Table with Images

NameEmailLocationStatusBalance
Tami Franey
@mateo9
marcus.corkery@hotmail.comSouthavenActive$1,043.49
Pablo Runte
@betty_crist
helga_bogan@hotmail.comPort ElenaActive$52.97
Stephen Stiedemann
@ahmed_legros37
candida94@yahoo.comMohrvilleInactive$481.96
Rebecca Bradtke
@nya87
carter29@hotmail.comDustyburyInactive$771.26
Tom Rowe
@lexie.harris17
kamron_cole48@yahoo.comHuntington BeachActive$858.81

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Anna Millerconor.borer@hotmail.comPort NealbergActive$943.03
George Jakubowskitatyana_bogisich@gmail.comLake JaleelburghInactive$249.84
Bryant Wehner Vdavonte_schoen@hotmail.comNew OnafortActive$632.22
Ernesto Schaeferwill_hermann53@hotmail.comEast GraceActive$498.73
Suzanne Abbottsummer20@gmail.comWuckertsideInactive$1,104.12
Total$3,427.94

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Adam Dachbuford_bailey68@gmail.comEast OrangeActive$1,040.83
Marshall Strosinmyles.shanahan41@hotmail.comPalo AltoActive$149.66
Adam Abbott DDStressie18@yahoo.comFort OmaInactive$614.86
Lionel Beahanberniece.satterfield-macgyver40@gmail.comNew KatelynnActive$55.78
Kathryn Wildermancelia_cole@yahoo.comSouth SolonchesterInactive$182.13
Total$2,043.26

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Tommy Cruickshanklysanne_kuvalis@hotmail.comSchimmellandInactive$665.47
Marc Batzyesenia.connelly96@hotmail.comNolanshireActive$770.11
Charles VonRuedencecil87@yahoo.comMcCulloughchesterInactive$877.18
Kellie Feeneyandreane_morissette@hotmail.comNorth ChandlerInactive$973.44
Paulette Baumbachgeoffrey.toy@yahoo.comViolettemouthActive$274.39
Total$3,560.59

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
Norman Orncheyenne.langosh44@hotmail.comLeeburghActive$1,008.08
Naomi Hoeger DDSjeramie_adams@yahoo.comLaguna NiguelInactive$217.04
Camille Framinovella.grady5@gmail.comAubreelandActive$982.31
Dr. Lori Kreigercicero_tillman@hotmail.comNorth KeshaunsteadActive$1,165.86
Jeanette Gutkowskilinwood_oconnell48@hotmail.comTedmouthInactive$752.76
Total$4,126.05

Table with row selection

Card Table

NameEmailLocationStatusBalance
Nancy Rempeldiego85@yahoo.comDeKalbActive$66.77
Julio Runolfsdottircitlalli_fahey@gmail.comStantonhavenActive$320.06
Marty Hudson IIbryon_kuvalis65@gmail.comLake CarolineInactive$322.34
Frankie Aufderharmaxwell37@yahoo.comAlphonsoburyActive$810.83
Harry Carrollkaley44@hotmail.comCreolasteadInactive$34.42
Total$1,554.42

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
Owen Ryanelwyn_howe2@gmail.comLake JulianneActive$956.84
Rogelio Cassinjess_labadie@hotmail.comSevernInactive$757.74
Jeanette Dickens IIIvictor10@hotmail.comEast SallievilleActive$1,009.79
Lance Sipesjaylan_kub@yahoo.comNew AdrianashireActive$697.93
Roy Lehnerjustus.tillman41@gmail.comBridgeportInactive$150.19
Ann Rosenbaumtracy.koss@yahoo.comShreveportInactive$1,195.32
Ms. Melanie Bogisich-Orn IIconstantin_jenkins94@yahoo.comFort AlvisInactive$1,043.68
Tyler Blandaruthe9@hotmail.comStevieviewActive$282.59
Andrea Wizajarrett.tillman66@gmail.comPort BlazeActive$691.74
Dr. Shirley Treutelelena_morar@yahoo.comNew TerrenceboroughActive$150.65
Katie Mitchell IIsally_aufderhar50@gmail.comErnsersteadActive$534.50
Craig Yundtleland.langosh@gmail.comPort St. LucieInactive$291.69
Marsha Emmerichirving24@gmail.comNew OkeyInactive$822.97
Kellie Simonisjalon_stark@yahoo.comPort ReinatownInactive$77.05
Cassandra Gutkowskifidel_herman-hermann11@gmail.comWeberworthInactive$843.09
Total$9,505.77

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.