add initial stories for table

src/Umbraco.Web.UI.Client/src/backoffice/components/table/table.element.ts

@@ -36,6 +36,13 @@ export class UmbTableDeselectedEvent extends Event {
 	}
 }
 
+/**
+ *  @element umb-table
+ *  @description - Element for displaying a table
+ *  @fires {UmbTableSelectedEvent} selected - fires when a row is selected
+ *  @fires {UmbTableDeselectedEvent} deselected - fires when a row is deselected
+ *  @extends LitElement
+ */
 @customElement('umb-table')
 export class UmbTableElement extends LitElement {
 	static styles = [
@@ -81,17 +88,37 @@ export class UmbTableElement extends LitElement {
 		`,
 	];
 
+	/**
+	 * Table Items
+	 * @type {Array<UmbTableItem>}
+	 * @memberof UmbTableElement
+	 */
 	@property({ type: Array, attribute: false })
 	public items: Array<UmbTableItem> = [];
 
+	/**
+	 * @description Table Columns
+	 * @type {Array<UmbTableColumn>}
+	 * @memberof UmbTableElement
+	 */
 	@property({ type: Array, attribute: false })
 	public columns: Array<UmbTableColumn> = [];
 
+	/**
+	 * @description Table Config
+	 * @type {UmbTableConfig}
+	 * @memberof UmbTableElement
+	 */
 	@property({ type: Object, attribute: false })
 	public config: UmbTableConfig = {
 		allowSelection: false,
 	};
 
+	/**
+	 * @description Table Selection
+	 * @type {Array<string>}
+	 * @memberof UmbTableElement
+	 */
 	@property({ type: Array, attribute: false })
 	public selection: Array<string> = [];
 

src/Umbraco.Web.UI.Client/src/backoffice/components/table/table.stories.ts

@@ -0,0 +1,79 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+import { v4 as uuidv4 } from 'uuid';
+
+import type { UmbTableElement, UmbTableColumn, UmbTableConfig, UmbTableItem } from './table.element';
+
+import './table.element';
+
+export default {
+	title: 'Components/Table',
+	component: 'umb-table',
+	id: 'umb-table',
+} as Meta;
+
+const columns: Array<UmbTableColumn> = [
+	{
+		name: 'Name',
+		alias: 'name',
+	},
+	{
+		name: 'Date',
+		alias: 'date',
+	},
+];
+
+const today = new Intl.DateTimeFormat('en-US').format(new Date());
+
+const items: Array<UmbTableItem> = [
+	{
+		key: uuidv4(),
+		icon: 'umb:wand',
+		data: [
+			{
+				columnAlias: 'name',
+				value: 'Item 1',
+			},
+			{
+				columnAlias: 'date',
+				value: today,
+			},
+		],
+	},
+	{
+		key: uuidv4(),
+		icon: 'umb:document',
+		data: [
+			{
+				columnAlias: 'name',
+				value: 'Item 2',
+			},
+			{
+				columnAlias: 'date',
+				value: today,
+			},
+		],
+	},
+	{
+		key: uuidv4(),
+		icon: 'umb:user',
+		data: [
+			{
+				columnAlias: 'name',
+				value: 'Item 3',
+			},
+			{
+				columnAlias: 'date',
+				value: today,
+			},
+		],
+	},
+];
+
+const config: UmbTableConfig = {
+	allowSelection: true,
+};
+
+export const AAAOverview: Story<UmbTableElement> = () =>
+	html`<umb-table .items=${items} .columns=${columns} .config=${config}></umb-table>`;
+AAAOverview.storyName = 'Overview';