├── .npmrc
├── src
    ├── routes
    │   ├── +page.svelte
    │   └── examples
    │   │   ├── IRow.ts
    │   │   ├── +page.svelte
    │   │   ├── reset.css
    │   │   ├── server.ts
    │   │   ├── LocalTable.svelte
    │   │   └── RemoteTable.svelte
    ├── lib
    │   ├── filter.ts
    │   ├── functions.ts
    │   ├── index.ts
    │   ├── constants.ts
    │   ├── Row.svelte
    │   ├── Sort.svelte
    │   ├── interfaces.ts
    │   ├── Search.svelte
    │   ├── sort.ts
    │   ├── Pagination.svelte
    │   ├── tableStore.ts
    │   └── Table.svelte
    ├── app.html
    └── app.d.ts
├── static
    └── favicon.png
├── .gitignore
├── vite.config.ts
├── .eslintignore
├── .prettierignore
├── playwright.config.ts
├── .prettierrc
├── svelte.config.js
├── .eslintrc.cjs
├── tsconfig.json
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 | <a href="/examples">Examples</a>
2 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabiohvp/svelte-table/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/src/routes/examples/IRow.ts:
--------------------------------------------------------------------------------
1 | export interface IRow {
2 | 	name: string;
3 | 	lastName: string;
4 | 	age: number;
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import type { UserConfig } from 'vite';
3 | 
4 | const config: UserConfig = {
5 | 	plugins: [sveltekit()]
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 4173
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/lib/filter.ts:
--------------------------------------------------------------------------------
 1 | export function filter(row: any, text: string) {
 2 | 	text = text.toLocaleLowerCase();
 3 | 	const keys = Object.keys(row);
 4 | 
 5 | 	for (let k of keys) {
 6 | 		if ((row[k] || '').toString().toLocaleLowerCase().indexOf(text) > -1) {
 7 | 			return true;
 8 | 		}
 9 | 	}
10 | 	return false;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body>
10 | 		<div>%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/lib/functions.ts:
--------------------------------------------------------------------------------
 1 | export function getPaginationBoundaries(page: number, pageSize: number) {
 2 | 	const start = page * pageSize;
 3 | 	return {
 4 | 		start,
 5 | 		end: start + pageSize
 6 | 	};
 7 | }
 8 | 
 9 | export function getPaginationRowIndex(index: number, page: number, pageSize: number) {
10 | 	return page * pageSize + index;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@sveltejs/kit" />
 2 | 
 3 | // See https://kit.svelte.dev/docs/types#app
 4 | // for information about these interfaces
 5 | // and what to do when importing types
 6 | declare namespace App {
 7 | 	// interface Locals {}
 8 | 	// interface PageData {}
 9 | 	// interface Error {}
10 | 	// interface Platform {}
11 | }
12 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
 1 | export * from '$lib/Pagination.svelte';
 2 | export * from '$lib/Row.svelte';
 3 | export * from '$lib/Search.svelte';
 4 | export * from '$lib/Sort.svelte';
 5 | export * from '$lib/Table.svelte';
 6 | export * from '$lib/constants';
 7 | export * from '$lib/filter';
 8 | export * from '$lib/functions';
 9 | export * from '$lib/interfaces';
10 | export * from '$lib/sort';
11 | export * from '$lib/tableStore';
12 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://github.com/sveltejs/svelte-preprocess
 7 | 	// for more information about preprocessors
 8 | 	preprocess: preprocess(),
 9 | 
10 | 	kit: {
11 | 		adapter: adapter()
12 | 	}
13 | };
14 | 
15 | export default config;
16 | 


--------------------------------------------------------------------------------
/src/routes/examples/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import LocalTable from './LocalTable.svelte';
 3 | 	import RemoteTable from './RemoteTable.svelte';
 4 | 	import './reset.css';
 5 | </script>
 6 | 
 7 | <div class="box">
 8 | 	<h4>Client side processing</h4>
 9 | 	<LocalTable />
10 | </div>
11 | <div class="box">
12 | 	<h4>Server side processing</h4>
13 | 	<RemoteTable />
14 | </div>
15 | 
16 | <style>
17 | 	.box {
18 | 		border: 1px solid #eee;
19 | 		padding: 1em 1em;
20 | 		margin: 1em 1em;
21 | 	}
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_PAGINATION_LABELS = {
 2 | 	first: 'First',
 3 | 	last: 'Last',
 4 | 	next: 'Next',
 5 | 	previous: 'Previous'
 6 | };
 7 | export const DEFAULT_SEARCH_LABELS = {
 8 | 	placeholder: 'Search'
 9 | };
10 | export const DEFAULT_SORT_LABELS = {
11 | 	asc: { title: 'Ascending', html: '&#8593;' },
12 | 	desc: { title: 'Desceding', html: '&#8595;' },
13 | 	unsorted: { title: 'Unsorted', html: '&#8645;' }
14 | };
15 | export const DEFAULT_TABLE_LABELS = {
16 | 	empty: 'No records available',
17 | 	loading: 'Loading data'
18 | };
19 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/src/lib/Row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { RowEventArgs } from '$lib/interfaces';
 3 | 	import { createEventDispatcher } from 'svelte';
 4 | 
 5 | 	const dispatch = createEventDispatcher();
 6 | 
 7 | 	export let index = 0;
 8 | 
 9 | 	function onClick(event: MouseEvent) {
10 | 		const detail: RowEventArgs = {
11 | 			originalEvent: event,
12 | 			index
13 | 		};
14 | 		dispatch('click', detail);
15 | 	}
16 | </script>
17 | 
18 | <tr
19 | 	on:click={onClick}
20 | 	class={$$props.class}
21 | 	class:odd={index % 2 !== 0}
22 | 	class:even={index % 2 === 0}
23 | >
24 | 	<slot />
25 | </tr>
26 | 
27 | <style>
28 | 	.odd {
29 | 		background-color: var(--odd-background-color);
30 | 	}
31 | </style>
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte-table
 2 | 
 3 | Make your tables using HTML and leave the javascript only for user interaction (pagination/search/sort);
 4 | 
 5 | `npm install @fabiohvp/svelte-table`  
 6 | or  
 7 | `yarn add @fabiohvp/svelte-table`
 8 | 
 9 | ## Examples
10 | 
11 | You can see the examples in [Sveltelab.dev](https://www.sveltelab.dev/vs33nnuign7coeb)
12 | 
13 | PS:. examples are using tableStore to manage table data but it can be managed with local variables
14 | 
15 | ## Advanced
16 | 
17 | - You can add components to the top or bottom slots.
18 | - Adding top/bottom slot will override the default content (Search/Pagination) but you can still use it by importing and adding them inside your custom slot.
19 | - You can change the default search method by adding an on:search event on Search component.
20 | - Row component is optional and only serves to render odd/even row, you can use <tr> instead.
21 | - Sort component expect "key" and you need to implement your own sorting method (see the example below).
22 | 
23 | ## Roadmap
24 | 
25 | - Add tests


--------------------------------------------------------------------------------
/src/lib/Sort.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DEFAULT_SORT_LABELS } from '$lib/constants';
 3 | 	import type { SortDirection, SortEventArgs, SortLabels } from '$lib/interfaces';
 4 | 	import { createEventDispatcher } from 'svelte';
 5 | 
 6 | 	const dispatch = createEventDispatcher();
 7 | 
 8 | 	export let dir: SortDirection | 'none' = 'none';
 9 | 	export let key: string;
10 | 	export let labels: SortLabels = DEFAULT_SORT_LABELS;
11 | 	export let type = 'string';
12 | 
13 | 	$: selected = dir === 'asc' ? labels.asc : dir === 'desc' ? labels.desc : labels.unsorted;
14 | 
15 | 	function onClick(event: MouseEvent) {
16 | 		dir = dir === 'desc' ? 'asc' : 'desc';
17 | 
18 | 		const detail: SortEventArgs = {
19 | 			originalEvent: event,
20 | 			dir,
21 | 			key,
22 | 			type
23 | 		};
24 | 		dispatch('sort', detail);
25 | 	}
26 | </script>
27 | 
28 | <button class="sort" title={selected?.title} on:click={onClick}>
29 | 	{@html selected?.html}
30 | </button>
31 | 
32 | <style>
33 | 	.sort {
34 | 		right: 0;
35 | 		cursor: pointer;
36 | 		position: absolute;
37 | 		padding: 0 0.25em;
38 | 		color: #999;
39 | 	}
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/lib/interfaces.ts:
--------------------------------------------------------------------------------
 1 | export interface PaginationEventArgs {
 2 | 	originalEvent: MouseEvent;
 3 | 	page: number;
 4 | 	pageSize: number;
 5 | }
 6 | 
 7 | export interface PaginationLabels {
 8 | 	first: string;
 9 | 	last: string;
10 | 	next: string;
11 | 	previous: string;
12 | }
13 | 
14 | export interface RowEventArgs {
15 | 	originalEvent: MouseEvent;
16 | 	index: number;
17 | }
18 | 
19 | export interface SearchEventArgs {
20 | 	originalEvent: KeyboardEvent;
21 | 	index: number;
22 | 	text: string;
23 | 	type: string;
24 | }
25 | 
26 | export interface SearchLabels {
27 | 	placeholder: string;
28 | }
29 | 
30 | export type SortDirection = 'asc' | 'desc';
31 | 
32 | export interface SortEventArgs {
33 | 	originalEvent: MouseEvent;
34 | 	key: string;
35 | 	dir: SortDirection;
36 | 	type: string;
37 | }
38 | 
39 | export interface SortLabels {
40 | 	asc: { title: string; html: string };
41 | 	desc: { title: string; html: string };
42 | 	unsorted: { title: string; html: string };
43 | }
44 | 
45 | export interface SortParams {
46 | 	key: string;
47 | 	dir: SortDirection;
48 | }
49 | 
50 | export interface TableLabels {
51 | 	empty: string;
52 | 	loading: string;
53 | }
54 | 


--------------------------------------------------------------------------------
/src/lib/Search.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DEFAULT_SEARCH_LABELS } from '$lib/constants';
 3 | 	import type { SearchEventArgs, SearchLabels } from '$lib/interfaces';
 4 | 	import { createEventDispatcher } from 'svelte';
 5 | 
 6 | 	const dispatch = createEventDispatcher();
 7 | 
 8 | 	export let index = -1;
 9 | 	export let labels: SearchLabels = DEFAULT_SEARCH_LABELS;
10 | 	export let text = '';
11 | 	export let type = 'string';
12 | 
13 | 	async function onSearch(event: KeyboardEvent) {
14 | 		const detail: SearchEventArgs = {
15 | 			originalEvent: event,
16 | 			index,
17 | 			text,
18 | 			type
19 | 		};
20 | 		dispatch('search', detail);
21 | 	}
22 | </script>
23 | 
24 | <section class="search">
25 | 	<input
26 | 		type="search"
27 | 		title={labels.placeholder}
28 | 		placeholder={labels.placeholder}
29 | 		bind:value={text}
30 | 		on:keyup={onSearch}
31 | 	/>
32 | </section>
33 | 
34 | <style>
35 | 	.search {
36 | 		width: 33.3%;
37 | 		float: right;
38 | 		margin-top: 1rem;
39 | 		margin-bottom: 1rem;
40 | 	}
41 | 	.search input {
42 | 		width: 100%;
43 | 		border: 1px solid #eee;
44 | 		border-radius: 3px;
45 | 		padding: 5px 3px;
46 | 	}
47 | 
48 | 	@media screen and (max-width: 767px) {
49 | 		.search {
50 | 			width: 100%;
51 | 		}
52 | 	}
53 | </style>
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@fabiohvp/svelte-table",
 3 | 	"description": "Svelte-table - a simple way to render your tables",
 4 | 	"version": "0.2.5",
 5 | 	"keywords": [
 6 | 		"svelte",
 7 | 		"table"
 8 | 	],
 9 | 	"repository": {
10 | 		"type": "git",
11 | 		"url": "git+https://github.com/fabiohvp/svelte-table.git"
12 | 	},
13 | 	"author": "https://github.com/fabiohvp",
14 | 	"license": "MIT",
15 | 	"bugs": {
16 | 		"url": "https://github.com/fabiohvp/svelte-table/issues"
17 | 	},
18 | 	"homepage": "https://github.com/fabiohvp/svelte-table#readme",
19 | 	"type": "module",
20 | 	"scripts": {
21 | 		"dev": "vite dev",
22 | 		"build": "svelte-kit sync && svelte-package",
23 | 		"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
24 | 		"test": "playwright test",
25 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
26 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
27 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
28 | 		"format": "prettier --plugin-search-dir . --write ."
29 | 	},
30 | 	"devDependencies": {
31 | 		"@playwright/test": "1.25.0",
32 | 		"@sveltejs/adapter-auto": "next",
33 | 		"@sveltejs/kit": "next",
34 | 		"@sveltejs/package": "next",
35 | 		"@typescript-eslint/eslint-plugin": "^5.27.0",
36 | 		"@typescript-eslint/parser": "^5.27.0",
37 | 		"eslint": "^8.16.0",
38 | 		"eslint-config-prettier": "^8.3.0",
39 | 		"eslint-plugin-svelte3": "^4.0.0",
40 | 		"prettier": "^2.6.2",
41 | 		"prettier-plugin-svelte": "^2.7.0",
42 | 		"svelte": "^3.44.0",
43 | 		"svelte-check": "^2.7.1",
44 | 		"svelte-preprocess": "^4.10.6",
45 | 		"tslib": "^2.3.1",
46 | 		"typescript": "^4.7.4",
47 | 		"vite": "^3.1.0"
48 | 	}
49 | }
50 | 


--------------------------------------------------------------------------------
/src/routes/examples/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/ 
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 | 	margin: 0;
 88 | 	padding: 0;
 89 | 	border: 0;
 90 | 	font-size: 100%;
 91 | 	font: inherit;
 92 | 	vertical-align: baseline;
 93 | }
 94 | 
 95 | /* HTML5 display-role reset for older browsers */
 96 | article,
 97 | aside,
 98 | details,
 99 | figcaption,
