PagingTable

성능 데이터 표현을 위한 테이블 컴포넌트입니다.

Enums

export enum PagingTableCellType {
    TEXT,
    TEXT_WITH_TOOLTIP,
    VALUE,
    DATE,
    TIME,
    ERROR,
    BAR,
    CUSTOM,
}

export enum PagingTableSortOrder {
    NONE,
    ASC,
    DESC,
}

Types

import { PagingTableCellType, PagingTableSortOrder } from './enums';

export interface PagingTableProps<T extends Record<string, unknown>> {
    alias: string;
    width: number;
    height: number;
    displayCount: number;
    columns: PagingTableColumn[];
    rows: PagingTableRow<T>[];
    rowHeight?: number;
    rowId?: string;
    maxMap?: Record<string, number>;
    sortKey?: string;
    sortOrder?: PagingTableSortOrder;
    sortLoading?: boolean;
}

export interface PagingRowProps<T extends Record<string, unknown>> {
    row: PagingTableRow<T>;
    columns: PagingTableColumn[];
    cellWidths: number[];
    scrollBarWidth: number;
    maxMap?: Record<string, number>;
}

export interface PagingTableColumn {
    key: string;
    name: string;
    rate: number;
    sortable: boolean;
    visible: boolean;
    type: PagingTableCellType;
    color?: string;
}

export interface PagingTableRow<T> {
    data: T;
    id?: string;
}

// PaingTable.vue
interface SimpleTableData extends Record<string, unknown> {
    name: string;
    age: number;
    city: string;
    status: string;
}

const emit = defineEmits(['sort', 'select']);
const props = defineProps<PagingTableProps<T>>();

Sample Code

<template>
    <paging-table
        :alias="'simple-table'"
        :width="600"
        :height="390"
        :columns="SIMPLE_TABLE_COLUMNS"
        :rows="SIMPLE_TABLE_ROWS"
        :display-count="10"
        :max-map="SIMPLE_TABLE_MAX_MAP"
        @select="onSelectPagingTable"
    >
        <template #information>
            <span></span>
        </template>
    </paging-table>
</template>

<script setup lang="ts">
import {
    SIMPLE_TABLE_COLUMNS,
    SIMPLE_TABLE_ROWS,
    SIMPLE_TABLE_MAX_MAP,
} from './data/paging-table';
import { provide } from 'vue';
import { PagingTable } from '@jennifersoft/apm-components';
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';

provide<I18n>('i18n', {
    pageInfo: '%d개 중 %s',
    firstPage: '첫 페이지',
    lastPage: '마지막 페이지',
    manageTableColumns: '테이블 컬럼 관리',
});

const onSelectPagingTable = (row) => {
    console.log('PagingTable selected:', row);
};
</script>

Demo