---
description: 리스트 전용 테이블
---

# list-table

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FupI9eghcfftANREziFVQ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-02-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.13.21.png?alt=media&#x26;token=4b4a0dcf-7874-4dbc-9926-cb10dcd5efb5" alt=""><figcaption></figcaption></figure>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>columns</td><td>ArrayList</td><td>[]</td><td>테이블 상단 column 값</td></tr><tr><td>data</td><td>ArrayList</td><td>[]</td><td>리스트 데이터</td></tr></tbody></table>

### Usage

```typescript
import { ListTable } from '@/src/components/ui/list-table'

export function ListTableDemo() {
  return (
    <ListTable
      columns={[
        {
          id: '아이디',
          username: '사용자명',
          email: '이메일',
          role: '역할',
          lastLogin: '마지막 로그인',
        }
      ]}
      data={[
        {
          "id": 1,
          "username": "cyashanov0",
          "email": "tromagosa0@springer.com",
          "role": "admin",
          "lastLogin": "2024-12-05"
        }
      ]}
    />
  )
}
```

