too long

I have an array as my dataProvider ( I have set up the custom filter method too ) and it looks and works just fine:

but now, for responsive purposes, I need to remove filters on small devices, which I have accomplish like this:

, 'htmlOptions' => array( 'class' => 'hidden-sm hidden-xs hidden-md' )
, 'headerHtmlOptions' => array( 'class' => 'hidden-sm hidden-xs hidden-md' )
, 'filterHtmlOptions' => array( 'class' => 'hidden-sm hidden-xs hidden-md' )

and add sorting buttons, like these:

How do I add the sort option with a custom sort image?

I can post the full GridView code, but it is a bit long ( hence the custom columns )

UPDATE

That's how my dataProvider last script looks like:

if ( isset( $_REQUEST['FiltersForm'] ) )
    $filtersForm->filters = $_REQUEST['FiltersForm'];

# Get rawData and create dataProvider
$filteredData = $filtersForm->filter( $model->results['company'] );
$dataProvider = new CArrayDataProvider( $filteredData );

# Render
$this->render( 'results', array(
    'filtersForm' => $filtersForm,
    'dataProvider' => $dataProvider,
    'model' => $model
) );

You can use Csort.

In controller setup Dataprovider using Csort, Example

public function actionIndex(){
  $sort = new CSort();
  $sort->attributes = array(
    'customer'=>array(
    'asc'=>'customer.customer_name',
    'desc'=>'customer.customer_name desc',
  ),

  'school'=>array(
    'asc'=>'school.school_name',
    'desc'=>'school.school_name desc',
  ),
    'submitted_date',
    'requested_date',
 );

  $dataProvider=new CActiveDataProvider('Printjob', array(
   'criteria'=>array(
   'alias'=>'pj',
   'join'=>'inner join customer on customer.customer_id=pj.customer_id inner join school on school.school_id=pj.school_id',
),
'sort'=>$sort,
'pagination'=>array(
  'pageSize'=>self::PAGE_SIZE,
),
));
$this->render('index',array('dataProvider'=>$dataProvider));