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
INV001PaidCredit Card$700.31
INV002PendingCredit Card$836.57
INV003PaidBank Transfer$699.64
INV004PaidPayPal$417.62
INV005PaidCredit Card$926.02
INV006UnpaidPayPal$945.35
INV007PendingBank Transfer$599.36
Total$5,124.87

Simple

Users

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

NameTitleEmailRoleActions
Charley EffertzDistrict Quality Agentcharley_effertz@hotmail.comAdmin
Mariana LebsackCorporate Communications Orchestratormariana_lebsack35@yahoo.comAdmin
Serenity CassinDynamic Interactions Administratorserenity_cassin99@yahoo.comAdmin
Nikolas WatersNational Quality Representativenikolas_waters@hotmail.comMember
Joe PowlowskiLead Metrics Producerjoe_powlowski30@gmail.comViewer
Marilyne QuitzonHuman Mobility Managermarilyne_quitzon68@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ramona Connelly

Product Functionality Associate

ramona.connelly@gmail.com

Member

Jamaal Cummerata

Forward Marketing Executive

jamaal.cummerata@gmail.com

Viewer

Graham Reichel

Chief Assurance Strategist

graham_reichel@hotmail.com

Admin

Maribel Franey

Legacy Intranet Planner

maribel_franey84@gmail.com

Viewer

Mercedes Mante

Product Infrastructure Agent

mercedes_mante@yahoo.com

Viewer

Isadore Hirthe

Lead Assurance Director

isadore.hirthe20@yahoo.com

Member

Users

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

NameRoleActions

Carli Kuhn

Corporate Communications Director

carli.kuhn@yahoo.com

Viewer

Vladimir Jakubowski

Product Accounts Agent

vladimir.jakubowski33@hotmail.com

Viewer

Hannah Koss

Future Mobility Consultant

hannah.koss@hotmail.com

Viewer

Kyra White

Legacy Markets Producer

kyra_white@gmail.com

Viewer

Mckenzie Price

Principal Program Designer

mckenzie_price@yahoo.com

Admin

Lacy Lebsack

Legacy Implementation Specialist

lacy_lebsack18@yahoo.com

Viewer

Franz Morar

Product Division Officer

franz.morar8@gmail.com

Viewer

Jewell Rice

District Functionality Administrator

jewell.rice26@yahoo.com

Admin

Emie Schumm

Senior Directives Director

emie_schumm28@yahoo.com

Member

Jennifer Grant

Customer Tactics Architect

jennifer.grant74@hotmail.com

Viewer

Jabari Langosh

Customer Operations Engineer

jabari.langosh@yahoo.com

Admin

Darrell Herman

International Configuration Supervisor

darrell_herman8@hotmail.com

Admin

Shad Powlowski

Central Communications Manager

shad.powlowski@gmail.com

Viewer

Ally Wolff

Corporate Accountability Planner

ally.wolff@yahoo.com

Member

Lenore Zboncak

Internal Marketing Architect

lenore_zboncak@yahoo.com

Viewer

Shaniya Daniel

Investor Solutions Planner

shaniya_daniel19@gmail.com

Viewer

Helmer Smith

Senior Response Coordinator

helmer.smith42@yahoo.com

Viewer

Dereck Cummerata

Legacy Data Director

dereck_cummerata49@yahoo.com

Admin

Shaniya Jenkins

Central Factors Representative

shaniya.jenkins@hotmail.com

Viewer

Cydney Pfeffer-Bruen

Chief Division Consultant

cydney.pfeffer-bruen@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
Randall Gerholdmarietta_jones47@gmail.comPourosvilleActive$1,012.85
Ed Pourosjavonte.blanda64@gmail.comPort RoscoeviewInactive$880.72
Dr. Dennis Hoppekristian_johnston79@gmail.comNew StefanInactive$166.31
Brad Bartoletti-Kinglarissa_kihn26@gmail.comNew AlechavenActive$322.71
Edna Rippinelna_rau-toy@gmail.comFriesenbergInactive$1,042.63
Total$3,425.22

Basic table

Table with Images

