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
INV001PendingCredit Card$927.53
INV002PaidBank Transfer$856.65
INV003PaidPayPal$860.81
INV004PendingPayPal$234.27
INV005UnpaidBank Transfer$816.97
INV006UnpaidBank Transfer$168.30
INV007PendingCredit Card$362.85
Total$4,227.38

Simple

Users

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

NameTitleEmailRoleActions
Otis SchulistCustomer Paradigm Architectotis_schulist42@yahoo.comMember
Robert CormierDirect Quality Administratorrobert.cormier@gmail.comMember
Marge WisozkCentral Research Specialistmarge_wisozk12@yahoo.comMember
Heather BechtelarProduct Directives Analystheather.bechtelar@gmail.comAdmin
Kristoffer ColePrincipal Assurance Directorkristoffer.cole@hotmail.comViewer
Ashley FaheyCentral Tactics Technicianashley_fahey@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Velma Jacobi

Lead Response Administrator

velma_jacobi@gmail.com

Member

Elaine Crooks

Future Markets Producer

elaine.crooks@hotmail.com

Member

Brennan Boehm

Regional Accounts Orchestrator

brennan.boehm@yahoo.com

Admin

Lucio Spinka

Future Accountability Representative

lucio.spinka@gmail.com

Viewer

Jane Ferry

Future Communications Engineer

jane.ferry26@yahoo.com

Admin

Cornell Kihn

International Program Producer

cornell.kihn@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Kaya Balistreri-Walsh

Human Interactions Analyst

kaya.balistreri-walsh19@yahoo.com

Admin

Mohammad Smitham

Principal Directives Architect

mohammad.smitham@hotmail.com

Member

Shaun Hodkiewicz

Global Accountability Officer

shaun_hodkiewicz70@gmail.com

Member

Shaun Bernhard

Investor Assurance Planner

shaun_bernhard41@hotmail.com

Admin

Niko Donnelly

Global Functionality Liaison

niko_donnelly62@hotmail.com

Member

Warren Murray

Internal Solutions Consultant

warren_murray@gmail.com

Member

Sim Olson

Forward Brand Representative

sim.olson22@hotmail.com

Member

Albert Bruen

Future Intranet Analyst

albert_bruen2@hotmail.com

Admin

Alva Feeney

Customer Research Producer

alva_feeney41@gmail.com

Viewer

Wilbert Nienow

Senior Identity Officer

wilbert_nienow@yahoo.com

Admin

Austin Kiehn

Senior Intranet Manager

austin_kiehn@gmail.com

Admin

Lou Brakus

Chief Branding Manager

lou_brakus@hotmail.com

Admin

Peter Franecki

District Assurance Liaison

peter.franecki@gmail.com

Viewer

Lillie Rosenbaum

Senior Identity Strategist

lillie.rosenbaum99@yahoo.com

Member

Kerry Wolff

International Accountability Planner

kerry.wolff@gmail.com

Admin

Joel Pacocha

International Infrastructure Planner

joel_pacocha89@hotmail.com

Member

Roman Koss

Lead Assurance Producer

roman_koss84@gmail.com

Viewer

Jeffrey Reichel

Regional Intranet Orchestrator

jeffrey_reichel@hotmail.com

Admin

Jettie Rutherford

Global Division Manager

jettie.rutherford84@gmail.com

Admin

Dameon Deckow

Forward Response Designer

dameon_deckow57@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
Pam Strosinceline88@yahoo.comLednerportInactive$1,122.52
Newton Russelgrant99@gmail.comWehnerlandActive$1,155.17
Angelo Moenstewart_homenick40@hotmail.comChattanoogaInactive$452.07
Dock Turnercarla_bruen@hotmail.comHahn-CassinworthInactive$881.12
Jimmy Kreigerdaphney14@hotmail.comFort NatashavilleInactive$730.80
Total$4,341.68

Basic table

Table with Images

