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
INV001UnpaidCredit Card$198.66
INV002UnpaidPayPal$177.95
INV003PaidBank Transfer$985.71
INV004PendingPayPal$247.67
INV005PaidBank Transfer$411.92
INV006PaidPayPal$832.69
INV007PaidPayPal$668.93
Total$3,523.53

Simple

Users

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

NameTitleEmailRoleActions
Rene KeelingLegacy Functionality Executiverene.keeling79@hotmail.comAdmin
Renee FeilNational Mobility Consultantrenee.feil@hotmail.comAdmin
Marty BrekkeRegional Tactics Agentmarty_brekke14@hotmail.comMember
Eleazar FriesenFuture Branding Specialisteleazar.friesen66@gmail.comAdmin
Caroline BernhardDirect Tactics Liaisoncaroline_bernhard97@yahoo.comAdmin
Lydia HegmannRegional Division Administratorlydia.hegmann91@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Katarina Cremin

Senior Applications Representative

katarina.cremin@hotmail.com

Member

Hilda Heller

Central Brand Director

hilda.heller30@yahoo.com

Admin

Winona Ebert

Principal Security Director

winona_ebert0@yahoo.com

Viewer

Marilie Aufderhar

Regional Brand Officer

marilie.aufderhar@gmail.com

Member

Virgil Ziemann

Internal Solutions Executive

virgil.ziemann@yahoo.com

Member

Zula Bechtelar

Senior Metrics Consultant

zula.bechtelar@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Kenyatta Rogahn

Lead Solutions Facilitator

kenyatta_rogahn9@gmail.com

Member

Ona Zieme

Human Mobility Strategist

ona.zieme83@gmail.com

Admin

Nichole Dickens

Corporate Markets Specialist

nichole.dickens@hotmail.com

Viewer

Patrick Marvin

Regional Implementation Designer

patrick_marvin@yahoo.com

Admin

Coralie Hettinger

Corporate Identity Supervisor

coralie_hettinger67@gmail.com

Admin

Arlo Jenkins

Product Factors Consultant

arlo_jenkins42@gmail.com

Viewer

Alaina Runolfsson

Regional Operations Specialist

alaina_runolfsson@yahoo.com

Member

Catherine McDermott

Customer Division Designer

catherine_mcdermott@hotmail.com

Member

Jamison Lang

Internal Configuration Agent

jamison_lang@gmail.com

Viewer

Vinnie Reinger

Legacy Group Manager

vinnie.reinger43@hotmail.com

Admin

Edmund Quigley

Customer Implementation Director

edmund_quigley@yahoo.com

Member

Giuseppe Muller

Corporate Group Strategist

giuseppe.muller@gmail.com

Member

Garfield Dickinson

Future Markets Consultant

garfield_dickinson82@hotmail.com

Viewer

Elroy Dare

Corporate Communications Representative

elroy.dare38@gmail.com

Member

Travis Willms

Corporate Tactics Agent

travis_willms25@hotmail.com

Member

Pinkie Becker

District Brand Associate

pinkie.becker@gmail.com

Member

Jessyca Nolan

Corporate Accounts Architect

jessyca_nolan0@yahoo.com

Viewer

Johan Hodkiewicz

Global Interactions Analyst

johan_hodkiewicz35@gmail.com

Viewer

Else Shanahan

District Division Producer

else.shanahan80@gmail.com

Viewer

Douglas Nienow

Senior Implementation Specialist

douglas.nienow@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
Sylvester Langosheliane.bogisich@gmail.comKovaceklandInactive$1,062.14
Tiffany Bashirianalberta_kirlin@gmail.comLoweboroInactive$375.42
Dwight Effertzmarlee_crona6@gmail.comSouth AnnachesterInactive$317.07
Bill Blickderek.walter@yahoo.comPort DaphneyvilleInactive$689.93
Dr. Johnnie Schadenkatelin55@hotmail.comEast DominiqueInactive$120.60
Total$2,565.16

Basic table

Table with Images

