Description
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によりメッセージを生成しています。
Activity
forno commentedon Nov 24, 2023
I would also like to note that the inability to set a caption is another point of concern.
huongphamx commentedon Nov 25, 2023
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 commentedon Nov 25, 2023
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:
tfoot
,tr
, andtd
elements, aligning with standard HTML table practices.rows
, potentially namedfoots
orrow-foots
.rows
columns
configuration. This means that the footer's layout and the number of columns should correspond to the main table structure.sort
functionality of the table.<column>-data
slot to differentiate betweentbody
(normal data) andtfoot
(footer data), or to create a separate<column>-footer
slot.<column>-data
slot, which would help in determining whether the content is fortbody
ortfoot
. 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 commentedon Nov 25, 2023
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:
This code example demonstrates how the
foots
orrow-foots
prop could be structured and used in conjunction with the existingrows
andcolumns
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 commentedon Apr 23, 2024
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 commentedon Jan 5, 2025
Might this be something for v3 that uses TanStack Table @benjamincanac ?
footer
support to display column summary #4194gigor commentedon May 20, 2025
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