Skip to content

Latest commit

 

History

History
65 lines (52 loc) · 1.45 KB

README.md

File metadata and controls

65 lines (52 loc) · 1.45 KB
Svelte Data Table Screenshot
  • No dependencies
  • Blazing fast thanks to Svelte 5 and fine-grained reactivity
  • Fully typed with TypeScript
  • Comprehensive unit tests
  • Supports SvelteKit and SSR
  • Works great with shadcn data table

Demo

Demo Website

Installation

npm install @careswitch/svelte-data-table

Requires Svelte 5 peer dependency

Usage

<script lang="ts">
	import { DataTable } from '@careswitch/svelte-data-table';

	const table = new DataTable({
		data: [
			{ id: 1, name: 'John Doe', status: 'active' },
			{ id: 2, name: 'Jane Doe', status: 'inactive' }
		],
		columns: [
			{ id: 'id', key: 'id', name: 'ID' },
			{ id: 'name', key: 'name', name: 'Name' },
			{ id: 'status', key: 'status', name: 'Status' }
		]
	});
</script>

<table>
	<thead>
		<tr>
			{#each table.columns as column (column.id)}
				<th>{column.name}</th>
			{/each}
		</tr>
	</thead>
	<tbody>
		{#each table.rows as row (row.id)}
			<tr>
				{#each table.columns as column (column.id)}
					<td>{row[column.key]}</td>
				{/each}
			</tr>
		{/each}
	</tbody>
</table>

Examples

Refer to the demo website +page.svelte and unit tests for more comprehensive examples.