Feature request: Table Render for Vue

[retronew]

Is your feature request related to a problem? Please describe.
I'm always frustrated when I need to display tabular data in a Vue component and there is no built-in support for a table mode. Instead, the component always outputs a <div> tag, which is not suitable for organizing and presenting tabular data effectively.

Describe the solution you'd like
I would like the component to have native support for a table render in Vue.

Additional context
Supporting dynamic HTML tags would enhance the component's versatility and compatibility, simplifying integration into Vue applications and improving the development experience.

[inokawa]

#430 is an issue to implement a prop to override the div of items (PR welcome).

However, although React virtualizer already have the prop, it wasn't good for table virtualization in some situations (#312).
So we are planning to create table virtualizer component for React. I'll also implement it for Vue!

[onx2]

You can display tabular data with divs pretty effectively with display: grid; You could try that approach while this feature isn't in 😄

For example:

<div class="grid-table">
    <div class="grid-header">
      <div class="grid-cell">Header 1</div>
      <div class="grid-cell">Header 2</div>
      <div class="grid-cell">Header 3</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">Row 1, Cell 1</div>
      <div class="grid-cell">Row 1, Cell 2</div>
      <div class="grid-cell">Row 1, Cell 3</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">Row 2, Cell 1</div>
      <div class="grid-cell">Row 2, Cell 2</div>
      <div class="grid-cell">Row 2, Cell 3</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">Row 3, Cell 1</div>
      <div class="grid-cell">Row 3, Cell 2</div>
      <div class="grid-cell">Row 3, Cell 3</div>
    </div>
  </div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns with equal width */
  gap: 1px; /* Gap between cells */
  background-color: #ccc; /* Background color for the gaps */
}

.grid-header {
  display: contents; /* Use contents to make sure the header cells align with the grid */
}

.grid-row {
  display: contents; /* Use contents to make sure the row cells align with the grid */
}

.grid-cell {
  padding: 10px;
  border: 1px solid #ccc;
}

This is a contrived example, but I just wanted to show how it is possible to use div instead of table - hope it helps!

[onx2]

I just tested making a table in solid and I see what you mean with it being difficult. With the current approach, the component wraps everything in div and isn't able to be styled easily. Would love to see some more flexibility as well 😄

[inokawa]

From 0.33.2, you can implement table virtualization with virtua, similar to React or Solid adapter. So close this issue but any feedback is welcome.
https://github.com/inokawa/virtua/blob/main/stories/vue/TableElement.vue

And in the future, a component like VTable may be implemented in #312 for easier integration.