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
INV001PendingBank Transfer$143.20
INV002UnpaidCredit Card$512.10
INV003PendingPayPal$171.05
INV004PendingBank Transfer$237.48
INV005UnpaidPayPal$600.21
INV006UnpaidBank Transfer$845.97
INV007UnpaidPayPal$180.25
Total$2,690.26

Simple

Users

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

NameTitleEmailRoleActions
Frances ZemlakProduct Interactions Plannerfrances.zemlak91@gmail.comAdmin
Dave KochDistrict Implementation Producerdave_koch@yahoo.comAdmin
Salvador LeuschkeNational Implementation Architectsalvador_leuschke@hotmail.comMember
Kiana BoehmRegional Paradigm Designerkiana_boehm73@hotmail.comMember
Esther HoegerNational Configuration Associateesther.hoeger65@yahoo.comMember
Gunner MarksFuture Marketing Plannergunner_marks@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Brigitte Weissnat

Central Integration Strategist

brigitte_weissnat@hotmail.com

Admin

Oda Hegmann

International Group Administrator

oda.hegmann64@gmail.com

Member

Kathleen Deckow

Forward Identity Planner

kathleen_deckow49@gmail.com

Admin

Adam Nienow

Lead Factors Representative

adam.nienow11@yahoo.com

Member

Unique Ankunding

Chief Program Representative

unique_ankunding@yahoo.com

Viewer

Abigayle Ledner

Global Security Strategist

abigayle_ledner18@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Colten Waelchi

Product Directives Coordinator

colten_waelchi@gmail.com

Viewer

Dorris Waters

Dynamic Mobility Liaison

dorris_waters@hotmail.com

Viewer

Robyn Schumm

Principal Identity Developer

robyn.schumm98@yahoo.com

Viewer

Sharon Quigley

Legacy Paradigm Representative

sharon.quigley@yahoo.com

Viewer

Elmira Stoltenberg

International Factors Officer

elmira.stoltenberg30@hotmail.com

Member

Noemi Wiegand

Regional Program Strategist

noemi_wiegand74@yahoo.com

Viewer

Pete Lockman

Lead Tactics Assistant

pete_lockman@hotmail.com

Member

Rae Hahn

Lead Accountability Agent

rae_hahn@yahoo.com

Member

Mitchel Schuppe

Chief Intranet Orchestrator

mitchel.schuppe20@yahoo.com

Admin

Kaley Larson

Human Security Consultant

kaley.larson@gmail.com

Viewer

Herbert Cremin

International Applications Analyst

herbert_cremin77@gmail.com

Member

Jadon Terry

Product Intranet Associate

jadon.terry26@yahoo.com

Admin

Foster Robel

Future Marketing Assistant

foster.robel@gmail.com

Viewer

Abner Rolfson

Global Quality Manager

abner.rolfson66@hotmail.com

Admin

Randal Heathcote

Global Solutions Strategist

randal.heathcote93@gmail.com

Viewer

Kelly Nienow

Global Brand Engineer

kelly_nienow@gmail.com

Viewer

Christy Witting

Legacy Mobility Planner

christy.witting79@yahoo.com

Viewer

Gideon Wisoky

Investor Research Director

gideon.wisoky68@gmail.com

Admin

Jennie Ryan

Principal Functionality Facilitator

jennie.ryan90@gmail.com

Viewer

Delfina Harber-Grant

Direct Operations Manager

delfina.harber-grant@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
Kristine Daughertyward.brakus4@yahoo.comNorth KarolanncesterActive$371.52
Gwendolyn Boehm-Gradybrenna8@hotmail.comLake KennithmouthInactive$446.24
Dr. Perry Hettingerkasandra73@hotmail.comWalkerburyActive$1,141.55
Ana Westandy40@hotmail.comMiramarInactive$939.30
Patsy Millerjovani_luettgen@yahoo.comKuhnboroughInactive$1,030.71
Total$3,929.32

Basic table

Table with Images