NameEmailLocationStatusBalance
Isabella Turner
@cecile22
dorris_metz30@gmail.comJordaneportActive$1,195.46
Drew VonRueden
@nadine36
billie.yost@gmail.comWest LillianfortActive$202.58
Meredith Howell
@dolly60
hugo9@yahoo.comAbbottburghInactive$1,064.91
Lenny Mraz
@brenda64
leo97@hotmail.comSmithtonInactive$1,040.01
Polly Breitenberg
@chanel_lemke
herta_terry23@gmail.comPort DeniseActive$43.24

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Maxine Prosaccoaron_prosacco@gmail.comEast MadalyncesterInactive$438.95
Dianna Blickjarred_crist-gutkowski@yahoo.comMantecaActive$467.55
Javonte Stammmoses_quigley@gmail.comRempelchesterInactive$511.07
Nona Rempelmattie_price83@yahoo.comNew BritainActive$624.57
Randy Stantonjulius96@hotmail.comNorth MaureenworthInactive$942.49
Total$2,984.63

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Fiona Wilkinsongerald.stehr60@hotmail.comPort MargebergActive$573.75
Nicole Simonis-Pfeffer Vanne_hackett30@gmail.comFlorinActive$677.04
Blair Feestterri86@yahoo.comLake WinifredworthActive$825.27
Irving Flatleyharriet.gerhold@yahoo.comKentActive$412.45
Scott Mertzchance_adams3@gmail.comMiamiActive$689.45
Total$3,177.96

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brock Schmittdavid70@gmail.comBroken ArrowActive$277.84
Sammy DuBuquesalvatore_sporer@hotmail.comNew TristonInactive$637.91
Neva Schultzdarrell.klein82@yahoo.comClarenceboroInactive$341.40
Joel Ziemannlenora.torp54@gmail.comSouth SherwoodActive$362.70
Estrella Doyledavid_sanford85@yahoo.comManleytonInactive$326.33
Total$1,946.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
Karson Rathvincent.hilpert5@yahoo.comNew TimboroughInactive$204.45
Jesse Hilllkris.kertzmann21@hotmail.comJaneportActive$197.10
Keith Framielizabeth.reichert@yahoo.comLake OrvilletownActive$504.42
Conrad Williamson PhDmyrtis94@hotmail.comSouth NicholeActive$1,098.33
Samuel Hoppevincent_greenholt@yahoo.comJakubowski-JaskolskicesterActive$324.43
Total$2,328.73

Table with row selection

Card Table

NameEmailLocationStatusBalance
Miss Wanda Herzoglela.walker31@hotmail.comFeilchesterActive$1,170.15
Mrs. Brycen Robeljaylon_renner6@hotmail.comNew BuddyActive$696.03
Melanie Streichrodney.beatty@hotmail.comPort LaverneActive$848.21
Ernesto Hoegercassandre88@hotmail.comThompsonfortActive$248.31
Abagail Batzalden.streich@hotmail.comDaijacesterActive$864.35
Total$3,827.05

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
Ms. Helen Cummingsrossie45@yahoo.comBoise CityInactive$1,119.71
Charlie Erdmanlacey60@gmail.comJamarboroInactive$700.43
Audie Mueller IVjamir_wolf20@hotmail.comJohnsideInactive$237.13
Germaine Champlincelia89@gmail.comNataliabergActive$1,192.89
Simon Predovic PhDmelvina16@hotmail.comEast ErnestmouthActive$714.70
Joy Colliernoelia37@hotmail.comSouth StewartfurtInactive$1,066.01
Joshua Reichel-Reichelcolleen.ziemann@hotmail.comJeffersonvilleInactive$1,048.53
Joannie Stammjenny.hayes71@yahoo.comPort MireillefieldInactive$254.62
Eugene Koelpinestelle.flatley1@yahoo.comMarksfurtInactive$556.30
Lyric Kingcelestine_becker85@gmail.comBessiemouthActive$321.61
Ms. Krista Hettingerellis_schinner@hotmail.comPort SamuelActive$775.75
Ilene Fahey-Padbergdesiree35@hotmail.comLarkinburghInactive$916.93
Kasey Sawaynjulian27@gmail.comEast TiffanyburyActive$414.35
Cristina Stantonclyde.mckenzie16@hotmail.comKassulkeviewActive$361.06
Mr. Wilfredo Abshirevincent_emard3@gmail.comTexas CityActive$71.55
Total$9,751.57

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.