Table

Table은 사용자가 패턴이나 인사이트를 도출하기 쉽도록 정보들을 읽기 쉽게 정렬하여 보여줍니다. 구조화된 정보들의 모음을 보여주어야 할 때, 정보를 필터하고 정렬해서 제공할 때 사용합니다

<Table data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" > <Table.Column key="title" dataKey="title" title="제목" /> <Table.Column key="id" dataKey="id" title="ID" width={75} /> <Table.Column key="createdAt" dataKey="createdAt" width={180} title="작성일" sortable={true} formatData={({ createdAt }) => createdAt.toDateString()} /> <Table.Column key="price" dataKey="price" width={150} renderHeader={() => ( <OutlinedButton size="sm"> 가격 일괄 수정 </OutlinedButton> )} /> <Table.Column key="menu" width={150} renderDataCell={() => ( <HStack spacing={8}> <OutlinedButton size="sm">수정</OutlinedButton> <OutlinedButton size="sm">삭제</OutlinedButton> </HStack> )} /> </Table>

<Table
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
>
  <Table.Column key="title" dataKey="title" title="제목" />
  <Table.Column
    key="id"
    dataKey="id"
    title="ID"
    width={75}
  />
  <Table.Column
    key="createdAt"
    dataKey="createdAt"
    width={180}
    title="작성일"
    sortable={true}
    formatData={({ createdAt }) => createdAt.toDateString()}
  />
  <Table.Column
    key="price"
    dataKey="price"
    width={150}
    renderHeader={() => (
      <OutlinedButton size="sm">
        가격 일괄 수정
      </OutlinedButton>
    )}
  />
  <Table.Column
    key="menu"
    width={150}
    renderDataCell={() => (
      <HStack spacing={8}>
        <OutlinedButton size="sm">수정</OutlinedButton>
        <OutlinedButton size="sm">삭제</OutlinedButton>
      </HStack>
    )}
  />
</Table>

Loading...

How to use

import { useTable } from '@vibrant-ui/components';

const Component = () => {
  const { Table } = useTable<Data, RowKey>();

  return (
    <Table>
      <Table.Column />
      <Table.Column />
    </Table>
  );
};

Properties

Table

Prop	Type	Default	Description
data	object[]		Table이 보여줄 데이터를 지정합니다.
rowKey	string		행의 식별자가 될 수 있는 키를 지정합니다.
selectable	boolean		행의 선택가능 여부를 결정합니다.
selectButtons	{text: string; onClick: (selectedRows) => void }[]		1개 이상의 행이 선택되었을 때 보여줄 액션의 텍스트와 동작을 지정합니다.
onSelectionChange	(selectedRowKeys) => void		행이 선택됐을 때 선택된 행을 대상으로 실행할 동작을 지정합니다.
renderExpanded	(row: Data) => ReactElementChild		행이 확장됐을 때 보여줄 요소를 지정합니다.
disabledRowKeys	string[]		비활성화할 행의 키를 지정합니다.
expandedRowKeys	string[]		확장되어 있을 행의 키를 지정합니다.
onRow	{ onClick: (row: Data) => void }		특정 행에 대한 동작을 지정합니다. 이 때 Table.Column 중 한 개라도 onDataCell이 지정되어 있다면 해당 기능은 동작하지 않습니다.
onSort	({ dataKey, direction }) => void		정렬 순서가 변경될 때 실행할 동작을 지정합니다.
emptyText	string		데이터의 개수가 없을 때 표시되는 텍스트를 지정합니다.
emptyImage	string		데이터의 개수가 없을 때 표시되는 이미지의 소스를 지정합니다.
tableLayout	auto | fixed		Table 레이아웃 설정을 지정합니다.
loading	auto | fixed		로딩 상태를 지정합니다.

Table.Column

