Virtualized Table 을 구현한다.

[maxi-101]

Summary

페이지네이션 없이 대량의 row 데이터를 렌더링 하기 위한 Virtualized Table 을 구현합니다.

Background

기존 Table 에는 페이지네이션 없이 대량의 row 데이터 렌더링에 최적화가 되어있지 않습니다.

2023-04-21.11.38.22.mov

Implementation

Virtuoso 라이브러리를 활용해 기존 Table 의 Header, Data 부분을 나누어 구현

<TableVirtuoso
  style={{ height: 400 }}
  data={data}
  fixedHeaderContent={() => (<HeaderFromTable />)}
  itemContent={(index, item) => (<RowDataFromTable />)}
/>

usage

• Table 대신 VirtualizedTable 컴포넌트를 대치하면 바로 사용 가능
• 추가된 props : height(default: 500)

    <VirtualizedTable {...props} selectable={false} renderExpanded={undefined}>
      <Table.Column<Data>
        key="name"
        dataKey="name"
        width={200}
        renderHeader={() => <OutlinedButton size="sm">이름 수정</OutlinedButton>}
      />
      <Table.Column<Data> key="calories" dataKey="calories" title="calories" width={120} />
      <Table.Column<Data>
        key="fat"
        dataKey="fat"
        title="fat"
        description="abc"
        sortable={true}
        defaultSortDirection="asc"
        width={120}
        formatData={({ fat }) => `${fat} kcal`}
      />
      <Table.Column<Data> key="carbs" dataKey="carbs" title="carbs"  width={120} />
      <Table.Column<Data> key="protein" dataKey="protein" title="protein"  width={120} />
      {['Edit', 'Delete'].map(value => (
        <Table.Column<Data>
          key={value}
          title=""
          renderDataCell={() => <OutlinedButton size="sm">{value}</OutlinedButton>}
          width={120}
        />
      ))}
    </VirtualizedTable>

[YimJiYoung]

VirtualizedTable의 API는 Table과 동일하게 가는 걸까요 ? 사용법이 달라진다거나 뭔가 추가적으로 필요한 속성은 따로 없는지 궁금합니다

[maxi-101]

아 제가 쓰다 말았는데, 기존 Table 을 VirtualizedTable 로 대치만 되면 호환되도록 수정할 계획입니다! @YimJiYoung

지금 일단 어느정도 형태가 나와서 rfc 를 쓰긴했는데, 수정될 수도 있습니다 ㅎㅎ...