Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
pheuter committed Jul 14, 2024
1 parent febbf72 commit 3b62750
Showing 1 changed file with 33 additions and 3 deletions.
36 changes: 33 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
<h1 align="center">svelte-data-table</h1>
<img align="center" alt="Svelte Data Table Screenshot" src="https://github.com/user-attachments/assets/fc527332-882b-463a-b070-d4714b32ec47">

<p align="center">Small, fast data table library with client-side sorting, filtering, and pagination.</p>
---

- 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

```bash
npm install @careswitch/svelte-data-table
```

_Requires Svelte 5 peer dependency_

## Usage

```svelte
Expand All @@ -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' }
]
});
</script>
<table>
<thead>
<tr>
{#each table.columns as column (column.key)}
<th>{column.name}</th>
{/each}
</tr>
</thead>
<tbody>
{#each table.rows as row (row.id)}
<tr>
{#each table.columns as column (column.key)}
<td>{row[column.key]}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
```

## Examples

Reference the demo website [+page.svelte](./src/routes/+page.svelte) for a more comprehensive example.

0 comments on commit 3b62750

Please sign in to comment.