Components

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$253.67
INV002PendingPayPal$178.20
INV003PendingPayPal$100.03
INV004PendingCredit Card$646.08
INV005PendingBank Transfer$652.15
INV006UnpaidCredit Card$173.21
INV007UnpaidBank Transfer$187.31
Total$2,190.65

Simple

Users

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

NameTitleEmailRoleActions
Wilson ParisianNational Branding Supervisorwilson_parisian42@yahoo.comMember
Jewell KundeProduct Response Administratorjewell_kunde73@yahoo.comViewer
Russ LebsackGlobal Tactics Analystruss.lebsack6@gmail.comMember
Terence MarksDistrict Marketing Associateterence.marks@gmail.comViewer
Anthony StreichForward Optimization Assistantanthony_streich89@gmail.comMember
Sylvester BernierDirect Communications Facilitatorsylvester_bernier73@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Dasia Ratke

National Data Director

dasia.ratke@hotmail.com

Viewer

Cory Batz

National Implementation Liaison

cory.batz@yahoo.com

Viewer

Chad Becker

District Response Engineer

chad_becker34@hotmail.com

Viewer

Amelia Stanton

District Implementation Manager

amelia.stanton@hotmail.com

Member

Nicola Emmerich

Central Marketing Officer

nicola.emmerich26@yahoo.com

Viewer

Tia Jones

Legacy Applications Developer

tia.jones4@hotmail.com

Viewer

Users

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

NameRoleActions

Sadye Gerlach

Lead Division Strategist

sadye.gerlach@gmail.com

Viewer

Ola Kris

Product Assurance Liaison

ola_kris@yahoo.com

Member

Noah Wisoky

Dynamic Quality Assistant

noah_wisoky63@gmail.com

Member

Neal Batz

Investor Marketing Developer

neal.batz@hotmail.com

Viewer

Esther Weissnat

Forward Optimization Executive

esther.weissnat11@hotmail.com

Viewer

Ellsworth Leannon

National Tactics Planner

ellsworth_leannon@hotmail.com

Viewer

Myrtis Lemke

Regional Mobility Officer

myrtis_lemke59@gmail.com

Viewer

Janis Wunsch

International Branding Executive

janis_wunsch@yahoo.com

Viewer

Carl Welch-Sawayn

Internal Security Developer

carl.welch-sawayn@yahoo.com

Viewer

Felix Russel

Dynamic Infrastructure Orchestrator

felix_russel@hotmail.com

Admin

Felipe Kertzmann

Regional Applications Director

felipe.kertzmann7@gmail.com

Admin

Stefan Bosco

National Group Designer

stefan.bosco@gmail.com

Viewer

Henrietta Borer-Daniel

Future Integration Representative

henrietta.borer-daniel@gmail.com

Viewer

Brionna Klocko

Internal Assurance Assistant

brionna_klocko57@yahoo.com

Viewer

Rex Heidenreich

Central Program Administrator

rex_heidenreich@hotmail.com

Admin

Germaine McGlynn

Investor Group Developer

germaine_mcglynn49@hotmail.com

Viewer

Ann Flatley

Customer Accountability Representative

ann_flatley39@yahoo.com

Viewer

Paulette Williamson

Customer Directives Facilitator

paulette_williamson@gmail.com

Viewer

Dahlia Cruickshank

Global Research Developer

dahlia.cruickshank53@yahoo.com

Viewer

Faith Hackett

Regional Directives Planner

faith.hackett@gmail.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
Anthony Dickinsonmillie.schulist@hotmail.comLas CrucesActive$661.62
Mr. Marlon Hintzrudy_adams54@hotmail.comBuffaloInactive$283.84
Jarod Purdy DDScristopher.hilll26@gmail.comNorth SergioActive$566.14
Kacey Blick Vmarcos_maggio-legros81@hotmail.comFort JaviersideActive$357.75
Sage Konopelskiefren.braun16@gmail.comWest TomInactive$151.30
Total$2,020.65

Basic table

Table with Images

