Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`<b-table>`: allow full custom footer via slot #3960

Closed
mysuf opened this issue Aug 28, 2019 · 16 comments · Fixed by #4027 · May be fixed by thislooksfun/earthdawn#37

Comments

@mysuf
Copy link

commented Aug 28, 2019

Atm, there is no example how to solve custom footer on table with provider func.

I have multiple kinds of results(sums) that I want to place to footer and I dont know how. Basically I want to append multiple custom rows (colspan/rowspan option).

Describe the solution you'd like

If I understand properly, only foot-clone activates footer and FOOT[whatever] rewrites it. Provider generates sortable header and data in tbody, but footer is untouched. Why not to allow simply b-tfoot also in provider's table (without foot-clone prop)? It resolves all issues around custom footer cells and rows. Now this tag is ignored. b-tfoot should be visible in stacked mode because it lacks header functionality.

Describe alternatives you've considered

I tried FOOT[] and bottom-row slots so far, but it resolves only one row of footer

Additional context

Also when stacked="md" (or any breakpoint) is set, newer version (>25) hides header on all resolutions so I am not able to upgrade. Probably a bug?

Thanks

@jackmu95 jackmu95 changed the title b-table custom footer with provider resource <b-table>: Custom footer with provider resource Sep 3, 2019

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

For a custom footer (other than the FOOT slots, you can use a bottom-row slot, which you can place TH or TD cells in).

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

Also not sure what you mean by provider generates sortable header? b-table generates the header, based on the fields in the data.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

Regarding the stacked header bug, it has been fixed in the dev branch and will be available in the v2.0.0 stable release.

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

@tmorehouse: For a custom footer (other than the FOOT slots, you can use a bottom-row slot, which you can place TH or TD cells in).

Quotes from request:

... Basically I want to append multiple custom rows ..

I tried FOOT[] and bottom-row slots so far, but it resolves only one row of footer

I tried multiple bottom-rows, but it renders only one.

@tmorehouse: Also not sure what you mean by provider generates sortable header? b-table generates the header, based on the fields in the data.

I mean that foot-clone clones header to footer which can be sortable.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

Have you tries <b-table-simple> which lets you build the table as you like?

You can disable sorting on the footer cells via the no-footer-sorting prop

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

I saw simple and lite versions in doc, but I dont think that it fits my needs(unless it works with provider). I need generated thead/tbody. Only tfoot(or appended tbody rows) custom. foot-clone lacks custom formating. No colspan/rowspan. I have table with sortable header, generated with tbody from provider func. All I need is few custom rows, lets say: Total sum price, Provision percentage and Price to pay (colspan until last col where price is)

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

b-table-simple doesn't do any state/item management (and no providers), but you can basically call your api to generate the table data and use v-for loops to generate the rows. Provider support in b-table is basically there as a convenience to trigger loading the api call when some value (such as sorting/filtering) changes.

I think <b-table-simple> is your best bet for complete customization of the table layout.

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

Ok. There is no paging. Is there way how to make that v-for solution sortable? I feel that it ends by huge component that will provide same functionality as your b-table...

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

You would need to implement your own sorting. You could use the aria-sort* attributes to enable the sorting styles/icons, and place click handlers on the header cells

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

b-table is massively huge because of all the features stuffed into it (too many features). we want to avoid making it even larger with new niche needed features. Which is why we introduced b-table-lite and b-table-simple

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

I thought that allowing b-tfoot (which you already supports in b-simple) in b-table wouldnt be huge change.. Thanks anyway. Feel freee to close it.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

Only one <tfoot> element can be placed in a <table>. Mulltiple <tfoot> prove to make semantic association for screen readers difficult.

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

Yea. But I dont have any tfoot when there is no foot-clone. That was the point. Either foot-clone or custom b-tfoot. Choosing up to developer.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

I think what is confusing, is that you keep mentioning provider in your original issue, which (to me) refers to items provider functions. Your feature request doesn't really have anything to do directly with items provider functions then. It is really "allow complete table footer customization with a new slot"

@mysuf

This comment has been minimized.

Copy link
Author

commented Sep 5, 2019

Maybe I described it wrong. Sorry for that. Im relatively new to Vue.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

We possibly could add in the ability to have a tfoot slot, which renders the contents of the slot inside a <b-tfoot> element (user would be required to provide their own <b-tr> and <b-th> markup). If the foot-clone prop was set, then the tfoot slot would be ignored.

It would have to wait until after v2.0.0 is released (just getting ready to release it shortly)

@tmorehouse tmorehouse changed the title <b-table>: Custom footer with provider resource `<b-table>`: allow full custom footer via slot Sep 5, 2019

tmorehouse added a commit that referenced this issue Sep 5, 2019
feat(b-table, b-table-lite): add new scoped slot `custom-foot` to all…
…ow user to create their own table footer (closes #3960) (#4027)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.