Table Refactor

.prettierrc

@@ -2,5 +2,5 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
-	"printWidth": 200
-}
+	"printWidth": 140
+}

src/docs/DocsNavigation/links.ts

@@ -55,7 +55,8 @@ export const menuNavLinks: any = [
 			{ href: '/elements/cards', label: 'Cards' },
 			{ href: '/elements/lists', label: 'Lists' },
 			{ href: '/elements/logo-clouds', label: 'Logo Clouds' },
-			{ href: '/elements/placeholders', label: 'Placeholders' }
+			{ href: '/elements/placeholders', label: 'Placeholders' },
+			{ href: '/elements/tables', label: 'Tables' }
 		]
 	},
 
@@ -82,7 +83,6 @@ export const menuNavLinks: any = [
 			{ href: '/components/avatars', label: 'Avatars' },
 			{ href: '/components/breadcrumbs', label: 'Breadcrumbs' },
 			{ href: '/components/conic-gradients', label: 'Conic Gradients' },
-			{ href: '/components/data-tables', label: 'Data Tables' },
 			{ href: '/components/dividers', label: 'Dividers' },
 			{ href: '/components/file-buttons', label: 'File Buttons' },
 			{ href: '/components/file-dropzone', label: 'File Dropzone' },
@@ -95,7 +95,8 @@ export const menuNavLinks: any = [
 			{ href: '/components/range-sliders', label: 'Range Sliders' },
 			{ href: '/components/slide-toggles', label: 'Slide Toggles' },
 			{ href: '/components/steppers', label: 'Steppers' },
-			{ href: '/components/tabs', label: 'Tabs' }
+			{ href: '/components/tabs', label: 'Tabs' },
+			{ href: '/components/tables', label: 'Tables' }
 			// Work in Progress
 			// { href: '/components/svg-icons', label: 'SVG Icons' }, // keep disabled until further notice
 		]
@@ -108,6 +109,7 @@ export const menuNavLinks: any = [
 		title: 'Utilities',
 		list: [
 			{ href: '/utilities/codeblocks', label: 'Code Blocks' },
+			{ href: '/utilities/data-tables', label: 'Data Tables' },
 			{ href: '/utilities/dialogs', label: 'Dialogs' },
 			{ href: '/utilities/drawers', label: 'Drawers' },
 			{ href: '/utilities/lightswitches', label: 'Lightswitch' },

src/docs/DocsShell/DocsShell.svelte

@@ -6,13 +6,14 @@
 	import { DocsFeature, type DocsShellSettings } from '$docs/DocsShell/types';
 
 	// Components
-	import DataTable from '$lib/components/Table/DataTable.svelte';
+	import Table from '$lib/components/Table/Table.svelte';
 	import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte';
 	import Tab from '$lib/components/Tab/Tab.svelte';
 	import TabGroup from '$lib/components/Tab/TabGroup.svelte';
 
 	// Utilities
-	import { toastStore, type ToastSettings } from '$lib/utilities/Toast/stores';
+	import { toastStore } from '$lib/utilities/Toast/stores';
+	import type { ToastSettings } from '$lib/utilities/Toast/types';
 	import { sveldMapperProps, sveldMapperSlots, sveldeMapperEvents } from './sveldMapper';
 
 	// Props
@@ -279,13 +280,11 @@
 				{#if pageSettings.components}
 					{#each pageSettings.components as comp}
 						{#if comp.sveld.props.length > 0}
-							{@const table = sveldMapperProps(comp)}
+							{@const tableSource = sveldMapperProps(comp)}
 							<section class="space-y-4">
 								{#if comp.label}<h2>{comp.label}</h2>{/if}
 								{#if comp.descProps}<div>{@html comp.descProps}</div>{/if}
-								{#if table.source.length > 0}
-									<DataTable headings={table.headings} source={table.source} />
-								{/if}
+								{#if tableSource.body.length > 0}<Table source={tableSource} />{/if}
 								{#if comp.overrideProps}<div><em>{comp.label} can override: <span class="text-primary-500">{comp.overrideProps.join(', ')}</span>.</em></div>{/if}
 							</section>
 						{/if}
@@ -300,13 +299,11 @@
 				{#if pageSettings.components}
 					{#each pageSettings.components as comp}
 						{#if comp.sveld.slots.length > 0}
-							{@const table = sveldMapperSlots(comp)}
+							{@const tableSource = sveldMapperSlots(comp)}
 							<section class="space-y-4">
 								{#if comp.label}<h2>{comp.label}</h2>{/if}
 								{#if comp.descSlots}<div>{@html comp.descSlots}</div>{/if}
-								{#if table.source.length > 0}
-									<DataTable headings={table.headings} source={table.source} />
-								{/if}
+								{#if tableSource.body.length > 0}<Table source={tableSource} />{/if}
 							</section>
 						{/if}
 					{/each}
@@ -320,13 +317,11 @@
 				{#if pageSettings.components}
 					{#each pageSettings.components as comp}
 						{#if comp.sveld.events.length > 0}
-							{@const table = sveldeMapperEvents(comp)}
+							{@const tableSource = sveldeMapperEvents(comp)}
 							<section class="space-y-4">
 								{#if comp.label}<h2>{comp.label}</h2>{/if}
 								{#if comp.descEvents}<div>{@html comp.descEvents}</div>{/if}
-								{#if table.source.length > 0}
-									<DataTable headings={table.headings} source={table.source} />
-								{/if}
+								{#if tableSource.body.length > 0}<Table source={tableSource} />{/if}
 							</section>
 						{/if}
 					{/each}
@@ -337,22 +332,37 @@
 		<!-- Tab: Action Parameters -->
 		{#if pageSettings.parameters?.length && $storeActiveTab === 'parameters'}
 			<div class="doc-shell-parameters {classesRegionPanels}">
-				<DataTable headings={['Prop', 'Type', 'Default', 'Values', 'Description']} source={pageSettings.parameters} />
+				<Table
+					source={{
+						head: ['Prop', 'Type', 'Default', 'Values', 'Description'],
+						body: pageSettings.parameters
+					}}
+				/>
 			</div>
 		{/if}
 
 		<!-- Tab: Tailwind Element Classes -->
 		{#if pageSettings.classes?.length && $storeActiveTab === 'classes'}
 			<div class="doc-shell-classes {classesRegionPanels}">
-				<DataTable headings={['Keys', 'Values', 'Description']} source={pageSettings.classes} />
+				<Table
+					source={{
+						head: ['Keys', 'Values', 'Description'],
+						body: pageSettings.classes
+					}}
+				/>
 			</div>
 		{/if}
 
 		<!-- Tab: Keyboard Interactions -->
 		{#if $storeActiveTab === 'keyboard'}
 			{#if pageSettings.keyboard?.length}
 				<div class="doc-shell-keyboard {classesRegionPanels}">
-					<DataTable headings={['Keys', 'Description']} source={pageSettings.keyboard} />
+					<Table
+						source={{
+							head: ['Keys', 'Description'],
+							body: pageSettings.keyboard
+						}}
+					/>
 				</div>
 			{/if}
 		{/if}

src/docs/DocsShell/sveldMapper.ts

@@ -1,12 +1,9 @@
 import type { Component } from './types';
 
-interface MapperOutput {
-	headings: string[];
-	source: string[][];
-}
+import type { TableSource } from './../../lib/components/Table/types';
 
 // Mapper: Props
-export function sveldMapperProps(component: Component): MapperOutput {
+export function sveldMapperProps(component: Component): TableSource {
 	const { props } = component.sveld;
 	const propsHeadings = ['Name', 'Type', 'Value', 'Description'];
 	// Filter props with undefined types (exclude getContext)
@@ -17,20 +14,20 @@ export function sveldMapperProps(component: Component): MapperOutput {
 		return value;
 	}
 	return {
-		headings: propsHeadings,
-		source: propsFiltered.map((p) => {
+		head: propsHeadings,
+		body: propsFiltered.map((p) => {
 			return [`<code>${p.name}<?code>`, `<em>${p.type}</em>`, cleanValue(p.value), p.description ? p?.description : '-'];
 		})
 	};
 }
 
 // Mapper: Slots
-export function sveldMapperSlots(component: Component): MapperOutput {
+export function sveldMapperSlots(component: Component): TableSource {
 	const { slots } = component.sveld;
 	const slotsHeadings = ['Name', 'Default', 'Fallback', 'Description'];
 	return {
-		headings: slotsHeadings,
-		source: slots.map((s) => {
+		head: slotsHeadings,
+		body: slots.map((s) => {
 			// prettier-ignore
 			return [
 				`<code>${s.name.replaceAll('__', '')}</code>`,
@@ -44,12 +41,12 @@ export function sveldMapperSlots(component: Component): MapperOutput {
 }
 
 // Mapper: Events
-export function sveldeMapperEvents(component: Component): MapperOutput {
+export function sveldeMapperEvents(component: Component): TableSource {
 	const { events } = component.sveld;
 	const eventsHeadings = ['Name', 'Type', 'Element', 'Response', 'Description'];
 	return {
-		headings: eventsHeadings,
-		source: events.map((e) => {
+		head: eventsHeadings,
+		body: events.map((e) => {
 			// prettier-ignore
 			return [
 				`<code>on:${e.name}</code>`,

src/lib/components/Avatar/Avatar.svelte

@@ -44,7 +44,7 @@
 	{:else}
 		<svg class="avatar-initials w-full h-full" viewBox="0 0 512 512">
 			<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-weight="bold" font-size={150} class="avatar-text {fill}">
-				{initials.substring(0, 2).toUpperCase()}
+				{String(initials).substring(0, 2).toUpperCase()}
 			</text>
 		</svg>
 	{/if}

src/lib/components/Paginator/Paginator.svelte

@@ -1,26 +1,22 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
+	import type { PaginationSettings } from '$lib/components/Paginator/types';
+
 	const dispatch = createEventDispatcher();
 
 	// Props
-	/** Index of the first list item to display. */
-	export let offset: number = 0;
-	/** Current number of items to display. */
-	export let limit: number = 5;
-	/** The total size (length) of your source content. */
-	export let size: number = 10;
 	/**
-	 * List of amounts available to the select input.
-	 * @type {number[]}
+	 * Pass the page setting object.
+	 * @type {PaginationSettings}
 	 */
-	export let amounts: number[] = [1, 5, 10, 50, 100];
+	export let settings: PaginationSettings = { offset: 0, limit: 5, size: 0, amounts: [1, 2, 5, 10] };
 
 	// Props (design)
 	/** Provide classes to set flexbox justification. */
 	export let justify: string = 'justify-between';
 	/** Provide classes to style page info text. */
-	export let text: string = 'text-xs md:text-base';
+	export let text: string = 'text-xs';
 	/** Provide arbitrary classes to style the select input. */
 	export let select: string | undefined = undefined;
 
@@ -35,18 +31,18 @@
 
 	// Functionality
 	function onChangeLength(): void {
-		offset = 0;
+		settings.offset = 0;
 		/** @event {{ length: number }} amount - Fires when the amount selection input changes.  */
 		dispatch('amount', length);
 	}
 	function onPrev(): void {
-		offset--;
+		settings.offset--;
 		/** @event {{ offset: number }} page Fires when the next/back buttons are pressed. */
-		dispatch('page', offset);
+		dispatch('page', settings.offset);
 	}
 	function onNext(): void {
-		offset++;
-		dispatch('page', offset);
+		settings.offset++;
+		dispatch('page', settings.offset);
 	}
 
 	// Reactive Classes
@@ -56,20 +52,21 @@
 	$: classesPageText = `${cPageText} ${text}`;
 </script>
 
+<!-- prettier-ignore -->
 <div class="paginator {classesBase}" data-testid="paginator">
 	<!-- Select Amount -->
 	<label class="paginator-label {classesLabel}">
-		<select bind:value={limit} on:change={onChangeLength} class="paginator-select {classesSelect}" aria-label="Select Amount">
-			{#each amounts as amount}<option value={amount}>Show {amount}</option>{/each}
+		<select bind:value={settings.limit} on:change={() => { onChangeLength() }} class="paginator-select {classesSelect}" aria-label="Select Amount">
+			{#each settings.amounts as amount}<option value={amount}>Show {amount}</option>{/each}
 		</select>
 	</label>
 	<!-- Details -->
-	<p class="paginator-details {classesPageText}">
-		{offset * limit + 1} to {Math.min(offset * limit + limit, size)} of <strong>{size}</strong>
-	</p>
+	<span class="paginator-details {classesPageText}">
+		{settings.offset * settings.limit + 1} to {Math.min(settings.offset * settings.limit + settings.limit, settings.size)} <span class="opacity-50 px-2">/</span> <strong>{settings.size}</strong>
+	</span>
 	<!-- Arrows -->
 	<div class="paginator-arrows space-x-2">
-		<button class="btn-icon {buttons}" on:click={onPrev} disabled={offset === 0}>&larr;</button>
-		<button class="btn-icon {buttons}" on:click={onNext} disabled={(offset + 1) * limit >= size}>&rarr;</button>
+		<button class="btn-icon {buttons}" on:click={() => { onPrev() }} disabled={settings.offset === 0}>&larr;</button>
+		<button class="btn-icon {buttons}" on:click={() => { onNext() }} disabled={(settings.offset + 1) * settings.limit >= settings.size}>&rarr;</button>
 	</div>
 </div>

src/lib/components/Paginator/types.ts

@@ -0,0 +1,12 @@
+// Pagination Types
+
+export interface PaginationSettings {
+	/** Index of the first list item to display. */
+	offset: number;
+	/** Current number of items to display. */
+	limit: number;
+	/** The total size (length) of your source content. */
+	size: number;
+	/** List of amounts available to the select input */
+	amounts: number[];
+}