Prop	Type	Default	Description
key	string		열의 식별자.
dataKey	string		데이터 셀에 표시할 data의 키를 정보를 지정합니다. dataKey가 지정되지 않았을 경우 renderDataCell이 필수로 지정되어야 합니다.
width	number | string		열의 너비를 지정합니다.
selectable	boolean		데이터 셀의 선택가능 여부를 결정합니다.
renderDataCell	string		데이터 셀에 렌더할 요소를 지정합니다. renderCell이 지정되지 않았을 경우 dataKey가 필수로 지정되어야 합니다.
formatData	(row: Data) => TextChildren		데이터 셀에 표시되는 데이터를 변환합니다.
onDataCell	{ onCopy: (row: Data) => void, onClick: (row: Data) => void }		특정 데이터 셀에 대한 동작을 지정합니다.
renderHeader	() => ReactElementChild		열의 헤더에 렌더할 요소를 지정합니다. title과 동시에 사용될 수 없습니다.
title	string		열의 헤더에 표시되는 제목을 지정합니다.
description	string		열의 헤더에 헬퍼 아이콘이 노출되며 툴팁의 내용을 지정합니다.
sortable	boolean	false	열의 정렬 가능 여부를 지정합니다.
sortDirection	none | desc | asc	'none'	열의 초기 정렬 방향을 지정합니다.
alignVertical	{ header: 'start' \| 'center' \| 'end', dataCell: 'start' \| 'center' \| 'end' }	{ header: 'center', dataCell: 'center' }	헤더와 데이터 셀의 콘텐츠의 세로 축 정렬을 지정합니다.
alignHorizontal	{ header: 'start' \| 'center' \| 'end', dataCell: 'start' \| 'center' \| 'end' }	{ header: 'center', dataCell: 'center' }	헤더와 데이터 셀의 콘텐츠의 가로 축 정렬을 지정합니다.
lineLimit	{ header: number, dataCell: number }		헤더와 데이터 셀의 lineLimit을 지정합니다.
wordBreak	{ header: TextSystemProps['wordBreak'], dataCell: TextSystemProps['wordBreak'] }		헤더와 데이터 셀의 wordBreak을 지정합니다.
whiteSpace	{ header: TextSystemProps['whiteSpace'], dataCell: TextSystemProps['whiteSpace'] }		헤더와 데이터 셀의 whiteSpace을 지정합니다.
overflowWrap	{ header: TextSystemProps['overflowWrap'], dataCell: TextSystemProps['overflowWrap'] }		헤더와 데이터 셀의 overflowWrap을 지정합니다.

Usage

행 선택 vs 셀 선택

selectable = true일 경우 체크박스 전용 칼럼이 좌측에 생성됩니다. 데이터 셀의 체크박스를 클릭 시 해당 행이 선택되며 헤더의 체크 박스는 불확정(indeterminate) 상태로 변환됩니다. 헤더의 체크박스 클릭 시 모든 행이 선택된 상태로 전환됩니다. 행이 선택됐을 때 테이블 헤더에서 실행할 수 있는 버튼을 selectButtons 속성을 통해 지정할 수 있습니다. 선택된 행이 바뀔 때 onSelecitonChange 콜백 함수가 실행됩니다.

<Table selectable={true} selectButtons={[ { text: '수정', }, { text: '삭제', }, ]} data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" > <Table.Column key="title" dataKey="title" title="제목" /> <Table.Column key="id" dataKey="id" title="ID" /> <Table.Column key="createdAt" dataKey="createdAt" title="작성일" formatData={({ createdAt }) => createdAt.toDateString()} /> </Table>

<Table
  selectable={true}
  selectButtons={[
    {
      text: '수정',
    },
    {
      text: '삭제',
    },
  ]}
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
>
  <Table.Column key="title" dataKey="title" title="제목" />
  <Table.Column key="id" dataKey="id" title="ID" />
  <Table.Column
    key="createdAt"
    dataKey="createdAt"
    title="작성일"
    formatData={({ createdAt }) => createdAt.toDateString()}
  />
</Table>

Loading...

