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
INV001PaidBank Transfer$554.84
INV002PendingBank Transfer$132.56
INV003PaidBank Transfer$979.29
INV004PaidPayPal$249.40
INV005UnpaidCredit Card$148.30
INV006PendingCredit Card$374.88
INV007UnpaidPayPal$215.95
Total$2,655.22

Simple

Users

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

NameTitleEmailRoleActions
Aylin MohrCorporate Data Developeraylin_mohr@hotmail.comViewer
Rose CollinsChief Accounts Assistantrose.collins@hotmail.comViewer
Freddy HellerInternational Group Coordinatorfreddy_heller@hotmail.comMember
Lucienne ColeForward Web Agentlucienne_cole11@hotmail.comViewer
Nathen YundtFuture Integration Designernathen.yundt@gmail.comAdmin
Dawson TrantowSenior Paradigm Plannerdawson_trantow93@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Gardner Weissnat

Forward Usability Director

gardner_weissnat12@gmail.com

Viewer

Harry Abshire

Human Quality Agent

harry.abshire@hotmail.com

Member

Chanel Streich

District Directives Agent

chanel_streich@yahoo.com

Member

Mayra Nienow

Corporate Metrics Manager

mayra_nienow42@gmail.com

Viewer

Morgan Swift

Central Functionality Liaison

morgan.swift62@yahoo.com

Viewer

Kaylah Schaden

Chief Program Associate

kaylah.schaden@hotmail.com

Admin

Users

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

NameRoleActions

Marietta Herzog

Dynamic Identity Administrator

marietta_herzog5@yahoo.com

Viewer

Salma Rosenbaum

Investor Data Coordinator

salma.rosenbaum@yahoo.com

Viewer

Louie Stokes

Corporate Identity Producer

louie.stokes28@yahoo.com

Member

Dominic Stiedemann

Legacy Solutions Supervisor

dominic_stiedemann@gmail.com

Member

Ted Rowe-Fahey

Dynamic Marketing Representative

ted.rowe-fahey72@yahoo.com

Admin

Eduardo Osinski

Investor Marketing Engineer

eduardo_osinski@yahoo.com

Admin

Jazmyne Ebert

Forward Applications Coordinator

jazmyne_ebert@gmail.com

Viewer

Merritt Mayert

Internal Research Associate

merritt_mayert@hotmail.com

Admin

Chesley Batz

Forward Functionality Representative

chesley_batz@hotmail.com

Member

Maxwell Wehner

Chief Metrics Representative

maxwell_wehner@hotmail.com

Member

Carson Howell

Forward Web Supervisor

carson_howell@yahoo.com

Viewer

Corene Johns

Forward Marketing Representative

corene.johns@hotmail.com

Admin

Norval Price-Mills

Product Division Representative

norval.price-mills69@gmail.com

Viewer

Nya Renner

District Directives Developer

nya.renner1@yahoo.com

Admin

Efren Bogisich

Product Mobility Officer

efren_bogisich@gmail.com

Viewer

Sigurd Nader

Human Interactions Producer

sigurd_nader@hotmail.com

Member

Trever Bosco

Direct Branding Agent

trever.bosco84@hotmail.com

Viewer

Rocky Bruen

National Paradigm Producer

rocky_bruen@yahoo.com

Member

Ben Kertzmann

District Division Coordinator

ben_kertzmann66@hotmail.com

Viewer

Buddy Runolfsson

Chief Response Planner

buddy.runolfsson3@yahoo.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
Mindy Hilpertjazmin99@gmail.comNorth BradfordInactive$963.87
Dawn Reichertelijah_moen@yahoo.comGerdatownActive$114.25
Ramona Greenholtoswald.schultz@gmail.comTurcottestadInactive$540.76
Doreen Ratkenatalia59@yahoo.comElijahportInactive$456.85
Eric Mayeraylin_thiel93@gmail.comPensacolaActive$1,176.81
Total$3,252.54

Basic table

Table with Images

