trestable
v0.3.0
Published
A responsive data table component built with Svelte and Bootstrap.
Downloads
19
Readme
Trestable
A responsive data table component built with Svelte and Bootstrap.
Installation
npm install trestable
Usage
Define array of columns
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.
Render table
<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.
Pagination
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());
}