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$835.47
INV002PaidCredit Card$443.90
INV003PendingPayPal$267.52
INV004PaidPayPal$739.38
INV005PendingCredit Card$975.24
INV006UnpaidPayPal$855.17
INV007UnpaidBank Transfer$681.44
Total$4,798.12

Simple

Users

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

NameTitleEmailRoleActions
Ali BartellChief Accounts Analystali_bartell@hotmail.comViewer
Reina HilllProduct Creative Officerreina_hilll32@yahoo.comViewer
Ashton BashirianChief Usability Specialistashton.bashirian43@gmail.comAdmin
Raphael LegrosProduct Metrics Facilitatorraphael.legros21@yahoo.comAdmin
Kellen BauchFuture Infrastructure Executivekellen_bauch@gmail.comViewer
Juanita DibbertChief Quality Architectjuanita_dibbert37@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Jannie Brekke

National Research Manager

jannie.brekke@gmail.com

Admin

Chance Corkery

Global Web Designer

chance.corkery@gmail.com

Admin

Retta Pfannerstill

Legacy Markets Supervisor

retta.pfannerstill22@hotmail.com

Viewer

Shanon Buckridge

Chief Identity Designer

shanon_buckridge@hotmail.com

Admin

Retta Keebler

Forward Mobility Liaison

retta.keebler@hotmail.com

Admin

Lew King

Legacy Accountability Analyst

lew_king82@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Althea Orn

National Applications Designer

althea_orn57@gmail.com

Member

Ara Gleason

District Division Engineer

ara.gleason@yahoo.com

Viewer

America Schultz

Legacy Configuration Representative

america.schultz@gmail.com

Admin

Sydney Bahringer

Principal Tactics Manager

sydney_bahringer86@gmail.com

Member

Van Wyman

Chief Infrastructure Agent

van_wyman@hotmail.com

Admin

Augustus Veum

Internal Paradigm Analyst

augustus_veum@yahoo.com

Viewer

Nicklaus Hackett

Investor Configuration Director

nicklaus_hackett@hotmail.com

Member

Hassie Nicolas

Future Tactics Director

hassie.nicolas@gmail.com

Admin

Marielle Cruickshank

Product Accounts Agent

marielle_cruickshank@hotmail.com

Member

Kellie Jacobs

Senior Markets Specialist

kellie_jacobs@hotmail.com

Admin

Torey Quitzon

Senior Group Designer

torey_quitzon28@gmail.com

Admin

Misael Runte

Legacy Metrics Associate

misael_runte66@hotmail.com

Admin

Thalia Olson

Direct Accounts Coordinator

thalia_olson@gmail.com

Admin

Henri Hilll

Customer Factors Architect

henri.hilll1@hotmail.com

Viewer

Dandre Welch

Lead Brand Executive

dandre.welch19@yahoo.com

Member

Karianne Effertz

District Paradigm Engineer

karianne_effertz@gmail.com

Member

Lincoln Torphy

District Usability Director

lincoln.torphy95@gmail.com

Member

Annabell Kirlin

Central Research Manager

annabell.kirlin@gmail.com

Member

Cristina Breitenberg

Chief Security Assistant

cristina_breitenberg65@yahoo.com

Admin

Lenna Sawayn

Lead Factors Architect

lenna_sawayn@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
Sarah Raynor DVMkellen.franey90@gmail.comEleanorafortActive$1,056.61
Marion Kreigerursula55@yahoo.comPalm Beach GardensInactive$757.48
Cecilia Denesikpolly62@yahoo.comDrakebergActive$828.01
Bill Sengercoy.carter@yahoo.comCasperburghInactive$951.03
Helen Feeneylionel60@gmail.comFort PascalelandInactive$75.43
Total$3,668.56

Basic table

Table with Images

NameEmailLocationStatusBalance
Cynthia Daniel
@berta87
tina_bruen69@hotmail.comLake KaceyActive$534.06
Leon Abbott
@jackeline63
agustina.mckenzie29@gmail.comSouth RyannstadInactive$1,100.48
Peggy Blick
@hannah47
mandy.windler-daniel43@hotmail.comCarmellafieldActive$955.44
Mrs. Carrie Zieme
@malvina_konopelski44
selina67@gmail.comBahringerburghInactive$74.03
Mr. Woodrow Von
@jakob29
miller11@gmail.comJaclynvilleActive$597.51

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Pamela Schinner Ilaverne_kihn55@gmail.comHarrisonburgActive$579.69
Jessica Wiegand Sr.ella.little@hotmail.comWest JaidenburghInactive$826.27
Marshall Framiellis_gleichner10@yahoo.comLake DorthafurtInactive$98.92
Shannon Pacochaalek86@yahoo.comDanniechesterActive$110.96
Sheri Aufderhar PhDleonard.armstrong@gmail.comSouth FrancesActive$1,022.77
Total$2,638.61

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alicia Corkerytorey.hintz-kuvalis@hotmail.comFort JamarcusActive$445.84
Elias Beahanjamal66@yahoo.comNovamouthActive$466.60
Nelson Kautzerwilfredo_mclaughlin62@gmail.comNorth BethesdaInactive$1,147.02
Adam Heathcote IIemiliano92@gmail.comHighlandActive$1,004.47
Dr. Clarence Metzangie_torphy80@gmail.comWest MyronInactive$882.18
Total$3,946.11

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Viola Gorczanyannetta27@yahoo.comWest NormaInactive$246.15
Elena Von Jr.nicole97@gmail.comDelray BeachActive$571.99
Terry Beerkristofer5@gmail.comRaynorworthInactive$371.53
Kelly Muellerobie_kautzer@yahoo.comFort NayelifieldInactive$1,104.07
Cary Joneshelena_auer@hotmail.comPort LydiavilleInactive$1,116.44
Total$3,410.18

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
Mr. Sylvester Wuckert-Littlealexane62@hotmail.comBeercesterInactive$1,102.11
Phil Nicolaszachariah75@hotmail.comEmersonchesterActive$348.95
Estelle Boscovito.batz9@yahoo.comConroyviewInactive$780.73
Ebony Boylehelena_hickle14@gmail.comSouth UrielportActive$449.77
Carlos Vandervort Sr.adolph_bins28@gmail.comLake CristalfieldInactive$1,132.72
Total$3,814.28

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sonya Hilllcarole33@gmail.comApopkaInactive$405.64
Dr. Muriel Hudsonsimone58@gmail.comWest AdrianvilleActive$1,172.62
Mr. Myron Connelly-Corwincarli.abernathy@gmail.comPhyllislandInactive$417.13
Courtney Hyattcullen55@hotmail.comNew JonInactive$874.34
Yvette Greenhilario_muller@hotmail.comSouth MckenzieburyInactive$240.57
Total$3,110.30

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
Bryant Gerlach IIhillard_pagac@yahoo.comBeattysteadInactive$723.86
Edna Braunbrock.funk30@yahoo.comNew ArchibaldInactive$58.99
Wanda Hirthe PhDsofia36@yahoo.comAimeeworthActive$689.19
Lorraine Larsonlily_leannon22@gmail.comNew JanickActive$487.52
Mr. Jerald Kemmerwatson.runte94@hotmail.comRowenasideInactive$760.13
Judith Bahringeradah8@hotmail.comNew LucindafieldActive$447.72
Rochelle Schultzlura66@hotmail.comKennewickInactive$1,082.45
Benjamin Olson-Lemkedessie44@yahoo.comPaucekboroActive$617.48
Keith Bogancielo.hermann35@yahoo.comLake JeanetteInactive$793.65
Marco Bartelldanny_von14@hotmail.comNorth ClaudefieldInactive$771.42
Jose McLaughlinkyra_west@hotmail.comSouth LudieActive$451.64
Hilda Beattyadolph39@yahoo.comFort TroyActive$435.35
Fannie Kautzerrex.bode@gmail.comCormiershireInactive$295.25
Glenn Durgansophia_runolfsson-marks70@yahoo.comGerdatownActive$509.37
Raquel O'Harafermin12@yahoo.comNew JakeburyInactive$715.18
Total$8,839.20

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.