flat_graphic_business_08

FOOTABLE SCRIPT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

FooTable Features:

  • Sort option for columns
  • Exclude columns from being sortable
  • Search option for table
  • Exclude columns from being searchable
  • Includes responsive layout by collapsing columns
  • Option to always collapse columns
  • Row pagination option for (large) tables

FooTable

... apply some advanced features to your table

The “FooTable” script is a medium heavy script to quickly and easily add a sorting routine, row pagination, search option and responsive layout to your table, with only a minimal impact on speed and performance. The script will only apply some basic styling to your table; most styling will come from your theme or any other global table styling that is applied to your site.

STANDARD LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

NamePositionOfficeAgeStart DateSalary
Airi SatouAccountantTokyo3311-28-2008162700
Angelica RamosChief Executive Officer (CEO)London4710-09-20091200000
Ashton CoxJunior Technical AuthorSan Francisco6601-12-200986000
Bradley GreerSoftware EngineerLondon4110-13-2012132000
Brenden WagnerSoftware EngineerSan Francisco2806-07-2011206850
Brielle WilliamsonIntegration SpecialistNew York6112-02-2012372000
Bruno NashSoftware EngineerLondon3805-03-2011163500
Caesar VancePre-Sales SupportNew York2112-12-2011106450
Cara StevensSales AssistantNew York4612-06-2011145600
Cedric KellySenior Javascript DeveloperEdinburgh2203-29-2012433060
Charde MarshallRegional DirectorSan Francisco3610-16-2008470600
Colleen HurstJavascript DeveloperSan Francisco3909-15-2009205500
Dai RiosPersonnel LeadEdinburgh3509-26-2012217500
Donna SniderCustomer SupportNew York2701-25-2011112000
Doris WilderSales AssistantSidney2309-20-201085600
Finn CamachoSupport EngineerSan Francisco4707-07-200987500
Fiona GreenChief Operating Officer (COO)San Francisco4803-11-2010850000
Garrett WintersAccountantTokyo6307-25-2011170750
Gavin CortezTeam LeaderSan Francisco2210-26-2008235500
Gavin JoyceDeveloperEdinburgh4212-22-201092575
Gloria LittleSystems AdministratorNew York5904-10-2009237500
Haley KennedySenior Marketing DesignerLondon4312-18-2012313500
Hermione ButlerRegional DirectorLondon4703-21-2011356250
Herrod ChandlerSales AssistantSan Francisco5908-06-2012137500
Hope FuentesSecretarySan Francisco4102-12-2010109850
Howard HatfieldOffice ManagerSan Francisco5112-16-2008164500
Jackson BradshawDirectorNew York6509-26-2008645750
Jena GainesOffice ManagerLondon3012-19-200890560
Jenette CaldwellDevelopment LeadNew York3009-03-2011345000
Jennifer AcostaJunior Javascript DeveloperEdinburgh4302-01-201375650
Jennifer ChangRegional DirectorSingapore2811-14-2010357650
Jonas AlexanderDeveloperSan Francisco3007-14-201086500
Lael GreerSystems AdministratorLondon2102-27-2009103500
Martena MccrayPost-Sales supportEdinburgh4603-09-2011324050
Michael BruceJavascript DeveloperSingapore2906-27-2011183000
Michael SilvaMarketing DesignerLondon6611-27-2012198500
Michelle HouseIntegration SpecialistSidney3706-02-201195400
Olivia LiangSupport EngineerSingapore6402-03-2011234500
Paul ByrdChief Financial Officer (CFO)New York6406-09-2010725000
Prescott BartlettTechnical AuthorLondon2705-07-2011145000
Quinn FlynnSupport LeadEdinburgh2203-03-2013342000
Rhona DavidsonIntegration SpecialistTokyo5510-14-2010327900
Sakura YamamotoSupport EngineerTokyo3708-19-2009139575
Serge BaldwinData CoordinatorSingapore6404-09-2012138575
Shad DeckerRegional DirectorEdinburgh5111-13-2008183000
Shou ItouRegional MarketingTokyo2008-14-2011163000
Sonya FrostSoftware EngineerEdinburgh2312-13-2008103600
Suki BurksDeveloperLondon5310-22-2009114500
Tatyana FitzpatrickRegional DirectorLondon1903-17-2010385750
Thor WaltonDeveloperNew York6108-11-201398540
Tiger NixonSystem ArchitectEdinburgh6104-25-2011320800
Timothy MooneyOffice ManagerLondon3712-11-2008136200
Unity ButlerMarketing DesignerSan Francisco4712-09-200992000
Vivian HarrellFinancial ControllerSan Francisco6202-14-2009452500
Yuri BerryChief Marketing Officer (CMO)New York4006-25-2009675000
Zenaida FrankSoftware EngineerNew York6301-04-2010125250
Zorita SerranoSoftware EngineerSan Francisco5606-01-2012115000

