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.

Sign up for GitHub

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

Jump to bottom

Add an optional "header-static" slot to replace the DataTable's heade… #242

Merged
merged 3 commits into from
Mar 9, 2023
Merged

Add an optional "header-static" slot to replace the DataTable's heade… #242

merged 3 commits into from
Mar 9, 2023

Conversation

yamachan
Copy link
Contributor

@yamachan yamachan commented Mar 6, 2023

…r with static thead tag content.

Type

  • Fix
  • Feature

Checklist

  • Title as described
  • Add unit test by vitest if necessary

Details

I use vue3-easy-data-table conveniently. Thanks for making it public.

I'm currently using Vue3 to create a table with a complex structured header containing colspan etc. Luckily this header is static, so let me suggest adding a header-static slot feature that simply replaces the DataTable's header.

As a child element of DataTable, a typical usage would be:

<template #header-static>
   <thead>
     <tr><th colspan="3">A big label</th></tr>
     <tr><th>A</th><th>B</th><th>C</th></tr>
   </thead>
</template>

p.s. I'd also like to suggest header-prepend and header-append slot to coexist with existing headers, but that's for another time.

@yamachan
Copy link
Contributor Author

yamachan commented Mar 6, 2023 •
edited
Loading

Ah, since body.append already exists, header.static might be better for the slot name. (I'll leave it to you)

@mrhammadasif
Copy link
Contributor

@yamachan Wouldn't that break the semantics (replacing the thead, th, td, col)?

I mean is there any example of using this slot ?

@mrhammadasif
Copy link
Contributor

Also, doesn't using #header="header" slot fixes your use case?

@yamachan
Copy link
Contributor Author

yamachan commented Mar 9, 2023

@mrhammadasif Thank you for your attension.
I had tried to use #header="header" slot for my purpose, but it wasn't hit.

I pushed another branch to show what I want;
https://github.com/yamachan/vue3-easy-data-table/blob/feature/static-table-header-sample/src/modes/Client.vue#L55-L73

And please refer the following screenshot - It has the 2 line header with colspan and rowspan attributes;
a-sample-of-header-static-slot.png

@HC200ok
Copy link
Owner

HC200ok commented Mar 9, 2023

@yamachan What about naming it customize-header?

@yamachan
Copy link
Contributor Author

yamachan commented Mar 9, 2023

@HC200ok -san, 'customize-header' looks better! I had updated this MR. :-)

@HC200ok HC200ok merged commit 71983c9 into HC200ok:main Mar 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@HC200ok HC200ok HC200ok approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@yamachan @mrhammadasif @HC200ok