DataTable

Components

DataTable

Attributes: items paginate perPage lookupPages

Slots: header body footer

Events: sort pageChanged

$$props: class

TableHead

Attributes: sort sortReversed active sortBy

$$props: class

PaginationControl

Attributes: numberItems perPage currentPage lookupPages

Slots: pageControl

Events: pageChanged

Internal css classes

TableHead

fa-arrow-up, fa-arrow-down

PaginationControl

pagination-control

pagination

page-item, disabled, active

page-link, pageSelect

fa-chevron-left, fa-chevron-right

fa-angle-double-left, fa-angle-double-right

Default DataTable

The default DataTable displays all items. To add content to thead, tbody or tfoot, use the appropiate slot names. Adding TableHead provides the ability to sort the table by one or multiple columns. A Sort-Function is needed.

You can freely design your table-row, that will be used for each item in you array: <tr slot="body" let:prop={item}>...</tr>. This also provides autocompletion for a better workflow.

FirstName	LastName	Age	Adress	Parents
Bob	Schmidt	22		Hans
Mario	Schmidt	21	Avenue 2
Hans	Schmidt	23
Andy	Schmidt	22
Lea	Schmidt	22		Luigi,Francisca
Lukas	Schmidt	27	Avenue 1
Victor	Schmidt	21
Hilda	Schmidt	21
Robin	Schmidt	22	Avenue 1
Peter	Schmidt	24
Anna	Schmidt	22
Chris	Schmidt	22
Hellen	Bush	32	Avenue 1
Chris	Bush	22
Anna	Bush	29


<DataTable items={users}>
	<tr slot="header">
		<TableHead sort={sortByFirstName}>FirstName</TableHead>
		<TableHead sort={sortByLastName}>LastName</TableHead>
		<TableHead sort={(a,b) => {return a.age - b.age}}>Age</TableHead>
		<TableHead sort={(a,b) => {if(a.adress.street < b.adress.street){return -1} return 1}}>Adress</TableHead>
		<th>Parents</th>
	</tr>
	<tr slot="body" let:prop={item}>
		<td>{item.firstName}</td>
		<td>{item.lastName}</td>
		<td>{item.age}</td>
		<td>{item.adress.street}</td>
		<td>{item.parents.join(",")}</td>
	</tr>
</DataTable>

It's also possible to have a consistend sortorder on sub-columns, like an always asc firstname when you sort by lastname. Use additionalSorts to add as many additional sort-functions as needed.

FirstName	LastName	Gender
Bob	Schmidt	male
Mario	Schmidt	male
Hans	Schmidt	male
Andy	Schmidt	male
Lea	Schmidt	female
Lukas	Schmidt	male
Victor	Schmidt	male
Hilda	Schmidt	female
Robin	Schmidt	female
Peter	Schmidt	male
Anna	Schmidt	female
Chris	Schmidt	male
Hellen	Bush	female
Chris	Bush	male
Anna	Bush	female


<DataTable items={users}>
	<tr slot="header">
		<TableHead sort={sortByFirstName} additionalSorts={[lastNameAsc]}>FirstName</TableHead>
		<TableHead sort={sortByLastName} additionalSorts={[firstNameAsc]}>LastName</TableHead>
		...
	</tr>
	<tr slot="body" let:prop={item}>
		<td>{item.firstName}</td>
		<td>{item.lastName}</td>
		...
	</tr>
</DataTable>

Additional Funcionality for each row can be created, like a checkbox or a btn to select the current item.

	FirstName	LastName	Age	Adress	Parents
	Bob	Schmidt	22		Hans
	Mario	Schmidt	21	Avenue 2
	Hans	Schmidt	23
	Andy	Schmidt	22
	Lea	Schmidt	22		Luigi,Francisca
	Lukas	Schmidt	27	Avenue 1
	Victor	Schmidt	21
	Hilda	Schmidt	21
	Robin	Schmidt	22	Avenue 1
	Peter	Schmidt	24
	Anna	Schmidt	22
	Chris	Schmidt	22
	Hellen	Bush	32	Avenue 1
	Chris	Bush	22
	Anna	Bush	29
Selected Item:


<DataTable items={users}>
	<tr slot="header">
		<th><br/></th>
		...
	</tr>
	<tr slot="body" let:prop={item}>
		<td>
			<button on:click={selectItem(item)}>Select</button>
		</td>
		...
	</tr>
</DataTable>

You can also preselect the header to display a sorted table on initialisation.

	FirstName	LastName	Age	Adress	Parents
	Bob	Schmidt	22		Hans
	Mario	Schmidt	21	Avenue 2
	Hans	Schmidt	23
	Andy	Schmidt	22
	Lea	Schmidt	22		Luigi,Francisca
	Lukas	Schmidt	27	Avenue 1
	Victor	Schmidt	21
	Hilda	Schmidt	21
	Robin	Schmidt	22	Avenue 1
	Peter	Schmidt	24
	Anna	Schmidt	22
	Chris	Schmidt	22
	Hellen	Bush	32	Avenue 1
	Chris	Bush	22
	Anna	Bush	29
Selected Item:


<DataTable items={users}>
	<tr slot="header">
		<TableHead sort={...} active>FirstName</TableHead>
		...
	</tr>
	<tr slot="body" let:prop={item}>
		...
	</tr>
</DataTable>

Pagination

To display the pagination-Control, add paginate to DataTable. The default number of displayed items per page is 25.

