-
Notifications
You must be signed in to change notification settings - Fork 0
-
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>
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 1 reply
-
VirtualizedTable의 API는 Table과 동일하게 가는 걸까요 ? 사용법이 달라진다거나 뭔가 추가적으로 필요한 속성은 따로 없는지 궁금합니다
Beta Was this translation helpful? Give feedback.
All reactions
1 reply
-
아 제가 쓰다 말았는데, 기존 Table 을 VirtualizedTable 로 대치만 되면 호환되도록 수정할 계획입니다! @YimJiYoung
지금 일단 어느정도 형태가 나와서 rfc 를 쓰긴했는데, 수정될 수도 있습니다 ᄒᄒ...
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment