DataTable

Description

Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the data prop.

• Set the maxRows prop to enable pagination, bind to currentPage to navigate (see second example below)
• Provides sorting for number, string, boolean, and Date
• Strings are sorted using Intl.Collator
• Style or modify the rendering of data with slot props
• numberOfPages is calculated and sent back through the controls slot

props

• ascending - current sort order
• classTbodyTr - tbody tr class
• classTbody - tbody class
• classTd - td class
• classTh - th class
• classTheadTr - thead tr class
• classThead - thead class
• classTr - tr class
• class
• currentPage - current page index, defaults to 0
• data - an array of items to render in the table
• id
• keys - table columns to include in the table, in order. Defaults to first item’s keys
• maxRows - maximum number of rows to show on each page, defaults to 0 - no pagination
• sortBy - key (column) to sort by, defaults to first key

slots

example

<script lang="ts">
    import type { ComponentProps } from "svelte";
    import { DataTable } from "drab";

    let currentPage = 0;

    const data: ComponentProps<DataTable>["data"] = [
        { make: "Honda", model: "CR-V", year: 2011, awd: true },
        { make: "Volvo", model: "XC-40", year: 2024, awd: true },
        { make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
        { make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
        { make: "Ford", model: "Model A", year: 1931, awd: false },
        { make: "Subaru", model: "Outback", year: 2021, awd: true },
        { make: "Ford", model: "Bronco", year: 1970, awd: true },
        { make: "GMC", model: "Acadia", year: 2008, awd: true },
        { make: "BMW", model: "X3", year: 2023, awd: true },
    ];
</script>

<DataTable {data} class="mb-12" />

<DataTable
    {data}
    bind:currentPage
    sortBy="year"
    maxRows={4}
    class="tabular-nums"
    classTh="cursor-pointer capitalize"
    classTbodyTr="transition hover:bg-muted"
>
    <svelte:fragment slot="th" let:key let:sortBy>
        <span class:uppercase={key === "awd"} class:underline={key === sortBy}>
            {key}
        </span>
    </svelte:fragment>
    <svelte:fragment slot="td" let:value>
        {#if typeof value === "boolean"}
            {value ? "Yes" : "No"}
        {:else}
            {value}
        {/if}
    </svelte:fragment>
    <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
        {#if maxRows}
            <div class="flex items-center justify-between gap-4">
                <div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
                <div class="flex gap-2">
                    <button
                        type="button"
                        class="button button-primary"
                        disabled={currentPage < 1}
                        on:click={() => currentPage--}
                    >
                        Previous
                    </button>
                    <button
                        type="button"
                        class="button button-primary"
                        disabled={currentPage >= numberOfPages - 1}
                        on:click={() => currentPage++}
                    >
                        Next
                    </button>
                </div>
            </div>
        {/if}
    </svelte:fragment>
</DataTable>