Build a datatable component, step by step.

Rows per page

To the right of the search bar, we will add a control to set the number of rows displayed in the table

We create a RowsPerPage.svelte component. Then we add it into the header element in Main.svelte.

We will see later how to manage the pagination.

Code
Result
Data

<script>
    import { DataHandler }  from '@vincjo/datatables'
    import Th               from '../Th.svelte'
    import ThFilter         from '../ThFilter.svelte'
    import Search           from '../Search.svelte'
    import RowsPerPage      from '../RowsPerPage.svelte'
    import data             from '$site/data/data'

    const handler = new DataHandler(data, { rowsPerPage: 10 })
    const rows = handler.getRows()
</script>

<header>
    <Search {handler} />
    <RowsPerPage {handler} />
</header>

<table>
    <thead>
        <tr>
            <Th {handler} orderBy="first_name">First name</Th>
            <Th {handler} orderBy="last_name">Last name</Th>
            <Th {handler} orderBy="email">Email</Th>
        </tr>
        <tr>
            <ThFilter {handler} filterBy="first_name" />
            <ThFilter {handler} filterBy="last_name" />
            <ThFilter {handler} filterBy="email" />
        </tr>
    </thead>
    <tbody>
        {#each $rows as row}
            <tr>
                <td>{row.first_name}</td>
                <td>{row.last_name}</td>
                <td>{row.email}</td>
            </tr>
        {/each}
    </tbody>
</table>

<style>
    header {
        height: 48px;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    table {
        text-align: left;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }
    td {
        padding: 4px 20px;
        border-bottom: 1px solid #eee;
    }
</style>