Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

Note

This is a demo of the advanced kartik\grid\GridView widget and its columns. PJAX update of grid is enabled for this demo. You can configure the appearance and behavior of the widget. View this complete web tip on how to setup your model, controller, and view with GridView Editable columns to manipulate records. You can check the grid configuration code below as well as click

to view the column configuration code.

Looking for grid grouping demos? Click here

Showing 1-10 of 20 items.

Library

* Resize table columns just like a spreadsheet by dragging the column edges.
 
NameColorAuthorPublish DateBuy AmountSell AmountBuy + Sell
(BS)
Buy %
(100 * B/BS)
StatusActions
 
1
   blueF. Scott Fitzgerald
134.99343.9960.76
2
   redJohn Steinbeck
105.50139.5024.37
3
   orangeGeorge Orwell
78.50167.5053.13
4
Ulysses   greenJames Joyce
79.0058.50137.5057.45
5
   pinkVladimir Nabokov
95.50207.5053.98
6
   cyanJoseph Heller
105.50222.5052.58
7
   redJ. D. Salinger
105.50220.5052.15
8
Beloved   greenToni Morrison
150.00134.99284.9952.63
9
   brownWilliam Faulkner
105.50231.5054.43
10
To Kill a Mockingbird    orangeHarper Lee
89.0078.50167.5053.13
   Total   1,120.001,002.982,122.9851.46   
* The page summary displays SUM for first 3 amount columns and AVG for the last.

Configure GridView

 
Table Setting
Panel Setting  

 

           
Panel Content
 

The GridView Configuration
echo GridView::widget([
    'id' => 'kv-grid-demo',
    'dataProvider'=>$dataProvider,
    'filterModel'=>$searchModel,
    'columns'=>$gridColumns,
    'containerOptions'=>['style'=>'overflow: auto'], // only set when $responsive = false
    'headerRowOptions'=>['class'=>'kartik-sheet-style'],
    'filterRowOptions'=>['class'=>'kartik-sheet-style'],
    'pjax'=>true, // pjax is set to always true for this demo
    // set your toolbar
    'toolbar'=> [
        ['content'=>
            Html::button('<i class="glyphicon glyphicon-plus"></i>', ['type'=>'button', 'title'=>Yii::t('kvgrid', 'Add Book'), 'class'=>'btn btn-success', 'onclick'=>'alert("This will launch the book creation form.\n\nDisabled for this demo!");']) . ' '.
            Html::a('<i class="glyphicon glyphicon-repeat"></i>', ['grid-demo'], ['data-pjax'=>0, 'class'=>'btn btn-default', 'title'=>Yii::t('kvgrid', 'Reset Grid')])
        ],
        '{export}',
        '{toggleData}',
    ]
    // set export properties
    'export'=>[
        'fontAwesome'=>true
    ],
    // parameters from the demo form
    'bordered'=>$bordered,
    'striped'=>$striped,
    'condensed'=>$condensed,
    'responsive'=>$responsive,
    'hover'=>$hover,
    'showPageSummary'=>$pageSummary,
    'panel'=>[
        'type'=>GridView::TYPE_PRIMARY,
        'heading'=>$heading,
    ],
    'persistResize'=>false,
    'exportConfig'=>$exportConfig,
]);