<Table data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" > <Table.Column key="title" dataKey="title" title="제목" selectable={true} onDataCell={{ onClick: () => {}, }} /> <Table.Column key="id" dataKey="id" title="ID" selectable={true} onDataCell={{ onClick: () => {}, }} /> <Table.Column selectable={true} key="createdAt" dataKey="createdAt" title="작성일" formatData={({ createdAt }) => createdAt.toDateString()} onDataCell={{ onClick: () => {}, }} /> </Table>

<Table
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
>
  <Table.Column
    key="title"
    dataKey="title"
    title="제목"
    selectable={true}
    onDataCell={{
      onClick: () => {},
    }}
  />
  <Table.Column
    key="id"
    dataKey="id"
    title="ID"
    selectable={true}
    onDataCell={{
      onClick: () => {},
    }}
  />
  <Table.Column
    selectable={true}
    key="createdAt"
    dataKey="createdAt"
    title="작성일"
    formatData={({ createdAt }) => createdAt.toDateString()}
    onDataCell={{
      onClick: () => {},
    }}
  />
</Table>

Loading...

행 비활성화

disabledRowKeys 속성을 통해서 비활성화할 행을 선택할 수 있습니다. 체크 박스와 확장 아이콘 버튼이 비활성화되고 텍스트의 색상도 disable로 바뀝니다. renderDataCell로 렌더된 요소는 따로 비활성화시켜주어야 합니다.

확장 가능 행

사용자가 행을 확장했을 때 보여줄 요소를 renderExpanded 속성을 통해 지정합니다. expandedRowKeys 속성을 통해 초기에 확정된 채로 보여줄 행을 선택합니다.

<Table data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" renderExpanded={({ title }) => <Callout title={title} />} expandedRowKeys={['3']} > <Table.Column key="title" dataKey="title" title="제목" /> <Table.Column key="id" dataKey="id" title="ID" /> <Table.Column key="createdAt" dataKey="createdAt" title="작성일" formatData={({ createdAt }) => createdAt.toDateString()} /> </Table>

<Table
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
  renderExpanded={({ title }) => <Callout title={title} />}
  expandedRowKeys={['3']}
>
  <Table.Column key="title" dataKey="title" title="제목" />
  <Table.Column key="id" dataKey="id" title="ID" />
  <Table.Column
    key="createdAt"
    dataKey="createdAt"
    title="작성일"
    formatData={({ createdAt }) => createdAt.toDateString()}
  />
</Table>

Loading...

데이터 정렬

Table.Column의 sortable 속성을 통해서 정렬이 필요한 열을 지정할 수 있습니다. 사용자는 정렬이 지정된 열의 헤더를 클릭하여 정렬 방향을 바꿀 수 있습니다. 정렬 순서가 바뀔 때 Table의 onSort 콜백 함수가 실행됩니다.

<Table data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" > <Table.Column key="title" dataKey="title" title="제목" selectable={true} /> <Table.Column key="id" dataKey="id" title="ID" selectable={true} /> <Table.Column selectable={true} key="createdAt" dataKey="createdAt" title="작성일" formatData={({ createdAt }) => createdAt.toDateString()} sortable={true} /> </Table>

<Table
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
>
  <Table.Column
    key="title"
    dataKey="title"
    title="제목"
    selectable={true}
  />
  <Table.Column
    key="id"
    dataKey="id"
    title="ID"
    selectable={true}
  />
  <Table.Column
    selectable={true}
    key="createdAt"
    dataKey="createdAt"
    title="작성일"
    formatData={({ createdAt }) => createdAt.toDateString()}
    sortable={true}
  />
</Table>

Loading...

VirtualizedTable

대량의 리스트를 테이블에서 제공해야 할 때, 적합한 컴포넌트입니다. 사용법은 Table 과 동일하며, height props 만 추가되었습니다. 기존 Table 을 VirtualizedTable 로만 대치해주면 됩니다.

