Skip to content

Commit 088a9ca

Browse files
endigo9740endigo9740
authored
Merge pull request #2475 from skeletonlabs/dev
Merge for release Feb 13, 2024
2 parents 06583c8 + ff17895 commit 088a9ca

File tree

14 files changed

+635
-38
lines changed

14 files changed

+635
-38
lines changed

‎.changeset/fuzzy-apricots-hope.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"skeleton.dev": patch
3+
---
4+
5+
chore: Linting pass to fix several small issues.

‎packages/skeleton/src/plugin/generated/generated-classes.cjs

+1
Large diffs are not rendered by default.

‎sites/skeleton.dev/src/app.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55

66
<!-- NOTE: SEO handled in root layout: /src/+layout.svelte -->
7-
7+
<script defer data-domain="skeleton.dev" src="https://analytics.plygrnd.org/js/script.js"></script>
88
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
99
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010
%sveltekit.head%

‎sites/skeleton.dev/src/lib/links.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ export const menuNavLinks: Record<string, Array<{ title: string; list: List }>>
4242
},
4343
{
4444
title: 'Integrations',
45-
list: [{ href: '/docs/tauri', label: 'Tauri', keywords: 'Tauri, desktop, setup, install' }] // , badge: 'New'
45+
list: [
46+
{ href: '/docs/tauri', label: 'Tauri', keywords: 'Tauri, desktop, setup, install' },
47+
{ href: '/docs/ssd', label: 'Datatables', keywords: 'datatables, tables, datagrid, simple', badge: 'New' }
48+
]
4649
}
4750
],
4851
'/elements': [

‎sites/skeleton.dev/src/routes/(inner)/docs/colors/+page.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
]
2222
};
2323
24-
const shadesArr = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
25-
const colorsArr = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface'];
24+
// const shadesArr = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
25+
// const colorsArr = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface'];
2626
</script>
2727

2828
<LayoutPage>

‎sites/skeleton.dev/src/routes/(inner)/docs/get-started/+page.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<h1 class="h1">Get Started</h1>
1313
<!-- prettier-ignore -->
1414
<p>
15-
We recommend at least moderate experience with <a class="anchor" href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">Svelte</a>, <a class="anchor" href="https://learn.svelte.dev/tutorial/welcome-to-svelte" target="_blank" rel="noreferrer">SvelteKit</a>, and <a class="anchor" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a> before your proceed.
15+
We recommend at least moderate experience with <a class="anchor" href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">Svelte</a>, <a class="anchor" href="https://learn.svelte.dev/tutorial/welcome-to-svelte" target="_blank" rel="noreferrer">SvelteKit</a>, and <a class="anchor" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a> before you proceed.
1616
</p>
1717
<aside class="alert variant-ghost">
1818
<i class="fa-solid fa-triangle-exclamation" />

