Skip to content

Commit

Permalink
feat: virtulization on table poc
Browse files Browse the repository at this point in the history
  • Loading branch information
@saurabhdaware
saurabhdaware committed Jan 8, 2025
1 parent 94cf1d2 commit 083a1b3
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 43 deletions.
49 changes: 29 additions & 20 deletions packages/blade/src/components/Table/Table.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Table as ReactTable } from '@table-library/react-table-library/table';
import { useTheme as useTableTheme } from '@table-library/react-table-library/theme';
import type { MiddlewareFunction } from '@table-library/react-table-library/types/common';
import { useSort } from '@table-library/react-table-library/sort';
import { Virtualized } from '@table-library/react-table-library/virtualized';
import { usePagination } from '@table-library/react-table-library/pagination';
import {
SelectClickTypes,
Expand Down Expand Up @@ -31,7 +32,7 @@ import type {
import { makeBorderSize, makeMotionTime } from '~utils';
import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
import { throwBladeError } from '~utils/logger';
import type { BoxProps } from '~components/Box';
import { Box, BoxProps } from '~components/Box';
import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles';
import BaseBox from '~components/Box/BaseBox';
import { Spinner } from '~components/Spinner';
Expand Down Expand Up @@ -503,24 +504,26 @@ const _Table = <Item,>({
</RefreshWrapper>
)}
{toolbar}
<StyledReactTable
role="table"
layout={{ fixedHeader: shouldHeaderBeSticky, horizontalScroll: true }}
data={data}
// @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
theme={tableTheme}
select={selectionType !== 'none' ? rowSelectConfig : null}
sort={sortFunctions ? sort : null}
$styledProps={{
height,
}}
pagination={hasPagination ? paginationConfig : null}
{...makeAccessible({ multiSelectable: selectionType === 'multiple' })}
{...metaAttribute({ name: MetaConstants.Table })}
{...makeAnalyticsAttribute(rest)}
>
{children}
</StyledReactTable>
<Box height="300px">
<StyledReactTable
role="table"
layout={{ fixedHeader: true, horizontalScroll: true, isDiv: true }}
data={data}
// @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
theme={tableTheme}
select={selectionType !== 'none' ? rowSelectConfig : null}
sort={sortFunctions ? sort : null}
$styledProps={{
height,
}}
pagination={hasPagination ? paginationConfig : null}
{...makeAccessible({ multiSelectable: selectionType === 'multiple' })}
{...metaAttribute({ name: MetaConstants.Table })}
{...makeAnalyticsAttribute(rest)}
>
{children}
</StyledReactTable>
</Box>
{pagination}
</BaseBox>
)}
Expand All @@ -532,4 +535,10 @@ const Table = assignWithoutSideEffects(_Table, {
componentId: ComponentIds.Table,
});

export { Table };
const TableVirtulized = ({ header, body, tableData }) => {
console.log({ header, body });

return <Virtualized tableList={tableData} rowHeight={57} header={() => header} body={body} />;
};

export { Table, TableVirtulized };
99 changes: 76 additions & 23 deletions packages/blade/src/components/Table/docs/BasicTable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
import { Button } from '~components/Button';
import { IconButton } from '~components/Button/IconButton';
import { CheckIcon, CloseIcon } from '~components/Icons';
import { TableVirtulized } from '../Table.web';

export default {
title: 'Components/Table',
Expand Down Expand Up @@ -71,7 +72,7 @@ export default {
} as Meta<TableProps<unknown>>;

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

const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
return (
<Box padding="spacing.5" overflow="auto" height="200px">
<TableComponent
{...args}
data={data}
onSelectionChange={console.log}
selectionType="single"
height="100%"
>
{(tableData) => (
<TableVirtulized
tableData={tableData}
header={() => (
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
<TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
<TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
<TableHeaderCell headerKey="STATUS">Status</TableHeaderCell>
</TableHeaderRow>
)}
body={(tableItem, index) => (
<TableRow
key={index}
item={tableItem}
onClick={() => {
console.log('where');
}}
>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableEditableCell
accessibilityLabel="Amount"
placeholder="Enter text"
successText="Amount is valid"
/>
<TableCell>{tableItem.account}</TableCell>
<TableCell>
{tableItem.date?.toLocaleDateString('en-IN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})}
</TableCell>
<TableCell>{tableItem.method}</TableCell>
<TableCell>
<Badge
size="medium"
color={
tableItem.status === 'Completed'
? 'positive'
: tableItem.status === 'Pending'
? 'notice'
: tableItem.status === 'Failed'
? 'negative'
: 'primary'
}
>
{tableItem.status}
</Badge>
</TableCell>
</TableRow>
)}
/>
)}
</TableComponent>
</Box>
);
};

export const NormalTable: StoryFn<typeof TableComponent> = ({ ...args }) => {
return (
<Box padding="spacing.5" overflow="auto" minHeight="400px">
<TableComponent
Expand All @@ -120,6 +194,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
onSelectionChange={console.log}
isFirstColumnSticky
selectionType="single"
height="100%"
toolbar={
<TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
<TableToolbarActions>
Expand All @@ -137,15 +212,6 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
}}
pagination={
<TablePagination
onPageChange={console.log}
defaultPageSize={10}
onPageSizeChange={console.log}
showPageSizePicker
showPageNumberSelector
/>
}
>
{(tableData) => (
<>
Expand Down Expand Up @@ -227,19 +293,6 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
</TableRow>
))}
</TableBody>
<TableFooter>
<TableFooterRow>
<TableFooterCell>Total</TableFooterCell>
<TableFooterCell>-</TableFooterCell>
<TableFooterCell>-</TableFooterCell>
<TableFooterCell>-</TableFooterCell>
<TableFooterCell>-</TableFooterCell>
{args.selectionType === 'multiple' ? <TableFooterCell>-</TableFooterCell> : null}
<TableFooterCell>
<Amount value={10} />
</TableFooterCell>
</TableFooterRow>
</TableFooter>
</>
)}
</TableComponent>
Expand Down

0 comments on commit 083a1b3

Please sign in to comment.