diff --git a/README.md b/README.md index e92b97f..939b6f8 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ -

svelte-data-table

+Svelte Data Table Screenshot -

Small, fast data table library with client-side sorting, filtering, and pagination.

+--- - No dependencies - TypeScript - Supports SvelteKit, SSR, Svelte 5 +- Works great with shadcn [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) + +## Demo + +**[Demo Website](https://careswitch-svelte-data-table.vercel.app)** ## Installation @@ -12,6 +17,8 @@ npm install @careswitch/svelte-data-table ``` +_Requires Svelte 5 peer dependency_ + ## Usage ```svelte @@ -26,8 +33,31 @@ npm install @careswitch/svelte-data-table columns: [ { key: 'id', name: 'ID' }, { key: 'name', name: 'Name' }, - { key: 'status', name: 'Status', sortable: false } + { key: 'status', name: 'Status' } ] }); + + + + + {#each table.columns as column (column.key)} + + {/each} + + + + {#each table.rows as row (row.id)} + + {#each table.columns as column (column.key)} + + {/each} + + {/each} + +
{column.name}
{row[column.key]}
``` + +## Examples + +Reference the demo website [+page.svelte](./src/routes/+page.svelte) for a more comprehensive example.