Update structure of Table docs

Author: zxyctn

src/routes/components/table/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$lib/css/themes/theme-bexis2.css';
+	import TableProps from './docs/TableProps.svelte';
 	import TableConfigDocs from './docs/TableConfigDocs.svelte';
 	import ColumnsDocs from './docs/ColumnsDocs.svelte';
 	import ColumnDocs from './docs/ColumnDocs.svelte';
@@ -15,6 +16,8 @@
 >
 	<div class="grid gap-5">
 		<h1 class="font-bold !text-6xl">Table</h1>
+		<h2 class="h2">Props</h2>
+		<TableProps />
 		<h2 class="h2">Types</h2>
 		<TableConfigDocs />
 	</div>

src/routes/components/table/docs/ColumnInstructionsDocs.svelte

@@ -60,16 +60,21 @@
 
 		<div class="ml-5">
 			<p class="underline">
-				<code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+				<code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
 					>renderComponent</code
 				>
 				overrides
-				<code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500">toStringFn</code>.
+				<code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+					>toStringFn</code
+				>.
 			</p>
 			<p class="">
-				Every <code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+				Every <code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
 					>renderComponent</code
-				> will get 2 props:
+				> will get 3 props:
 			</p>
 			<div class="items-center mt-2">
 				<div class="flex gap-2">
@@ -87,6 +92,22 @@
 				</div>
 				<p class="text-xl pl-10">The value of the current cell.</p>
 			</div>
+			<div class="items-center mt-2">
+				<div class="flex gap-2">
+					<div class="italic">dispatchFn:</div>
+					<div class="font-bold">{`(obj: any) => dispatch('action', obj)`}</div>
+				</div>
+				<p class="text-xl pl-10">
+					A function that takes an object and dispatches an action with the name <code
+						class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+						>action</code
+					>. The passed object is accessible by the parent component through the
+					<code
+						class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+						>action.detail</code
+					> property.
+				</p>
+			</div>
 		</div>
 	</div>
 </div>

src/routes/components/table/docs/TableConfigDocs.svelte

@@ -155,7 +155,7 @@
 		</div>
 
 		<p class="text-xl pl-10">
-			An array of page sizes to be used for the table. By default, page sizes are 5, 10, 15, 20.
+			An array of page sizes to be used for the table. By default, page sizes are 5, 10, 20, 50, 100.
 		</p>
 	</div>
 

src/routes/components/table/docs/TableProps.svelte

@@ -0,0 +1,14 @@
+<div class="grid gap-5">
+	<div class="grid gap-2" id="tableProps">
+		<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic underline">config:</div>
+			<div class="font-bold">{`TableConfig <T>`}</div>
+		</div>
+
+		<p class="text-xl pl-10">Configuration for the table.</p>
+	</div>
+</div>