Aggregated headers and columns in Slick Grid

Question

I wanted to implement something like Sencha Aggregation Grid in SlickGrid. I have a very bad workaround for it,

 var columns = [
      name:getAggregatedName(),  field: 'save', width:160, formatter: customFormatter}
 ];

function customFormatter(){

    var text = '<div> <span style ="float:left"> Value1 </span> <span style ="float:right"> Value2 </span> </div>';
    return text;                
}
function getAggregatedName(){
    var html ="<div style=\"text-align: center;border-bottom: 1px solid red;\"> <span> Action </span> </div> <span style =\"float:left\"> Action1</span><span style =\"float:right\"> Action2</span>";
    return html;
} 

Its not appropriate, Its neither extensible, nor it wil give correct formatting.

For diaplaying it properly, i had to change the height of header row in the slick.grid.js file which is again wrong way.

Is there any proper way of doing it? All ideas are welcomed

Thanks

Edit

Here is the snapshot of what i want.

Answer 1

Ah you mean merging cells together... That was implemented with the naming "colspan", meaning column spanning. Here is the example

If that does not give you what you want, you could also use the first row (Top Panel row) to display whatever you wish to display. Take a look at this example, then click on the loupe icon (magnifying glass) on top right, you will see the top panel showing up and customized customize for that page only. If you decide to go with the Top Panel, you can use it as follow (basically took it from the example code)

html code

<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
    Show tasks with title including <input type="text" id="txtSearch2">
    and % at least &nbsp;
    <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>

then use it your grid definition

var options = {
    editable: true,
    ...
    topPanelHeight: 25,
    showTopPanel: true
};

dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);

// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
    .appendTo(grid.getTopPanel())
    .show();

Edit #2
Alternatively, I also found this fork in which this person made a really nice colspan and rowspan. This is actually probably better than all the others...
GerHobbelt Fork
Download the code, then run the example named example-row-span-many-columns.html and see the first and second row, which are merged header cells