A responsive data table component built with Svelte and Bootstrap.
npm install trestable
const columns: Column<MyObj>[] = [
{
name: "Name",
property: "fullName",
},
{
name: "Status",
property: "status",
getValue: (d) => d.status ? "Active" : "Inactive",
},
{
name: "Items",
breakpoint: "md",
component: MyComponent,
},
];
If a column has property
defined, it will be sortable. Custom components can be used for rendering, which must have a record
prop which will be passed the record object.
If a breakpoint is defined (one of sm
, md
, lg
, xl
, xxl
, or xxxl
), the column will only be shown on that size of screen or larger. Columns with a breakpoint of xxxl
will always be hidden by default. On screens smaller than the breakpoint, hidden columns can be viewed by clicking the plus icon on the left side of the row.
<Trestable {columns} {data} {params} />
A key/value object of query params must be passed in so Trestable can know which columns the table has been sorted by.
The pagination component can be rendered as follows:
{#if pages > 1}
<Pagination {pages} {page} {params} {limit} {limitChanged} />
{/if}
The limit change handler could be defined as follows:
function limitChanged(limit: number) {
localStorage.setItem("pageSize", limit.toString());
const search = new URLSearchParams(params);
search.set("limit", limit.toString());
search.delete("page");
goto("?" + search.toString());
}