feat(table) Adds table footer to display column summary

playground/app/pages/components/table.vue

@@ -211,6 +211,16 @@ const columns: TableColumn<Payment>[] = [{
 }, {
   accessorKey: 'amount',
   header: () => h('div', { class: 'text-right' }, 'Amount'),
+  footer: ({ column }) => {
+    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(total)
+
+    return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
+  },
   cell: ({ row }) => {
     const amount = Number.parseFloat(row.getValue('amount'))
 
@@ -356,6 +366,7 @@ onMounted(() => {
         tr: 'divide-x divide-default'
       }"
       sticky
+      sticky-footer
       class="border border-accented rounded-sm"
       @select="onSelect"
     >

src/runtime/components/Table.vue

@@ -87,6 +87,11 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @defaultValue false
    */
   sticky?: boolean
+  /**
+   * Whether the table should have a sticky footer.
+   * @defaultValue false
+   */
+  stickyFooter?: boolean
   /** Whether the table should be in loading state. */
   loading?: boolean
   /**
@@ -207,11 +212,22 @@ const meta = computed(() => props.meta ?? {})
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })({
   sticky: props.sticky,
+  stickyFooter: props.stickyFooter,
   loading: props.loading,
   loadingColor: props.loadingColor,
   loadingAnimation: props.loadingAnimation
 }))
 
+const hasFooter = computed(() => {
+  const queue: TableColumn<T>[] = [...columns.value]
+  while (queue.length) {
+    const column = queue.shift()!
+    if ('footer' in column) return true
+    if ('columns' in column) queue.push(...column.columns!)
+  }
+  return false
+})
+
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
@@ -229,7 +245,7 @@ const paginationState = defineModel<PaginationState>('pagination', { default: {}
 const tableRef = ref<HTMLTableElement>()
 
 const tableApi = useVueTable({
-  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
+  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'stickyFooter', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
   data,
   columns: columns.value,
   meta: meta.value,
@@ -424,6 +440,28 @@ defineExpose({
           </td>
         </tr>
       </tbody>
+
+      <tfoot v-if="hasFooter" :class="ui.tfoot({ class: [props.ui?.tfoot] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :colspan="header.colSpan > 1 ? header.colSpan : undefined"
+            :class="ui.th({
+              class: [
+                props.ui?.th,
+                typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
+              ],
+              pinned: !!header.column.getIsPinned()
+            })"
+          >
+            <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+      </tfoot>
     </table>
   </Primitive>
 </template>

src/theme/table.ts

@@ -7,6 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     caption: 'sr-only',
     thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)',
     tbody: 'divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary',
+    tfoot: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:top-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented) [&>tr>th]:empty:p-0 [&>tr>th]:empty:border-none',
     tr: 'data-[selected=true]:bg-elevated/50',
     th: 'px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0',
@@ -25,6 +26,11 @@ export default (options: Required<ModuleOptions>) => ({
         thead: 'sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur'
       }
     },
+    stickyFooter: {
+      true: {
+        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur'
+      }
+    },
     loading: {
       true: {
         thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'

test/components/__snapshots__/Table-vue.spec.ts.snap

@@ -49,6 +49,7 @@ exports[`Table > renders with as correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </section>"
 `;
@@ -102,6 +103,7 @@ exports[`Table > renders with caption correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -155,6 +157,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -208,6 +211,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -261,6 +265,7 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -451,6 +456,7 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -504,6 +510,7 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -520,6 +527,7 @@ exports[`Table > renders with empty correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -558,6 +566,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -611,6 +620,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -664,6 +674,7 @@ exports[`Table > renders with header slot correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -717,6 +728,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -770,6 +782,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -823,6 +836,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -876,6 +890,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -929,6 +944,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -982,6 +998,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1035,6 +1052,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1088,6 +1106,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1141,6 +1160,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1194,6 +1214,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1247,6 +1268,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1300,6 +1322,7 @@ exports[`Table > renders with loading correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1338,6 +1361,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
         <td colspan="7" class="py-6 text-center">Loading slot</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1391,6 +1415,7 @@ exports[`Table > renders with sticky correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1444,6 +1469,7 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
       <!--v-if-->
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;
@@ -1460,6 +1486,7 @@ exports[`Table > renders without data correctly 1`] = `
         <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
       </tr>
     </tbody>
+    <!--v-if-->
   </table>
 </div>"
 `;