Table - Vapor UI

Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일만을 제공합니다. 복잡한 상태 관리와 로직을 바탕으로 대량의 데이터를 다루는 Data Table을 구현하려면 Table Block 문서를 참고해주세요.

Name	Status	Role	Last Active
Olivia Park	ACTIVE	designer	2 hours ago
Ethan Kim	ACTIVE	developer	3 days ago
Mia Choi	INACTIVE	developer	10 minutes ago
Noah Lee	ACTIVE	designer	1 day ago
Ava Jung	ACTIVE	developer	5 days ago
Liam Han	INACTIVE	developer	5 days ago
Emma Seo	ACTIVE	designer	7 days ago
Mason Yoo	ACTIVE	designer	30 minutes ago
Sophia Lim	INACTIVE	designer	4 hours ago
Lucas Park	ACTIVE	developer	1 hour ago

import { Badge, Table } from '@vapor-ui/core';

const datas = [
    { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
    { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
    { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
    { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
    { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
    { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
    { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
    { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
    { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
    { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
];

const activeness: Record<string, Badge.Props['colorPalette']> = {
    active: 'success',
    inactive: 'hint',
};

export default function Basic() {
    return (
        <Table.Root width="100%">
            <Table.Header>
                <Table.Row backgroundColor="$gray-050">
                    <Table.Heading>Name</Table.Heading>
                    <Table.Heading>Status</Table.Heading>
                    <Table.Heading>Role</Table.Heading>
                    <Table.Heading>Last Active</Table.Heading>
                </Table.Row>
            </Table.Header>

            <Table.Body>
                {datas.map((data, index) => (
                    <Table.Row key={index}>
                        <Table.Cell>{data.name}</Table.Cell>
                        <Table.Cell>
                            <Badge colorPalette={activeness[data.status]} shape="pill">
                                {data.status.toUpperCase()}
                            </Badge>
                        </Table.Cell>
                        <Table.Cell>{data.role}</Table.Cell>
                        <Table.Cell>{data['last-active']}</Table.Cell>
                    </Table.Row>
                ))}
            </Table.Body>
        </Table.Root>
    );
}