chore: complete first pass of apply jsdoc annotations to component props

src/DataTable/DataTable.svelte

@@ -1,17 +1,52 @@
 <script>
+  /**
+   * Specify the data table headers
+   * @type {{key: string; value: string;}} [headers=[]]
+   */
+  export let headers = [];
+
+  /**
+   * Specify the rows the data table should render
+   * keys defined in `headers` are used for the row ids
+   * @type {Object[]} [rows=[]]
+   */
+  export let rows = [];
+
   /**
    * Set the size of the data table
    * @type {"compact" | "short" | "tall"} [size]
    */
   export let size = undefined;
 
+  /**
+   * Specify the title of the data table
+   * @type {string} [title=""]
+   */
   export let title = "";
+
+  /**
+   * Specify the description of the data table
+   * @type {string} [description=""]
+   */
   export let description = "";
+
+  /**
+   * Set to `true` to use zebra styles
+   * @type {boolean} [zebra=false]
+   */
   export let zebra = false;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @type {boolean} [sortable=false]
+   */
   export let sortable = false;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
   export let stickyHeader = false;
-  export let rows = [];
-  export let headers = [];
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";

src/DataTable/Table.svelte

@@ -1,9 +1,38 @@
 <script>
-  export let size = undefined; // "compact" | "short" | "tall"
+  /**
+   * Set the size of the table
+   * @type {"compact" | "short" | "tall"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to use zebra styles
+   * @type {boolean} [zebra=false]
+   */
   export let zebra = false;
+
+  /**
+   * Set to `true` to use static width
+   * @type {boolean} [useStaticWidth=false]
+   */
   export let useStaticWidth = false;
+
+  /**
+   * Set to `true` for the bordered variant
+   * @type {boolean} [shouldShowBorder=false]
+   */
   export let shouldShowBorder = false;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @type {boolean} [sortable=false]
+   */
   export let sortable = false;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
   export let stickyHeader = false;
 </script>
 

src/DataTable/TableContainer.svelte

@@ -1,7 +1,21 @@
 <script>
-  export let stickyHeader = false;
+  /**
+   * Specify the title of the data table
+   * @type {string} [title=""]
+   */
   export let title = "";
+
+  /**
+   * Specify the description of the data table
+   * @type {string} [description=""]
+   */
   export let description = "";
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
+  export let stickyHeader = false;
 </script>
 
 <div

src/DataTable/TableHeader.svelte

@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the `scope` attribute
+   * @type {string} [scope="col"]
+   */
   export let scope = "col";
+
+  /**
+   * Override the default id translations
+   * @type {() => string;} [translateWithId = () => "";]
+   */
   export let translateWithId = () => "";
 
   /**

src/DataTable/TableRow.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to select the row
+   * @type {boolean} [isSelected=false]
+   */
   export let isSelected = false;
 
   // TODO: include ariaLabel, onExpand, isExpanded, isSelected