-
-
Notifications
You must be signed in to change notification settings - Fork 315
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Svelte Simple Datatables Guide (#2443)
Co-authored-by: endigo9740 <[email protected]>
- Loading branch information
1 parent
6c31f1b
commit 866cda1
Showing
6 changed files
with
623 additions
and
18 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
207 changes: 207 additions & 0 deletions
207
sites/skeleton.dev/src/routes/(inner)/docs/ssd/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,207 @@ | ||
<script lang="ts"> | ||
import LayoutPage from '$lib/layouts/LayoutPage/LayoutPage.svelte'; | ||
import { CodeBlock, TabGroup, Tab } from '@skeletonlabs/skeleton'; | ||
// Tabs | ||
let tabSelected: string = 'client'; | ||
//Local Components | ||
import Client from './ClientSSD.svelte'; | ||
import Server from './ServerSSD.svelte'; | ||
</script> | ||
|
||
<LayoutPage> | ||
<!-- Header --> | ||
<header class="space-y-4"> | ||
<h1 class="h1">Svelte Simple Datatables</h1> | ||
<p> | ||
The following guide will cover the basics of integrating Skeleton and <a | ||
class="anchor" | ||
href="https://vincjo.fr/datatables/home" | ||
target="_blank">Svelte Simple Datatables</a | ||
>. | ||
</p> | ||
</header> | ||
|
||
<hr /> | ||
|
||
<!-- SSD Explanation --> | ||
<section class="space-y-4"> | ||
<p class="text-xl"> | ||
<a class="anchor" href="https://vincjo.fr/datatables/home" target="_blank">Svelte Simple Datatables</a> | ||
is a headless library for creating datatable components with Svelte. It provides a simple API to dynamically interact with iterable data | ||
on the client-side, allowing you to filter, paginate, sort, and select data. It can handle server-side data processing, supports Typescript, | ||
and has no other required dependencies. | ||
</p> | ||
</section> | ||
|
||
<!-- Intro --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Introduction</h2> | ||
<p> | ||
Skeleton provides a simple <a class="anchor" href="/components/tables">Table Component</a> for implementing tabular data for | ||
presentational purposes. However, this lacks more powerful features, such as search, sort, and filter. This is where Svelte Simple | ||
Datatables comes in. To integrate this, we'll opt for Skeleton's | ||
<a class="anchor" href="/elements/tables">Table Elements</a>, which provided themed styles to native HTML tables. The end result will | ||
be a new <code class="code"><Datatable /></code> component, which you may use directly in your own application. | ||
</p> | ||
|
||
<img | ||
class="rounded-lg" | ||
src="https://raw.githubusercontent.com/skeletonlabs/skeleton-datatables-integration/main/static/themes.gif" | ||
alt="themed datatables" | ||
/> | ||
|
||
<p> | ||
Additionally, we'll also create a number of accessory components to handle search, filter, sort, and pagination features. These | ||
smaller components will help augment and extend the overall datatable component. | ||
</p> | ||
|
||
<img | ||
src="https://raw.githubusercontent.com/skeletonlabs/skeleton-datatables-integration/main/static/components.png" | ||
alt="accessory components diagram" | ||
/> | ||
</section> | ||
|
||
<!-- Starter Template --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Starter Template</h2> | ||
<p>If you're looking for a quick start or reference project, please refer to our opinionated template on GitHub.</p> | ||
<div class="card variant-glass p-4 py-10 text-center"> | ||
<a class="btn variant-filled" href="https:/skeletonlabs/skeleton-datatables-integration" target="_blank"> | ||
<i class="fa-brands fa-github" /> | ||
<span>View Starter Template</span> | ||
<i class="fa-solid fa-up-right-from-square" /> | ||
</a> | ||
</div> | ||
</section> | ||
|
||
<!-- Getting Started --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Getting Started</h2> | ||
<h3 class="h3">Install Depedencies</h3> | ||
<p>Add Svelte Simple Datables to your Skeleton project by running the following command.</p> | ||
<CodeBlock | ||
language="shell" | ||
code={` | ||
npm i @vincjo/datatables | ||
`} | ||
/> | ||
|
||
<h3 class="h3">Project Structure</h3> | ||
<p>Next, let's plan out our overall project structure.</p> | ||
<CodeBlock | ||
language="shell" | ||
code={` | ||
src | ||
├── lib | ||
| ├── data | ||
| | └── data.ts / api.ts | ||
| └── components | ||
| ├── Pagination.svelte | ||
| ├── Search.svelte | ||
| ├── RowCount.svelte | ||
| ├── RowsPerPage.svelte | ||
| ├── ThFilter.svelte | ||
| └── ThSort.svelte | ||
└── routes | ||
├── Datatable.svelte | ||
└── +page.svelte | ||
`} | ||
/> | ||
|
||
<dl class="list-dl"> | ||
<div> | ||
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span> | ||
<span class="flex-auto"> | ||
<dt><code class="code">/lib/data</code></dt> | ||
<dd> | ||
Create <code class="code">data.ts</code> if you are loading data from the client or <code class="code">api.ts</code> if your data | ||
is coming from the server. This will be explained further on, but for now just create the blank Typescript file. | ||
</dd> | ||
</span> | ||
</div> | ||
<div> | ||
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span> | ||
<span class="flex-auto"> | ||
<dt><code class="code">/lib/components</code></dt> | ||
<dd>All of the files in this directory will be used for accessory components.</dd> | ||
</span> | ||
</div> | ||
<div> | ||
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span> | ||
<span class="flex-auto"> | ||
<dt><code class="code">/routes/Datatable.svelte</code></dt> | ||
<dd> | ||
This file will contain the | ||
<code class="code"><Datatable /></code> | ||
component, the associated logic, and render the accessory components. | ||
</dd> | ||
</span> | ||
</div> | ||
<div> | ||
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span> | ||
<span class="flex-auto"> | ||
<dt><code class="code">/routes/+page.svelte</code></dt> | ||
<dd> | ||
This is where we'll render and access the | ||
<code class="code"><Datatable /></code> | ||
component in this example. | ||
</dd> | ||
</span> | ||
</div> | ||
</dl> | ||
</section> | ||
|
||
<!-- Creating the Components --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Creating the Components</h2> | ||
<p>Each component will need to be configured based on the scope. Select your preference below.</p> | ||
<TabGroup> | ||
<Tab bind:group={tabSelected} name="tabClient" value="client">Client-Based</Tab> | ||
<Tab bind:group={tabSelected} name="tabServer" value="server">Server-Based</Tab> | ||
<!-- Tab Panels ---> | ||
<svelte:fragment slot="panel"> | ||
{#if tabSelected === 'client'} | ||
<Client /> | ||
{:else if tabSelected === 'server'} | ||
<Server /> | ||
{/if} | ||
</svelte:fragment> | ||
</TabGroup> | ||
<!-- Import Datatable --> | ||
<section class="space-y-4"> | ||
<h3 class="h3" data-toc-ignore>4. Import Datatable Component</h3> | ||
<p> | ||
With our Datatable component now complete, let's import and add it to our <code class="code">+page.svelte</code>. | ||
</p> | ||
<CodeBlock language="ts" code={`import Datatable from '$lib/components/Datatable.svelte';`} /> | ||
<CodeBlock language="html" code={`<Datatable />`} /> | ||
</section> | ||
</section> | ||
|
||
<!-- Responsive Design --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Responsive Design</h2> | ||
<p> | ||
To ensure our datatables are visible on all screen sizes, make sure to utilize <a | ||
class="anchor" | ||
href="https://tailwindcss.com/docs/responsive-design" | ||
target="_blank">Tailwind's responsive design</a | ||
> | ||
best practices. You can also utilize the Tailwind Element <a href="/elements/tables" class="anchor">.table-container</a> class, which should | ||
be applied to a wrapping element. | ||
</p> | ||
</section> | ||
|
||
<hr /> | ||
|
||
<!-- Attribution --> | ||
<section class="space-y-4"> | ||
<h2 class="h2">Attribution</h2> | ||
<p> | ||
This guide has been provided courtesy of <a href="https:/kmalloy24" class="anchor">Kyle Malloy</a>, username | ||
<code class="code">@spacecup</code> on Skeleton's Discord server. | ||
</p> | ||
</section> | ||
</LayoutPage> |
152 changes: 152 additions & 0 deletions
152
sites/skeleton.dev/src/routes/(inner)/docs/ssd/ClientSSD.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
<script lang="ts"> | ||
import { CodeBlock } from '@skeletonlabs/skeleton'; | ||
</script> | ||
|
||
<div class="space-y-4"> | ||
<!-- Loading Data --> | ||
<section class="space-y-4"> | ||
<h3 class="h3" data-toc-ignore>1. Loading Data</h3> | ||
<p> | ||
To begin, let's add fake dataset in <code class="code">/src/lib/static/data.ts</code>. View a full reference | ||
<a class="anchor" href="https://vincjo.fr/datatables/tutorial/html-table" target="_blank"> under the data tab.</a> | ||
</p> | ||
<CodeBlock | ||
language="ts" | ||
code={` | ||
export default [ | ||
{ id: 1, first_name: 'Tobie', last_name: 'Vint', email: '[email protected]' }, | ||
{ id: 2, first_name: 'Zacharias', last_name: 'Cerman', email: '[email protected]' }, | ||
{ id: 3, first_name: 'Gérianna', last_name: 'Bunn', email: '[email protected]' }, | ||
{ id: 4, first_name: 'Bee', last_name: 'Saurin', email: '[email protected]' }, | ||
{ id: 5, first_name: 'Méyère', last_name: 'Granulette', email: '[email protected]' } | ||
// ... | ||
]; | ||
`} | ||
/> | ||
</section> | ||
|
||
<!-- The Datatable Component --> | ||
<section class="space-y-4"> | ||
<h3 class="h3" data-toc-ignore>2. The Datatable Component</h3> | ||
<p> | ||
Create the new Datatable component in <code class="code">/src/lib/comonents/Datatable.svelte</code>, import your custom dataset, as | ||
well as the | ||
<code class="code">DataHandler</code> from Svelte Simple Datatables. Then, intialize the <code class="code">handler</code> and | ||
<code class="code">rows</code>. | ||
</p> | ||
<CodeBlock | ||
language="ts" | ||
code={` | ||
import { DataHandler } from '@vincjo/datatables'; | ||
import data from '$lib/static/data'; | ||
const handler = new DataHandler(data, { rowsPerPage: 5 }); | ||
const rows = handler.getRows(); | ||
`} | ||
/> | ||
<p>Take care to configure your the markup to match the dataset.</p> | ||
<CodeBlock | ||
language="html" | ||
code={` | ||
<div class="table-container space-y-4"> | ||
<table class="table table-hover table-compact table-auto w-full"> | ||
<thead> | ||
<tr> | ||
<td>First name</td> | ||
<td>Last name</td> | ||
<td>Email</td> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{#each $rows as row} | ||
<tr> | ||
<td>{row.first_name}</td> | ||
<td>{row.last_name}</td> | ||
<td>{row.email}</td> | ||
</tr> | ||
{/each} | ||
</tbody> | ||
</table> | ||
</div> | ||
`} | ||
/> | ||
</section> | ||
|
||
<!-- Accessory Components --> | ||
<section class="space-y-4"> | ||
<h3 class="h3" data-toc-ignore>3. Accessory Components</h3> | ||
<p>Let's create, import, and add our new accessory components. Note that these will not yet be functional.</p> | ||
<CodeBlock | ||
language="ts" | ||
code={` | ||
import Search from '$lib/components/Search.svelte'; | ||
import ThFilter from '$lib/components/ThFilter.svelte'; | ||
import ThSort from '$lib/components/ThSort.svelte'; | ||
import RowCount from '$lib/components/RowCount.svelte'; | ||
import RowsPerPage from '$lib/components/RowsPerPage.svelte'; | ||
import Pagination from '$lib/components/Pagination.svelte'; | ||
`} | ||
/> | ||
<CodeBlock | ||
language="html" | ||
code={` | ||
<div class=" overflow-x-auto space-y-2"> | ||
<header class="flex justify-between gap-4"> | ||
<!-- <Search {handler} /> --> | ||
<!-- <RowsPerPage {handler} /> --> | ||
</header> | ||
<table class="table table-hover table-compact table-auto w-full "> | ||
<thead> | ||
<tr> | ||
<!-- <ThSort {handler} orderBy="first_name">First name</ThSort> | ||
<ThSort {handler} orderBy="last_name">Last name</ThSort> | ||
<ThSort {handler} orderBy="email">Email</ThSort> --> | ||
</tr> | ||
<tr> | ||
<!-- <ThFilter {handler} filterBy="first_name" /> | ||
<ThFilter {handler} filterBy="last_name" /> | ||
<ThFilter {handler} filterBy="email" /> --> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{#each $rows as row} | ||
<tr> | ||
<td>{row.first_name}</td> | ||
<td>{row.last_name}</td> | ||
<td>{row.email}</td> | ||
</tr> | ||
{/each} | ||
</tbody> | ||
</table> | ||
<footer class="flex justify-between"> | ||
<!-- <RowCount {handler} /> --> | ||
<!-- <Pagination {handler} /> --> | ||
</footer> | ||
</div> | ||
`} | ||
/> | ||
<p> | ||
For brevity, find the full source code for <code class="code"><Datatable /></code> and all accessory components on GitHub. | ||
</p> | ||
<div class="card variant-glass p-4 py-10 flex justify-center items-center gap-4"> | ||
<a | ||
class="btn variant-filled" | ||
href="https:/skeletonlabs/skeleton-datatables-integration/tree/main/src/lib/components/client/Datatable.svelte" | ||
target="_blank" | ||
> | ||
<i class="fa-brands fa-github" /> | ||
<span>Datatable</span> | ||
</a> | ||
<a | ||
class="btn variant-filled" | ||
href="https:/skeletonlabs/skeleton-datatables-integration/tree/main/src/lib/components/client" | ||
target="_blank" | ||
> | ||
<i class="fa-brands fa-github" /> | ||
<span>Accessories</span> | ||
</a> | ||
</div> | ||
</section> | ||
|
||
<!-- NOTE: step 4 is outside this component --> | ||
</div> |
Oops, something went wrong.