<VirtualizedTable data={[ { title: '제목1', id: '1', createdAt: new Date(2022, 11, 20), price: 10000, }, { title: '제목2', id: '2', createdAt: new Date(2022, 11, 21), price: 11000, }, { title: '제목3', id: '3', createdAt: new Date(2022, 11, 22), price: 10000, }, ]} rowKey="id" height={800} > <Table.Column key="title" dataKey="title" title="제목" /> <Table.Column key="id" dataKey="id" title="ID" width={75} /> <Table.Column key="createdAt" dataKey="createdAt" width={180} title="작성일" sortable={true} formatData={({ createdAt }) => createdAt.toDateString()} /> <Table.Column key="price" dataKey="price" width={150} renderHeader={() => ( <OutlinedButton size="sm"> 가격 일괄 수정 </OutlinedButton> )} /> <Table.Column key="menu" width={150} renderDataCell={() => ( <HStack spacing={8}> <OutlinedButton size="sm">수정</OutlinedButton> <OutlinedButton size="sm">삭제</OutlinedButton> </HStack> )} /> </VirtualizedTable>

<VirtualizedTable
  data={[
    {
      title: '제목1',
      id: '1',
      createdAt: new Date(2022, 11, 20),
      price: 10000,
    },
    {
      title: '제목2',
      id: '2',
      createdAt: new Date(2022, 11, 21),
      price: 11000,
    },
    {
      title: '제목3',
      id: '3',
      createdAt: new Date(2022, 11, 22),
      price: 10000,
    },
  ]}
  rowKey="id"
  height={800}
>
  <Table.Column key="title" dataKey="title" title="제목" />
  <Table.Column
    key="id"
    dataKey="id"
    title="ID"
    width={75}
  />
  <Table.Column
    key="createdAt"
    dataKey="createdAt"
    width={180}
    title="작성일"
    sortable={true}
    formatData={({ createdAt }) => createdAt.toDateString()}
  />
  <Table.Column
    key="price"
    dataKey="price"
    width={150}
    renderHeader={() => (
      <OutlinedButton size="sm">
        가격 일괄 수정
      </OutlinedButton>
    )}
  />
  <Table.Column
    key="menu"
    width={150}
    renderDataCell={() => (
      <HStack spacing={8}>
        <OutlinedButton size="sm">수정</OutlinedButton>
        <OutlinedButton size="sm">삭제</OutlinedButton>
      </HStack>
    )}
  />
</VirtualizedTable>

Loading...

Properties

VitualizedTable

Prop	Type	Default	Description
data	object[]		Table이 보여줄 데이터를 지정합니다.
rowKey	string		행의 식별자가 될 수 있는 키를 지정합니다.
height	number	500	VirtualizedTable 의 높이를 지정합니다.
selectable	boolean		행의 선택가능 여부를 결정합니다.
selectButtons	{text: string; onClick: (selectedRows) => void }[]		1개 이상의 행이 선택되었을 때 보여줄 액션의 텍스트와 동작을 지정합니다.
onSelectionChange	(selectedRowKeys) => void		행이 선택됐을 때 선택된 행을 대상으로 실행할 동작을 지정합니다.
renderExpanded	(row: Data) => ReactElementChild		행이 확장됐을 때 보여줄 요소를 지정합니다.
disabledRowKeys	string[]		비활성화할 행의 키를 지정합니다.
expandedRowKeys	string[]		확장되어 있을 행의 키를 지정합니다.
onRow	{ onClick: (row: Data) => void }		특정 행에 대한 동작을 지정합니다. 이 때 Table.Column 중 한 개라도 onDataCell이 지정되어 있다면 해당 기능은 동작하지 않습니다.
onSort	({ dataKey, direction }) => void		정렬 순서가 변경될 때 실행할 동작을 지정합니다.
emptyText	string		데이터의 개수가 없을 때 표시되는 텍스트를 지정합니다.
emptyImage	string		데이터의 개수가 없을 때 표시되는 이미지의 소스를 지정합니다.
tableLayout	auto | fixed		Table 레이아웃 설정을 지정합니다.
loading	auto | fixed		로딩 상태를 지정합니다.