How to use VDataTable?
linuxing3 opened this issue · comments
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!
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.
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)
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
Now that we have an example, I think we can close this Issue 👍