Table

Table 컴포넌트를 렌더링 합니다.

Table.Tr, Table.Th, Table.Td 컴포넌트를 활용할 수 있습니다.

각 행과 열에 대한 스타일을 className props로 지정할 수 있습니다.

data props로 데이터를 전달하면, bodyRow 함수의 파라미터로 하나의 데이터를 전달받아 필요한 열에 대한 UI를 직접 구현할 수 있습니다.

Props

Table<T>

Props 이름	타입	기본값	설명
data	T[]	❌	bodyRow에서 사용할 데이터셋을 전달
headRow	() => ReactNode	❌	Table 컴포넌트의 머리행을 렌더링할 컴포넌트를 전달
bodyRow	(params: T) => ReactNode	❌	data를 통해 전달한 하나의 데이터를 전달받아 렌더링할 컴포넌트를 전달
footerRow	() => ReactNode(optional)	❌	스크롤과 무관하게 Table 하단에 렌더링할 컴포넌트를 전달

Table.Tr

Props 이름	타입	기본값	설명
showLastBottomBorder	boolean(optional)	❌	Table.Tr 컴포넌트 중 마지막 요소의 border-bottom 렌더링 여부

Table.Td

Props 이름	타입	기본값	설명
noSticky	boolean(optional)	❌	position: sticky 적용 여부

UI 테스트

Table 반응형

사용 예시

const MOCK_DATA = [
  {
    name: "김강현",
    introduction:
      "최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다.",
    phone: "010-0000-0000",
    status: "confirm",
  },
  {
    name: "김강민",
    introduction: "최선을 다해 열심히 일합니다. 다수의 업무 경험을 ...",
    phone: "010-0000-0000",
    status: "confirm",
  },
  {
    name: "김강철",
    introduction:
      "최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다. 최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다. 최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다. 최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다. 최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다. 최선을 다해 열심히 일합니다. 다수의 업무 경험을 바탕으로 확실한 일처리 보여드리겠습니다.",
    phone: "010-0000-0000",
    status: "reject",
  },
];

export default function Example() {
  return (
    <Table
      data={MOCK_DATA}
      headRow={() => (
        <Table.Tr>
          <Table.Th className="w-[10rem]">신청자</Table.Th>
          <Table.Th className="min-w-[36rem]">소개</Table.Th>
          <Table.Th className="min-w-[10rem]">전화번호</Table.Th>
          <Table.Th className="min-w-[10rem]">상태</Table.Th>
        </Table.Tr>
      )}
      bodyRow={({ name, introduction, phone, status }) => (
        <Table.Tr key={name} showLastBottomBorder>
          <Table.Td>{name}</Table.Td>
          <Table.Td>{introduction}</Table.Td>
          <Table.Td>{phone}</Table.Td>
          <Table.Td>{status}</Table.Td>
        </Table.Tr>
      )}
      footerRow={() => (
        <Table.Tr>
          <Table.Td colSpan={4}>
            <div className="flex justify-center"> 1 2 3 4 5 6 7 </div>
          </Table.Td>
        </Table.Tr>
      )}
     />
  );
}