100 | figure,
101 | footer,
102 | header,
103 | hgroup,
104 | menu,
105 | nav,
106 | section {
107 | 	display: block;
108 | }
109 | 
110 | body {
111 | 	line-height: 1;
112 | }
113 | 
114 | ol,
115 | ul {
116 | 	list-style: none;
117 | }
118 | 
119 | blockquote,
120 | q {
121 | 	quotes: none;
122 | }
123 | 
124 | blockquote:before,
125 | blockquote:after,
126 | q:before,
127 | q:after {
128 | 	content: '';
129 | 	content: none;
130 | }
131 | 
132 | table {
133 | 	border-collapse: collapse;
134 | 	border-spacing: 0;
135 | }
136 | 


--------------------------------------------------------------------------------
/src/routes/examples/server.ts:
--------------------------------------------------------------------------------
 1 | import { filter } from '$lib/filter';
 2 | import { sortDateByKey, sortNumberByKey, type SortDirection } from '$lib/sort';
 3 | import type { IRow } from './IRow';
 4 | 
 5 | const originalData: IRow[] = [
 6 | 	{ name: 'a', lastName: 'o', age: 1 },
 7 | 	{ name: 'b', lastName: 'n', age: 2 },
 8 | 	{ name: 'c', lastName: 'm', age: 23 },
 9 | 	{ name: 'd', lastName: 'l', age: 11 },
10 | 	{ name: 'e', lastName: 'k', age: 132 },
11 | 	{ name: 'f', lastName: 'j', age: 152 },
12 | 	{ name: 'g', lastName: 'i', age: 4 },
13 | 	{ name: 'h', lastName: 'h', age: 432 },
14 | 	{ name: 'i', lastName: 'g', age: 41 },
15 | 	{ name: 'k', lastName: 'f', age: 432 },
16 | 	{ name: 'l', lastName: 'e', age: 552 }
17 | ];
18 | 
19 | export function getAll(): Promise<any[]> {
20 | 	return new Promise((resolve, reject) => {
21 | 		setTimeout(function () {
22 | 			resolve(originalData);
23 | 		}, 250);
24 | 	});
25 | }
26 | 
27 | export function getData(
28 | 	page: number,
29 | 	pageSize: number,
30 | 	text: string,
31 | 	sorting: { dir: SortDirection; key: string }
32 | ): Promise<{ rows: IRow[]; rowsCount: number }> {
33 | 	let data: IRow[] = [...originalData];
34 | 
35 | 	if (sorting) {
36 | 		if (sorting.key === 'age') {
37 | 			data = sortNumberByKey(data, sorting.key, sorting.dir);
38 | 		} else {
39 | 			data = sortDateByKey(data, sorting.key, sorting.dir);
40 | 		}
41 | 	}
42 | 
43 | 	return new Promise((resolve, _reject) => {
44 | 		setTimeout(function () {
45 | 			let rows = [];
46 | 			let rowsCount = data.length;
47 | 
48 | 			if (text && text.length > 0) {
49 | 				rows = data.filter((row) => filter(row, text));
50 | 				rowsCount = rows.length; //need to count before slice
51 | 			} else {
52 | 				rows = data;
53 | 			}
54 | 
55 | 			const pageIndex = page * pageSize;
56 | 			resolve({
57 | 				rows: rows.slice(pageIndex, pageIndex + pageSize),
58 | 				rowsCount
59 | 			});
60 | 		}, 250);
61 | 	});
62 | }
63 | 


