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
INV001PendingPayPal$573.31
INV002UnpaidPayPal$117.53
INV003PendingPayPal$652.77
INV004UnpaidPayPal$911.10
INV005UnpaidCredit Card$480.36
INV006UnpaidCredit Card$483.03
INV007PendingPayPal$510.23
Total$3,728.33

Simple

Users

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

NameTitleEmailRoleActions
Mathew HamillHuman Branding Plannermathew.hamill@gmail.comMember
Gerard LednerNational Configuration Plannergerard.ledner@hotmail.comMember
Remington KlingPrincipal Infrastructure Strategistremington_kling26@gmail.comViewer
Israel FlatleyCorporate Accounts Assistantisrael.flatley24@hotmail.comAdmin
Makenna WhiteNational Mobility Technicianmakenna_white@hotmail.comAdmin
Emmett WolffFuture Interactions Analystemmett_wolff6@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Suzanne Grimes

Forward Response Executive

suzanne.grimes@gmail.com

Admin

Faith Bailey

Direct Identity Architect

faith.bailey@hotmail.com

Member

Regina Veum

Legacy Interactions Associate

regina_veum96@yahoo.com

Admin

Keagan Harber

Corporate Infrastructure Strategist

keagan.harber28@hotmail.com

Member

Toby Hane

Dynamic Web Officer

toby.hane22@yahoo.com

Admin

Anibal Kassulke

Internal Division Analyst

anibal_kassulke69@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Jenna Schuster

International Configuration Analyst

jenna_schuster@hotmail.com

Viewer

Arturo Emmerich

Internal Marketing Strategist

arturo.emmerich@gmail.com

Viewer

Sonia Hand

Future Security Specialist

sonia.hand0@yahoo.com

Member

Lawson Purdy

Global Response Consultant

lawson_purdy0@hotmail.com

Admin

Carol Corkery

District Communications Coordinator

carol_corkery34@hotmail.com

Viewer

Shad O'Hara

Customer Quality Architect

shad_ohara@hotmail.com

Member

Silvia Fadel-Waelchi

Legacy Branding Coordinator

silvia.fadel-waelchi@hotmail.com

Admin

Monique Kuvalis

Future Paradigm Associate

monique_kuvalis@yahoo.com

Admin

Ila Brown

Internal Markets Agent

ila.brown79@hotmail.com

Member

Tommy Becker

Legacy Solutions Administrator

tommy_becker27@yahoo.com

Member

Debra Walsh

Direct Implementation Planner

debra_walsh@gmail.com

Viewer

Macy Mayer-Leannon

Investor Optimization Associate

macy.mayer-leannon@yahoo.com

Admin

Otto Orn

Corporate Integration Director

otto_orn86@yahoo.com

Member

Ashton Olson

Global Solutions Technician

ashton_olson@gmail.com

Member

Emmitt Kulas

Senior Intranet Developer

emmitt_kulas64@gmail.com

Member

Nelson Schamberger

Regional Mobility Technician

nelson.schamberger24@yahoo.com

Member

Yasmeen Hackett

Chief Infrastructure Executive

yasmeen.hackett@gmail.com

Admin

Dewey Barrows

Internal Configuration Coordinator

dewey_barrows63@gmail.com

Admin

Tyrell Nitzsche

Corporate Quality Technician

tyrell.nitzsche18@yahoo.com

Member

Tyree Stehr

Global Identity Administrator

tyree.stehr@hotmail.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
Samuel Ernser-Daughertytami_keeling15@hotmail.comSunnyboroughActive$579.93
Miriam Cummingsroberta_oreilly@gmail.comMagalitonActive$314.18
Darrell Klockolawson_ledner98@hotmail.comSouth JordanActive$92.52
Stella Krajcikotis_leffler32@hotmail.comFaustinochesterInactive$920.77
Lula Metzlacy_beatty-damore78@hotmail.comWest DarylviewInactive$616.26
Total$2,523.66

Basic table

Table with Images

