How to use VDataTable?

[linuxing3]

In VDataTable, how to show data in table body with slots? Any examples?

            <VDataTable items={mockItems} headers={mockHeaders}>
              <tr slot={"mockHeaders"} scopedSlots={{ props: (props)=> ... }} >
              </tr>
            </VDataTable>

How the slots works?
Thanks!

[Shinigami92]

After a little bit of trying... I got something to work

<VDataTable headers={this.headers} items={this.items} class="elevation-1"
  scopedSlots={{
    items: (props: { item: MyTest }) => (
      <tr>
        <td>{props.item.id}</td>
        <td>{props.item.name}</td>
      </tr>
    )
  }}
/>

With this, I have full typescript power over my item.id and item.name.

But currently scopedSlots is underlined and says that headerCell, headers and pageText are missing. But I already have defined them in <VDataTable headers={this.headers}.... It is working... So I think headerCell, headers and pageText should be optional instead of required.

[Shinigami92]

I got Pagination worked in this way:

// ...
pagination={this.pagination}
on={{
  'update:pagination': (pagination: VDataTablePagination): void => {
    this.pagination = pagination;
  }
}}
// ...

This is equivalent to :pagination.sync

(VDataTablePagination are my own definition)

[Shinigami92]

I created an example of VDataTable: https://github.com/Shinigami92/vuetify-tsx/blob/example/data-tabe/src/examples/tables/DataTableExample1.tsx
But it is broken and shows no items :/

Console says:

Error in render: "ReferenceError: h is not defined"
vue.runtime.esm.js?2b0e:1888 ReferenceError: h is not defined

[Shinigami92]

Now that we have an example, I think we can close this Issue 👍