FirstName	LastName	Age	Adress	Parents
Bob	Schmidt	22		Hans
Mario	Schmidt	21	Avenue 2
Hans	Schmidt	23
Andy	Schmidt	22
Lea	Schmidt	22		Luigi,Francisca
Lukas	Schmidt	27	Avenue 1
Victor	Schmidt	21
Hilda	Schmidt	21
Robin	Schmidt	22	Avenue 1
Peter	Schmidt	24
Anna	Schmidt	22
Chris	Schmidt	22
Hellen	Bush	32	Avenue 1
Chris	Bush	22
Anna	Bush	29


<DataTable items={users} paginate>
	...
</DataTable>

It's also possible to define the nr of items displayed for each page.

FirstName	LastName	Age	Adress	Parents
Bob	Schmidt	22		Hans
Mario	Schmidt	21	Avenue 2
Hans	Schmidt	23
Andy	Schmidt	22
Lea	Schmidt	22		Luigi,Francisca


<DataTable items={users} paginate perPage={5}>
	...
</DataTable>

You can also add your custom Page Control items, like 'items per page' and 'jump to page'.

FirstName	LastName	Age	Adress	Parents
Bob	Schmidt	22		Hans

Items per page: Current page:


<DataTable items={users} paginate {perPage} {currentPage}>
	<tr slot="header">
		...
	</tr>
	<tr slot="body" let:prop={item}>
		...
	</tr>
	<div slot="pageControl">
		Items per page: <input type="number" bind:value={perPage} />
		Current page: <input type="number" bind:value={currentPage} />
	</div>
</DataTable>

Use compact pagination

FirstName	LastName	Age	Adress	Parents
Bob	Schmidt	22		Hans


<DataTable items={users} paginate perPage={1} lookupPages={1}>
	...
</DataTable>

Filter

To filter your items, add the filter-function to your array. The neccessary input-elements must be added in TableHead using slot="filter". This provides a wide variaty of possibilities to filter your table, using text-input, radio-input, checkbox and select.

	FirstName	LastName	Age	Gender All male female	Adress	Parents
	Bob	Schmidt	22	male		Hans
	Mario	Schmidt	21	male	Avenue 2
	Hans	Schmidt	23	male
	Andy	Schmidt	22	male
	Lea	Schmidt	22	female		Luigi,Francisca
	Lukas	Schmidt	27	male	Avenue 1
	Victor	Schmidt	21	male
	Hilda	Schmidt	21	female
	Robin	Schmidt	22	female	Avenue 1
	Peter	Schmidt	24	male
	Anna	Schmidt	22	female
	Chris	Schmidt	22	male
	Hellen	Bush	32	female	Avenue 1
	Chris	Bush	22	male
	Anna	Bush	29	female
Selected Item:


<DataTable items={filteredUsers}>
	<tr slot="header">
		<th><br/></th>
		<TableHead sort={sortByLastName}>
			LastName
			<div slot="filter">
				<input type="text" bind:value={filterFirstName} on:input={customFilterFunction} />
			</div>
		</TableHead>
		...
	</tr>
	<tr slot="body" let:prop={item}>
		...
	</tr>
</DataTable>

Using Filter with Pagination

Regular

	FirstName	LastName	Gender All male female
	Bob	Schmidt	male
Selected Item:

Compact

	FirstName	LastName	Gender All male female
	Bob	Schmidt	male
Selected Item:

Items from http Response

If you can't load all items at once to keep your webapp userfriendly, you can load them by http instead and display them once the response has been completed. This type of usecase is a bit more complicated and takes a small amount of work to include. Your response also needs the maximum nr of items based on the criteria send to the url.

First, don't add paginate and include PaginationControl manualy to display the possible number of pages you can get. This also allows you to place it on top of the table. Next use the Events on:sort and on:pageChanged to send a http request and get a updated list of items to display in your DataTable.

FirstName	LastName	Age	Adress	Parents


<DataTable items={users} on:sort={loadUsers}>
	<tr slot="header" class="table-primary">
		<TableHead sort={undefined} sortKey="firstName">FirstName</TableHead>
		<TableHead sort={undefined} sortKey="lastName">LastName</TableHead>
		<TableHead sort={undefined} sortKey="age">Age</TableHead>
		<TableHead sort={undefined} sortKey="adress">Adress</TableHead>
		<th>Parents</th>
	</tr>
	<tr slot="body" let:prop={item}>
		...
	</tr>
	<tr slot="footer">
		{#await promise}
			<i class="fas fa-spinner fa-spin" />
		{:catch err}
			<p class="alert alert-danger">An error occured</p>
		{/await}
	</tr>
</DataTable>
<PaginationControl numberItems={maxitems} {perPage} bind:currentPage on:pageChanged={loadUsers}></PaginationControl>

CSS

Anything below shows things possible with CSS. A seperate CSS-file is required.

Dont show 'First' and 'Last' btn

FirstName	LastName
Bob	Schmidt
Mario	Schmidt
Hans	Schmidt

PageControl at top

FirstName	LastName
Bob	Schmidt
Mario	Schmidt
Hans	Schmidt

Swap icons

FirstName	LastName
Bob	Schmidt
Mario	Schmidt
Hans	Schmidt

Compact sort-icons

FirstName	LastName
Bob	Schmidt
Mario	Schmidt
Hans	Schmidt