Table

표 형태의 데이터를 보여주는 컴포넌트입니다. 시멘틱한 table 태그를 사용하며, 컬럼 너비를 지정하거나 하나의 컬럼을 FULL로 두어 남는 공간을 채울 수 있습니다.

Preview

이름	나이	설명
홍길동	28	프론트엔드 개발자
김철수	34	디자인 및 UI 담당
이영희	25	백엔드 개발자

Usage

tsx

import { Table, TableProps } from "@b1nd/dodam-design-system/components";
import { useState } from "react";

export default function Example() {
  const keys: [string, string][] = [
    ["Name", "160px"],
    ["Age", "80px"],
    ["Note", "FULL"],
  ];
  const data = [
    ["Jane", 28, "Designer"],
    ["John", 30, "Engineer"],
  ];

  return <Table keys={keys} data={data} onRowClick={(i) => console.log(i)} />;
}

Props

Prop	Type	Default	Description
`keys`	`[string, string][]`	`-`	헤더 텍스트와 컬럼 너비 또는 "FULL"을 지정합니다. 예: ["이름","160px"] 또는 ["설명","FULL"]
`data`	`ReactNode[][]`	`[]`	각 내부 배열이 하나의 행(row)을 나타냅니다. 셀은 string, number, React element 등 가능합니다.
`onRowClick`	`(idx: number) => void`	`-`	행 클릭 시 해당 행의 인덱스를 반환하는 콜백 함수