NameEmailLocationStatusBalance
Gregg Koepp
@blanche.kohler
olivia.crist56@gmail.comEast FrancoInactive$626.30
Marty Bayer
@chelsie.bode9
annette_kemmer16@yahoo.comNew LucilleInactive$1,060.07
Stephan Quigley
@hilda.durgan
oscar_jaskolski70@yahoo.comWestfieldActive$732.65
Bobbie Bins
@darlene48
alberta.swift@hotmail.comMarkusstadActive$482.11
Ethel Stokes
@brisa_hills
suzanne.heaney@yahoo.comJefferson CityActive$698.69

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Pearl Townemarisol8@gmail.comWesttownActive$415.09
Jesse Russelisadore.kuphal58@hotmail.comWaelchifortActive$816.90
Jessica Walshena_breitenberg-schmeler@gmail.comBurlingtonInactive$701.17
Mr. Keven Wieganddolores.legros@gmail.comRoswellInactive$558.88
Manuel Wehnermarlon59@gmail.comBryanhavenInactive$754.84
Total$3,246.88

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Arnold Spinkaraphaelle14@yahoo.comHerminiohavenActive$124.52
Dr. Glen Reingerkate_farrell53@yahoo.comDunwoodyActive$953.67
Chris Luettgenlawson_konopelski-hilll73@gmail.comJohathanlandInactive$1,122.31
Laurence Zieme Vterrence.kassulke@hotmail.comEast DevincesterActive$699.34
Anthony Stehrnelle.schaden94@gmail.comSimonischesterInactive$934.78
Total$3,834.62

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Angelina Kulasadrain81@yahoo.comPort AuroreActive$489.46
Max Windler PhDchelsea77@gmail.comEast BrainActive$1,093.83
Carlee Littelcraig.kutch@yahoo.comJacobsoncesterInactive$274.36
Ervin Wolfmelinda_mcglynn99@yahoo.comPort SherryActive$166.39
Ms. Samara Rath Jr.amos.wyman2@gmail.comLeonahavenInactive$14.44
Total$2,038.48

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
Carmelo Krisshakira29@gmail.comWest MicahfurtInactive$133.07
Archie Barrowspriscilla_braun27@gmail.comYvettestadActive$840.78
Kelli Balistreriregan.von@gmail.comStehrmouthActive$1,167.71
Hildegard Bergnaumsue_pouros76@yahoo.comFort JoannelandActive$978.64
Dr. Karl Kuhnjackeline.considine96@hotmail.comEast OrrinActive$387.27
Total$3,507.47

Table with row selection

Card Table

NameEmailLocationStatusBalance
Gonzalo Harveyrickey.mckenzie1@hotmail.comJanisfieldInactive$464.71
Mr. Rodolfo Lemkesherman_kuhic81@gmail.comSouth TimshireInactive$112.34
Mr. Alan Kuhicneha.wunsch77@yahoo.comCarterstadInactive$271.12
Britney Pfannerstilllevi_dickens78@hotmail.comEast SteveInactive$435.26
Dave Harveyeuna.abshire87@gmail.comWintheisertownInactive$1,137.79
Total$2,421.22

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
Velma Jast IVhenry.lueilwitz@gmail.comBethlehemActive$153.47
Tina Faycoty.nienow99@yahoo.comHempsteadActive$444.48
Mable Schambergersophia.hackett5@hotmail.comHodkiewiczvilleInactive$420.57
Jonathan Reingerraymond_kessler@hotmail.comEdmondActive$1,080.68
Bernadette Mannhenry.powlowski60@gmail.comNorth NormamouthActive$874.28
Spencer Collinsforest.jerde@hotmail.comNew FrancisInactive$455.44
Elisa Brown-Willmserica_kemmer-raynor@yahoo.comNew LamontActive$703.99
Tia Wintheiserkatherine78@yahoo.comKatehavenActive$759.67
Kali Schuppedarrel_gleason@yahoo.comWest JoeyActive$214.22
Jamar Torpjesus.walter@gmail.comCoon RapidsActive$23.93
Maxime Kohlerglenna_wiegand@yahoo.comEastonburyActive$94.30
Mr. Ronny Douglaslynne.parisian@hotmail.comCharliefortInactive$803.34
Dallas Watersnicholas.sipes-wyman@hotmail.comJaceyboroInactive$500.30
Alexander Blocklance15@yahoo.comEvanstonInactive$1,130.34
Harry Heathcotejody_casper@yahoo.comHollystadActive$141.96
Total$7,800.97

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.