‎sites/skeleton.dev/src/routes/(inner)/docs/ssd/+page.svelte

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<script lang="ts">
2+
import LayoutPage from '$lib/layouts/LayoutPage/LayoutPage.svelte';
3+
import { CodeBlock, TabGroup, Tab } from '@skeletonlabs/skeleton';
4+
5+
// Tabs
6+
let tabSelected = 'client';
7+
8+
//Local Components
9+
import Client from './ClientSSD.svelte';
10+
import Server from './ServerSSD.svelte';
11+
</script>
12+
13+
<LayoutPage>
14+
<!-- Header -->
15+
<header class="space-y-4">
16+
<h1 class="h1">Svelte Simple Datatables</h1>
17+
<p>
18+
The following guide will cover the basics of integrating Skeleton and <a
19+
class="anchor"
20+
href="https://vincjo.fr/datatables/home"
21+
target="_blank">Svelte Simple Datatables</a
22+
>.
23+
</p>
24+
</header>
25+
26+
<hr />
27+
28+
<!-- SSD Explanation -->
29+
<section class="space-y-4">
30+
<p class="text-xl">
31+
<a class="anchor" href="https://vincjo.fr/datatables/home" target="_blank">Svelte Simple Datatables</a>
32+
is a headless library for creating datatable components with Svelte. It provides a simple API to dynamically interact with iterable data
33+
on the client-side, allowing you to filter, paginate, sort, and select data. It can handle server-side data processing, supports Typescript,
34+
and has no other required dependencies.
35+
</p>
36+
</section>
37+
38+
<!-- Intro -->
39+
<section class="space-y-4">
40+
<h2 class="h2">Introduction</h2>
41+
<p>
42+
Skeleton provides a simple <a class="anchor" href="/components/tables">Table Component</a> for implementing tabular data for
43+
presentational purposes. However, this lacks more powerful features, such as search, sort, and filter. This is where Svelte Simple
44+
Datatables comes in. To integrate this, we'll opt for Skeleton's
45+
<a class="anchor" href="/elements/tables">Table Elements</a>, which provided themed styles to native HTML tables. The end result will
46+
be a new <code class="code">&lt;Datatable /&gt;</code> component, which you may use directly in your own application.
47+
</p>
48+
49+
<img
50+
class="rounded-lg"
51+
src="https://raw.githubusercontent.com/skeletonlabs/skeleton-datatables-integration/main/static/themes.gif"
52+
alt="themed datatables"
53+
/>
54+
55+
<p>
56+
Additionally, we'll also create a number of accessory components to handle search, filter, sort, and pagination features. These
57+
smaller components will help augment and extend the overall datatable component.
58+
</p>
59+
60+
<img
61+
src="https://raw.githubusercontent.com/skeletonlabs/skeleton-datatables-integration/main/static/components.png"
62+
alt="accessory components diagram"
63+
/>
64+
</section>
65+
66+
<!-- Starter Template -->
67+
<section class="space-y-4">
68+
<h2 class="h2">Starter Template</h2>
69+
<p>If you're looking for a quick start or reference project, please refer to our opinionated template on GitHub.</p>
70+
<div class="card variant-glass p-4 py-10 text-center">
71+
<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton-datatables-integration" target="_blank">
72+
<i class="fa-brands fa-github" />
73+
<span>View Starter Template</span>
74+
<i class="fa-solid fa-up-right-from-square" />
75+
</a>
76+
</div>
77+
</section>
78+
79+
<!-- Getting Started -->
80+
<section class="space-y-4">
81+
<h2 class="h2">Getting Started</h2>
82+
<h3 class="h3">Install Depedencies</h3>
83+
<p>Add Svelte Simple Datables to your Skeleton project by running the following command.</p>
84+
<CodeBlock
85+
language="shell"
86+
code={`
87+
npm i @vincjo/datatables
88+
`}
89+
/>
90+
91+
<h3 class="h3">Project Structure</h3>
92+
<p>Next, let's plan out our overall project structure.</p>
93+
<CodeBlock
94+
language="shell"
95+
code={`
96+
src
97+
├── lib
98+
| ├── data
99+
| | └── data.ts / api.ts
100+
| └── components
101+
| ├── Pagination.svelte
102+
| ├── Search.svelte
103+
| ├── RowCount.svelte
104+
| ├── RowsPerPage.svelte
105+
| ├── ThFilter.svelte
106+
| └── ThSort.svelte
107+
└── routes
108+
├── Datatable.svelte
109+
└── +page.svelte
110+
`}
111+
/>
112+
113+
<dl class="list-dl">
114+
<div>
115+
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span>
116+
<span class="flex-auto">
117+
<dt><code class="code">/lib/data</code></dt>
118+
<dd>
119+
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
120+
is coming from the server. This will be explained further on, but for now just create the blank Typescript file.
121+
</dd>
122+
</span>
123+
</div>
124+
<div>
125+
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span>
126+
<span class="flex-auto">
127+
<dt><code class="code">/lib/components</code></dt>
128+
<dd>All of the files in this directory will be used for accessory components.</dd>
129+
</span>
130+
</div>
131+
<div>
132+
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span>
133+
<span class="flex-auto">
134+
<dt><code class="code">/routes/Datatable.svelte</code></dt>
135+
<dd>
136+
This file will contain the
137+
<code class="code">&lt;Datatable /&gt;</code>
138+
component, the associated logic, and render the accessory components.
139+
</dd>
140+
</span>
141+
</div>
142+
<div>
143+
<span class="badge-icon p-4 variant-soft-primary"><i class="fa-solid fa-code" /></span>
144+
<span class="flex-auto">
145+
<dt><code class="code">/routes/+page.svelte</code></dt>
146+
<dd>
147+
This is where we'll render and access the
148+
<code class="code">&lt;Datatable /&gt;</code>
149+
component in this example.
150+
</dd>
151+
</span>
152+
</div>
153+
</dl>
154+
</section>
155+
156+
<!-- Creating the Components -->
157+
<section class="space-y-4">
158+
<h2 class="h2">Creating the Components</h2>
159+
<p>Each component will need to be configured based on the scope. Select your preference below.</p>
160+
<TabGroup>
161+
<Tab bind:group={tabSelected} name="tabClient" value="client">Client-Based</Tab>
162+
<Tab bind:group={tabSelected} name="tabServer" value="server">Server-Based</Tab>
163+
<!-- Tab Panels --->
164+
<svelte:fragment slot="panel">
165+
{#if tabSelected === 'client'}
166+
<Client />
167+
{:else if tabSelected === 'server'}
168+
<Server />
169+
{/if}
170+
</svelte:fragment>
171+
</TabGroup>
172+
<!-- Import Datatable -->
173+
<section class="space-y-4">
174+
<h3 class="h3" data-toc-ignore>4. Import Datatable Component</h3>
175+
<p>
176+
With our Datatable component now complete, let's import and add it to our <code class="code">+page.svelte</code>.
177+
</p>
178+
<CodeBlock language="ts" code={`import Datatable from '$lib/components/Datatable.svelte';`} />
179+
<CodeBlock language="html" code={`<Datatable />`} />
180+
</section>
181+
</section>
182+
183+
<!-- Responsive Design -->
184+
<section class="space-y-4">
185+
<h2 class="h2">Responsive Design</h2>
186+
<p>
187+
To ensure our datatables are visible on all screen sizes, make sure to utilize <a
188+
class="anchor"
189+
href="https://tailwindcss.com/docs/responsive-design"
190+
target="_blank">Tailwind's responsive design</a
191+
>
192+
best practices. You can also utilize the Tailwind Element <a href="/elements/tables" class="anchor">.table-container</a> class, which should
193+
be applied to a wrapping element.
194+
</p>
195+
</section>
196+
197+
<hr />
198+
199+
<!-- Attribution -->
200+
<section class="space-y-4">
201+
<h2 class="h2">Attribution</h2>
202+
<p>
203+
This guide has been provided courtesy of <a href="https://github.com/kmalloy24" class="anchor">Kyle Malloy</a>, username
204+
<code class="code">@spacecup</code> on Skeleton's Discord server.
205+
</p>
206+
</section>
207+
</LayoutPage>

0 commit comments

Comments
 (0)