--------------------------------------------------------------------------------
/src/lib/sort.ts:
--------------------------------------------------------------------------------
 1 | import type { SortDirection, SortEventArgs } from './interfaces';
 2 | 
 3 | type SortNumberMethod = (a: number, b: number) => number;
 4 | type SortStringMethod = (a: string, b: string) => number;
 5 | 
 6 | const sortNumberDict: { asc: SortNumberMethod; desc: SortNumberMethod } = {
 7 | 	asc: (a: number, b: number) => (a > b ? 1 : -1),
 8 | 	desc: (a: number, b: number) => (a > b ? -1 : 1)
 9 | };
10 | 
11 | const sortStringDict: { asc: SortStringMethod; desc: SortStringMethod } = {
12 | 	asc: (a: string, b: string) => a?.localeCompare(b),
13 | 	desc: (a: string, b: string) => b?.localeCompare(a)
14 | };
15 | 
16 | export type SortFunction<T> = (rows: T[], key: string, dir: SortDirection) => T[];
17 | 
18 | export function getSortAttributes(key: string, currentSorting: SortEventArgs) {
19 | 	return {
20 | 		key,
21 | 		dir: (currentSorting?.key === key ? currentSorting.dir : 'none') as SortDirection
22 | 	};
23 | }
24 | 
25 | export function sortDateBy<T>(rows: T[], getValue: (row: T) => Date, dir: SortDirection) {
26 | 	const sortMethod = sortNumberDict[dir ?? 'asc'];
27 | 	return rows.sort((a, b) => sortMethod(getValue(a).getTime(), getValue(b).getTime()));
28 | }
29 | 
30 | export function sortNumberBy<T>(rows: T[], getValue: (row: T) => number, dir: SortDirection) {
31 | 	const sortMethod = sortNumberDict[dir ?? 'asc'];
32 | 	return rows.sort((a, b) => sortMethod(getValue(a), getValue(b)));
33 | }
34 | 
35 | export function sortStringBy<T>(rows: T[], getValue: (row: T) => string, dir: SortDirection) {
36 | 	const sortMethod = sortStringDict[dir ?? 'asc'];
37 | 	return rows.sort((a, b) => sortMethod(getValue(a), getValue(b)));
38 | }
39 | 
40 | export function sortDateByKey(rows: any[], key: string, dir: SortDirection) {
41 | 	const sortMethod = sortNumberDict[dir ?? 'asc'];
42 | 	return rows.sort((a, b) => sortMethod(a[key], b[key]));
43 | }
44 | 
45 | export function sortNumberByKey(rows: any[], key: string, dir: SortDirection) {
46 | 	const sortMethod = sortNumberDict[dir ?? 'asc'];
47 | 	return rows.sort((a, b) => sortMethod(a[key], b[key]));
48 | }
49 | 
50 | export function sortStringByKey(rows: any[], key: string, dir: SortDirection) {
51 | 	const sortMethod = sortStringDict[dir ?? 'asc'];
52 | 	return rows.sort((a, b) => sortMethod(a[key], b[key]));
53 | }
54 | 


