Gridview columns and summation data alignment

Yii 1.1 General Discussion
1

We populate a gridview with numerical data derived from an SQL function. The data is US currency values, displayed to two decimal places, right-justified. This data looks good. A second SQL function calculates the sums of this gridview column data. We display the summation values just below the gridview. The issue is that we cannot position these summation values exactly below their respective columns. The vertical alignment may be close at one screen resolution but it will be out of place at another resolution.
There must be some built-in gridview feature that will sum the column values and display the value in the correct position below the gridview? If so, can you point me towards the Yii documentation for that feature? Or if that feature does not exist, how would I go about placing data exactly below a gridview column. We would also like to place numeric values directly above the gridview columns, on top of the gridview frame, that also perfectly align with the column data.

2

Perhaps this?

https://www.yiiframework.com/doc/api/1.1/CGridView#hasFooter-detail

https://www.yiiframework.com/doc/api/1.1/CGridColumn#footerCellContent-detail

3

Thank you for the suggestions. I googled for some of the info you provided. I found this:

As I am not our developer, I will pass all of these links to our guy and see if they can utilize any of it.

4

Yii 1.x CGridView does not have a built-in feature to automatically display column totals (footer sums) aligned under columns. That alignment issue you’re facing is common when people try to place totals outside the grid.

Best solution (recommended)

:heavy_check_mark: Use footer in CGridView columns

Yii already supports a column footer, which stays perfectly aligned with each column.

$this->widget('zii.widgets.grid.CGridView', [
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'name' => 'amount',
            'value' => 'number_format($data->amount, 2)',
            'htmlOptions' => ['style' => 'text-align:right'],
            'footer' => number_format($totalAmount, 2),
            'footerHtmlOptions' => ['style' => 'text-align:right; font-weight:bold'],
        ],
    ],
]);

This is the correct Yii way to keep totals aligned.

:warning: Why your current approach breaks alignment

If you calculate totals separately and display them below the grid:

  • Different screen widths
  • Responsive table scrolling
  • Column resizing
    All break alignment

Because HTML tables don’t “link” external rows to grid columns.

If you need more advanced control

1) Header values (above columns)

You can use:

'header' => 'Amount ($)',
'headerHtmlOptions' => ['style' => 'text-align:right']

2) Sticky header/footer (advanced UI)

If you want Excel-like behavior:

  • Use CSS position: sticky

  • Or use a JS grid plugin like:

    • DataTables

This gives:

  • Fixed header
  • Fixed footer
  • Perfect alignment even on scroll

If you want, I can convert your exact scope into a clean reusable function :+1:
Email: a03003132335@gmail.com
WhatsApp: +923133473749

Just tell me