Table

A responsive table component.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add table

Usage

Basic example

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PendingBank Transfer$544.25
INV002PaidPayPal$311.65
INV003PaidBank Transfer$682.45
INV004PaidPayPal$508.84
INV005PaidPayPal$843.95
INV006PaidCredit Card$863.45
INV007PaidBank Transfer$619.33
Total$4,373.92

Simple

Users

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

NameTitleEmailRoleActions
Lavina ManteForward Identity Executivelavina.mante@gmail.comMember
Diego RobelForward Markets Assistantdiego.robel@hotmail.comAdmin
Kyle KuphalCorporate Optimization Consultantkyle_kuphal@hotmail.comAdmin
Alisha MayerLegacy Optimization Designeralisha.mayer@yahoo.comAdmin
Collin PadbergForward Solutions Engineercollin_padberg85@gmail.comAdmin
Eddie CreminDirect Branding Agenteddie.cremin@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Doug Hane

Senior Response Engineer

doug.hane49@hotmail.com

Viewer

Luisa Walsh

Investor Brand Coordinator

luisa.walsh12@yahoo.com

Viewer

Cloyd Boyer

Investor Functionality Architect

cloyd_boyer80@gmail.com

Member

Susanna Stark

Corporate Operations Officer

susanna.stark@hotmail.com

Member

Grace Mertz

District Response Consultant

grace_mertz@yahoo.com

Admin

Destany Stanton

Senior Infrastructure Executive

destany.stanton@hotmail.com

Admin

Users

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

NameRoleActions

Etha Parker-Trantow

Human Tactics Coordinator

etha_parker-trantow85@gmail.com

Viewer

Lenora Cartwright

Dynamic Integration Administrator

lenora.cartwright@yahoo.com

Member

Cory Cummings

Human Markets Facilitator

cory_cummings49@yahoo.com

Admin

Darion Hammes

International Response Director

darion.hammes74@gmail.com

Member

Linwood Pollich

Principal Interactions Analyst

linwood.pollich@gmail.com

Member

Jess Terry

Investor Factors Liaison

jess_terry60@yahoo.com

Viewer

Rosella Pollich

Central Mobility Specialist

rosella.pollich98@yahoo.com

Admin

Deshaun Roob

Customer Infrastructure Manager

deshaun_roob@hotmail.com

Viewer

Santa Kutch

Internal Quality Administrator

santa_kutch@gmail.com

Viewer

Monroe Lesch

Investor Division Orchestrator

monroe.lesch@hotmail.com

Admin

Emmalee McGlynn

Product Mobility Specialist

emmalee_mcglynn@hotmail.com

Viewer

Scot Crona

Product Data Designer

scot_crona39@yahoo.com

Admin

Curt Bernier

Investor Mobility Agent

curt.bernier74@yahoo.com

Member

Herman Morissette

Senior Division Developer

herman_morissette29@gmail.com

Admin

Zoila Kutch

Principal Division Supervisor

zoila.kutch2@gmail.com

Viewer

Joyce Gleason

Internal Program Executive

joyce.gleason@gmail.com

Admin

Art Waters

Central Marketing Facilitator

art.waters@yahoo.com

Admin

Carrie Kshlerin-Harber

Internal Factors Manager

carrie.kshlerin-harber3@gmail.com

Viewer

Hilbert Turcotte

Forward Optimization Agent

hilbert_turcotte@yahoo.com

Admin

Carey Ward

Future Creative Facilitator

carey.ward@yahoo.com

Admin

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
Wendell Padbergnicole.rolfson55@gmail.comPamelamouthInactive$529.06
Camille Reichelsidney.buckridge27@yahoo.comMichelleportActive$24.17
Crystal Breitenbergmortimer.skiles@yahoo.comEast AndreanneInactive$461.14
Marcus Walshzetta98@hotmail.comJeremyshireInactive$731.51
Dr. Orville Wiegand DVMross_quigley49@gmail.comRayhavenActive$312.97
Total$2,058.85

Basic table

Table with Images

