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$682.30
INV002PendingBank Transfer$807.79
INV003UnpaidPayPal$820.72
INV004UnpaidCredit Card$917.98
INV005PendingCredit Card$882.66
INV006PendingPayPal$675.05
INV007UnpaidPayPal$882.22
Total$5,668.72

Simple

Users

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

NameTitleEmailRoleActions
Maverick QuigleyProduct Research Supervisormaverick.quigley60@hotmail.comMember
Cristian RobertsDirect Paradigm Developercristian.roberts49@hotmail.comViewer
Maximillia BalistreriCorporate Metrics Engineermaximillia.balistreri22@hotmail.comMember
Vella FritschDynamic Intranet Liaisonvella.fritsch71@gmail.comViewer
Kathlyn ManteSenior Data Supervisorkathlyn_mante@yahoo.comMember
Elton SchimmelLead Directives Architectelton_schimmel37@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Darby Emmerich

Lead Optimization Officer

darby.emmerich84@yahoo.com

Viewer

Dexter Brekke

Central Tactics Producer

dexter_brekke@yahoo.com

Member

Ellie Jakubowski-O'Conner

International Accounts Liaison

ellie_jakubowski-oconner@hotmail.com

Member

Erna White

International Brand Engineer

erna_white61@hotmail.com

Admin

Norberto Huels

Lead Assurance Strategist

norberto_huels81@hotmail.com

Viewer

Lula Bashirian

National Assurance Officer

lula.bashirian2@yahoo.com

Admin

Users

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

NameRoleActions

Daniela O'Reilly

Corporate Optimization Manager

daniela_oreilly74@yahoo.com

Admin

Dashawn Kozey

Corporate Paradigm Facilitator

dashawn_kozey19@hotmail.com

Member

Amy Hilll

Central Paradigm Associate

amy_hilll@yahoo.com

Viewer

Stephany Dickinson

Dynamic Quality Technician

stephany.dickinson49@hotmail.com

Member

Darius Haag

District Assurance Director

darius.haag@gmail.com

Admin

Mathias Runolfsdottir

Product Applications Specialist

mathias.runolfsdottir69@yahoo.com

Admin

Callie Witting

Legacy Communications Liaison

callie.witting39@yahoo.com

Viewer

Jensen Wunsch

Global Communications Representative

jensen_wunsch13@gmail.com

Viewer

Iva Barrows

District Group Architect

iva_barrows@hotmail.com

Admin

Alicia Fritsch

Lead Accounts Consultant

alicia_fritsch34@gmail.com

Admin

Mac Langworth

Corporate Accountability Orchestrator

mac_langworth74@hotmail.com

Member

Jenifer Osinski

Human Metrics Technician

jenifer_osinski47@yahoo.com

Viewer

Vivienne Labadie

Global Usability Coordinator

vivienne.labadie@gmail.com

Viewer

Rubie Anderson

Human Marketing Assistant

rubie_anderson@hotmail.com

Member

Casimir Bednar

Future Research Representative

casimir.bednar@gmail.com

Admin

Winifred Howell

Chief Communications Designer

winifred.howell90@yahoo.com

Member

Otho Rippin

Internal Markets Administrator

otho.rippin@hotmail.com

Admin

Hailey Herzog

Central Accountability Representative

hailey.herzog81@hotmail.com

Member

David McCullough

Legacy Directives Developer

david.mccullough60@gmail.com

Admin

Ashton Kuphal

Future Tactics Producer

ashton_kuphal41@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
Silvia Dooleyjudd_morar58@yahoo.comGreensboroInactive$568.66
Francisco Ruecker-Schustershayna22@yahoo.comLake BethanyInactive$616.35
Erika Kertzmann Irory_jacobson-greenfelder@gmail.comPort TrishaActive$51.03
Scott Zieme MDsven.green@gmail.comAbshiresideInactive$256.53
David Mosciski-Price Sr.stuart_murray20@yahoo.comRuntetonInactive$171.69
Total$1,664.26

Basic table

Table with Images

