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
INV001PendingPayPal$185.91
INV002PaidPayPal$834.53
INV003UnpaidCredit Card$406.41
INV004PaidPayPal$661.65
INV005PaidBank Transfer$699.48
INV006UnpaidCredit Card$313.23
INV007UnpaidBank Transfer$915.54
Total$4,016.75

Simple

Users

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

NameTitleEmailRoleActions
Stone KemmerInvestor Quality Specialiststone_kemmer72@hotmail.comMember
Antwon CorkeryCentral Research Orchestratorantwon.corkery@gmail.comMember
Tatyana Hessel-TrompChief Implementation Producertatyana.hessel-tromp59@yahoo.comMember
Jermaine PfefferRegional Mobility Executivejermaine_pfeffer@hotmail.comViewer
Alfredo RauDirect Directives Facilitatoralfredo_rau@hotmail.comAdmin
Alexander EmmerichPrincipal Communications Facilitatoralexander.emmerich7@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Elbert Herzog

Principal Implementation Architect

elbert_herzog@yahoo.com

Viewer

Dayana Kuhic

Dynamic Division Consultant

dayana_kuhic41@gmail.com

Admin

Sven Ondricka

Senior Data Manager

sven_ondricka36@hotmail.com

Viewer

Shawna Mueller

Direct Identity Technician

shawna_mueller41@gmail.com

Member

Anthony Ruecker

Internal Integration Producer

anthony.ruecker@gmail.com

Viewer

Lonie Okuneva

Regional Metrics Assistant

lonie.okuneva9@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Burnice Smitham

Forward Accounts Coordinator

burnice_smitham@yahoo.com

Admin

Piper Franey

Global Program Liaison

piper.franey@yahoo.com

Viewer

Modesta Kemmer

Chief Implementation Planner

modesta.kemmer42@hotmail.com

Viewer

Dedric O'Hara

National Interactions Planner

dedric_ohara10@hotmail.com

Admin

Brook Spencer

International Intranet Technician

brook.spencer51@yahoo.com

Admin

Ramona Dibbert

Dynamic Markets Producer

ramona.dibbert@gmail.com

Admin

Marielle Terry

International Functionality Representative

marielle_terry47@gmail.com

Admin

Yasmine Purdy

Product Marketing Agent

yasmine_purdy83@gmail.com

Member

Jayde Schinner

Central Implementation Coordinator

jayde.schinner@yahoo.com

Viewer

Rita Borer

Investor Factors Associate

rita_borer@yahoo.com

Viewer

Adrain Grimes

Dynamic Division Designer

adrain.grimes21@yahoo.com

Member

Jedediah Jerde

National Implementation Assistant

jedediah_jerde@hotmail.com

Admin

Edythe Parisian

Corporate Infrastructure Associate

edythe.parisian@yahoo.com

Admin

Margaret Cummings

Direct Identity Associate

margaret.cummings35@gmail.com

Viewer

Dangelo Berge

Lead Applications Architect

dangelo_berge72@gmail.com

Member

Zoila Pfannerstill

Forward Accountability Executive

zoila_pfannerstill65@hotmail.com

Viewer

Vince Pollich

Dynamic Markets Producer

vince_pollich@hotmail.com

Member

Dustin Paucek

Internal Usability Officer

dustin_paucek61@yahoo.com

Admin

Elza Kuphal

Investor Infrastructure Designer

elza_kuphal42@hotmail.com

Member

Madyson Nienow

Future Brand Representative

madyson.nienow@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
Guy Walshcassidy_stanton4@hotmail.comNew MekhiInactive$1,120.51
Roberta VonRuedenzachary.dickinson20@gmail.comFort EarnestineInactive$22.91
Clark Quitzonnoel52@yahoo.comEverettstadInactive$233.72
Israel Kuhnelizabeth_lowe98@gmail.comWest ElwinburghInactive$304.24
Wendy Gulgowskisibyl.gutmann@gmail.comFort AleneburghActive$232.63
Total$1,914.01

Basic table

Table with Images

