Vuetify Align footer columns with table columns in data table

1
votes

I have a datatable (vuetify 2.1.12) with slot="items" and slot="footer". In the footer I wan't to display the sum of some of the columns. The "problem" is that the columns in the footer are not at all in line with the columns in the table.

basically I do this in the data table:

             <template v-slot:item="props">
                <tr>
                  <td>{{ props.item.qty }}</td>
                  <td>{{ props.item.qtyBoughtToday }}</td>
                  <td>{{ props.item.shortName }}</td>
                </tr>
              </template>
              <template slot="footer">
                <tr>
                  <td></td>
                  <td>{{ sumQtyBoughtToday }}</td>
                  <td></td>
                </tr>
             </template>

The thing is that the footer column "sumQtyBoughtToday" does not end up in the same place at all as the column props.item.qtyBoughtToday.

So...how to accomplish it?

1
vue.jsdatatablevuetify.jsfooter

1 Answers

0
votes

I think you're looking for the body.append slot instead of the footer...

 <template slot="body.append">
      <tr>
          <td></td>
          <td>{{ sumQtyBoughtToday }}</td>
          <td></td>
      </tr>
 </template>

Example: https://codeply.com/p/kIlxX2jTZ1