Original source

Simple table wrapper with pagination and sort controls

dev version

do not use in production

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script>
	import SveltestrapTable, {TableRow} from 'sveltestrap-table'
	import dayjs from 'dayjs'

	let limit = 10
	let page = 1
	let apiUrl = 'https://604b7b98ee7cb900176a2338.mockapi.io/api/v1/sveltestrap-table?limit='+limit
	let data = getData()

  function getData() {
		fetch(apiUrl+'&'+'page='+ page)
			.then(response=>response.json())
			.then(d=>{ data = d })
  }

	function pageChange(e){
		console.log(e)
	}
</script>

{#if data}
	<SveltestrapTable on:pageChange={pageChange} totalItems=100>
		{#each data as row}
			<TableRow>
				<td>{row.id}</td>
				<td>{row.name}</td>
				<td>{dayjs(row.createdAt).format('MMMM D, YYYY h:mm A')}</td>
			</TableRow>
		{/each}
	</SveltestrapTable>
{/if}