...">
Clever Geek Handbook

YII2 add colspan on gridview header

How to add colspan

to header in gridview?

Usually the title looks like this:

<table class="table">
        <thead>
            <tr>
              <th>Header1</th>
              <th>Header2</th>
              <th>Header3</th>
              <th>Header4</th>
              <th>HeaderA1</th>
              <th>HeaderA2</th>
              <th>HeaderA3</th>
              <th>HeaderB1</th>
              <th>HeaderB2</th>
              <th>HeaderB3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>body1</td>
                <td>body2</td>
                <td>body3</td>
                <td>body4</td>
                <td>body5</td>
                <td>body6</td>
                <td>body7</td>
                <td>body8</td>
                <td>body9</td>
                <td>body10</td>
            </tr>
        </tbody>
    </table>

enter image description here

I want to make it look like ...

<table class="table">
        <thead>
            <tr>
              <th rowspan=2>Header1</th>
              <th rowspan=2>Header2</th>
              <th rowspan=2>Header3</th>
              <th rowspan=2>Header4</th>
                <th colspan=3>Header A</th>
                <th colspan=3>Header B</th>
            </tr>
            <tr>

              <th>A1</th>
              <th>A2</th>
              <th>A3</th>
              <th>B1</th>
              <th>B2</th>
              <th>B3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>body1</td>
                <td>body2</td>
                <td>body3</td>
                <td>body4</td>
                <td>body5</td>
                <td>body6</td>
                <td>body7</td>
                <td>body8</td>
                <td>body9</td>
                <td>body10</td>
            </tr>
        </tbody>
    </table>

enter image description here

+3


source to share


2 answers


This is not possible without extending and rewriting the grid view widget. Have a look at Kartik GridView . If you look at the demo , you can see that it has the required functionality.



+3


source


To add colspan

to the table header, you have to insert an attribute colspan

on the headerOptions

columns:

'headerOptions' => [
    'colspan' => '2',
]


For the next column, you must hide the header:

'headerOptions' => [
    'style' => 'display: none;',
]
+1


source






More articles:


All Articles