RESPONSIVE LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

NamePositionOfficeAgeStart DateSalary
Airi SatouAccountantTokyo3311-28-2008162700
Angelica RamosChief Executive Officer (CEO)London4710-09-20091200000
Ashton CoxJunior Technical AuthorSan Francisco6601-12-200986000
Bradley GreerSoftware EngineerLondon4110-13-2012132000
Brenden WagnerSoftware EngineerSan Francisco2806-07-2011206850
Brielle WilliamsonIntegration SpecialistNew York6112-02-2012372000
Bruno NashSoftware EngineerLondon3805-03-2011163500
Caesar VancePre-Sales SupportNew York2112-12-2011106450
Cara StevensSales AssistantNew York4612-06-2011145600
Cedric KellySenior Javascript DeveloperEdinburgh2203-29-2012433060
Charde MarshallRegional DirectorSan Francisco3610-16-2008470600
Colleen HurstJavascript DeveloperSan Francisco3909-15-2009205500
Dai RiosPersonnel LeadEdinburgh3509-26-2012217500
Donna SniderCustomer SupportNew York2701-25-2011112000
Doris WilderSales AssistantSidney2309-20-201085600
Finn CamachoSupport EngineerSan Francisco4707-07-200987500
Fiona GreenChief Operating Officer (COO)San Francisco4803-11-2010850000
Garrett WintersAccountantTokyo6307-25-2011170750
Gavin CortezTeam LeaderSan Francisco2210-26-2008235500
Gavin JoyceDeveloperEdinburgh4212-22-201092575
Gloria LittleSystems AdministratorNew York5904-10-2009237500
Haley KennedySenior Marketing DesignerLondon4312-18-2012313500
Hermione ButlerRegional DirectorLondon4703-21-2011356250
Herrod ChandlerSales AssistantSan Francisco5908-06-2012137500
Hope FuentesSecretarySan Francisco4102-12-2010109850
Howard HatfieldOffice ManagerSan Francisco5112-16-2008164500
Jackson BradshawDirectorNew York6509-26-2008645750
Jena GainesOffice ManagerLondon3012-19-200890560
Jenette CaldwellDevelopment LeadNew York3009-03-2011345000
Jennifer AcostaJunior Javascript DeveloperEdinburgh4302-01-201375650
Jennifer ChangRegional DirectorSingapore2811-14-2010357650
Jonas AlexanderDeveloperSan Francisco3007-14-201086500
Lael GreerSystems AdministratorLondon2102-27-2009103500
Martena MccrayPost-Sales supportEdinburgh4603-09-2011324050
Michael BruceJavascript DeveloperSingapore2906-27-2011183000
Michael SilvaMarketing DesignerLondon6611-27-2012198500
Michelle HouseIntegration SpecialistSidney3706-02-201195400
Olivia LiangSupport EngineerSingapore6402-03-2011234500
Paul ByrdChief Financial Officer (CFO)New York6406-09-2010725000
Prescott BartlettTechnical AuthorLondon2705-07-2011145000
Quinn FlynnSupport LeadEdinburgh2203-03-2013342000
Rhona DavidsonIntegration SpecialistTokyo5510-14-2010327900
Sakura YamamotoSupport EngineerTokyo3708-19-2009139575
Serge BaldwinData CoordinatorSingapore6404-09-2012138575
Shad DeckerRegional DirectorEdinburgh5111-13-2008183000
Shou ItouRegional MarketingTokyo2008-14-2011163000
Sonya FrostSoftware EngineerEdinburgh2312-13-2008103600
Suki BurksDeveloperLondon5310-22-2009114500
Tatyana FitzpatrickRegional DirectorLondon1903-17-2010385750
Thor WaltonDeveloperNew York6108-11-201398540
Tiger NixonSystem ArchitectEdinburgh6104-25-2011320800
Timothy MooneyOffice ManagerLondon3712-11-2008136200
Unity ButlerMarketing DesignerSan Francisco4712-09-200992000
Vivian HarrellFinancial ControllerSan Francisco6202-14-2009452500
Yuri BerryChief Marketing Officer (CMO)New York4006-25-2009675000
Zenaida FrankSoftware EngineerNew York6301-04-2010125250
Zorita SerranoSoftware EngineerSan Francisco5606-01-2012115000

This table has been intentionally placed into a column that is not wide enough to accommodate the full width (all columns) of the table.

The FooTable script will “collapse” columns of your choice, whenever certain table widths are detected, but you are required to manually define those columns in the element settings, as the script will otherwise not know which columns have priority over others.

You are also able to always collapse certain columns, no matter the actual table width.

Whenever the table includes collapsed columns, a “+” icon in the first column will be shown as indicator, and clicking anywhere on the row will toggle (show/hide) the collapsed columns as “subtable” right below the row.

line-banner-19