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
INV001PaidPayPal$773.42
INV002PendingPayPal$485.01
INV003PendingCredit Card$637.83
INV004UnpaidBank Transfer$212.75
INV005PendingPayPal$933.91
INV006PaidCredit Card$355.59
INV007UnpaidCredit Card$692.47
Total$4,090.98

Simple

Users

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

NameTitleEmailRoleActions
Lenora ConroyInternal Security Designerlenora.conroy13@yahoo.comViewer
Kurtis BuckridgeHuman Communications Analystkurtis_buckridge@hotmail.comViewer
Eriberto OndrickaForward Group Directoreriberto.ondricka74@yahoo.comViewer
Kristofer KreigerDirect Optimization Analystkristofer.kreiger@gmail.comMember
Ariel BartellFuture Interactions Executiveariel_bartell34@gmail.comAdmin
Shania OkunevaCorporate Solutions Agentshania.okuneva76@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Oma Lakin

Customer Solutions Representative

oma.lakin91@hotmail.com

Admin

Geovanny Padberg

Central Mobility Orchestrator

geovanny_padberg75@gmail.com

Admin

Jan Leannon

Regional Identity Agent

jan_leannon@yahoo.com

Viewer

Raoul Klein

International Accountability Manager

raoul.klein@gmail.com

Member

Glenda Purdy

Senior Tactics Coordinator

glenda.purdy91@hotmail.com

Member

Zula Padberg

Principal Web Strategist

zula.padberg37@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Aniya Weissnat

Direct Identity Supervisor

aniya.weissnat73@hotmail.com

Admin

Adrien Crona

Chief Division Supervisor

adrien.crona@gmail.com

Member

Alexane Mraz

Human Implementation Facilitator

alexane_mraz@hotmail.com

Member

Karelle Goldner

Corporate Web Architect

karelle.goldner18@gmail.com

Viewer

Major Oberbrunner

Product Research Agent

major.oberbrunner15@yahoo.com

Admin

Vito Dickens

District Implementation Designer

vito_dickens@gmail.com

Viewer

Naomi Okuneva

Lead Functionality Developer

naomi.okuneva21@hotmail.com

Admin

Bella Hane

Senior Infrastructure Assistant

bella_hane@hotmail.com

Member

Luna Jacobi

Lead Security Analyst

luna_jacobi38@yahoo.com

Viewer

Eldred Klocko

International Accounts Liaison

eldred_klocko61@hotmail.com

Viewer

Kariane Hoeger

Regional Web Administrator

kariane.hoeger59@gmail.com

Viewer

Sean Heathcote

Global Functionality Executive

sean.heathcote50@yahoo.com

Viewer

Haylee Kris

Forward Research Director

haylee.kris69@gmail.com

Admin

Bobbie McKenzie

International Implementation Administrator

bobbie_mckenzie@yahoo.com

Member

Lessie Hackett

Internal Operations Manager

lessie_hackett@hotmail.com

Member

Greyson Purdy

Senior Integration Technician

greyson_purdy@hotmail.com

Member

Maxie Lebsack

Product Program Manager

maxie_lebsack44@yahoo.com

Admin

Camila Prosacco

Legacy Identity Facilitator

camila_prosacco@gmail.com

Admin

Mathias Franey

Internal Optimization Liaison

mathias_franey@yahoo.com

Admin

Juanita Schiller

Regional Usability Coordinator

juanita_schiller@gmail.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
Manuel Greenkirsten_gibson66@yahoo.comPort BrandycesterActive$227.60
Penny Beiereleanore_walsh@yahoo.comKleinburghInactive$413.02
Tami Kuhn-Wardpeter27@gmail.comHicksvilleActive$434.08
Renee Mertzdenis.cormier@yahoo.comArvillalandInactive$298.02
Elsie Spencer Sr.garland8@hotmail.comEast JackyActive$505.72
Total$1,878.44

Basic table

Table with Images

