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
INV001PaidBank Transfer$546.74
INV002UnpaidCredit Card$250.78
INV003PendingPayPal$273.75
INV004PendingCredit Card$268.51
INV005UnpaidCredit Card$447.52
INV006PendingCredit Card$661.35
INV007UnpaidCredit Card$835.61
Total$3,284.26

Simple

Users

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

NameTitleEmailRoleActions
Gabriel VolkmanDirect Identity Plannergabriel_volkman@hotmail.comMember
Vicki HarberHuman Markets Architectvicki.harber@gmail.comMember
Jody DeckowDistrict Solutions Consultantjody.deckow@hotmail.comAdmin
Finn WildermanDirect Usability Strategistfinn_wilderman0@hotmail.comViewer
Garry LefflerChief Branding Executivegarry.leffler40@yahoo.comMember
Ron HellerFuture Brand Consultantron.heller7@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Marcella Feest-Lesch

Regional Integration Officer

marcella_feest-lesch@hotmail.com

Member

Brennon Littel

Central Markets Producer

brennon_littel@hotmail.com

Member

Josh Larkin

Principal Accounts Officer

josh_larkin90@gmail.com

Viewer

Joaquin Quigley

Senior Intranet Technician

joaquin_quigley82@yahoo.com

Viewer

Gertrude Goodwin

Legacy Branding Engineer

gertrude_goodwin@hotmail.com

Admin

Jesus Koch

Principal Marketing Executive

jesus_koch@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Bryana Murray

Chief Division Consultant

bryana_murray27@hotmail.com

Admin

Chelsea Glover

Forward Research Liaison

chelsea_glover@gmail.com

Viewer

Fabiola Ullrich-Cummings

Dynamic Security Facilitator

fabiola_ullrich-cummings87@hotmail.com

Admin

Rolando Quitzon

Central Optimization Executive

rolando_quitzon@hotmail.com

Viewer

Melody Kemmer

Product Marketing Engineer

melody_kemmer8@yahoo.com

Member

Ralph Zemlak

Corporate Markets Executive

ralph.zemlak10@yahoo.com

Admin

Brady Kunde

District Interactions Representative

brady_kunde@yahoo.com

Member

Marcellus Kuhic

Legacy Brand Producer

marcellus_kuhic@yahoo.com

Admin

Cheyenne Harvey

Product Operations Executive

cheyenne.harvey@hotmail.com

Admin

Terry Kuphal

Direct Tactics Executive

terry_kuphal35@gmail.com

Member

Francisca Jacobi

Chief Configuration Executive

francisca.jacobi11@hotmail.com

Viewer

Larry Kihn

Investor Infrastructure Producer

larry_kihn97@gmail.com

Member

Lue Moore

Chief Group Consultant

lue.moore@gmail.com

Viewer

Trevion McKenzie

Future Security Agent

trevion.mckenzie@gmail.com

Admin

Doyle Stroman

Regional Infrastructure Assistant

doyle.stroman75@hotmail.com

Member

Sheryl Russel

Product Tactics Director

sheryl.russel@yahoo.com

Member

Garry Funk

Customer Response Assistant

garry.funk22@hotmail.com

Member

Owen Murazik

Future Directives Manager

owen_murazik@hotmail.com

Member

Ernestine Gusikowski

International Markets Producer

ernestine.gusikowski10@gmail.com

Member

Charles Kling

Dynamic Implementation Architect

charles.kling@yahoo.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
Mr. Abdullah Deckowmozell.cassin@gmail.comSouth ConnorInactive$326.03
Mr. Ernesto MacGyverbernice8@hotmail.comStefaniesideInactive$622.17
Jacqueline Townericky.kub@hotmail.comSouth MerlworthActive$226.28
Margie Wymanjeremy.okon85@gmail.comWest AugustaActive$1,042.94
Tara Lehnerdemond_pouros81@yahoo.comPurdytonInactive$300.73
Total$2,518.15

Basic table

Table with Images