--------------------------------------------------------------------------------
/src/routes/examples/LocalTable.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	//Row component is optional and only serves to render odd/even row, you can use <tr> instead.
 3 | 	//Sort component is optional
 4 | 	import Row from '$lib/Row.svelte';
 5 | 	import Sort from '$lib/Sort.svelte';
 6 | 	import Table from '$lib/Table.svelte';
 7 | 	import type { PaginationEventArgs, SearchEventArgs, SortEventArgs } from '$lib/interfaces';
 8 | 	import { sortNumberByKey, sortStringByKey } from '$lib/sort';
 9 | 	import { createTableStore } from '$lib/tableStore';
10 | 	import { onMount } from 'svelte';
11 | 	import type { IRow } from './IRow';
12 | 	import { getAll } from './server';
13 | 
14 | 	const tableStore = createTableStore<IRow>({ pageSize: 3 });
15 | 
16 | 	let originalRows: IRow[] = [];
17 | 
18 | 	onMount(async () => {
19 | 		originalRows = await getAll();
20 | 		tableStore.setRows(originalRows);
21 | 	});
22 | 
23 | 	function onCellClick(row: IRow) {
24 | 		alert(JSON.stringify(row));
25 | 	}
26 | 
27 | 	function onPageChange(event: CustomEvent<PaginationEventArgs>) {
28 | 		tableStore.paginate(event.detail.page, event.detail.pageSize);
29 | 	}
30 | 
31 | 	function onSearch(event: CustomEvent<SearchEventArgs>) {
32 | 		const text = event.detail.text;
33 | 
34 | 		if (!text) {
35 | 			tableStore.setRows(originalRows);
36 | 		} else {
37 | 			tableStore.search(text);
38 | 		}
39 | 	}
40 | 
41 | 	function onSortString(event: CustomEvent<SortEventArgs>) {
42 | 		tableStore.sort(event.detail.key, event.detail.dir, sortStringByKey);
43 | 	}
44 | 
45 | 	function onSortNumber(event: CustomEvent<SortEventArgs>) {
46 | 		tableStore.sort(event.detail.key, event.detail.dir, sortNumberByKey);
47 | 	}
48 | </script>
49 | 
50 | <Table {...$tableStore} let:visibleRows on:pageChange={onPageChange} on:search={onSearch}>
51 | 	<thead slot="head">
52 | 		<tr>
53 | 			<th>
54 | 				Name
55 | 				<Sort key="name" on:sort={onSortString} />
56 | 			</th>
57 | 			<th>
58 | 				Lastname
59 | 				<Sort key="lastName" on:sort={onSortString} />
60 | 			</th>
61 | 			<th>
62 | 				Age
63 | 				<Sort key="age" on:sort={onSortNumber} />
64 | 			</th>
65 | 		</tr>
66 | 	</thead>
67 | 	<tbody>
68 | 		{#each visibleRows as row, index (row)}
69 | 			<Row {index} on:click={() => onCellClick(row)}>
70 | 				<td data-label="Name">{row.name}</td>
71 | 				<td data-label="Lastname">{row.lastName}</td>
72 | 				<td data-label="Age">{row.age}</td>
73 | 			</Row>
74 | 		{/each}
75 | 	</tbody>
76 | </Table>
77 | 


--------------------------------------------------------------------------------
/src/lib/Pagination.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DEFAULT_PAGINATION_LABELS } from '$lib/constants';
 3 | 	import { createEventDispatcher } from 'svelte';
 4 | 	import type { PaginationEventArgs, PaginationLabels } from './interfaces';
 5 | 
 6 | 	const dispatch = createEventDispatcher();
 7 | 
 8 | 	export let buttons = [-2, -1, 0, 1, 2];
 9 | 	export let labels: PaginationLabels = DEFAULT_PAGINATION_LABELS;
