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
INV001PaidPayPal$666.98
INV002PendingPayPal$656.62
INV003UnpaidBank Transfer$690.17
INV004UnpaidCredit Card$651.61
INV005UnpaidPayPal$628.17
INV006PendingBank Transfer$225.71
INV007PaidBank Transfer$544.60
Total$4,063.86

Simple

Users

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

NameTitleEmailRoleActions
Constance KonopelskiDynamic Research Facilitatorconstance.konopelski@yahoo.comMember
Kiarra ShieldsCustomer Metrics Executivekiarra_shields52@gmail.comMember
Christophe CroninSenior Directives Orchestratorchristophe_cronin90@yahoo.comViewer
Manuel GulgowskiHuman Applications Producermanuel_gulgowski@gmail.comMember
Aron KautzerHuman Marketing Architectaron_kautzer64@yahoo.comViewer
Destini Waelchi-LabadieDirect Metrics Developerdestini_waelchi-labadie@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Eula Mayert

Direct Communications Producer

eula_mayert11@gmail.com

Admin

Dawn Fadel

District Creative Orchestrator

dawn.fadel@hotmail.com

Viewer

Deanna Deckow

International Applications Supervisor

deanna.deckow44@yahoo.com

Member

Kitty Hane

Internal Program Producer

kitty_hane@hotmail.com

Admin

Freeman Walker

National Group Specialist

freeman.walker35@yahoo.com

Admin

Shane Wintheiser-Lemke

Future Branding Supervisor

shane.wintheiser-lemke5@gmail.com

Viewer

Users

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

NameRoleActions

Steve Rohan

Global Accountability Agent

steve_rohan5@yahoo.com

Viewer

Alberta Johnston

International Functionality Manager

alberta_johnston61@yahoo.com

Admin

Hector Carroll

International Directives Liaison

hector_carroll@gmail.com

Member

Walter Carter

Future Implementation Liaison

walter.carter@yahoo.com

Admin

Fausto Schaden

International Infrastructure Orchestrator

fausto_schaden@gmail.com

Member

Carole Rutherford

Product Accountability Facilitator

carole.rutherford15@hotmail.com

Member

Lavon Paucek

Chief Brand Designer

lavon.paucek11@hotmail.com

Viewer

Clyde Abernathy

Customer Creative Planner

clyde.abernathy@yahoo.com

Viewer

Fannie Kuhlman

International Configuration Engineer

fannie_kuhlman9@hotmail.com

Admin

Josiane Zieme

Corporate Integration Supervisor

josiane_zieme@yahoo.com

Viewer

Paul Rolfson

Legacy Program Supervisor

paul_rolfson99@yahoo.com

Viewer

Timmothy Schumm

Dynamic Communications Supervisor

timmothy.schumm47@yahoo.com

Member

Elvie Herzog

Human Accounts Executive

elvie_herzog@hotmail.com

Viewer

Cristian Robel

Investor Accountability Specialist

cristian_robel@gmail.com

Member

Jeanne Reichert

International Creative Developer

jeanne.reichert49@yahoo.com

Member

Erika Gutkowski

Central Creative Associate

erika.gutkowski3@yahoo.com

Member

Jeffry Thompson

District Brand Orchestrator

jeffry_thompson48@gmail.com

Member

Salvador Aufderhar

International Brand Supervisor

salvador_aufderhar@yahoo.com

Admin

Oscar Barrows

Corporate Interactions Specialist

oscar.barrows26@yahoo.com

Member

Ken Zemlak

Principal Communications Associate

ken.zemlak31@gmail.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
Doris Ondrickamonty_medhurst74@gmail.comNew AnnieActive$822.46
Laurie Moorelynda_greenholt23@hotmail.comNorth AngeloActive$58.89
Jairo Spinka Ilayne.donnelly@yahoo.comRedondo BeachInactive$218.74
Leona Hanedamian.mccullough@hotmail.comFort HaylieInactive$545.59
Nico Bodejason.glover0@gmail.comPort EdmondboroughActive$783.25
Total$2,428.93

Basic table

Table with Images