NameEmailLocationStatusBalance
Abraham Pfannerstill
@monty_pfeffer
joanne_macgyver55@yahoo.comNew DamionsideInactive$913.23
Terrance Kertzmann
@kenny_kuhlman57
kailyn76@yahoo.comLynchburgActive$51.16
Jordan West DDS
@antonietta47
lempi.mcdermott77@hotmail.comCedar RapidsActive$278.31
Taylor Weber PhD
@amari.bahringer18
lavern1@yahoo.comLuishavenActive$362.27
Phyllis Adams
@vilma77
blake9@hotmail.comNew BrianviewActive$785.93

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Anna Lebsack IVcrawford.becker1@gmail.comLake IlianaActive$1,006.96
Tim Walkerannabelle54@yahoo.comNew LessieActive$1,050.22
Kristine Schowaltermable_hamill36@yahoo.comNew FreddieInactive$465.14
Miss Kristine Klockojustine.okon2@hotmail.comFort ArchbergActive$409.93
Phil Swiftevalyn43@yahoo.comStiedemannworthActive$452.68
Total$3,384.93

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Miss Jeanne Kuhnkirsten_wisozk13@hotmail.comWymanburghActive$639.31
Mario Cristmohammed59@yahoo.comWiegandburghActive$870.76
Rosie Wisokysamson_schmeler@hotmail.comHegmannboroughInactive$836.24
Donnie Langjermaine13@hotmail.comEast MaybellInactive$1,147.20
Tim Stoltenbergnolan33@gmail.comWest AldachesterActive$983.22
Total$4,476.73

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Oscar Toylenora86@yahoo.comSouth JohnathanboroActive$31.99
Jessie Wittingdemetrius80@yahoo.comDanburyInactive$1,135.44
Sheryl Yundtmichael_christiansen@gmail.comPort EdythestadInactive$345.84
Alfonso Wittingjace_bogan@yahoo.comEmilesideActive$60.11
Tamara Lakinzelma24@gmail.comMartinavilleInactive$233.41
Total$1,806.79

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
Stephen Spencer Sr.herminio72@yahoo.comCouncil BluffsActive$350.64
Ginger Abshireicie_bahringer71@gmail.comMuraziksteadInactive$915.50
Esther Kshlerinmallie56@yahoo.comLake AnitalandInactive$1,183.58
Chris Koelpinelvera_borer@yahoo.comWhite PlainsInactive$111.88
Judith Sawayn-Wiegandmack_hettinger13@gmail.comSmyrnaInactive$1,087.37
Total$3,648.97

Table with row selection

Card Table

NameEmailLocationStatusBalance
Malcolm Beierclaude89@yahoo.comNampaActive$1,109.19
Wesley Rodriguezjess.langosh@gmail.comHayessideInactive$750.37
Dr. Willard Effertzkeenan_hoppe70@yahoo.comLovelandActive$307.90
Brett Christiansentimothy8@gmail.comNew DayneInactive$799.65
Kristen Ondrickarobin28@gmail.comNew LoyboroughActive$107.48
Total$3,074.59

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
Dr. Rickey Homenickeda62@yahoo.comWest KianaInactive$980.65
Casey Padbergmax.block@yahoo.comFort ChristinelandActive$579.03
Loretta VonRuedenfiliberto.bayer@hotmail.comLouisville/Jefferson CountyInactive$919.73
Ruben Beattyannabelle95@gmail.comDeltonaInactive$905.06
Allen Rempelcarleton_cartwright55@gmail.comSt. Louis ParkInactive$359.40
Florence McDermottlonie.sawayn@yahoo.comEusebioboroughActive$433.06
Mr. Fred Dickielda.walsh52@hotmail.comEast LinneavilleInactive$528.23
Lloyd Johnstonemmalee_leannon12@gmail.comSchusterburghActive$316.71
Miss Ebony Doylelitzy88@hotmail.comHeidichesterInactive$158.44
Leigh Douglaslinda.krajcik70@yahoo.comGulfportActive$395.15
Morris Stammadolf17@hotmail.comBransonsteadActive$235.89
Lorena Leuschkelon.oberbrunner82@yahoo.comEast DarwinActive$540.51
Randal Swiftaiyana10@yahoo.comLittleboroughActive$607.77
Santiago Nicolasclay55@hotmail.comThorntonInactive$344.57
Rodney Beierdayton_oreilly29@hotmail.comTristianfurtInactive$1,014.04
Total$8,318.24

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.