NameEmailLocationStatusBalance
Bernice Cole
@fletcher.hoppe-stoltenberg82
joyce42@hotmail.comWillbergInactive$699.04
Dwayne Beahan
@lonie_nikolaus
clemens.considine23@hotmail.comSouth CydneyInactive$385.67
Laverne Huel
@josiah_bailey
percival.kulas98@gmail.comPort CadentownInactive$1,126.79
Eileen Rath
@paris_dubuque
ulises.johns85@hotmail.comThielhavenActive$804.10
Dr. Gilberto Feil
@susanna.barrows15
aisha3@gmail.comEast MikaylaActive$610.05

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Stacey Boyledarby.fritsch19@yahoo.comLilysideActive$475.33
Carolyn Smithamwilhelm.cremin97@yahoo.comKleinshireActive$740.18
Faye Gulgowski MDfiona_donnelly33@hotmail.comNew SkylaInactive$741.60
Anita Millsbeau21@hotmail.comJefferyboroInactive$176.37
Brett Yundt IIagnes22@yahoo.comGleasonstadInactive$731.68
Total$2,865.16

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Earnest Stokesaugustine.bogisich@yahoo.comRorysteadInactive$483.17
Miss Celia Kuphalmikayla39@gmail.comCassidyfurtInactive$23.94
Josephine Ritchiemia.hammes17@gmail.comSouth MalvinaburghActive$1,004.30
Kim Klingallene_lemke2@hotmail.comRedlandsActive$1,125.27
Verna Langoshrubie83@hotmail.comZiemecesterActive$810.51
Total$3,447.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Cody Haley DDSsabina_farrell31@yahoo.comCentennialActive$1,020.05
Lori Hoppearchibald38@gmail.comTiffanystadActive$431.81
Kristopher Haagalphonso.rath@yahoo.comEast AdelbertbergActive$279.11
Marta Hoeger-Powlowskiroosevelt_hettinger@yahoo.comAzusaActive$214.93
Courtney Townenoelia.bashirian-corwin@gmail.comBurdetteburyInactive$1,141.95
Total$3,087.85

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
Spencer Keelingrylee.nienow@gmail.comEast AdityaActive$9.78
Mrs. Leslie Uptonchelsie_raynor35@gmail.comArden-ArcadeActive$138.05
Lela Kirlin DDSlorine.erdman65@hotmail.comWest GretchenmouthActive$418.96
Roxanne McClurejohathan.runolfsson52@yahoo.comStammlandInactive$1,016.63
Lamar Dickinsonorville_little46@yahoo.comGreen BayInactive$508.86
Total$2,092.28

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Jake Buckridgetatyana.bayer49@hotmail.comLake TristianActive$1,152.70
Regina Stoltenberg Sr.patsy_marquardt55@gmail.comPort SethActive$783.72
Jeffery Schusterlonnie.blanda@hotmail.comBartontownInactive$625.21
Milton Cristtorrance25@yahoo.comDavidhavenInactive$995.85
Joann Marksfern_klocko@yahoo.comSouth MilfordActive$946.49
Total$4,503.97

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
Mr. Aaron Kesslerkatheryn.gutkowski88@hotmail.comFort DylanInactive$56.85
Gregory Mante DDSettie.buckridge@hotmail.comMurphyfortActive$110.07
Blanca Labadiejerad48@gmail.comPort ZackerytownActive$407.36
Darrel Leschroslyn.harvey@gmail.comNew MarioboroughActive$529.36
Mr. Toby Bruengeo_stark71@gmail.comSouth OnieActive$1,199.28
Darren Franeyhayley_toy@gmail.comEast KenyaActive$444.34
Colleen Gerlacheleanora.ortiz68@gmail.comHettieboroughActive$29.48
Alton Ortiz Vmilton.pollich-pollich@hotmail.comLake DejahfieldActive$272.56
Mr. Maurice Abshirealfredo_haley19@gmail.comNorth MercedesvilleInactive$180.98
Joy Bechtelarrey17@gmail.comJohathansteadInactive$464.07
Jack Beermeredith56@gmail.comPort LexiInactive$58.26
Bobby Goodwin Jr.katharina_hackett@hotmail.comPort JoseActive$25.18
Juanita Littlealf58@hotmail.comLake StephanielandActive$91.51
Karla Runolfssonstanley.schinner@hotmail.comPort RebecaActive$845.26
Velma Blocklucile10@gmail.comNew ParisActive$915.03
Total$5,629.59

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