Add Footer Feature to Table Component

[forno]

Description

Background

The current Table component in Nuxt UI allows for the listing of data but lacks a dedicated area for displaying supplementary information such as summary results. This limitation hinders the ability to present crucial data insights and reports.

Feature Proposal

I propose the addition of a Footer area to the Table component. This Footer should be adjustable based on the columns specification, similar to how rows are handled. It would serve as a space for displaying aggregate results, subtotals, and other important notes related to the data.

Expected Impact

With this feature, the Nuxt UI Table component will become more versatile, offering a more comprehensive set of options for data presentation. Users will be able to glean a more comprehensive understanding of their data by viewing aggregate results and other key information directly within the table.

Additional Considerations

Implementing the Footer must carefully balance design and functionality, as it could impact the existing structure of the Table component. Ensuring compatibility with existing features and maintaining extensibility is also crucial.

Additional context

I am not a native English speaker, so this message was generated with the assistance of ChatGPT.

英語話者ではないため、ChatGPTによりメッセージを生成しています。

[forno]

I would also like to note that the inability to set a caption is another point of concern.

[huongphamx]

I think you can add your own data summary with your own fields, position (above or bellow table), or style quite easily. Do you have any special requirements? Could you provide an example (url, image,...) for reference?

[forno]

Thank you for your response and for considering my feature request. I appreciate the flexibility and customization options you mentioned. To clarify my requirements for the footer feature in the Table component, here they are in more detail:

1. Structure Composition: I envision the footer to be composed of tfoot, tr, and td elements, aligning with standard HTML table practices.
2. Separate Prop for Footer Rows:
   • I believe it is necessary to provide the footer data in a separate prop, similar to rows, potentially named foots or row-foots.
   • I am considering whether to allow multiple footer rows. The advantage of this approach is the ability to display multiple aggregate data points and to adopt a schema completely identical to rows
3. Columns Influence: The footer should be influenced by the columns configuration. This means that the footer's layout and the number of columns should correspond to the main table structure.
4. Fixed Positioning: The footer should always be positioned at the bottom of the table, independent of any sorting applied to the table rows. It should not be affected by the sort functionality of the table.
5. Slot Implementation Dilemma:
   • I am contemplating whether to pass slot props to the <column>-data slot to differentiate between tbody (normal data) and tfoot (footer data), or to create a separate <column>-footer slot.
   • My preference leans towards passing slot props to the <column>-data slot, which would help in determining whether the content is for tbody or tfoot. However, I am still considering an appropriate name for these props.

I believe these features would greatly enhance the functionality and usability of the Table component in Nuxt UI. If you have any suggestions or require further clarification on these points, I am open to discussion.

---

Additionally, I am attaching two images to illustrate the footer's behavior in my proposed implementation. The first image shows the table without sorting, and the second one during sorting. In both cases, the footer remains at the fixed position at the bottom, unaffected by sorting. Please note that the style of the images is tailored to my product, so the visual appearance might differ from the standard Nuxt UI styling. The key point to observe here is the consistent placement of the footer regardless of sorting.

[forno]

Following up on my earlier points, I'd like to provide an example of the envisioned code structure to further clarify my proposal for the footer feature. This code snippet is a rough idea of how I imagine the footer data and its integration with the Table component:

<UTable
  :rows="[{id: 1, name: 'foo', value: 1, noview: 1}, {id: 2, name: 'bar', value: 4, noview: 1}, {id: 3, name: 'biz', value: 2, noview: 2}]"
  :columns="[{key: 'id', label: 'ID', sortable: true}, {key: 'name', label: 'Name'}, {key: 'value', label: 'Value', sortable: true}]"
  :foots="[{id: -1, name: 'total', value: 7, noview: 4}]"
>
  <template #id-data="{ row, isFoot }">
    <div> {{ !isFoot ? row.id : '-' }} </div>
  </template>
</Utable>

This code example demonstrates how the foots or row-foots prop could be structured and used in conjunction with the existing rows and columns configurations. The goal is to maintain a consistent and intuitive API for the Table component, while adding the flexibility and utility of the proposed footer feature.

I'm open to suggestions and further discussions on this approach.

[MickL]

I think a footer would be crucial for the table component. It is not possible to make it just another row because the footer does have different columns, e.g. the footer just has one column that sums the values. A footer can also consist of multiple rows, e.g. think about an invoice that has one footer row sum (net), one row VAT and one row sum (gross)

[MickL]

Might this be something for v3 that uses TanStack Table @benjamincanac ?

[gigor]

In #4194 added support for const columns = [{header: 'header', footer: 'footer'}] based on this example https://tanstack.com/table/v8/docs/framework/vue/examples/basic