Build a datatable component, step by step.

HTML Table + data

To start we have a bit of data and we want to display it in an HTML table.

Code
Result
Data

<script>
    import { DataHandler }  from '@vincjo/datatables'
    import data             from '$site/data/data'

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

<table>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
        </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>
    table {
        text-align: left;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }
    td, th {
        padding: 4px 20px;
        border-bottom: 1px solid #eee;
    }
</style>