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$680.14
INV002PaidPayPal$751.19
INV003PendingCredit Card$671.39
INV004PendingCredit Card$594.42
INV005PaidBank Transfer$199.96
INV006PaidCredit Card$122.75
INV007UnpaidCredit Card$872.32
Total$3,892.17

Simple

Users

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

NameTitleEmailRoleActions
Nora RusselChief Division Supervisornora.russel76@hotmail.comViewer
Marlene StarkSenior Integration Associatemarlene.stark@gmail.comAdmin
Cruz MorarInternal Security Orchestratorcruz.morar15@gmail.comMember
Steven O'KeefeLead Program Plannersteven.okeefe@hotmail.comMember
Jedidiah BernhardInternational Optimization Assistantjedidiah_bernhard@gmail.comAdmin
Macey SchoenHuman Usability Producermacey_schoen@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Charlie Emard

Legacy Branding Officer

charlie_emard@gmail.com

Member

Lucia Dietrich

National Markets Coordinator

lucia_dietrich80@gmail.com

Member

Tressie Wunsch

National Accounts Agent

tressie_wunsch@gmail.com

Viewer

Alba Braun

Investor Creative Agent

alba_braun@yahoo.com

Admin

Pam Kovacek

Corporate Metrics Engineer

pam_kovacek66@hotmail.com

Admin

Edgar Wilkinson

Regional Program Representative

edgar_wilkinson@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Shane Keeling

Legacy Marketing Developer

shane.keeling27@gmail.com

Viewer

Devyn Grant

District Response Analyst

devyn.grant@gmail.com

Viewer

Lorene Marvin

Future Accountability Facilitator

lorene_marvin43@gmail.com

Member

Helga Adams

Principal Accounts Consultant

helga.adams73@yahoo.com

Member

Lonnie Schiller

Legacy Security Director

lonnie.schiller0@yahoo.com

Viewer

Louis Price

Senior Branding Assistant

louis.price@yahoo.com

Viewer

Tanya Hyatt

Principal Marketing Orchestrator

tanya_hyatt@yahoo.com

Member

Elbert Conn

Regional Data Manager

elbert_conn@yahoo.com

Member

Zelma Corkery

Direct Marketing Consultant

zelma_corkery93@gmail.com

Viewer

Bethany Jerde

Global Web Agent

bethany.jerde26@gmail.com

Member

Gregoria Langosh

Future Division Analyst

gregoria_langosh@hotmail.com

Admin

Tyler Parker

Customer Solutions Agent

tyler.parker@hotmail.com

Member

Frankie Gorczany

Dynamic Data Representative

frankie_gorczany21@hotmail.com

Member

Tyshawn Parisian

Corporate Group Coordinator

tyshawn.parisian35@yahoo.com

Viewer

Melba Simonis

Lead Branding Facilitator

melba_simonis1@yahoo.com

Viewer

Lenna Schowalter

Chief Implementation Developer

lenna_schowalter@yahoo.com

Admin

Jared Hilpert

Regional Brand Developer

jared_hilpert48@gmail.com

Viewer

Lindsey Keebler

Chief Mobility Executive

lindsey.keebler7@hotmail.com

Member

Saul Rice-Hamill

National Group Associate

saul.rice-hamill37@hotmail.com

Admin

Felix Hyatt

Legacy Interactions Planner

felix_hyatt@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
Mrs. Ann Gusikowskijoseph_johnston@hotmail.comLake AlvenaInactive$339.10
Sharon Mantehunter82@gmail.comTyroneportActive$1,086.24
Henrietta Andersoncraig.barrows43@hotmail.comHooverInactive$685.17
Elsa Schowalterarmand.kutch@yahoo.comEleanorastadInactive$447.02
Roy Reingercaleigh57@yahoo.comSouth AlexanderInactive$520.79
Total$3,078.32

Basic table

Table with Images

