display dates in table

src/components/app-pagination/AppPaginationElement.ts

@@ -2,6 +2,7 @@ import { attr, controller, target } from '@github/catalyst';
 import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
+import dayjs from 'dayjs';
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -36,7 +37,7 @@ class AppPaginationElement extends BaseComponentElement {
 		this.fetchFunc = fetchFunc;
 		if (autoInit) {
 			const options = {
-				rpp: this.rpp || 5,
+				rpp: this.rpp || 10,
 				page: this.page || 1,
 			};
 			this.executeFetch(options);
@@ -100,7 +101,7 @@ class AppPaginationElement extends BaseComponentElement {
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
 			: (item, iter) => html`<tr class="${this.colLayout ? this.colLayout : ''}">
-					<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
+					<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>
 					<td class="--left">${item.description}</td>
 					<td class="balance-cell --right">
 						<span
@@ -138,7 +139,7 @@ class AppPaginationElement extends BaseComponentElement {
 				const pageRange = Math.ceil(totalItems / rpp);
 				return html`
 					<div class="paginate">
-						<span class="--total">${totalItems} Total Items</span>
+						<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
 						<div class="--footer">
 							<span class="--pages">Page ${page} of ${pageRange}</span>
 							<button

src/components/input-field/InputFieldElement.ts

@@ -13,6 +13,7 @@ class InputFieldElement extends BaseComponentElement {
 	@attr type: string;
 	@attr label: string;
 	@attr rules: string;
+	@attr pattern: string;
 	@attr customAction: string;
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
@@ -102,6 +103,20 @@ class InputFieldElement extends BaseComponentElement {
 		};
 
 		const renderInput = (type) => {
+			if (this.pattern) {
+				return html` <input
+					type="${this.type}"
+					pattern="${this.pattern}"
+					step="0.01"
+					data-target="input-field.inp"
+					id="${this.randId}"
+					app-action="
+                    input:input-field#inputChange
+                    blur:input-field#validateDisplay
+					${this.customAction ? this.customAction : ''}
+                "
+				/>`;
+			}
 			return html` <input
 				type="${this.type}"
 				data-target="input-field.inp"