KRDS React

표 Table ​

표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다. 기본적으로 대화형 요소가 아니기 때문에 열 제목에 데이터를 정렬하기 위한 컨트롤 요소가 포함된 상황 외에 행 전체나 데이터 셀이 대화형으로 작동하지 않는다.

KRDS 가이드

기본 ​

tsx
import { Table } from '@krds.ui/react'

export default function TableDemo() {
  return (
    <Table>
      <Table.Caption>민원 처리 현황</Table.Caption>
      <Table.Thead>
        <Table.Tr>
          <Table.Th scope="col">민원</Table.Th>
          <Table.Th scope="col">상태</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        <Table.Tr>
          <Table.Td>전입신고</Table.Td>
          <Table.Td>처리 중</Table.Td>
        </Table.Tr>
      </Table.Tbody>
    </Table>
  )
}

Table ​

Props

이름타입기본값설명
scrollboolean-enables horizontal scroll
mobScrollboolean-enables mobile scroll