NameEmailLocationStatusBalance
Curtis Pfeffer
@ricky.schultz
marianne.king@hotmail.comLefflerbergActive$1,025.10
Mrs. Amanda Towne
@pedro.orn
jose.wilkinson@gmail.comCalvinhavenInactive$194.58
Javier Wintheiser
@marion37
demetrius_glover@gmail.comNettievilleActive$671.95
Mr. Drew O'Reilly
@alexandra83
maximilian.kuphal@yahoo.comJasenboroughActive$1,019.02
Mamie Greenholt
@eve.halvorson67
rubie.weber@hotmail.comParkerInactive$539.15

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kristopher Schmidtkane.schmeler34@gmail.comWest StuartActive$231.35
Mona Blickamani_runolfsdottir@yahoo.comNew ThomasburyInactive$989.29
Brandy Shanahandarrin_kessler@yahoo.comHenrietteburghInactive$997.98
Ashlynn Kuhnalvis.leannon@hotmail.comPort CarrollInactive$911.97
Dayne Keeling DVMollie_satterfield99@hotmail.comSouth TammyInactive$969.44
Total$4,100.03

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Emmie Schuppemarielle.franecki80@gmail.comTorphylandInactive$88.33
Woodrow Reynoldseleanor_kling@hotmail.comGutmanntownInactive$287.83
Charlene Adamsmarianna_glover13@gmail.comMinneapolisInactive$690.36
Dovie McDermotttheodora52@hotmail.comLake RoderickActive$339.73
Sophia Grantisabel41@yahoo.comWest BeckybergInactive$777.96
Total$2,184.21

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Gustavo Lubowitzrosalinda.lemke38@hotmail.comEast DawnInactive$1,110.07
Amanda Runtejill89@gmail.comNew TommyfieldInactive$1,123.32
Janis Gottlieb Vronald_weissnat59@gmail.comEast AnastacioInactive$1,031.50
Vidal Labadienadine_ruecker2@yahoo.comLake GuyActive$419.32
Dr. Dennis Moenjill23@hotmail.comAlizasteadInactive$403.71
Total$4,087.92

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
Amanda Robertsfelton.zulauf17@hotmail.comColtenhavenInactive$1,059.90
Beaulah Steubergloria_kreiger54@hotmail.comTheresaburghActive$1,057.48
Angela Daughertyessie.schroeder@hotmail.comCarsonInactive$1,048.80
Claud Emard-Welchjuan.davis65@gmail.comJenkinsworthActive$835.11
Anita Stokeswoodrow_jakubowski4@gmail.comElkhartInactive$322.19
Total$4,323.48

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dominick Daughertymaurice.tromp-prosacco@yahoo.comJeremiahfortInactive$932.41
Mr. Emilio Terrysandrine50@gmail.comFort TyrellInactive$555.64
Rogers Hyattfrancisco6@hotmail.comFort AndrewsideInactive$467.96
William Binsmaureen_hilll@hotmail.comGleichnermouthInactive$29.15
Alexane Bergechristian_jones8@yahoo.comLake IansideActive$75.54
Total$2,060.70

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
Jeanne Strosinbrayan83@gmail.comState CollegeActive$612.11
Veronica Wuckertlindsay_crooks@yahoo.comGutkowskisideInactive$148.33
Lula Hickle-Thieljack1@hotmail.comBertfortInactive$468.05
Berniece Heller PhDaimee.jaskolski6@yahoo.comNorth TrentonchesterInactive$990.38
Nikki Kunze-Huelssherwood_ziemann@yahoo.comWest SamirActive$640.22
Lizzie Handurban_lind@hotmail.comGusikowskiburghActive$989.61
Sean Hackettmaurice.bergstrom@hotmail.comLake MelynaActive$78.86
Mariam Fadelamerica.ohara31@yahoo.comMelyssasideActive$395.32
Alene Mooremireille30@yahoo.comSouth NormaInactive$631.43
Nathen Lemkecreola48@gmail.comBodeburyInactive$819.57
Dusty Strosinbillie85@yahoo.comDouglasbergActive$622.66
Dr. Abraham Romaguera-Tromptimmy.schmitt@yahoo.comIndependenceActive$881.07
Jeremy Kilback IIIkailee.hudson96@hotmail.comPort KristinaActive$194.20
Milford Grahamannette_oconner40@gmail.comNorth KerryInactive$411.59
Quinton Cummeratafredrick_lang44@yahoo.comPort JamaaltownInactive$501.39
Total$8,384.79

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