NameEmailLocationStatusBalance
Ray Weimann
@shana_walker
delphine73@hotmail.comLake WinifredInactive$728.62
Saul Champlin
@sim_bartoletti36
abdullah.torp@yahoo.comDewittfieldInactive$797.91
Deborah Buckridge
@elta.spinka-muller
richard_mayer@yahoo.comPort ShanonmouthInactive$912.06
Colin Conroy II
@althea_corkery
micaela67@yahoo.comEast TheaboroughActive$1,051.73
Leticia Hilpert
@antoinette97
katrine_raynor@yahoo.comBartolettistadActive$256.68

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jennifer Hesselroger70@yahoo.comPort LowellActive$442.10
Willard Beerkristian.rice95@yahoo.comWest SarahstadInactive$413.13
Catherine Leschmarkus.gerlach81@gmail.comCassandravilleActive$1,053.97
Lowell Brekkegerard_price22@gmail.comBotsfordviewActive$331.85
Cory Mantetoby_treutel49@gmail.comJohnportActive$982.47
Total$3,223.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alma Rutherford IIIelijah_corwin54@gmail.comSouth NicolasInactive$370.77
Gene Dietrichkelton87@hotmail.comPine HillsInactive$35.20
Dr. Johnny Brekkekennedy.heaney@gmail.comGutmannlandInactive$337.62
Bryant Davisdarrell_okuneva@hotmail.comFort NathanielshireInactive$464.37
Nancy Davisfrederick28@hotmail.comAmelyboroActive$917.04
Total$2,125.00

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Walter Nitzschedanyka23@yahoo.comPalm DesertActive$451.25
Leticia Harrisemilia.donnelly23@yahoo.comNew BobbieportActive$773.52
Stuart Grahamadolf.wintheiser@hotmail.comWest JaysideActive$1,158.14
Miss Kristina Stoltenberg-Grahamlemuel.boehm15@hotmail.comFort CamrynInactive$309.31
Dianna Raurae31@hotmail.comJupiterInactive$617.15
Total$3,309.37

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
Bruce Kertzmanncharity_schumm@yahoo.comJoelleburyActive$249.84
Ms. Rita Harrisbrice_kautzer@gmail.comLake ElouiseInactive$207.52
Alejandro Halvorsonryleigh_vandervort@yahoo.comNew AlejandrinInactive$419.43
Lola Labadie PhDoctavia.bergnaum-okeefe@yahoo.comStrackeburyInactive$853.75
Samantha Wilkinsonantonietta72@yahoo.comLonzofieldInactive$421.79
Total$2,152.33

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Willis Skilesbrenna.legros95@yahoo.comPort BraedenchesterInactive$1,121.08
Randall Smithcaleb.kris@yahoo.comSouth BraxtonviewActive$230.07
Rosemarie Gislasonericka21@hotmail.comMarquardthavenActive$1,083.34
Leo Wiegandelinor.king@gmail.comLake JaylenshireInactive$923.08
Damon Mayerrosie_armstrong51@hotmail.comBloomingtonInactive$655.64
Total$4,013.21

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. Geoffrey Abshirejohan11@yahoo.comNew MuhammadActive$456.15
Mr. Brian Daughertybrando42@hotmail.comWauwatosaActive$1,199.15
Saul Bergemerle_kris13@gmail.comBryanActive$368.51
Amelia Muellermelody_wilkinson@hotmail.comPort WilfredtownActive$54.96
Madeline Goyettezack.lemke52@hotmail.comJarenburyInactive$1,179.56
Jon Nikolausila21@hotmail.comDewayneshireActive$666.63
Kelvin Stehrjevon80@gmail.comCincinnatiActive$1,012.03
Paulette Deckowchaim78@gmail.comPensacolaInactive$967.12
June Rogahn PhDbeau_watsica@gmail.comMillerhavenActive$1,193.63
Billy Cummingscathrine89@hotmail.comNew ChanelviewInactive$497.74
Greg Pagac DDSefrain17@hotmail.comVallejoInactive$557.51
Elsie Walshasha0@hotmail.comMandylandActive$252.01
Kim Jacobson Vryder_mosciski23@gmail.comNew DaynetownInactive$1,127.66
Monica Mitchellnasir.goldner-zemlak@gmail.comNorth LionelInactive$768.98
Reginald Langoshtwila_smitham@gmail.comBrandiboroughActive$228.68
Total$10,530.32

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.