NameEmailLocationStatusBalance
Tristin Skiles
@destiney.frami
deshaun.rogahn22@gmail.comAbbysteadActive$695.47
Karolann Luettgen
@allison78
ed11@hotmail.comFort WinstonboroActive$282.51
Destiny Bayer
@randy70
claude38@gmail.comWebercesterInactive$605.28
Tami Leuschke-Flatley
@miranda5
maiya_altenwerth-treutel62@gmail.comBlickportActive$675.23
Nick Bergstrom
@gwen_rolfson
viviane_considine78@gmail.comEast MaxfieldActive$295.03

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Nicolette Hahnbradford_nolan@gmail.comSouth WilburnInactive$985.78
Ms. Garland Brakusluisa24@yahoo.comSouth CarolineInactive$995.34
Shawna Hyattdale17@hotmail.comMilfordInactive$979.47
Miss Guillermo Kingpedro_hilpert16@yahoo.comReecebergInactive$726.89
Kara Bartonflavio12@yahoo.comRempelfortInactive$27.75
Total$3,715.23

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jennie Oberbrunnerdemetrius.cartwright@gmail.comTreyboroActive$1,165.42
Nyasia Leuschke IIIberta.sporer80@yahoo.comFeeneysideInactive$145.37
Danny Murazikhouston_stracke@yahoo.comEast GreggstadActive$253.29
Nelson Larkinebony.jacobson@yahoo.comConsidinevilleActive$619.50
Maryann Hilpert Sr.julius43@yahoo.comMilanmouthInactive$354.61
Total$2,538.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ivan Emmerichedward_huels@gmail.comWatsicashireActive$937.00
Jeff Roobwanda.collins27@yahoo.comSouth HeatherviewActive$234.59
Julia McClurearturo.osinski23@gmail.comEast CarmineInactive$612.29
Terrence Vonlowell_reilly@yahoo.comNorth KavonlandInactive$748.40
Maggie Emmerichdasia40@yahoo.comNew JillianInactive$896.07
Total$3,428.35

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
Margie Andersonroxanne.abernathy86@hotmail.comLorenbergInactive$473.69
Claudia Wolff Sr.danny_kuhlman67@hotmail.comSanta RosaInactive$404.92
Nina Beahanjosh.champlin52@yahoo.comRocky MountActive$917.16
Wm Ruecker PhDwillis_blick@yahoo.comHallieburyInactive$149.89
Casimir McKenziemaureen_vonrueden@yahoo.comDeckowcesterActive$350.90
Total$2,296.56

Table with row selection

Card Table

NameEmailLocationStatusBalance
Alessandra Walterbernie6@yahoo.comPort EulaInactive$899.11
Rachelle Vandervortleann_ruecker@yahoo.comAngelburghActive$1,028.73
Franklin Cruickshank-Schinner MDnestor_prohaska13@gmail.comDelphinecesterActive$797.04
Jeff Jacobsongeoffrey19@hotmail.comNorth ChelseytonActive$793.05
Wade Barrowsjohnnie57@gmail.comFriesenhavenActive$553.72
Total$4,071.65

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
Janice Ullrichcarole.legros@hotmail.comSilasvilleActive$411.64
Zena Ankunding Vzoie_okeefe61@yahoo.comLake WilmaInactive$580.83
Mabel Cartwrightdeborah.hintz90@yahoo.comPeabodyActive$1,122.38
Alta Murphyryan.spencer@gmail.comMrazworthActive$594.24
Jimmie Farrell MDmaurice.veum@yahoo.comJohns CreekInactive$692.54
Eulah Mueller-Gulgowskiannabell_bradtke59@hotmail.comRydervilleActive$129.99
Dr. Ed Goodwinraymond47@gmail.comWalkerbergActive$703.23
Arnold Krajcikleigh.considine@gmail.comMemphisActive$1,083.65
Pearl Johnsonestelle45@yahoo.comKirlinburghActive$84.17
Odie Faylavonne8@hotmail.comNorth ErinvilleActive$946.58
Dolores Schinnershelia.welch@gmail.comTemeculaActive$176.65
Brenda Pollichlatoya92@yahoo.comEast ElmerActive$1,107.82
Marshall Carrollowen_brekke-okeefe42@gmail.comHermantonActive$616.94
Webster Schummlori23@hotmail.comShawnafurtActive$687.56
Vicenta Olsonmaxime.dibbert@gmail.comGrand ForksActive$11.10
Total$8,949.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.