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$923.51
INV002PaidCredit Card$934.41
INV003UnpaidCredit Card$700.73
INV004UnpaidBank Transfer$865.16
INV005PaidCredit Card$745.86
INV006PendingBank Transfer$370.32
INV007PaidBank Transfer$572.27
Total$5,112.26

Simple

Users

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

NameTitleEmailRoleActions
Victoria FaheyCorporate Operations Analystvictoria.fahey15@hotmail.comMember
Norma Kohler-JacobiInvestor Communications Designernorma_kohler-jacobi@gmail.comViewer
Mireille LeschFuture Metrics Specialistmireille.lesch8@gmail.comMember
Blanche BernhardInternal Functionality Supervisorblanche.bernhard84@hotmail.comAdmin
Lexus SchoenSenior Implementation Administratorlexus.schoen@yahoo.comAdmin
Alia FaheyFuture Solutions Orchestratoralia.fahey@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Lenna Lakin

Product Branding Manager

lenna_lakin44@hotmail.com

Admin

Willie Reichel

National Factors Facilitator

willie_reichel@hotmail.com

Member

Carole Rolfson

Chief Interactions Analyst

carole.rolfson@yahoo.com

Member

Frank Corkery

Internal Brand Designer

frank_corkery22@yahoo.com

Viewer

Gladyce Conroy

Direct Communications Officer

gladyce_conroy25@gmail.com

Admin

Kasandra Koepp

Forward Brand Manager

kasandra_koepp4@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Sara Kris

Regional Creative Associate

sara_kris4@gmail.com

Member

Jesus Lemke

International Intranet Supervisor

jesus.lemke@hotmail.com

Member

Antonio Stoltenberg

Corporate Accountability Developer

antonio.stoltenberg@gmail.com

Member

Amanda Shanahan

Future Response Director

amanda.shanahan@gmail.com

Viewer

Philip Howell

Future Markets Orchestrator

philip_howell@hotmail.com

Viewer

Caroline Maggio

National Group Architect

caroline.maggio@gmail.com

Member

Ryder Kuphal

Customer Implementation Orchestrator

ryder.kuphal@gmail.com

Member

Morgan Bartell

Senior Paradigm Associate

morgan_bartell@hotmail.com

Viewer

Fleta Gerlach

Direct Brand Coordinator

fleta.gerlach@hotmail.com

Viewer

Kathy Labadie

Chief Functionality Supervisor

kathy.labadie40@hotmail.com

Member

Roosevelt Altenwerth

Central Accountability Consultant

roosevelt.altenwerth65@yahoo.com

Viewer

Eileen Romaguera

International Accountability Architect

eileen_romaguera19@gmail.com

Admin

Alberta Casper

Central Applications Consultant

alberta.casper@hotmail.com

Viewer

Marquise Stark

Principal Functionality Specialist

marquise_stark@hotmail.com

Viewer

Scotty McClure

National Usability Consultant

scotty_mcclure@hotmail.com

Viewer

Norman Daugherty

Legacy Implementation Officer

norman_daugherty@gmail.com

Viewer

Mamie Rogahn

Human Applications Supervisor

mamie.rogahn@gmail.com

Viewer

Nikolas Torp

Central Infrastructure Administrator

nikolas.torp@yahoo.com

Admin

Vincent Kuphal

Central Solutions Manager

vincent.kuphal61@hotmail.com

Admin

Omar Prosacco

Senior Applications Coordinator

omar.prosacco@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
Nichole Hoppetina80@yahoo.comWest JoseInactive$511.56
Arthur Reynoldselvira63@hotmail.comRueckershireInactive$864.67
Kent Howellnyah99@gmail.comWest PeterfortActive$585.58
Edgar Lebsackjoann52@yahoo.comPort ZanetonActive$578.34
Morton Tillmanjuston_kovacek71@hotmail.comPort WoodrowburyInactive$1,176.53
Total$3,716.68

Basic table

Table with Images

