Demonstration examples and scenarios for Grouping data using \kartik\grid\GridView. Note that the GridView pjax property has been enabled (set to true) for all the demo examples.
\kartik\grid\ namespace.Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
Example showing the grouping of grid data for a single column that is pre-sorted. Note that the extension can group columns, irrespective of the position of the column in the grid (second column in this example). This example also demonstrates grouping on a related field from another table. It also includes an advanced scenario of using \kartik\grid\FormulaColumn to calculate the Amount value.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => true,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category']
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
An example extending example # 1 with grouping by multiple columns (second and third columns) that are sorted. The third column has been setup as a sub group of second column (thereby rendering a nested grouping). Note that subGroupOf property is necessary within the child column for this to be meaningful and effective.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => true,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
Variation of example # 2, that shows grouping of parent column data as a separate grouped header row.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => true,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping,
'groupedRow' => true, // move grouped column to a single grouped row
'groupOddCssClass' => 'kv-grouped-row', // configure odd group cell css class
'groupEvenCssClass' => 'kv-grouped-row', // configure even group cell css class
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
Enhancement of example # 2 with group summaries in the form of an additional group-wise footer. Note that group footer is set as a Closure in this example to show how one can derive values in the summary dynamically. This also includes automatic summarizing of number fields across both the groups. The Unit Price is averaged using GridView::F_AVG setting and Quantity and Amount (a formula column) are summed using GridView::F_SUM setting. This example also demonstrates an ability to to format summary number data at runtime and also merge columns in the group footer.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => false,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[1,3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
1 => 'Summary (' . $model->supplier->company_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
1 => ['style' => 'font-variant:small-caps'],
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'info table-info','style' => 'font-weight:bold;']
];
}
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group,
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[2, 3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
2 => 'Summary (' . $model->category->category_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'success table-success','style' => 'font-weight:bold;']
];
},
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
Variation of example # 4 to setup the summary as a group header instead of group footer.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => false,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping
'groupHeader' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[1,3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
1 => 'Summary (' . $model->supplier->company_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
1 => ['style' => 'font-variant:small-caps'],
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'info table-info','style' => 'font-weight:bold;']
];
}
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group,
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[2, 3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
2 => 'Summary (' . $model->category->category_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'success table-success','style' => 'font-weight:bold;']
];
},
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
An example combining example # 3 (grouped row header) with example # 4 (group footer). Note that you must carefully set mergeColumns setting in groupFooter or groupHeader for such a scenario (or skip this setting if not needed). In this case when you set groupedRow to true, a complete grid column will be removed and displayed as a group row. Hence the column indices in the group columns MUST NOT start with the removed column. If you are not clear, you may skip setting mergeColumns to ensure the markup is not broken, and work out from there which columns can be merged.
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => false,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping,
'groupedRow' => true, // move grouped column to a single grouped row
'groupOddCssClass' => 'kv-grouped-row', // configure odd group cell css class
'groupEvenCssClass' => 'kv-grouped-row', // configure even group cell css class
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[0,2]], // columns to merge in summary
'content' => [ // content to show in each summary cell
0 => 'Summary (' . $model->supplier->company_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
0 => ['style' => 'font-variant:small-caps'],
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'info table-info','style' => 'font-weight:bold;']
];
}
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group,
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[2, 3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
2 => 'Summary (' . $model->category->category_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'success table-success','style' => 'font-weight:bold;']
];
},
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
An example of a multi level grouping with group footer summary. This example uses as a variation an ArrayDataProvider instead of ActiveDataProvider. The extension always assumes the first column as a non-grouped column. This example shows how you can still display the first column as grouped. To do that just setup a hidden dummy column like the SerialColumn with hidden property set to true.
use yii\data\ArrayDataProvider;
use kartik\grid\GridView;
// An Array Data Provider
$dataProvider = new ArrayDataProvider(['allModels' => [
['id' => 1, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-1', 'region' => 'IT-5', 'amount' => 1400],
['id' => 2, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-1', 'region' => 'IT-5', 'amount' => 1300],
['id' => 3, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-1', 'region' => 'IT-6', 'amount' => 2400],
['id' => 4, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-1', 'region' => 'IT-6', 'amount' => 4900],
['id' => 5, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-2', 'region' => 'IT-7', 'amount' => 7340],
['id' => 6, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-2', 'region' => 'IT-7', 'amount' => 4560],
['id' => 7, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-2', 'region' => 'IT-8', 'amount' => 3550],
['id' => 8, 'year' => 2017, 'month' => 'JAN', 'cat' => 'CAT-2', 'region' => 'IT-8', 'amount' => 9450],
['id' => 9, 'year' => 2017, 'month' => 'FEB', 'cat' => 'CAT-2', 'region' => 'IT-6', 'amount' => 3900],
['id' => 10, 'year' => 2017, 'month' => 'FEB', 'cat' => 'CAT-2', 'region' => 'IT-6', 'amount' => 52200],
['id' => 11, 'year' => 2018, 'month' => 'JAN', 'cat' => 'CAT-3', 'region' => 'IT-5', 'amount' => 4700],
['id' => 12, 'year' => 2018, 'month' => 'JAN', 'cat' => 'CAT-3', 'region' => 'IT-5', 'amount' => 11900],
]]);
// Group Footer Settings
$gfYear = function ($model, $key, $index, $widget) {
return [
'mergeColumns' => [[1, 5]],
'content' => [ // content to show in each summary cell
1 => 'Year Total (' . $model['year'] . ')',
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
6 => ['class' => 'text-right text-end'],
],
'options' => ['class' => 'active table-active h6']
];
};
$gfMonth = function ($model, $key, $index, $widget) {
return [
'mergeColumns' => [[2, 5]],
'content' => [ // content to show in each summary cell
2 => "Month Total ({$model['month']}→{$model['year']})",
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
6 => ['class' => 'text-right text-end'],
],
'options' => ['class' => 'success table-success h6']
];
};
$gfCategory = function ($model, $key, $index, $widget) {
return [
'mergeColumns' => [[3, 5]],
'content' => [ // content to show in each summary cell
3 => "Category Total ({$model['cat']}→{$model['month']}→{$model['year']})",
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
6 => ['class' => 'text-right text-end'],
],
'options' => ['class' => 'danger table-danger h6'],
];
};
$gfRegion = function ($model, $key, $index, $widget) {
return [
'mergeColumns' => [[4, 5]],
'content' => [ // content to show in each summary cell
4 => "Region Total ({$model['region']}→{$model['cat']}→{$model['month']}→{$model['year']})",
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
6 => ['class' => 'text-right text-end'],
],
'options' => ['class' => 'info table-info h6']
];
};
// The GridView widget (multi level grouped)
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => null,
'showPageSummary' => true,
'pjax' => true,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
// note that you MUST NOT have the first column as a grid group
// to achieve that add a dummy hidden column like shown below
['class' => 'kartik\grid\SerialColumn', 'hidden' => true],
['attribute' => 'year', 'group' => true, 'groupFooter' => $gfYear, 'pageSummary' => 'Page Summary'],
['attribute' => 'month', 'group' => true, 'subGroupOf' => 1, 'groupFooter' => $gfMonth],
['attribute' => 'cat', 'group' => true, 'subGroupOf' => 2, 'groupFooter' => $gfCategory],
['attribute' => 'region', 'group' => true, 'subGroupOf' => 3, 'groupFooter' => $gfRegion],
['attribute' => 'id', 'label' => 'ID', 'hAlign' => 'center', 'width' => '150px'],
['attribute' => 'amount', 'label' => 'Amount ($)', 'format' => ['decimal', 2], 'hAlign' => 'right', 'width' => '150px', 'pageSummary' => true],
],
]);
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.