NameEmailLocationStatusBalance
Osbaldo Shanahan
@patrick44
annette66@gmail.comTurcottefieldActive$854.38
Leon Wehner
@archie_satterfield68
madelyn26@yahoo.comAndersonstadActive$51.90
Vicky Kessler
@monroe_satterfield-batz
betty96@gmail.comSpinkastadInactive$386.58
Aniya Bechtelar
@deborah.mcglynn
carley.jakubowski66@hotmail.comSouth WillmouthActive$326.40
Esperanza Jaskolski
@vivien.king
krystal_weber97@gmail.comErickafurtActive$1,011.59

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jarred Boscowava.kautzer75@gmail.comNew DaisyshireInactive$820.25
Miss Ella Luettgen Vadrien_carter@gmail.comFort LurlinefurtActive$104.44
Monte Manteursula_tremblay28@gmail.comHandburyActive$992.46
Ryan Dibbertxavier36@gmail.comUrbanaInactive$480.18
Guillermo Pagac Jr.dariana_haley36@gmail.comNewarkInactive$1,197.30
Total$3,594.63

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Candelario Gibson PhDkirsten_price4@hotmail.comWest MosesInactive$462.21
Dora Litteljulian_kuphal11@gmail.comConroeActive$162.98
Sonja Brakusmack_dooley@yahoo.comNorth SydneyfurtInactive$526.73
Jeremy Murphyelda.kuvalis60@yahoo.comFort TedfortInactive$714.28
Ms. Billie Russelrufus_boyer90@gmail.comJudithfieldActive$736.41
Total$2,602.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Anais Marquardt PhDaylin_schmidt@yahoo.comEast ErvinchesterInactive$315.74
Tracy Rennerenid44@yahoo.comSouth SibylfurtActive$665.57
Bella Emardmabel.ernser49@gmail.comWest JaidenInactive$605.08
Douglas Powlowski MDheath82@gmail.comEast CiceroboroInactive$5.83
Elena Larkineric_rodriguez@gmail.comEast MyahboroughActive$1,061.11
Total$2,653.33

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
Mr. Ashleigh Steubergerard.muller@yahoo.comBountifulInactive$1,168.20
Nichole Ondrickaamari_goyette@yahoo.comNew RaeganInactive$19.28
Eva Gusikowski-O'Konalexandra.volkman@yahoo.comDurganviewInactive$597.30
Ms. Lynda Torpsilvia.emard@yahoo.comLake EdwinActive$265.74
Clemens Ankundingverona.schmitt@hotmail.comGottliebfurtActive$362.87
Total$2,413.39

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sid Heaneyjacynthe_lehner48@gmail.comDockviewActive$413.11
Kari Faheykristi12@yahoo.comQuitzonburghActive$120.29
Price Doylemelissa_rath-kautzer11@yahoo.comNew EnriquestadActive$840.82
Darnell Stiedemann Jr.salvador_mann@hotmail.comFort JaredInactive$382.35
Christ Dickiluke_gusikowski51@gmail.comNorth KentonmouthActive$1,150.41
Total$2,906.98

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
Krista Boehmzachariah43@gmail.comElmoportActive$30.96
Irma Champlinroger_ebert@yahoo.comLeague CityActive$272.19
Lucas Kuhn IIalton.mohr9@hotmail.comEverettActive$13.26
Laurie Sanford-Braunderrick.larkin@yahoo.comNorth KimworthActive$405.24
Elvera Ebertfidel75@yahoo.comNathanielhavenActive$927.17
Yasmine Donnellyfrances96@hotmail.comFarmingtonActive$1,189.53
Ernesto Roobjohn90@yahoo.comEast OlgaInactive$184.26
Esta Dietrichanissa_quigley45@hotmail.comNew RosalindatonInactive$17.52
Wanda Harberwinston22@hotmail.comNorth ErnesthavenActive$532.40
Mrs. Kale Swaniawskijadyn43@gmail.comChristineburyInactive$102.30
Emiliano Kreigermyriam_koelpin80@gmail.comSanfordboroughActive$542.14
Fritz Batziris32@gmail.comAlexandriaActive$852.69
Sylvan Pagacrosa19@hotmail.comConsidineportInactive$400.63
Marshall Hartmannaliyah.koelpin@yahoo.comNew ClemensActive$731.02
Joan Kemmer-Stammgloria_muller91@yahoo.comHageneshavenInactive$141.74
Total$6,343.05

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