NameEmailLocationStatusBalance
Ted Yundt
@fidel.medhurst
donny_monahan97@yahoo.comKrisburghActive$755.07
Chad Welch
@bethany69
devante_morissette87@gmail.comLake EunavilleInactive$579.99
Dora Aufderhar
@freeda_streich
hailee_schowalter-hintz@yahoo.comWest MablestadInactive$608.77
Rhonda Murazik
@delphia_smitham37
oma18@gmail.comJeromyboroActive$945.36
Clint Dach DDS
@ignacio_muller-reinger
clementine_mckenzie@hotmail.comWest KyrashireActive$1,001.85

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dale Watsica MDdanielle71@yahoo.comWest BulahActive$99.85
Kelly O'Haraizaiah_kuhlman@gmail.comJosefinalandActive$720.42
Alejandro Rutherfordmadisyn.hudson@hotmail.comConsidinestadActive$1,037.52
Jenna Prosaccojanice_koepp65@yahoo.comLake HipolitofortActive$860.14
Clark Littelbettye76@gmail.comDereckburghActive$236.50
Total$2,954.43

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Darla Hartmannsamantha.jones@gmail.comNorth EverettechesterActive$332.12
Gustavo Shanahanmariam.jast@yahoo.comKuvalisportInactive$447.98
Ernesto Hoegerclaudia.dibbert-conroy57@hotmail.comMedfordActive$668.71
Dianna Champlingust.crona@gmail.comAlbanyInactive$547.00
Andrew Warddeven80@gmail.comAllyvilleInactive$578.99
Total$2,574.80

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lynette Kublennie.mante43@gmail.comWheatonActive$280.20
Mrs. Eva Kshleringlenna_pfeffer@gmail.comSouth DemetriusboroughActive$17.18
Kirk Konopelskikennith.gottlieb@yahoo.comSouth AdolphActive$35.67
Jerry Conn IVricardo16@hotmail.comNew LilianInactive$1,171.81
Lucas Hartmanntrever.daniel39@gmail.comEast EmmettActive$820.25
Total$2,325.11

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
Violet Mitchell IVangeline.wisoky48@yahoo.comSouth RockyburyInactive$940.26
Cornelius Webersincere93@yahoo.comFort SandrafurtActive$510.14
Ms. Dianna Bayer-Schinnerines82@gmail.comTroyInactive$12.95
Vicki Hackettlauryn87@hotmail.comDanastadActive$146.87
Jennifer Creminwilfred82@gmail.comLake AnyafieldInactive$189.56
Total$1,799.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ada Wolfadriana_considine@gmail.comHicklebergActive$103.92
Lauren Schillergreg13@gmail.comWest ZorafurtInactive$146.96
Martin Franeckijuwan80@yahoo.comPort VladimirInactive$856.89
Preston Mraz PhDvalentina.ferry9@hotmail.comNew CamilafurtInactive$56.57
Rhonda Kozeyzakary.stiedemann@gmail.comOxnardInactive$1,040.65
Total$2,204.99

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
Sonya Rosenbaumlaron_wuckert@yahoo.comSchusterworthActive$565.41
Stanley Bartell Jr.ali89@yahoo.comMillerbergInactive$783.15
Ana Russelsavannah64@yahoo.comNew NoahburyActive$120.37
Dr. Gwen Brownjimmy75@yahoo.comFall RiverInactive$11.42
Sylvia Kertzmanneryn_quigley@gmail.comLake JessyfieldActive$1,044.86
Fannie Stoltenbergtess25@hotmail.comEast JoshInactive$462.69
Debra Danielyasmin.christiansen82@hotmail.comKassulkestadActive$123.66
Cristina Ebert Sr.joel83@hotmail.comFort MyersInactive$623.79
Claude Haleykevin_stark94@hotmail.comBarbarastadActive$38.95
Luis Langdarrick_durgan56@yahoo.comSouth MontyburghActive$1,140.88
Bessie Goyette-Bradtkevito.pfannerstill54@gmail.comPort LawrenceActive$519.26
Dr. Alton Hintzjuliana2@hotmail.comKilleenActive$881.15
Kristen VonRuedenromaine.howell63@hotmail.comShakiraburyActive$227.69
Lewis Harberregan_dietrich64@yahoo.comRunolfsdottirfieldInactive$571.59
Marc Abernathysusanna40@hotmail.comArafortActive$96.02
Total$7,210.89

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