10 | 	export let page = 0;
11 | 	export let pageSize: number;
12 | 	export let rowsCount: number;
13 | 
14 | 	$: pageCount = Math.ceil(rowsCount / pageSize) - 1;
15 | 	$: pageIndex = page * pageSize;
16 | 	$: pageItemsCount = pageIndex + pageSize;
17 | 
18 | 	function onChange(event: MouseEvent, _page: number) {
19 | 		const detail: PaginationEventArgs = {
20 | 			originalEvent: event,
21 | 			page: _page,
22 | 			pageSize: pageSize
23 | 		};
24 | 		dispatch('pageChange', detail);
25 | 	}
26 | </script>
27 | 
28 | <section class="pagination">
29 | 	<span
30 | 		>Showing {pageIndex} to {pageItemsCount > rowsCount ? rowsCount : pageItemsCount} of {rowsCount}
31 | 		entries</span
32 | 	>
33 | 
34 | 	<ul>
35 | 		<li>
36 | 			<button disabled={page === 0} on:click={(e) => onChange(e, 0)}>
37 | 				{labels.first}
38 | 			</button>
39 | 		</li>
40 | 		<li>
41 | 			<button disabled={page === 0} on:click={(e) => onChange(e, page - 1)}>
42 | 				{labels.previous}
43 | 			</button>
44 | 		</li>
45 | 		{#each buttons as button}
46 | 			{@const buttonNumber = page + button}
47 | 			{#if buttonNumber >= 0 && buttonNumber <= pageCount}
48 | 				<li>
49 | 					<button class:active={page === buttonNumber} on:click={(e) => onChange(e, buttonNumber)}>
50 | 						{buttonNumber + 1}
51 | 					</button>
52 | 				</li>
53 | 			{/if}
54 | 		{/each}
55 | 		<li>
56 | 			<button disabled={page >= pageCount} on:click={(e) => onChange(e, page + 1)}>
57 | 				{labels.next}
58 | 			</button>
59 | 		</li>
60 | 	</ul>
61 | </section>
62 | 
63 | <style>
64 | 	.active {
65 | 		background-color: rgb(150, 150, 235);
66 | 		color: white;
67 | 	}
68 | 
69 | 	.pagination {
70 | 		align-items: center;
71 | 		display: flex;
72 | 		justify-content: space-between;
73 | 		margin-top: 1rem;
74 | 		margin-bottom: 1rem;
75 | 	}
76 | 
77 | 	ul {
78 | 		float: right;
79 | 		list-style: none;
80 | 	}
81 | 
82 | 	li {
83 | 		float: left;
84 | 	}
85 | 
86 | 	button {
87 | 		background: transparent;
88 | 		border: 1px solid #ccc;
89 | 		padding: 5px 10px;
90 | 		margin-left: 3px;
91 | 		float: left;
92 | 		cursor: pointer;
93 | 	}
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/routes/examples/RemoteTable.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	//Row component is optional and only serves to render odd/even row, you can use <tr> instead.
 3 | 	//Sort component is optional
 4 | 	import Pagination from '$lib/Pagination.svelte';
 5 | 	import Row from '$lib/Row.svelte';
 6 | 	import Search from '$lib/Search.svelte';
 7 | 	import Sort from '$lib/Sort.svelte';
 8 | 	import Table from '$lib/Table.svelte';
 9 | 	import type { PaginationEventArgs, SearchEventArgs, SortEventArgs } from '$lib/interfaces';
10 | 	import { getSortAttributes } from '$lib/sort';
11 | 	import { createTableStore } from '$lib/tableStore';
12 | 	import { onMount } from 'svelte';
13 | 	import type { IRow } from './IRow';
14 | 	import { getData } from './server';
15 | 
16 | 	const tableStore = createTableStore<IRow>({ local: false, pageSize: 3 });
17 | 
18 | 	let searchText: string;
19 | 	let sorting: SortEventArgs;
20 | 
21 | 	onMount(async () => {
22 | 		load(0, searchText, sorting);
23 | 	});
24 | 
25 | 	async function load(page: number, searchText: string, sorting: SortEventArgs) {
26 | 		tableStore.setLoading(true);
27 | 
28 | 		const json = await getData(page, $tableStore.pageSize, searchText, sorting);
29 | 		tableStore.setRows(json.rows, json.rowsCount, false, page);
30 | 	}
31 | 
32 | 	function onCellClick(row: IRow) {
33 | 		alert(JSON.stringify(row));
34 | 	}
35 | 
36 | 	function onPageChange(event: CustomEvent<PaginationEventArgs>) {
37 | 		load(event.detail.page, searchText, sorting);
38 | 	}
39 | 
40 | 	async function onSearch(event: CustomEvent<SearchEventArgs>) {
41 | 		searchText = event.detail.text;
42 | 		load(0, searchText, sorting);
43 | 	}
44 | 
45 | 	async function onSort(event: CustomEvent<SortEventArgs>) {
46 | 		sorting = event.detail;
47 | 		load($tableStore.page, searchText, sorting);
48 | 	}
49 | </script>
50 | 
51 | <Table {...$tableStore} let:visibleRows on:search={onSearch}>
52 | 	<div slot="top">
53 | 		<Search on:search={onSearch} />
54 | 	</div>
55 | 	<thead>
56 | 		<tr>
57 | 			<th>
58 | 				Name
59 | 				<Sort {...getSortAttributes('name', sorting)} on:sort={onSort} />
60 | 			</th>
61 | 			<th>
62 | 				Lastname
63 | 				<Sort {...getSortAttributes('lastName', sorting)} on:sort={onSort} />
64 | 			</th>
65 | 			<th>
66 | 				Age
67 | 				<Sort {...getSortAttributes('age', sorting)} on:sort={onSort} />
68 | 			</th>
69 | 		</tr>
70 | 	</thead>
71 | 	<tbody>
72 | 		{#each visibleRows as row, index (row)}
73 | 			<Row {index} on:click={() => onCellClick(row)}>
74 | 				<td data-label="Name">{row.name}</td>
75 | 				<td data-label="Lastname">{row.lastName}</td>
76 | 				<td data-label="Age">{row.age}</td>
77 | 			</Row>
78 | 		{/each}
79 | 	</tbody>
80 | 	<div slot="bottom">
81 | 		<Pagination {...$tableStore} on:pageChange={onPageChange} />
82 | 	</div>
83 | </Table>
84 | 


--------------------------------------------------------------------------------
/src/lib/tableStore.ts:
--------------------------------------------------------------------------------
  1 | import { filter } from '$lib/filter';
  2 | import { getPaginationBoundaries, getPaginationRowIndex } from '$lib/functions';
  3 | import type { SortDirection } from '$lib/interfaces';
  4 | import { sortNumberByKey, sortStringByKey, type SortFunction } from '$lib/sort';
  5 | import { writable, type Readable } from 'svelte/store';
  6 | 
  7 | export type TableData<T> = {
  8 | 	loading: boolean;
  9 | 	local: boolean;
 10 | 	page: number;
 11 | 	pageSize: number;
 12 | 	rows: T[];
 13 | 	rowsCount: number;
 14 | };
 15 | 
 16 | export type TableStore<T> = Readable<TableData<T>> & ReturnType<typeof createTableStore<T>>;
 17 | 
 18 | export function createTableStore<T>(initialState: Partial<TableData<T>> = {}) {
 19 | 	const { update, subscribe } = writable({
 20 | 		loading: false,
 21 | 		local: true,
 22 | 		page: 0,
 23 | 		pageSize: 10,
 24 | 		rows: [],
 25 | 		rowsCount: 0,
 26 | 		...initialState
 27 | 	});
 28 | 
 29 | 	return {
 30 | 		subscribe,
 31 | 		update,
 32 | 
 33 | 		getPaginationBoundaries: () => {
 34 | 			let page = 0;
 35 | 			let pageSize = 0;
 36 | 			subscribe((s) => {
 37 | 				(page = s.page), (pageSize = s.pageSize);
 38 | 			})();
 39 | 			return getPaginationBoundaries(page, pageSize);
 40 | 		},
 41 | 
 42 | 		getPaginationRowIndex: (index: number) => {
 43 | 			let page = 0;
 44 | 			let pageSize = 0;
 45 | 			subscribe((s) => {
 46 | 				(page = s.page), (pageSize = s.pageSize);
 47 | 			})();
 48 | 			return getPaginationRowIndex(index, page, pageSize);
 49 | 		},
 50 | 
 51 | 		paginate: (page: number, pageSize?: number) => {
 52 | 			update((s) => ({
 53 | 				...s,
 54 | 				page,
 55 | 				pageSize: pageSize ?? s.pageSize
 56 | 			}));
 57 | 		},
 58 | 
 59 | 		search: (text: string) => {
 60 | 			update((s) => ({
 61 | 				...s,
 62 | 				page: 0,
 63 | 				rows: s.rows.filter((row) => filter(row, text))
 64 | 			}));
 65 | 		},
 66 | 
 67 | 		setLoading: (loading: boolean) => {
 68 | 			update((s) => ({
 69 | 				...s,
 70 | 				loading
 71 | 			}));
 72 | 		},
 73 | 
 74 | 		setRows: (rows: T[], rowsCount: number | undefined = undefined, loading = false, page = 0) => {
 75 | 			update((s) => ({
 76 | 				...s,
 77 | 				loading,
 78 | 				page,
 79 | 				rows,
 80 | 				rowsCount: rowsCount ?? rows.length
 81 | 			}));
 82 | 		},
 83 | 
 84 | 		sort: (
 85 | 			key: string,
 86 | 			dir: SortDirection,
 87 | 			typeOrFn: 'string' | 'number' | string | SortFunction<T> = 'string'
 88 | 		) => {
 89 | 			if (typeof typeOrFn === 'function') {
 90 | 				update((s) => ({
 91 | 					...s,
 92 | 					rows: typeOrFn(s.rows, key, dir)
 93 | 				}));
 94 | 			} else if (typeOrFn === 'string') {
 95 | 				update((s) => ({
 96 | 					...s,
 97 | 					rows: sortStringByKey(s.rows, key, dir)
 98 | 				}));
 99 | 			} else if (typeOrFn === 'number') {
100 | 				update((s) => ({
101 | 					...s,
102 | 					rows: sortNumberByKey(s.rows, key, dir)
103 | 				}));
104 | 			} else {
105 | 				throw Error('Sorting type or function is undefined');
106 | 			}
107 | 		},
108 | 
109 | 		updateRow: (data: T, index: number) => {
110 | 			update((s) => {
111 | 				s.rows[index] = data;
112 | 				return s;
113 | 			});
114 | 		}
115 | 	};
116 | }
117 | 


--------------------------------------------------------------------------------
/src/lib/Table.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import Pagination from '$lib/Pagination.svelte';
  3 | 	import Search from '$lib/Search.svelte';
  4 | 	import { DEFAULT_TABLE_LABELS } from '$lib/constants';
  5 | 	import type { PaginationEventArgs, SearchEventArgs, TableLabels } from '$lib/interfaces';
  6 | 	import { createEventDispatcher } from 'svelte';
  7 | 
  8 | 	type T = $$Generic;
  9 | 	const dispatch = createEventDispatcher();
 10 | 
 11 | 	export let loading = false;
 12 | 	export let local = true;
 13 | 	export let page = 0;
 14 | 	export let pageSize = 10;
 15 | 	export let responsive = true;
 16 | 	export let rows: T[] = [];
 17 | 	export let rowsCount: number | undefined = undefined;
 18 | 	export let labels: TableLabels = DEFAULT_TABLE_LABELS;
 19 | 
 20 | 	let derivedRowsCount = 0;
 21 | 	let visibleRows: T[] = [];
 22 | 
 23 | 	$: pageIndex = page * pageSize;
 24 | 	$: if (local) {
 25 | 		visibleRows = rows.slice(pageIndex, pageIndex + pageSize);
 26 | 		derivedRowsCount = rows.length;
 27 | 	} else {
 28 | 		visibleRows = rows;
 29 | 		derivedRowsCount = rowsCount ?? rows.length;
 30 | 	}
 31 | 
 32 | 	function onPageChange(event: CustomEvent<PaginationEventArgs>) {
 33 | 		dispatch('pageChange', event.detail);
 34 | 	}
 35 | 
 36 | 	function onSearch(event: CustomEvent<SearchEventArgs>) {
 37 | 		dispatch('search', event.detail);
 38 | 	}
 39 | </script>
 40 | 
 41 | <slot name="top">
 42 | 	<div class="slot-top">
 43 | 		<svelte:component this={Search} on:search={onSearch} />
 44 | 	</div>
 45 | </slot>
 46 | 
 47 | <table class={'table ' + $$props.class} class:responsive>
 48 | 	<slot name="head" />
 49 | 	{#if loading}
 50 | 		<tbody>
 51 | 			<tr>
 52 | 				<td class="center" colspan="100">
 53 | 					<span>
 54 | 						{@html labels.loading}
 55 | 					</span>
 56 | 				</td>
 57 | 			</tr>
 58 | 		</tbody>
 59 | 	{:else if visibleRows.length === 0}
 60 | 		<tbody>
 61 | 			<tr>
 62 | 				<td class="center" colspan="100">
 63 | 					<span>
 64 | 						{@html labels.empty}
 65 | 					</span>
 66 | 				</td>
 67 | 			</tr>
 68 | 		</tbody>
 69 | 	{:else}
 70 | 		<slot {visibleRows} />
 71 | 	{/if}
 72 | 	<slot name="foot" />
 73 | </table>
 74 | 
 75 | <slot name="bottom">
 76 | 	<div class="slot-bottom">
 77 | 		<svelte:component
 78 | 			this={Pagination}
 79 | 			rowsCount={derivedRowsCount}
 80 | 			{page}
 81 | 			{pageSize}
 82 | 			on:pageChange={onPageChange}
 83 | 		/>
 84 | 	</div>
 85 | </slot>
 86 | 
 87 | <style>
 88 | 	:root {
 89 | 		--border-color: #eee;
 90 | 		--odd-background-color: #fbfbfb;
 91 | 	}
 92 | 
 93 | 	.table {
 94 | 		width: 100%;
 95 | 		border-collapse: collapse;
 96 | 	}
 97 | 
 98 | 	.table > :global(tbody) {
 99 | 		border-bottom: 1px solid var(--border-color);
100 | 		border-top: 1px solid var(--border-color);
101 | 	}
102 | 
103 | 	.table :global(th),
104 | 	.table :global(td) {
105 | 		position: relative;
106 | 		padding: 0.5rem 0.5rem;
107 | 	}
108 | 
109 | 	.center {
110 | 		text-align: center;
111 | 		font-style: italic;
112 | 	}
113 | 
114 | 	.center > span {
115 | 		padding: 10px 10px;
116 | 		float: left;
117 | 		width: 100%;
118 | 	}
119 | 
120 | 	@media screen and (max-width: 767px) {
121 | 		table.responsive {
122 | 			border: 0;
123 | 		}
124 | 
125 | 		table.responsive :global(thead) {
126 | 			border: none;
127 | 			clip: rect(0 0 0 0);
128 | 			height: 1px;
129 | 			margin: -1px;
130 | 			overflow: hidden;
131 | 			padding: 0;
132 | 			position: absolute;
133 | 			width: 1px;
134 | 		}
135 | 
136 | 		table.responsive :global(tr) {
137 | 			border-bottom: 2px solid #ddd;
138 | 			display: block;
139 | 			padding-bottom: 0.3em;
140 | 			margin-bottom: 0.3em;
141 | 		}
142 | 
143 | 		table.responsive :global(td) {
144 | 			border-bottom: 1px solid #ddd;
145 | 			display: block;
146 | 			font-size: 0.8em;
147 | 			text-align: right;
148 | 		}
149 | 
150 | 		table.responsive :global(td::before) {
151 | 			/*
152 | 			* aria-label has no advantage, it won't be read inside a table content: attr(aria-label);
153 | 			*/
154 | 			content: attr(data-label);
155 | 			float: left;
156 | 			font-weight: bold;
157 | 		}
158 | 
159 | 		table.responsive :global(td[data-label-normal]::before) {
160 | 			font-weight: normal;
161 | 		}
162 | 
163 | 		table.responsive :global(td[data-label-upper]::before) {
164 | 			text-transform: uppercase;
165 | 		}
166 | 
167 | 		table.responsive :global(td:last-child) {
168 | 			border-bottom: 0;
169 | 		}
170 | 	}
171 | </style>
172 | 


--------------------------------------------------------------------------------