NameEmailLocationStatusBalance
Angelica Kub-Zboncak
@rosie14
willard.ratke49@gmail.comPoincianaActive$251.77
Joanne Mosciski
@marquis.kassulke78
meaghan.grant-hermann98@gmail.comLake MerlinsideInactive$1,133.06
Percy Bailey
@haylie_mitchell30
keira27@yahoo.comLongmontActive$1,116.27
Elsa Olson
@dexter.schumm
morris55@hotmail.comDundalkInactive$873.61
Deven Wolff
@amya_klocko7
lucy_bergnaum@hotmail.comNorth IrmaInactive$1,162.60

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mateo Cole MDvirgil_mccullough91@hotmail.comEast LolaInactive$1,154.07
Candice Haageryn.padberg@gmail.comEast HelgaburyActive$118.81
Susanna Walkerretha46@hotmail.comBeahanchesterInactive$392.21
Hector Manteyvonne.purdy@gmail.comKlockotonInactive$945.81
Curt Bayerlina86@gmail.comHattiefortInactive$394.21
Total$3,005.11

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dr. Ramon Bauchadele5@hotmail.comVolkmansteadActive$199.25
Kirk Kuvaliscasper.schumm47@yahoo.comElisechesterInactive$634.65
Courtney Luettgensimon_breitenberg92@gmail.comHayesportInactive$535.16
Bobbie Hyattnathan48@gmail.comNorth IsaiasActive$628.89
Krista Streiched35@yahoo.comChesterfurtInactive$943.23
Total$2,941.18

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Leo Ryanscotty.barton30@yahoo.comMollyshireActive$20.41
Neil Cummingseugenia.kuhlman5@yahoo.comEulessActive$614.23
Reginald Hayesdoris_weissnat-veum@hotmail.comCynthiatownInactive$361.04
Gwen Baileymattie0@gmail.comWest LayneshireActive$721.21
Joaquin Boehm Sr.gretchen30@gmail.comLawtonInactive$1,002.85
Total$2,719.74

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
Diane O'Connellmeaghan83@yahoo.comLake CarriehavenInactive$127.48
Micheal Stiedemann DDSsalvatore_johnston@gmail.comLake DanvilleInactive$1,074.60
Danielle Torpcorey.breitenberg64@gmail.comStrosinburyActive$668.23
Royal Schowalter MDbridgette.kessler@hotmail.comEast EvelynburghActive$815.75
Randolph Whitesean.collier41@yahoo.comNew MaryannActive$579.30
Total$3,265.36

Table with row selection

Card Table

NameEmailLocationStatusBalance
Leanne Wymangino.rohan@hotmail.comPourosbergInactive$206.66
Ms. Lisa Streichlela.hayes75@hotmail.comRicesideActive$822.72
Rudolph Sengerfranklin_hettinger@yahoo.comFort MoniqueActive$1,094.66
Lowell Hermannmarcus40@yahoo.comCincinnatiInactive$365.71
Raven Dietrichshemar.mosciski-wolff95@yahoo.comHarlingenActive$528.08
Total$3,017.83

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
Madeline Nolangarth_hyatt89@hotmail.comHowesideActive$1,010.81
Melba Rutherford DDSshelley.lueilwitz98@yahoo.comLake MelindaInactive$627.40
Wyatt Christiansentasha66@hotmail.comGlenshireInactive$697.32
Joann Veumvicky_schmidt36@gmail.comFort MakennasideActive$263.51
Enola Kundeann89@yahoo.comFort JaunitastadInactive$134.73
Damion Hellercarlos.bogisich77@hotmail.comSouth HughboroughInactive$22.49
Toby Leannonzula.simonis9@yahoo.comJessicahavenActive$42.33
Mrs. Jaida Carrollgloria.kemmer@hotmail.comJohnsontownActive$6.04
Keeley Stromananita_walsh41@yahoo.comNorth IvahmouthInactive$1,050.15
Nathan Cronasienna61@hotmail.comFort HarveyfieldInactive$304.84
Roderick Bechtelarjulie94@hotmail.comPort PearlActive$905.32
Beaulah Treutelabbigail.davis@gmail.comLake KennithActive$538.50
Pietro Zemlakmckenna_roberts-ullrich67@yahoo.comGloverfieldActive$315.70
Mrs. Juanita Hegmannleola60@yahoo.comEast RalphshireInactive$861.63
Lucio Harberhenry_cole@hotmail.comNorth XzavierbergActive$300.10
Total$7,080.87

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.