NameEmailLocationStatusBalance
Darlene Wunsch
@nick.senger41
kattie94@hotmail.comRippincesterActive$1,063.51
Miguel Berge
@ali_jenkins9
amelia.runte@gmail.comRippinburyActive$915.09
Van Turner II
@gideon.cummings
maud94@hotmail.comSouth BendInactive$1,190.97
Barbara Bernier I
@angus33
leon76@yahoo.comAlpharettaInactive$247.17
Orlando Schamberger
@elaina_kozey33
amanda29@hotmail.comSouth BridgetviewInactive$71.93

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Evelyn Watsicaardith28@gmail.comHeidenreichsideInactive$1,038.99
Jackie Parkerverla70@hotmail.comSmithambergActive$931.79
Robyn Swaniawskilukas.tromp@gmail.comMonserratstadActive$938.58
Dr. Toby Carrollamerico_sanford-grimes93@yahoo.comDaytonActive$277.99
Kurt Zboncaklibby.davis@yahoo.comSouth ReggieInactive$558.48
Total$3,745.83

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sheryl Baumbachpenelope_hartmann97@yahoo.comSouth AnabelstadActive$105.80
Kenneth Gerholdpenelope.bechtelar8@hotmail.comFort DeanhavenInactive$284.59
Judith Prosaccoernie50@yahoo.comEast KaciesideInactive$187.48
Michele Labadiecurtis_okon@yahoo.comNorth ClementineInactive$669.66
Spencer Beckerchris_koch@gmail.comWest WilfredoActive$644.20
Total$1,891.73

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Eva Mertzdelia2@hotmail.comSouth AurelieInactive$821.67
Matthew Douglas IIIhoracio_ondricka94@gmail.comJohns CreekActive$1,014.51
Natasha Osinskiquentin_kohler7@yahoo.comHirtheburyActive$1.39
Jackie Hintzclyde27@yahoo.comSkilesshireActive$99.18
Guy Ferryalisa96@gmail.comSouth JayneboroughActive$1,128.00
Total$3,064.75

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
Dr. Melvin Okunevaadelle67@hotmail.comHeaneymouthInactive$511.56
Noah Auerathena.kirlin@hotmail.comHerzogworthInactive$335.81
Dr. Bill Stammleopoldo18@gmail.comWest RaoulburghInactive$520.22
Nellie Lemkealisa_ohara61@gmail.comErieInactive$282.31
Dr. Christy Swaniawski MDbetty.kreiger77@gmail.comDothanActive$1,026.25
Total$2,676.15

Table with row selection

Card Table

NameEmailLocationStatusBalance
Martha Schumm PhDfrancis_johnson@hotmail.comLincolnInactive$127.72
Priscilla Crookskatelynn37@hotmail.comNew LaurineInactive$739.93
Shari Ritchiemarcel99@hotmail.comRusselboroActive$805.10
Minnie Mayerbrandy.nienow91@hotmail.comVancouverInactive$521.23
Lonnie Willdestinee_rempel@hotmail.comKassulkelandInactive$937.00
Total$3,130.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
Glenn Kuvalismyles_koepp49@hotmail.comNicolasfortInactive$1,194.12
Hattie Paucekhattie_cole@hotmail.comNew LucasInactive$918.13
Sarah Friesentara_hagenes@hotmail.comMosciskisteadInactive$145.92
Don Doylemireille15@hotmail.comEast MaurineInactive$934.08
Charlie Champlinflorence79@yahoo.comLabadieboroInactive$420.09
Gabriel Spinka MDelva_hermann@yahoo.comCarterviewActive$184.17
Delia Trompantoinette.kozey@hotmail.comRancho Palos VerdesActive$1,058.43
Eloise Schimmel IVyasmeen_boyer-nienow@hotmail.comPatriciaburyActive$302.81
Joyce Tillmanaubrey39@hotmail.comAnthonysideInactive$1,099.15
Miriam Millervalentine_gutmann98@yahoo.comStromanlandInactive$365.10
Jermaine Mayerteugenia19@hotmail.comSouth AbagailsideActive$418.90
Terry Tillmanolen_weimann@hotmail.comLake LouveniashireInactive$435.79
Wesley Wildermandenis31@yahoo.comEast DevontestadActive$191.62
Paulette Goodwinterry82@gmail.comLake MiguelActive$380.52
Ms. Stacy Goldnerlia68@yahoo.comEast WyattInactive$290.87
Total$8,339.70

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