Floating Table Headers in Mаgentо Administration Panel

June 9, 2014 Andrew Matskevich Magento
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:

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.

github-logo1

Download the module from GitHub



Post a new comment

top