Skip to content

Commit 083a1b3

Browse files
saurabhdawaresaurabhdaware
committed
feat: virtulization on table poc
1 parent 94cf1d2 commit 083a1b3

File tree

2 files changed

+105
-43
lines changed

2 files changed

+105
-43
lines changed

‎packages/blade/src/components/Table/Table.web.tsx

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Table as ReactTable } from '@table-library/react-table-library/table';
33
import { useTheme as useTableTheme } from '@table-library/react-table-library/theme';
44
import type { MiddlewareFunction } from '@table-library/react-table-library/types/common';
55
import { useSort } from '@table-library/react-table-library/sort';
6+
import { Virtualized } from '@table-library/react-table-library/virtualized';
67
import { usePagination } from '@table-library/react-table-library/pagination';
78
import {
89
SelectClickTypes,
@@ -31,7 +32,7 @@ import type {
3132
import { makeBorderSize, makeMotionTime } from '~utils';
3233
import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
3334
import { throwBladeError } from '~utils/logger';
34-
import type { BoxProps } from '~components/Box';
35+
import { Box, BoxProps } from '~components/Box';
3536
import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles';
3637
import BaseBox from '~components/Box/BaseBox';
3738
import { Spinner } from '~components/Spinner';
@@ -503,24 +504,26 @@ const _Table = <Item,>({
503504
</RefreshWrapper>
504505
)}
505506
{toolbar}
506-
<StyledReactTable
507-
role="table"
508-
layout={{ fixedHeader: shouldHeaderBeSticky, horizontalScroll: true }}
509-
data={data}
510-
// @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
511-
theme={tableTheme}
512-
select={selectionType !== 'none' ? rowSelectConfig : null}
513-
sort={sortFunctions ? sort : null}
514-
$styledProps={{
515-
height,
516-
}}
517-
pagination={hasPagination ? paginationConfig : null}
518-
{...makeAccessible({ multiSelectable: selectionType === 'multiple' })}
519-
{...metaAttribute({ name: MetaConstants.Table })}
520-
{...makeAnalyticsAttribute(rest)}
521-
>
522-
{children}
523-
</StyledReactTable>
507+
<Box height="300px">
508+
<StyledReactTable
509+
role="table"
510+
layout={{ fixedHeader: true, horizontalScroll: true, isDiv: true }}
511+
data={data}
512+
// @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
513+
theme={tableTheme}
514+
select={selectionType !== 'none' ? rowSelectConfig : null}
515+
sort={sortFunctions ? sort : null}
516+
$styledProps={{
517+
height,
518+
}}
519+
pagination={hasPagination ? paginationConfig : null}
520+
{...makeAccessible({ multiSelectable: selectionType === 'multiple' })}
521+
{...metaAttribute({ name: MetaConstants.Table })}
522+
{...makeAnalyticsAttribute(rest)}
523+
>
524+
{children}
525+
</StyledReactTable>
526+
</Box>
524527
{pagination}
525528
</BaseBox>
526529
)}
@@ -532,4 +535,10 @@ const Table = assignWithoutSideEffects(_Table, {
532535
componentId: ComponentIds.Table,
533536
});
534537

535-
export { Table };
538+
const TableVirtulized = ({ header, body, tableData }) => {
539+
console.log({ header, body });
540+
541+
return <Virtualized tableList={tableData} rowHeight={57} header={() => header} body={body} />;
542+
};
543+
544+
export { Table, TableVirtulized };

‎packages/blade/src/components/Table/docs/BasicTable.stories.tsx

Lines changed: 76 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
2525
import { Button } from '~components/Button';
2626
import { IconButton } from '~components/Button/IconButton';
2727
import { CheckIcon, CloseIcon } from '~components/Icons';
28+
import { TableVirtulized } from '../Table.web';
2829

