Get Free Audit

Floating Table Headers in Mаgentо Administration Panel

Jun 9, 2014

543 Andrew Matskevich

Floating Table Headers in Mаgentо Administration Panel

When scrolling pages down, Mаgentо adds a line at the top of the page:

Floating Table Headers in Mаgentо Administration Panel

It would be pretty cool if it added table headers as well:

Floating Table Headers in Mаgentо Administration Panel

It is possible to implement this by adding the JavaScript file header.js to Magento admin panel. Copy this file to the server into the category DOCUMENT_ROOT/js/belvg/grid/header.js.

You can use several ways to add JavaScript to the admin panel:

1. Using layout. Create the file /app/design/adminhtml/default/default/layout/local.xml

If you want to add headers only for the categories table, then instead of:

You should use:

2. Using оbserver. Most of tables in Magento are output when the url ends with /index/ (action = index). If you do not want to add the script to the pages that do not contain tables (pages with forms etc.), you can add it via оbserver. I created the module Belvg_FloatGridHeader and added the following:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

The class Belvg_FloatGridHeader_Model_Observer:

But do we really need all that elements at the top? How to change elements in the headers?

The header appears to be pretty large, it contains navigation elements, search buttons, elements to change several lines, titles and filters.  Perhaps we do not need so many of them. Because if we have a small screen (laptop screen), the header will take almost one-third of the screen space. So, you can remove some of the elements. To do this you have to create and connect the CSS file/skin/аdminhtml/default/default/belvg/grid/header.css with the following content.

Next you need to connect it. Let’s go back to the file layout app/design/adminhtml/default/default/layout/local.xml and add the line which is provided in bold type below:

Now only column headers remained.


Download the module from GitHub

Magento Development

Take your online store to the next level with BelVG Magento Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *