Default datatable
First Name | Last Name | Email |
---|---|---|
Tobie | Vint | tvint0@fotki.com |
Zacharias | Cerman | zcerman1@sciencedirect.com |
Gérianna | Bunn | gbunn2@foxnews.com |
Bee | Saurin | bsaurin3@live.com |
Méyère | Granulette | mgranul4@yellowbook.com |
Frederich | Benley | fbenley5@ameblo.jp |
Becki | Criag | bcriag6@washingtonpost.com |
Nichols | Risom | nrisom7@google.com.br |
Ron | Menendes | rmenendes8@prnewswire.com |
Thane | Gammill | tgammill9@com.com |
Code
To display row count, global search, pagination and rows per page components, <Datatable>
is set with the basic
property.
<script lang="ts">
import { TableHandler, Datatable, ThSort, ThFilter } from '@vincjo/datatables'
import { data } from 'somewhere'
const table = new TableHandler(data, { rowsPerPage: 10 })
</script>
<Datatable basic {table}>
<table>
<thead>
<tr>
<ThSort {table} field="first_name">First Name</ThSort>
<ThSort {table} field="last_name">Last Name</ThSort>
<ThSort {table} field="email">Email</ThSort>
</tr>
<tr>
<ThFilter {table} field="first_name"/>
<ThFilter {table} field="last_name" />
<ThFilter {table} field="email"/>
</tr>
</thead>
<tbody>
{#each table.rows as row}
<tr>
<td>{row.first_name}</td>
<td>{row.last_name}</td>
<td>{row.email}</td>
</tr>
{/each}
</tbody>
</table>
</Datatable>
Data
const data = [
{ id: 1, first_name: 'Tobie', last_name: 'Vint', email: 'tvint0@fotki.com' },
{ id: 2, first_name: 'Zacharias', last_name: 'Cerman', email: 'zcerman1@sciencedirect.com' },
{ id: 3, first_name: 'Gérianna', last_name: 'Bunn', email: 'gbunn2@foxnews.com' },
{ id: 4, first_name: 'Bee', last_name: 'Saurin', email: 'bsaurin3@live.com' },
...
]