NameEmailLocationStatusBalance
Allen Nicolas
@lizzie_grant
dawson42@yahoo.comLake LelandInactive$875.49
Elisa Larkin
@khalil66
finn_smitham@yahoo.comLarueviewInactive$1,167.61
Steve Legros
@meggie.crist96
lenny_kautzer18@hotmail.comNew MollieInactive$358.18
Caroline Kirlin
@coby42
sterling_hettinger@yahoo.comSchuliststadActive$1,136.92
Rene Block
@jeff_bartell62
candelario12@gmail.comEast ClaraActive$508.94

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kendra Leannonnicole.altenwerth@yahoo.comEast SerenityActive$987.80
Fredrick Windlergrover.olson@yahoo.comPort DestinportActive$37.84
Mrs. Angela Donnellynicolette.lang@gmail.comNorth JamelActive$34.00
Robin Rutherfordmyles24@hotmail.comZenalandActive$238.15
Marsha Blocklily.jacobi31@yahoo.comLueilwitzcesterInactive$475.49
Total$1,773.28

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kerry Turnersheridan9@gmail.comHartfordInactive$756.71
Christina Thielsasha56@gmail.comQuitzonvilleInactive$780.51
Amanda Hansenaxel36@yahoo.comWest GermaineburyInactive$882.03
Andres Larkinlester78@gmail.comGrahamvilleInactive$346.34
Terry Schroederjacklyn92@hotmail.comFort JalenInactive$743.31
Total$3,508.90

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Harold Herzogfiona_grimes90@gmail.comSan MarcosInactive$509.27
Edward Abernathy DDSarjun45@gmail.comNorth ColumbusfurtInactive$921.40
Duane Jacobi IVcordell84@gmail.comPacochaburghActive$693.44
Rodolfo Jaskolskiroberta5@gmail.comMcCulloughviewInactive$923.28
Patti Doylezella_zieme@gmail.comSouth PatrickInactive$375.84
Total$3,423.23

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
Raquel Franeyfletcher_schiller@hotmail.comWest EstelstadActive$394.32
Dr. Chris D'Amorebridgette.morar@yahoo.comBell GardensActive$571.77
Eugene Zboncakcedrick_schoen@gmail.comRetamouthInactive$1,080.89
Penny Rodriguezanissa.oconnell@yahoo.comWest JenaInactive$1,156.44
Sonja Jastdean.fadel58@gmail.comFort MyriamInactive$376.97
Total$3,580.39

Table with row selection

Card Table

NameEmailLocationStatusBalance
Travis Johnstonfrancesca_krajcik55@yahoo.comConroeInactive$522.23
Eleanor Waelchiclementine36@gmail.comThelmatonActive$164.73
Angel Haleyrichie_fay41@gmail.comFriesenlandActive$934.04
Donnie Smithamfred95@hotmail.comFort AbigaylevilleActive$556.23
Ms. Christie O'Connerkamren.berge-lynch@gmail.comSchneiderboroActive$1,010.40
Total$3,187.63

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
Mr. Paul Feilkaden85@gmail.comNorth RaymondviewInactive$216.90
Wanda Hettingerlawson_watsica66@hotmail.comHuntingtonInactive$555.60
Ben Kuvalis IIIallison.konopelski93@yahoo.comJazmynevilleInactive$896.11
Lee Jaskolskibernita.johnson82@yahoo.comAllenInactive$272.44
Ross Keelingabe.collins@yahoo.comLake DixieboroughInactive$125.76
Preston Batz Sr.wendell.emard@hotmail.comNew DanikaActive$608.75
Alan Cormierroselyn37@hotmail.comBednarfortActive$563.44
Dr. Carl Thiellogan.christiansen84@gmail.comBridiecesterInactive$899.87
Eugene Medhurstdeonte_wisoky@hotmail.comNew AbdielInactive$238.82
Shelia Tillmanstone.hayes51@gmail.comEnterpriseInactive$865.32
Miss Olivia Faheykobe.huel@gmail.comEast JohathanboroInactive$233.92
Roberto Quigleyasa_johnson7@yahoo.comGrahammouthInactive$453.88
Lucille Hilllisac86@yahoo.comLake SelenabergInactive$1,078.88
Ms. Christy Framivernice.moen70@yahoo.comMaribelsideActive$1,165.20
Carol Leschwilton.berge@yahoo.comSan MarcosActive$35.26
Total$8,210.15

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.