NameEmailLocationStatusBalance
Tiffany Feil V
@johathan88
brionna.jerde@yahoo.comNew CandidoActive$62.33
Delia Braun
@johnny59
jillian4@yahoo.comRueckerburghInactive$701.19
Erica Funk
@kory.abernathy
kennedy_haley44@yahoo.comGoodyearInactive$1,149.57
Alejandro Romaguera
@graciela_lynch
cleve_herzog@gmail.comCentennialActive$661.47
Dr. Alfredo Considine-Kris
@athena_metz44
dolly_shanahan@yahoo.comQuintenhavenActive$1,000.19

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Omar Kreigerwava_romaguera0@hotmail.comSchillersideInactive$203.17
Silvia Hodkiewiczalda_oconner@gmail.comWardtownInactive$1,027.61
Jerry Raynorholly_lubowitz@yahoo.comEwellburyInactive$576.50
Felix Turcottetatyana83@gmail.comEast HiramActive$631.60
Robyn Ratheverett.upton3@gmail.comLake MaritzafurtActive$145.72
Total$2,584.60

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Yvonne Sawayn PhDbreana_nader26@hotmail.comAnissashireInactive$211.79
Andres Grahamlillie.lakin8@yahoo.comBoulderActive$449.25
Sarah Toycamylle_beahan-strosin@hotmail.comEast TerryInactive$802.82
Thomas Sawaynhillary.lynch3@yahoo.comPort DeemouthInactive$1,194.91
Glenn Buckridge DDSdangelo.dubuque81@hotmail.comFort AldenActive$757.65
Total$3,416.42

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ryan Smithardith60@yahoo.comJeanetteviewActive$441.41
Kara McDermott-McClureautumn.nolan7@gmail.comPort MyraInactive$112.96
Mr. Irving Tremblayhardy_rath@hotmail.comKristophershireInactive$746.64
Caroline Spencerlera.roob52@hotmail.comModestoActive$670.26
Mrs. Carla Wuckertjevon_mills@yahoo.comSouth BrooklynmouthInactive$146.41
Total$2,117.68

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
Patsy Greenholtpercy91@gmail.comVictorcesterActive$1,036.07
Bobbie Parisianaddie58@yahoo.comAnkenyInactive$791.57
Francis Bergehumberto77@yahoo.comRempelhavenActive$140.86
Brian Leuschkesheridan.mayer25@yahoo.comHermistonboroughInactive$530.93
Leticia Gerlachlouvenia_boyer50@yahoo.comLoweshireInactive$371.79
Total$2,871.22

Table with row selection

Card Table

NameEmailLocationStatusBalance
Gregory Sipeseuna.greenholt@gmail.comJordanbergInactive$754.24
Donald Pourosena_spinka-reichert@yahoo.comGeovannichesterActive$1,169.84
Sean Spinkaclyde.langosh48@hotmail.comPort AniyaActive$1,041.28
Josephine Boscostone97@yahoo.comSalemInactive$1,047.22
Sandy Armstrong-Greenlavern.wehner25@hotmail.comCollege StationActive$628.09
Total$4,640.67

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
Kerry Murphyclara62@hotmail.comEvanstonInactive$643.33
Harriet Goyette Iyoshiko_ohara@gmail.comHammesshireActive$582.16
Frances Nolankyleigh66@hotmail.comNew EmeraldfortActive$598.73
Darlene Raynor DVMhertha_hermann@yahoo.comDundalkInactive$446.97
Miss Ruth Kubkorey.parisian@hotmail.comStiedemanntownInactive$243.81
Johnnie Schroederotilia.turcotte19@hotmail.comKuhnboroInactive$139.89
Mrs. Gretchen Ziemann PhDgavin_schroeder@hotmail.comEfrainmouthActive$901.24
Gustavo Parisianwyman.smith@yahoo.comNew HarleyInactive$824.02
Marco Whiteannamae94@hotmail.comAdriennehavenInactive$888.09
Kellie Tillmanzula.mante@gmail.comNienowbergActive$575.33
Terrance Langmakayla26@yahoo.comApopkaActive$1,128.49
Miss Robyn Fay Sr.mabelle.durgan42@hotmail.comFort CollinsInactive$1,100.50
Kelley Harber-Schinnerhowell.moen@hotmail.comEast RebeccaworthInactive$442.09
Carla Skilesjackeline_bednar26@yahoo.comWhite PlainsInactive$797.75
Kim Satterfieldrex_jerde83@gmail.comNorth ArielActive$454.99
Total$9,767.39

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