diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss index c6168caf9..e42831e5f 100644 --- a/packages/pharos/src/components/table/pharos-table.scss +++ b/packages/pharos/src/components/table/pharos-table.scss @@ -32,4 +32,8 @@ width: 75px; } } + + .pagination { + height: var(--pharos-spacing-one-and-a-half-x); + } } diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts index 2ac6c8b72..d1d362c43 100644 --- a/packages/pharos/src/components/table/pharos-table.ts +++ b/packages/pharos/src/components/table/pharos-table.ts @@ -8,6 +8,15 @@ import { tableStyles } from './pharos-table.css'; import { PharosSelect } from '../select/pharos-select'; import { PharosPagination } from '../pagination/pharos-pagination'; +type ColumnSpecification = { + name: string; + field: string; +}; + +type RowData = { + [key: string]: string; +}; + /** * Pharos table component. * @@ -29,18 +38,17 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) { * sample column: * [ * { - * name: ID - * field: id + * name: "ID" + * field: "id" * }, * { - * name: Message - * field: message + * name: "Message" + * field: "message" * } * ] */ @property({ type: Array, reflect: true, attribute: 'columns' }) - /* eslint-disable @typescript-eslint/no-explicit-any */ - public columns: any[] = []; + public columns: ColumnSpecification[] = []; /** * Row data. @@ -58,8 +66,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) { * ] */ @property({ type: Array, reflect: true, attribute: 'row-data' }) - /* eslint-disable @typescript-eslint/no-explicit-any */ - public rowData: any[] = []; + public rowData: RowData[] = []; @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' }) public hidePagination: boolean = true; @@ -118,8 +125,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) { } private _renderTableHeader(): (TemplateResult | undefined)[] { - /* eslint-disable @typescript-eslint/no-explicit-any */ - return this.columns.map((column: any) => { + return this.columns.map((column: ColumnSpecification) => { if (column.name) { return html`