NameEmailLocationStatusBalance
Elfrieda Conroy
@donna_gutkowski7
elijah.spencer@hotmail.comSouth TyriqueviewInactive$313.19
Brandon Kreiger-Kihn
@darryl_labadie
natasha_yundt-trantow@hotmail.comEast GarfieldburghInactive$627.95
Kimberly Emard
@mazie.rowe90
pierre.rice@hotmail.comPort AlejandroActive$105.40
Heidi Stamm
@kristie.baumbach
rachael_jerde@yahoo.comChristoplandInactive$288.54
Mr. Lexi Mayert
@salvatore_senger-heidenreich
hattie_hilpert@gmail.comPort PaulaInactive$563.42

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Issac Wolfkatrina.ondricka77@gmail.comNew CharlenecesterActive$804.70
Dorothy Bernierrachael56@hotmail.comNorth SylvestershireInactive$259.28
Christopher Johnstonrafael_jacobi@yahoo.comJoelburghInactive$567.29
Bertrand Feeneylouise92@hotmail.comBruenchesterActive$219.82
Gilbert Lebsackbenedict.vandervort@gmail.comJersey CityActive$107.73
Total$1,958.82

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Logan Raynorgina.walsh@hotmail.comMaximohavenActive$1,111.26
Elwin Haleyalberta_bashirian30@yahoo.comLake RolandoInactive$947.89
Annette Weberhilton55@gmail.comEast JamesInactive$234.84
Riley MacGyverunique_pacocha58@gmail.comLebsack-DavistownActive$422.91
Savannah Murray-Mrazmichael_feeney@gmail.comVolkmanchesterActive$571.47
Total$3,288.37

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Hollie Harberlionel.kunde26@gmail.comFort PhilInactive$259.53
Joana Wisokyrick24@gmail.comWest ChristianaportInactive$909.00
Bennie Ornesmeralda_ortiz66@gmail.comSanta ClaraActive$615.02
Doreen Beatty Icorey_labadie14@hotmail.comWatersfortActive$1,094.01
Leopoldo Mayer Sr.verna_barrows@gmail.comDavenportActive$887.99
Total$3,765.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
Derek Hueltito.ernser@gmail.comJonathontonInactive$245.34
Bernice Farrell DVMali59@gmail.comFadelportInactive$803.83
Wilbert Hamill-Larkinjane_johns@yahoo.comColliershireActive$406.97
Lew Manntoney_doyle@yahoo.comBashirianchesterActive$1,117.59
Cierra Durganmegane_damore99@yahoo.comEmmettsideActive$393.24
Total$2,966.97

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lorenzo Brakustravis41@hotmail.comConnburyActive$433.68
Arianna Padbergthomas64@hotmail.comLake RaymouthInactive$380.38
Laurel Gislasonjennifer.rath4@hotmail.comJuniuschesterActive$550.40
Ricardo Kilback MDdexter.swaniawski42@gmail.comFort GilbertoActive$1,008.05
Jordyn Durganrickey96@gmail.comWest DarrenActive$1,170.02
Total$3,542.53

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
Larissa Herman IIdouglas_cummings8@hotmail.comLyricworthActive$514.51
Jan Christiansenbobbie.heller98@gmail.comRodrigueztownInactive$1,109.94
Maximillian Dooleymildred.rodriguez@hotmail.comSt. Clair ShoresActive$781.94
Judson Ebertbruce87@yahoo.comPort VerniceInactive$570.72
James Carrolljosianne_macgyver97@hotmail.comLabadiechesterActive$961.55
Luther Labadierowland15@gmail.comHomenickstadActive$704.63
Whitney Monahankatheryn.borer@hotmail.comSouth JillworthInactive$708.97
Brannon Stammmaximo_frami64@yahoo.comGregorybergInactive$566.43
Destinee Rempeleugene_schowalter@hotmail.comFaheystadInactive$368.58
Megane Ryanjudd81@yahoo.comElyriaActive$921.87
Elaine Runolfsdottirkathryn53@gmail.comEast SheliastadInactive$606.67
Macey Walterrossie_oconnell-morissette@yahoo.comBeavercreekInactive$344.34
Lucy Runolfsson MDmohammad76@yahoo.comNorth JackActive$517.07
Elizabeth Donnellysonja52@hotmail.comNew HelenActive$1,032.74
Sheldon Parkerdevonte.goodwin18@gmail.comNew GideonActive$756.26
Total$10,466.22

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.