BaseRow

테이블 행 렌더링을 위한 기본 컴포넌트입니다.

개요

BaseRow는 BaseTable에서 사용되는 행 렌더링 컴포넌트입니다. 다양한 셀 타입을 지원하며, 선택 상태와 스켈레톤 로딩을 처리합니다.

Props

interface Props<T extends Record<string, unknown>> {
    row: PagingTableRow<T>; // 행 데이터
    columns: PagingTableColumn[]; // 컬럼 정의
    cellWidths: number[]; // 셀 너비 배열
    scrollBarWidth: number; // 스크롤바 너비
    maxMap?: Record<string, number>; // 최대값 맵 (BAR 셀용)
}

지원 셀 타입

• TEXT: 일반 텍스트
• VALUE: 숫자 값 (천단위 구분자)
• DATE: 날짜 형식
• TIME: 시간 형식
• BAR: 바 차트 시각화
• ERROR: 에러 상태 표시
• SKELETON: 로딩 상태

기본 사용법

<template>
    <BaseRow
        :row="tableRow"
        :columns="tableColumns"
        :cell-widths="[120, 150, 100, 200]"
        :scroll-bar-width="15"
        :max-map="{ score: 100 }"
    />
</template>

<script setup>
import { BaseRow } from '@jennifersoft/apm-components';

const tableRow = {
    id: '1',
    data: {
        name: '사용자명',
        email: 'user@example.com',
        score: 85,
        createdAt: '2025-01-15',
    },
};

const tableColumns = [
    { key: 'name', name: '이름', type: 'text' },
    { key: 'email', name: '이메일', type: 'text' },
    { key: 'score', name: '점수', type: 'bar' },
    { key: 'createdAt', name: '생성일', type: 'date' },
];
</script>

의존성

• PagingTableColumn, PagingTableRow 타입
• 각종 셀 렌더러 컴포넌트