NameEmailLocationStatusBalance
Lee Towne
@darion_ortiz
ana23@gmail.comWichita FallsInactive$713.87
Malcolm Morar
@carolanne_altenwerth83
arch89@yahoo.comNew BustersideInactive$1,038.33
Jaime Wolf
@rachael97
arne.gibson68@gmail.comBrannoncesterActive$302.87
Priscilla Bednar
@billy_mcglynn
raina82@gmail.comBalistrerichesterInactive$718.65
Otis Willms
@jerald83
brionna63@gmail.comNew BettieActive$765.02

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Anita Quitzonalexane_roob92@gmail.comNorth MiamiInactive$314.98
Sonia Brekkeclaudie.jerde-cormier@hotmail.comPurdyfortInactive$599.58
Wendy Mitchelllilly.walter79@yahoo.comWatsicamouthInactive$843.36
Lorraine Hartmannjennyfer72@yahoo.comDentonActive$920.82
Gail Feeneyjessy.dubuque29@gmail.comOrtizportActive$1,142.09
Total$3,820.83

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Toni Reichertloma_farrell30@yahoo.comEast JohnnyfortInactive$623.09
Rebecca Greenfelderjoanie78@yahoo.comHermantonInactive$126.08
Molly Watsica PhDryder19@yahoo.comLulachesterInactive$1,127.73
Mrs. Velma Doyleabel.robel23@gmail.comSpring ValleyInactive$829.08
Deanna Auer-Moengideon_bernhard@hotmail.comNorth JaylinInactive$790.69
Total$3,496.67

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Terrance Stehr DDSjudd_hermann@yahoo.comPort JaylonActive$42.88
Belinda Gusikowskierika_doyle@gmail.comLake JordicesterInactive$503.97
Ronald Schmittjoelle55@gmail.comCeresInactive$1,008.97
Beulah Padbergdulce_frami@yahoo.comRochesterActive$661.42
Ellen Rennerwilla_cummerata@hotmail.comKansas CityActive$231.45
Total$2,448.69

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
Patrick Jacobscristian13@hotmail.comEmmerichportInactive$981.79
Ervin Hoegeragustin.dickens@yahoo.comNew JaidaworthActive$1,169.67
Jackie Lynchbrendan_stroman22@hotmail.comEast SibylvilleInactive$139.35
Elena Kiehnbruce43@yahoo.comLake ArtInactive$136.10
Emilio Barrowsalize.schroeder72@hotmail.comArlington HeightsInactive$938.32
Total$3,365.23

Table with row selection

Card Table

NameEmailLocationStatusBalance
Eva Schaefer-Swiftjude_parisian84@hotmail.comThompsonburyInactive$114.17
Nancy Ratkevalentin8@yahoo.comCormierworthActive$778.33
Brendan Spinkageovanni_bode20@gmail.comMayertfurtInactive$846.02
Charlotte Monahanmartine12@yahoo.comNorth BernieceActive$360.64
Darrin Greenfelderjamaal.schneider@hotmail.comMorissetteviewActive$814.09
Total$2,913.25

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
Darrell Friesenkareem72@yahoo.comFort BeauActive$1,018.96
Jasmine Hahnroger87@gmail.comWest AlainalandActive$443.88
Terrence Monahantobin_krajcik-kassulke@gmail.comQuincyworthInactive$1,063.98
Megan Hodkiewicztoni0@hotmail.comWandafurtInactive$1,040.25
Bobby Okunevalaila_roob@yahoo.comOrtizhavenActive$397.36
Sherman Bashirianwinston_toy21@hotmail.comPort JaydonActive$995.44
Anthony Gutkowskizella_mueller-runolfsdottir@gmail.comFort HenrystadActive$856.00
Sally McCullough Iralph.leuschke@yahoo.comNorth KyleActive$325.81
Mrs. Kayla Lebsackfernando.bergnaum46@gmail.comCruickshankstadInactive$546.85
Henry Sanfordtimmy82@yahoo.comBristolActive$275.53
Nick Rice-Ratheleazar41@hotmail.comMollyburghActive$147.71
Colin Weissnatelwin.becker@hotmail.comSchroedertonInactive$939.27
Ms. Sherry Hyattesmeralda72@hotmail.comFountainebleauActive$930.15
Harold Weissnatlou.hahn@hotmail.comPort JedworthInactive$662.70
Cheryl Lindearl.kemmer94@gmail.comJodystadActive$93.88
Total$9,737.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.