2930
export default {
3031
title: 'Components/Table',
@@ -71,7 +72,7 @@ export default {
7172
} as Meta<TableProps<unknown>>;
7273

7374
const nodes: Item[] = [
74-
...Array.from({ length: 100 }, (_, i) => ({
75+
...Array.from({ length: 50 }, (_, i) => ({
7576
id: (i + 1).toString(),
7677
paymentId: `rzp${Math.floor(Math.random() * 1000000)}`,
7778
amount: Number((Math.random() * 10000).toFixed(2)),
@@ -111,6 +112,79 @@ const data: TableData<Item> = {
111112
};
112113

113114
const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
115+
return (
116+
<Box padding="spacing.5" overflow="auto" height="200px">
117+
<TableComponent
118+
{...args}
119+
data={data}
120+
onSelectionChange={console.log}
121+
selectionType="single"
122+
height="100%"
123+
>
124+
{(tableData) => (
125+
<TableVirtulized
126+
tableData={tableData}
127+
header={() => (
128+
<TableHeaderRow>
129+
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
130+
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
131+
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
132+
<TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
133+
<TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
134+
<TableHeaderCell headerKey="STATUS">Status</TableHeaderCell>
135+
</TableHeaderRow>
136+
)}
137+
body={(tableItem, index) => (
138+
<TableRow
139+
key={index}
140+
item={tableItem}
141+
onClick={() => {
142+
console.log('where');
143+
}}
144+
>
145+
<TableCell>
146+
<Code size="medium">{tableItem.paymentId}</Code>
147+
</TableCell>
148+
<TableEditableCell
149+
accessibilityLabel="Amount"
150+
placeholder="Enter text"
151+
successText="Amount is valid"
152+
/>
153+
<TableCell>{tableItem.account}</TableCell>
154+
<TableCell>
155+
{tableItem.date?.toLocaleDateString('en-IN', {
156+
year: 'numeric',
157+
month: '2-digit',
158+
day: '2-digit',
159+
})}
160+
</TableCell>
161+
<TableCell>{tableItem.method}</TableCell>
162+
<TableCell>
163+
<Badge
164+
size="medium"
165+
color={
166+
tableItem.status === 'Completed'
167+
? 'positive'
168+
: tableItem.status === 'Pending'
169+
? 'notice'
170+
: tableItem.status === 'Failed'
171+
? 'negative'
172+
: 'primary'
173+
}
174+
>
175+
{tableItem.status}
176+
</Badge>
177+
</TableCell>
178+
</TableRow>
179+
)}
180+
/>
181+
)}
182+
</TableComponent>
183+
</Box>
184+
);
185+
};
186+
187+
export const NormalTable: StoryFn<typeof TableComponent> = ({ ...args }) => {
114188
return (
115189
<Box padding="spacing.5" overflow="auto" minHeight="400px">
116190
<TableComponent
@@ -120,6 +194,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
120194
onSelectionChange={console.log}
121195
isFirstColumnSticky
122196
selectionType="single"
197+
height="100%"
123198
toolbar={
124199
<TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
125200
<TableToolbarActions>
@@ -137,15 +212,6 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
137212
DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
138213
STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
139214
}}
140-
pagination={
141-
<TablePagination
142-
onPageChange={console.log}
143-
defaultPageSize={10}
144-
onPageSizeChange={console.log}
145-
showPageSizePicker
146-
showPageNumberSelector
147-
/>
148-
}
149215
>
150216
{(tableData) => (
151217
<>
@@ -227,19 +293,6 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
227293
</TableRow>
228294
))}
229295
</TableBody>
230-
<TableFooter>
231-
<TableFooterRow>
232-
<TableFooterCell>Total</TableFooterCell>
233-
<TableFooterCell>-</TableFooterCell>
234-
<TableFooterCell>-</TableFooterCell>
235-
<TableFooterCell>-</TableFooterCell>
236-
<TableFooterCell>-</TableFooterCell>
237-
{args.selectionType === 'multiple' ? <TableFooterCell>-</TableFooterCell> : null}
238-
<TableFooterCell>
239-
<Amount value={10} />
240-
</TableFooterCell>
241-
</TableFooterRow>
242-
</TableFooter>
243296
</>
244297
)}
245298
</TableComponent>

0 commit comments

Comments
 (0)