trestable - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/ColHeadValue.svelte.d.ts

 import { SvelteComponent } from "svelte";
-import type { BaseColumn } from "./types.js";
-declare const __propDef: {
-    props: {
-        col: BaseColumn;
+import type { Column } from "./types.js";
+declare class __sveltets_Render<T> {
+    props(): {
+        col: Column<T>;
         params: {
@@ -10,12 +10,12 @@ [key: string]: string;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type ColHeadValueProps = typeof __propDef.props;
-export type ColHeadValueEvents = typeof __propDef.events;
-export type ColHeadValueSlots = typeof __propDef.slots;
-export default class ColHeadValue extends SvelteComponent<ColHeadValueProps, ColHeadValueEvents, ColHeadValueSlots> {
+    slots(): {};
 }
+export type ColHeadValueProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ColHeadValueEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ColHeadValueSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ColHeadValue<T> extends SvelteComponent<ColHeadValueProps<T>, ColHeadValueEvents<T>, ColHeadValueSlots<T>> {
+}
 export {};

dist/Pagination.svelte.d.ts

@@ -6,2 +6,3 @@ import { SvelteComponent } from "svelte";
         page: number;
+        limitChanged: (limit: number) => void;
         params?: {
@@ -20,6 +21,2 @@ [key: string]: string;
     events: {
-        limitChanged: CustomEvent<{
-            limit: number;
-        }>;
-    } & {
         [evt: string]: CustomEvent<any>;
@@ -26,0 +23,0 @@ };

dist/types.d.ts

 import type { ComponentType, SvelteComponent } from "svelte";
 export type Breakpoint = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+type Leaves<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never ? "" : `.${Leaves<T[K]>}`}`;
+}[keyof T] : never;
 export interface BaseColumn {
     name: string;
-    property?: string;
     component?: ComponentType<SvelteComponent>;
@@ -12,3 +14,5 @@ breakpoint?: Breakpoint;
 export interface Column<T> extends BaseColumn {
+    property?: Leaves<T>;
     getValue?: (data: T) => string;
 }
+export {};

package.json

 {
     "name": "trestable",
-    "version": "0.2.1",
+    "version": "0.3.0",
     "description": "A responsive data table component built with Svelte and Bootstrap.",
@@ -33,21 +33,22 @@ "license": "MIT",
     "devDependencies": {
-        "@sveltejs/adapter-static": "^2.0.2",
-        "@sveltejs/kit": "^1.22.3",
-        "@sveltejs/package": "^2.2.0",
-        "@typescript-eslint/eslint-plugin": "^6.1.0",
-        "@typescript-eslint/parser": "^6.1.0",
-        "bootstrap": "^5.3.0",
-        "eslint": "^8.45.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-svelte": "^2.32.3",
-        "gh-pages": "^5.0.0",
-        "prettier": "^2.8.0",
-        "prettier-plugin-svelte": "^2.10.1",
-        "publint": "^0.1.16",
-        "sass": "^1.64.0",
-        "svelte": "^4.1.1",
-        "svelte-check": "^3.4.6",
-        "tslib": "^2.6.0",
-        "typescript": "^5.1.6",
-        "vite": "^4.4.5"
+        "@sveltejs/adapter-static": "^3.0.1",
+        "@sveltejs/kit": "^2.0.6",
+        "@sveltejs/package": "^2.2.5",
+        "@sveltejs/vite-plugin-svelte": "^3.0.1",
+        "@typescript-eslint/eslint-plugin": "^6.18.0",
+        "@typescript-eslint/parser": "^6.18.0",
+        "bootstrap": "^5.3.2",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-svelte": "^2.35.1",
+        "gh-pages": "^6.1.1",
+        "prettier": "^3.1.1",
+        "prettier-plugin-svelte": "^3.1.2",
+        "publint": "^0.2.7",
+        "sass": "^1.69.7",
+        "svelte": "^4.2.8",
+        "svelte-check": "^3.6.2",
+        "tslib": "^2.6.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.11"
     },
@@ -54,0 +55,0 @@ "svelte": "./dist/index.js",

README.md

@@ -5,2 +5,63 @@ # Trestable
 
-Todo: write more documentation.
+## Installation
+
+```
+npm install trestable
+```
+
+## Usage
+
+### Define array of columns
+
+```ts
+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
+
+```html
+<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:
+
+```html
+{#if pages > 1}
+    <Pagination {pages} {page} {params} {limit} {limitChanged} />
+{/if}
+```
+
+The limit change handler could be defined as follows:
+
+```ts
+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());
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

23817

increased by7.92%

Lines of code

199

increased by0.51%

Number of lines in readme file

67

increased by1016.67%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes