From 083a1b31721fe25a5aa3715603f727aad77f7ab3 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Wed, 8 Jan 2025 09:30:43 +0530 Subject: [PATCH 01/97] feat: virtulization on table poc --- .../blade/src/components/Table/Table.web.tsx | 49 +++++---- .../Table/docs/BasicTable.stories.tsx | 99 ++++++++++++++----- 2 files changed, 105 insertions(+), 43 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 10a3cf1da78..f50e6a9af96 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -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, @@ -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'; @@ -503,24 +504,26 @@ const _Table = ({ )} {toolbar} - - {children} - + + + {children} + + {pagination} )} @@ -532,4 +535,10 @@ const Table = assignWithoutSideEffects(_Table, { componentId: ComponentIds.Table, }); -export { Table }; +const TableVirtulized = ({ header, body, tableData }) => { + console.log({ header, body }); + + return header} body={body} />; +}; + +export { Table, TableVirtulized }; diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index d9f3c6831d9..e41a28b81c8 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -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', @@ -71,7 +72,7 @@ export default { } as Meta>; 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)), @@ -111,6 +112,79 @@ const data: TableData = { }; const TableTemplate: StoryFn = ({ ...args }) => { + return ( + + + {(tableData) => ( + ( + + ID + Amount + Account + Date + Method + Status + + )} + body={(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + /> + )} + + + ); +}; + +export const NormalTable: StoryFn = ({ ...args }) => { return ( = ({ ...args }) => { onSelectionChange={console.log} isFirstColumnSticky selectionType="single" + height="100%" toolbar={ @@ -137,15 +212,6 @@ const TableTemplate: StoryFn = ({ ...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={ - - } > {(tableData) => ( <> @@ -227,19 +293,6 @@ const TableTemplate: StoryFn = ({ ...args }) => { ))} - - - Total - - - - - - - - - {args.selectionType === 'multiple' ? - : null} - - - - - )} From 7d2dd2b78ebe6d72ec0ca94b49ab5d531d954662 Mon Sep 17 00:00:00 2001 From: tewarig Date: Sun, 12 Jan 2025 14:01:46 +0530 Subject: [PATCH 02/97] chore: virtulized selectable demo --- .../src/components/Table/docs/BasicTable.stories.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index e41a28b81c8..4ff52f6330f 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -72,7 +72,7 @@ export default { } as Meta>; const nodes: Item[] = [ - ...Array.from({ length: 50 }, (_, i) => ({ + ...Array.from({ length: 400 }, (_, i) => ({ id: (i + 1).toString(), paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, amount: Number((Math.random() * 10000).toFixed(2)), @@ -193,8 +193,13 @@ export const NormalTable: StoryFn = ({ ...args }) => { defaultSelectedIds={['1', '3']} onSelectionChange={console.log} isFirstColumnSticky - selectionType="single" height="100%" + selectionType="multiple" + // eslint-disable-next-line react/jsx-no-duplicate-props + onSelectionChange={({ selectedIds }) => { + console.log(selectedIds); + // setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id))); + }} toolbar={ From 0aa7112d2581f5e31aff414ba8c6cc6b8d69e01f Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 14 Jan 2025 13:55:07 +0530 Subject: [PATCH 03/97] chore: minor changes --- packages/blade/src/components/Table/Table.web.tsx | 9 ++++++++- packages/blade/src/components/Table/TableBody.web.tsx | 9 +++++++++ .../blade/src/components/Table/TableHeader.web.tsx | 2 ++ .../src/components/Table/docs/BasicTable.stories.tsx | 10 ++++++++-- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index f50e6a9af96..e114ee18d4b 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -538,7 +538,14 @@ const Table = assignWithoutSideEffects(_Table, { const TableVirtulized = ({ header, body, tableData }) => { console.log({ header, body }); - return header} body={body} />; + return ( + header} + body={body} + /> + ); }; export { Table, TableVirtulized }; diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 717924ebbdb..746ef0b0ad8 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -366,11 +366,13 @@ const StyledRow = styled(Row)<{ return { '&&&': { backgroundColor: 'transparent', + display: 'flex', '& .cell-wrapper': $showBorderedCells ? { borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)), borderRightStyle: 'solid', borderRightColor: getIn(theme.colors, tableRow.borderColor), + display: 'flex', } : undefined, '& td:last-child .cell-wrapper': { @@ -462,6 +464,13 @@ const _TableRow = ({ const isMultiSelect = selectionType === 'multiple'; const isSelected = selectedRows?.includes(item.id); const hasHoverActions = Boolean(hoverActions); + console.log({ + isSelectable, + isMultiSelect, + isSelected, + hasHoverActions, + hoverActions, + }); useEffect(() => { if (isDisabled) { diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index c7e7611e148..8e5753c03f5 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -212,6 +212,8 @@ const StyledHeaderRow = styled(HeaderRow)<{ $showBorderedCells: boolean }>( borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)), borderRightColor: getIn(theme.colors, tableRow.borderColor), borderRightStyle: 'solid', + display: 'flex', + justifyContent: 'space-between', } : undefined, '& th:last-child ': { diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 4ff52f6330f..a2eb1150520 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -26,6 +26,12 @@ import { Button } from '~components/Button'; import { IconButton } from '~components/Button/IconButton'; import { CheckIcon, CloseIcon } from '~components/Icons'; import { TableVirtulized } from '../Table.web'; +// import { +// HeaderCellSelect, +// useRowSelect, +// CellSelect, +// SelectTypes, +// } from '@table-library/react-table-library/select'; export default { title: 'Components/Table', @@ -113,7 +119,7 @@ const data: TableData = { const TableTemplate: StoryFn = ({ ...args }) => { return ( - + = ({ ...args }) => { Account Date Method - Status + Status demo )} body={(tableItem, index) => ( From 8f9cb0d71eb125ffe5f3a63753c2338114da341c Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 15 Jan 2025 00:39:38 +0530 Subject: [PATCH 04/97] chore: update table styling and virtulization poc --- .../blade/src/components/Table/Table.web.tsx | 2 +- .../src/components/Table/TableHeader.web.tsx | 4 ++++ .../Table/docs/BasicTable.stories.tsx | 21 +++++++++++-------- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index e114ee18d4b..bbfc2d101f2 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -542,7 +542,7 @@ const TableVirtulized = ({ header, body, tableData }) => { header} + header={header} body={body} /> ); diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 8e5753c03f5..20bf3d8312d 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -70,8 +70,12 @@ const SortIcon = ({ const StyledHeader = styled(Header)({ '&&&': { + display: 'flex', + justifyContent: 'space-between', '& tr:first-child th': { borderTop: 'none', + display: 'flex', + justifyContent: 'space-between', }, }, }); diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index a2eb1150520..f77584829d9 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -120,25 +120,28 @@ const data: TableData = { const TableTemplate: StoryFn = ({ ...args }) => { return ( + <> total rows : {nodes.length} {(tableData) => ( ( - - ID - Amount - Account - Date - Method - Status demo - + + + ID + Amount + Account + Date + Method + Status demo + + )} body={(tableItem, index) => ( Date: Wed, 15 Jan 2025 15:12:21 +0530 Subject: [PATCH 05/97] chore: add toolbar --- .../src/components/Table/docs/BasicTable.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index f77584829d9..fced4ece196 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -127,6 +127,16 @@ const TableTemplate: StoryFn = ({ ...args }) => { onSelectionChange={console.log} selectionType="multiple" height="100%" + toolbar={ + + + + + + + } > {(tableData) => ( Date: Thu, 16 Jan 2025 02:28:49 +0530 Subject: [PATCH 06/97] chore: styling fix --- .../blade/src/components/Table/Table.web.tsx | 45 +++-- .../src/components/Table/TableBody.web.tsx | 172 +++++++++++++++++- .../src/components/Table/TableContext.tsx | 4 + .../src/components/Table/TableHeader.web.tsx | 36 +++- .../Table/docs/BasicTable.stories.tsx | 11 +- 5 files changed, 238 insertions(+), 30 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index bbfc2d101f2..3bc6452cbcd 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -3,7 +3,6 @@ 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, @@ -44,6 +43,7 @@ import getIn from '~utils/lodashButBetter/get'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsMobile } from '~utils/useIsMobile'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; +import { Virtualized } from '@table-library/react-table-library/virtualized'; const rowSelectType: Record< NonNullable['selectionType']>, @@ -57,8 +57,26 @@ const rowSelectType: Record< // Get the number of TableHeaderCell components. // This is very complicated but the only way to iterate through the structure and get number of header cells. // Assuming number of header cells is the same as number of columns -const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): number => { +const getTableHeaderCellCount = ( + children: (data: []) => React.ReactElement, + isVirtualized: boolean, +): number => { const tableRootComponent = children([]); + if (isVirtualized) { + if (React.isValidElement(tableRootComponent)) { + console.log('tableRootComponent', tableRootComponent); + if (React.isValidElement(tableRootComponent.props.header())) { + const tableHeaderRow = tableRootComponent.props.header().props.children; + if (React.isValidElement(tableHeaderRow)) { + const tableHeaderCells = tableHeaderRow.props.children; + return tableHeaderCells.length; + } + } + // const tableHeaderArray = tableRootComponent.props.header().props.children; + // return tableHeaderArray; + } + } + if (tableRootComponent && React.isValidElement(tableRootComponent)) { const tableComponentArray = React.Children.toArray(tableRootComponent); if (React.isValidElement(tableComponentArray[0])) { @@ -174,7 +192,7 @@ const _Table = ({ }); // Table Theme - const columnCount = getTableHeaderCellCount(children); + const columnCount = getTableHeaderCellCount(children, true); const firstColumnStickyHeaderCellCSS = isFirstColumnSticky ? ` &:nth-of-type(1) { @@ -435,6 +453,8 @@ const _Table = ({ showBorderedCells, hasHoverActions, setHasHoverActions, + columnCount, + gridTemplateColumns, }), [ selectionType, @@ -443,8 +463,10 @@ const _Table = ({ toggleRowSelectionById, toggleAllRowsSelection, deselectAllRows, + gridTemplateColumns, rowDensity, toggleSort, + columnCount, currentSortedState, setPaginationPage, setPaginationRowSize, @@ -535,17 +557,8 @@ const Table = assignWithoutSideEffects(_Table, { componentId: ComponentIds.Table, }); -const TableVirtulized = ({ header, body, tableData }) => { - console.log({ header, body }); - - return ( - - ); -}; +const VirtualizedTable = assignWithoutSideEffects(_Table, { + componentId: ComponentIds.Table, +}); -export { Table, TableVirtulized }; +export { Table, VirtualizedTable }; diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 746ef0b0ad8..2fcb8d2563d 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import { Body, Row, Cell } from '@table-library/react-table-library/table'; +import { Virtualized } from '@table-library/react-table-library/virtualized'; import styled from 'styled-components'; import { useTableContext } from './TableContext'; import { checkboxCellWidth, classes, tableBackgroundColor, tableRow } from './tokens'; @@ -65,6 +66,159 @@ const getTableActionsHoverStyles = ({ }; }; +const StyledVirtualized = styled(Virtualized)<{ + $isSelectable: boolean; + $showStripedRows: boolean; +}>(({ theme, $showStripedRows, $isSelectable }) => { + const rowBackgroundTransition = getTableRowBackgroundTransition(theme); + return {}; + // return { + // '&&&': { + // border: 'none', + // transition: rowBackgroundTransition, + + // '& tr:last-child .cell-wrapper': { + // borderBottom: 'none', + // }, + + // '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), + // }, + // '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, + // backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, + // theme, + // }), + // }, + // '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, + // backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, + // theme, + // }), + // }, + // '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, + // backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, + // theme, + // }), + // }, + + // ...($isSelectable && { + // '& tr:active:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), + // }, + // }), + + // ...($showStripedRows && { + // '& tr:nth-child(even) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), + // }, + // '& tr:nth-child(even) .cell-wrapper-base': { + // backgroundColor: tableRow.stripe.backgroundColor, + // }, + // }), + + // ...($showStripedRows && + // $isSelectable && { + // '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), + // }, + // '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), + // }, + // '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), + // }, + // '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { + // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), + // }, + // '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn( + // theme.colors, + // tableRow.stripeWrapper.backgroundColorSelectedHover, + // ), + // }, + // '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn( + // theme.colors, + // tableRow.stripeWrapper.backgroundColorSelectedFocus, + // ), + // }, + // '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + // backgroundColor: getIn( + // theme.colors, + // tableRow.stripeWrapper.backgroundColorSelectedActive, + // ), + // }, + + // '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorHover, + // theme, + // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, + // }), + // }, + // '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorFocus, + // theme, + // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, + // }), + // }, + // '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorActive, + // backgroundGradientColor: tableRow.stripe.backgroundColorHover, + // theme, + // }), + // }, + + // '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorSelected, + // theme, + // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, + // }), + // }, + // '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorSelectedHover, + // theme, + // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, + // }), + // }, + // '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorSelectedFocus, + // theme, + // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, + // }), + // }, + // '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { + // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), + // ...getTableActionsHoverStyles({ + // hoverColor: tableRow.stripe.backgroundColorSelectedActive, + // theme, + // backgroundGradientColor: tableRow.stripe.backgroundColorHover, + // }), + // }, + // }), + // }, + // }; +}); + const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean; @@ -245,6 +399,7 @@ export const StyledCell = styled(Cell)<{ '&&&': { height: '100%', backgroundColor: getIn(theme.colors, $backgroundColor), + // todo: add check only in case of virtulizatoin '& > div:first-child': { alignSelf: 'stretch', }, @@ -337,7 +492,8 @@ const TableCheckboxCell = ({ isDisabled?: boolean; }): React.ReactElement => { return ( - + // false in case of virtualization + ({ ); }; +const TableVirtulized = ({ header, body, tableData, rowHeight }) => { + console.log({ header, body }); + + return ( + + ); +}; + const TableRow = assignWithoutSideEffects(_TableRow, { componentId: ComponentIds.TableRow, }); -export { TableBody, TableRow, TableCell }; +export { TableBody, TableRow, TableCell, TableVirtulized }; diff --git a/packages/blade/src/components/Table/TableContext.tsx b/packages/blade/src/components/Table/TableContext.tsx index fc23ff1dba5..4530a53bef8 100644 --- a/packages/blade/src/components/Table/TableContext.tsx +++ b/packages/blade/src/components/Table/TableContext.tsx @@ -40,6 +40,8 @@ export type TableContextType = { showBorderedCells: NonNullable['showBorderedCells']>; hasHoverActions: boolean; setHasHoverActions: (hasHoverActions: boolean) => void; + columnCount: number; + gridTemplateColumns: string | undefined; }; const TableContext = React.createContext({ @@ -66,6 +68,8 @@ const TableContext = React.createContext({ showBorderedCells: false, hasHoverActions: false, setHasHoverActions: () => {}, + columnCount: 0, + gridTemplateColumns: undefined, }); const useTableContext = (): TableContextType => { diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 20bf3d8312d..472c5f482cc 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -70,8 +70,6 @@ const SortIcon = ({ const StyledHeader = styled(Header)({ '&&&': { - display: 'flex', - justifyContent: 'space-between', '& tr:first-child th': { borderTop: 'none', display: 'flex', @@ -209,15 +207,35 @@ const TableHeaderCellCheckbox = ({ ); }; -const StyledHeaderRow = styled(HeaderRow)<{ $showBorderedCells: boolean }>( - ({ theme, $showBorderedCells }) => ({ +const StyledHeaderRow = styled(HeaderRow)<{ + $showBorderedCells: boolean; + $gridTemplateColumns: string | undefined; + $hasHoverActions: boolean; + $selectionType: TableProps['selectionType']; + $columnCount: number; +}>( + ({ + theme, + $showBorderedCells, + $gridTemplateColumns, + $hasHoverActions, + $selectionType, + $columnCount, + }) => ({ '& th': $showBorderedCells ? { borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)), borderRightColor: getIn(theme.colors, tableRow.borderColor), borderRightStyle: 'solid', - display: 'flex', - justifyContent: 'space-between', + //TODO: add check to only add this for virtalized tables + display: 'grid', + gridTemplateColumns: $gridTemplateColumns + ? `${$gridTemplateColumns} ${$hasHoverActions ? 'min-content' : ''}` + : ` ${ + $selectionType === 'multiple' ? 'min-content' : '' + } repeat(${$columnCount},minmax(100px, 1fr)) ${ + $hasHoverActions ? 'min-content' : '' + } !important;`, } : undefined, '& th:last-child ': { @@ -240,6 +258,8 @@ const _TableHeaderRow = ({ setHeaderRowDensity, showBorderedCells, hasHoverActions, + gridTemplateColumns, + columnCount, } = useTableContext(); const isMultiSelect = selectionType === 'multiple'; const isAllSelected = selectedRows && selectedRows.length === totalItems; @@ -254,6 +274,10 @@ const _TableHeaderRow = ({ {...metaAttribute({ name: MetaConstants.TableHeaderRow })} {...makeAnalyticsAttribute(rest)} $showBorderedCells={showBorderedCells} + $gridTemplateColumns={gridTemplateColumns} + $hasHoverActions={hasHoverActions} + $selectionType={selectionType} + $columnCount={columnCount} > {isMultiSelect && ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( - + <> total rows : {nodes.length} - = ({ ...args }) => { {(tableData) => ( {}} header={() => ( @@ -198,7 +201,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { )} /> )} - + ); }; From 2b4aa42fedaed4ac915f0531887b09149a2933ed Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 20 Jan 2025 10:44:11 +0530 Subject: [PATCH 07/97] fix: height of table --- .../blade/src/components/Table/Table.web.tsx | 38 +++++++++---------- .../Table/docs/BasicTable.stories.tsx | 5 ++- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 3bc6452cbcd..8b28f5d927b 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -526,26 +526,24 @@ const _Table = ({ )} {toolbar} - - - {children} - - + + {children} + {pagination} )} diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index b4ab7a224cf..1ed17a60330 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -26,7 +26,8 @@ import { Button } from '~components/Button'; import { IconButton } from '~components/Button/IconButton'; import { CheckIcon, CloseIcon } from '~components/Icons'; import { TableVirtulized } from '../TableBody.web'; -import { VirtualizedTable } from "../Table.web"; +import { VirtualizedTable } from '../Table.web'; +import { spacing } from '~tokens/global'; // import { // HeaderCellSelect, // useRowSelect, @@ -127,7 +128,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { data={data} onSelectionChange={console.log} selectionType="multiple" - height="100%" + height={'500px'} toolbar={ From dc52d5c98f624552c1d90fcc90b9387192bb2afc Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 20 Jan 2025 11:15:50 +0530 Subject: [PATCH 08/97] chore: remove hasPadding from tableBody --- packages/blade/src/components/Table/TableBody.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 2fcb8d2563d..9a05dc9ca8a 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -493,7 +493,7 @@ const TableCheckboxCell = ({ }): React.ReactElement => { return ( // false in case of virtualization - + Date: Mon, 20 Jan 2025 15:10:21 +0530 Subject: [PATCH 09/97] chore: scroll styling in case of not proper space is their , in virtual table div --- .../blade/src/components/Table/Table.web.tsx | 47 +++++++++++++------ .../Table/docs/BasicTable.stories.tsx | 5 +- packages/blade/src/components/Table/types.ts | 5 ++ 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 8b28f5d927b..f49a0b08e47 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -106,21 +106,36 @@ const getTableHeaderCellCount = ( return 0; }; -const StyledReactTable = styled(ReactTable)<{ $styledProps?: { height?: BoxProps['height'] } }>( - ({ $styledProps }) => { - const { theme } = useTheme(); - const styledPropsCSSObject = getBaseBoxStyles({ - theme, - height: $styledProps?.height, - }); +const StyledReactTable = styled(ReactTable)<{ + $styledProps?: { height?: BoxProps['height']; width?: BoxProps['width'] }; +}>(({ $styledProps }) => { + const { theme } = useTheme(); + const styledPropsCSSObject = getBaseBoxStyles({ + theme, + height: $styledProps?.height, + //Todo : virtualized table + width: $styledProps?.width, + // auto is isVirtualized ? 'scroll' : 'auto', + }); - return { - '&&&': { - ...styledPropsCSSObject, - }, - }; - }, -); + return { + '&&&': { + ...styledPropsCSSObject, + }, + // applying style to 1st child of table + // apply these styles in case of isVisible + // virtualized table adds some styles which should be overridden + '& > div ': { + overflow: 'auto !important', + height: `${$styledProps?.height} !important`, + width: `${$styledProps?.width} !important`, + }, + // and remove scroll from the main table element + '&': { + overflow: 'hidden !important', + }, + }; +}); const RefreshWrapper = styled(BaseBox)<{ isRefreshSpinnerVisible: boolean; @@ -154,6 +169,7 @@ const _Table = ({ toolbar, pagination, height, + width, showStripedRows, gridTemplateColumns, isLoading = false, @@ -494,6 +510,7 @@ const _Table = ({ alignItems="center" justifyContent="center" height={height} + width={width} {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} {...makeAnalyticsAttribute(rest)} @@ -507,6 +524,7 @@ const _Table = ({ position="relative" {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} + width={width} > {isRefreshSpinnerMounted && ( ({ sort={sortFunctions ? sort : null} $styledProps={{ height, + width, }} pagination={hasPagination ? paginationConfig : null} {...makeAccessible({ multiSelectable: selectionType === 'multiple' })} diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 1ed17a60330..5387ea5d36f 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -121,14 +121,15 @@ const data: TableData = { const TableTemplate: StoryFn = ({ ...args }) => { return ( - + <> total rows : {nodes.length} diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 771ee7efd17..ddc627fa2a7 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -165,6 +165,11 @@ type TableProps = { * The height prop is a responsive styled prop that determines the height of the table. **/ height?: BoxProps['height']; + /** + * The prop width is a prop used to determine the width of the table. + */ + width?: BoxProps['width']; + /** * The showStripedRows prop determines whether the table should have striped rows or not. * The default value is `false`. From e21ee7ff3f6342bfda3bff7bc69bc5da24c286c2 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 20 Jan 2025 22:04:26 +0530 Subject: [PATCH 10/97] chore: added isVirtualized prop --- .../blade/src/components/Table/Table.web.tsx | 37 +++++++++++-------- .../Table/docs/BasicTable.stories.tsx | 7 ++-- packages/blade/src/components/Table/types.ts | 4 ++ 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index f49a0b08e47..eb3aefa5449 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -43,7 +43,6 @@ import getIn from '~utils/lodashButBetter/get'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsMobile } from '~utils/useIsMobile'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; -import { Virtualized } from '@table-library/react-table-library/virtualized'; const rowSelectType: Record< NonNullable['selectionType']>, @@ -107,7 +106,11 @@ const getTableHeaderCellCount = ( }; const StyledReactTable = styled(ReactTable)<{ - $styledProps?: { height?: BoxProps['height']; width?: BoxProps['width'] }; + $styledProps?: { + height?: BoxProps['height']; + width?: BoxProps['width']; + isVirtualized?: boolean; + }; }>(({ $styledProps }) => { const { theme } = useTheme(); const styledPropsCSSObject = getBaseBoxStyles({ @@ -122,18 +125,20 @@ const StyledReactTable = styled(ReactTable)<{ '&&&': { ...styledPropsCSSObject, }, - // applying style to 1st child of table - // apply these styles in case of isVisible - // virtualized table adds some styles which should be overridden - '& > div ': { - overflow: 'auto !important', - height: `${$styledProps?.height} !important`, - width: `${$styledProps?.width} !important`, - }, - // and remove scroll from the main table element - '&': { - overflow: 'hidden !important', - }, + ...($styledProps?.isVirtualized && { + // applying style to 1st child of table + // apply these styles in case of isVisible + // virtualized table adds some styles which should be overridden + '& > div ': { + overflow: 'auto !important', + height: `${$styledProps?.height} !important`, + width: `${$styledProps?.width} !important`, + }, + // and remove scroll from the main table element + '&': { + overflow: 'hidden !important', + }, + }), }; }); @@ -176,6 +181,7 @@ const _Table = ({ isRefreshing = false, showBorderedCells = false, defaultSelectedIds = [], + isVirtualized = false, ...rest }: TableProps): React.ReactElement => { const { theme } = useTheme(); @@ -208,7 +214,7 @@ const _Table = ({ }); // Table Theme - const columnCount = getTableHeaderCellCount(children, true); + const columnCount = getTableHeaderCellCount(children, isVirtualized); const firstColumnStickyHeaderCellCSS = isFirstColumnSticky ? ` &:nth-of-type(1) { @@ -555,6 +561,7 @@ const _Table = ({ $styledProps={{ height, width, + isVirtualized, }} pagination={hasPagination ? paginationConfig : null} {...makeAccessible({ multiSelectable: selectionType === 'multiple' })} diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 5387ea5d36f..485dc556be8 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -123,13 +123,13 @@ const TableTemplate: StoryFn = ({ ...args }) => { return ( <> total rows : {nodes.length} - @@ -140,6 +140,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { } + isVirtualized > {(tableData) => ( = ({ ...args }) => { )} /> )} - + ); }; diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index ddc627fa2a7..47d8b036fcb 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -198,6 +198,10 @@ type TableProps = { * An array of default selected row ids. This will be used to set the initial selected rows. */ defaultSelectedIds?: Identifier[]; + /** + * isVirtualized prop determines whether the table is virutalized or not. + */ + isVirtualized?: boolean; } & DataAnalyticsAttribute & StyledPropsBlade; From 46dee3a17ed42e624803db63994a1c79c6b696fb Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 21 Jan 2025 01:47:27 +0530 Subject: [PATCH 11/97] chore: added dynamic width and height --- .../blade/src/components/Table/Table.web.tsx | 827 +++++++++++------- .../src/components/Table/TableBody.web.tsx | 55 +- .../src/components/Table/TableHeader.web.tsx | 7 + .../Table/docs/BasicTable.stories.tsx | 57 +- packages/blade/src/components/Table/utils.ts | 46 + 5 files changed, 607 insertions(+), 385 deletions(-) create mode 100644 packages/blade/src/components/Table/utils.ts diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index eb3aefa5449..0c5d6e4e723 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { forwardRef, useCallback, useEffect, useMemo } from 'react'; 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'; @@ -20,6 +20,7 @@ import { refreshWrapperZIndex, tableBackgroundColor, tablePagination, + tableRow, } from './tokens'; import type { TableProps, @@ -43,6 +44,8 @@ import getIn from '~utils/lodashButBetter/get'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsMobile } from '~utils/useIsMobile'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; +import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils'; +import { Virtualized } from '@table-library/react-table-library/virtualized'; const rowSelectType: Record< NonNullable['selectionType']>, @@ -120,6 +123,8 @@ const StyledReactTable = styled(ReactTable)<{ width: $styledProps?.width, // auto is isVirtualized ? 'scroll' : 'auto', }); + const $isSelectable = true; + const $showStripedRows = true; return { '&&&': { @@ -138,6 +143,144 @@ const StyledReactTable = styled(ReactTable)<{ '&': { overflow: 'hidden !important', }, + '.tbody tr:last-child .cell-wrapper': { + borderBottom: 'none', + }, + + '.tbody .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), + }, + '.tbody .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, + backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, + theme, + }), + }, + '.tbody .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, + backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, + theme, + }), + }, + '.tbody .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, + backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, + theme, + }), + }, + + ...($isSelectable && { + '.tbody tr:active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), + }, + }), + + ...($showStripedRows && { + '.tbody tr:nth-child(even) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), + }, + '.tbody tr:nth-child(even) .cell-wrapper-base': { + backgroundColor: tableRow.stripe.backgroundColor, + }, + }), + + ...($showStripedRows && + $isSelectable && { + '.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), + }, + '.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), + }, + '.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), + }, + '.tbody .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), + }, + '.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedHover, + ), + }, + '.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedFocus, + ), + }, + '.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedActive, + ), + }, + + '.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorHover, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, + }), + }, + '.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorFocus, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, + }), + }, + '.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorActive, + backgroundGradientColor: tableRow.stripe.backgroundColorHover, + theme, + }), + }, + + '.tbody .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelected, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, + }), + }, + '.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedHover, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, + }), + }, + '.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedFocus, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, + }), + }, + '.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedActive, + theme, + backgroundGradientColor: tableRow.stripe.backgroundColorHover, + }), + }, + }), }), }; }); @@ -159,64 +302,73 @@ const RefreshWrapper = styled(BaseBox)<{ }; }); -const _Table = ({ - children, - data, - multiSelectTrigger = 'row', - selectionType = 'none', - onSelectionChange, - isHeaderSticky, - isFooterSticky, - isFirstColumnSticky, - rowDensity = 'normal', - onSortChange, - sortFunctions, - toolbar, - pagination, - height, - width, - showStripedRows, - gridTemplateColumns, - isLoading = false, - isRefreshing = false, - showBorderedCells = false, - defaultSelectedIds = [], - isVirtualized = false, - ...rest -}: TableProps): React.ReactElement => { - const { theme } = useTheme(); - const [selectedRows, setSelectedRows] = React.useState['id'][]>( - selectionType !== 'none' ? defaultSelectedIds : [], - ); - const [disabledRows, setDisabledRows] = React.useState['id'][]>([]); - const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); - const [paginationType, setPaginationType] = React.useState>( - 'client', - ); - const [headerRowDensity, setHeaderRowDensity] = React.useState( - undefined, - ); - const [hasHoverActions, setHasHoverActions] = React.useState(false); - // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky - const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; - const backgroundColor = tableBackgroundColor; - - const isMobile = useIsMobile(); - const lastHoverActionsColWidth = isMobile ? '1fr' : '0px'; - - const { - isEntering: isRefreshSpinnerEntering, - isMounted: isRefreshSpinnerMounted, - isExiting: isRefreshSpinnerExiting, - isVisible: isRefreshSpinnerVisible, - } = usePresence(isRefreshing, { - transitionDuration: theme.motion.duration.quick, - }); +const _Table = forwardRef( + ( + { + children, + data, + multiSelectTrigger = 'row', + selectionType = 'none', + onSelectionChange, + isHeaderSticky, + isFooterSticky, + isFirstColumnSticky, + rowDensity = 'normal', + onSortChange, + sortFunctions, + toolbar, + pagination, + height, + width, + showStripedRows, + gridTemplateColumns, + isLoading = false, + isRefreshing = false, + showBorderedCells = false, + defaultSelectedIds = [], + isVirtualized = false, + ...rest + }: TableProps, + ref: React.Ref | undefined, + ): React.ReactElement => { + const { theme } = useTheme(); + const [selectedRows, setSelectedRows] = React.useState['id'][]>( + selectionType !== 'none' ? defaultSelectedIds : [], + ); + const [disabledRows, setDisabledRows] = React.useState['id'][]>([]); + const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); + const [paginationType, setPaginationType] = React.useState>( + 'client', + ); + const [headerRowDensity, setHeaderRowDensity] = React.useState< + TableHeaderRowProps['rowDensity'] + >(undefined); + const [hasHoverActions, setHasHoverActions] = React.useState(false); + const [VirtualizedTableDimensions, setVirtualizedTableDimensions] = React.useState({ + width: 0, + height: 0, + }); + + // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky + const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; + const backgroundColor = tableBackgroundColor; + + const isMobile = useIsMobile(); + const lastHoverActionsColWidth = isMobile ? '1fr' : '0px'; - // Table Theme - const columnCount = getTableHeaderCellCount(children, isVirtualized); - const firstColumnStickyHeaderCellCSS = isFirstColumnSticky - ? ` + const { + isEntering: isRefreshSpinnerEntering, + isMounted: isRefreshSpinnerMounted, + isExiting: isRefreshSpinnerExiting, + isVisible: isRefreshSpinnerVisible, + } = usePresence(isRefreshing, { + transitionDuration: theme.motion.duration.quick, + }); + + // Table Theme + const columnCount = getTableHeaderCellCount(children, isVirtualized); + const firstColumnStickyHeaderCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -231,9 +383,9 @@ const _Table = ({ } ` }` - : ''; - const firstColumnStickyFooterCellCSS = isFirstColumnSticky - ? ` + : ''; + const firstColumnStickyFooterCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -248,9 +400,9 @@ const _Table = ({ } ` }` - : ''; - const firstColumnStickyBodyCellCSS = isFirstColumnSticky - ? ` + : ''; + const firstColumnStickyBodyCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -265,14 +417,14 @@ const _Table = ({ } ` }` - : ''; + : ''; - const tableTheme = useTableTheme({ - Table: ` + const tableTheme = useTableTheme({ + Table: ` height:${isFooterSticky ? `100%` : undefined}; border: ${makeBorderSize(theme.border.width.thin)} solid ${ - theme.colors.surface.border.gray.muted - }; + theme.colors.surface.border.gray.muted + }; --data-table-library_grid-template-columns: ${ gridTemplateColumns ? `${gridTemplateColumns} ${hasHoverActions ? lastHoverActionsColWidth : ''}` @@ -284,298 +436,309 @@ const _Table = ({ } !important; background-color: ${getIn(theme.colors, backgroundColor)}; `, - HeaderCell: ` + HeaderCell: ` position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'}; top: ${shouldHeaderBeSticky ? '0' : undefined}; ${firstColumnStickyHeaderCellCSS} `, - Cell: ` + Cell: ` ${firstColumnStickyBodyCellCSS} `, - FooterCell: ` + FooterCell: ` position: ${isFooterSticky ? 'sticky' : 'relative'}; bottom: ${isFooterSticky ? '0' : undefined}; ${firstColumnStickyFooterCellCSS} `, - }); - - useEffect(() => { - // Get the total number of items - setTotalItems(data.nodes.length); - }, [data.nodes]); - - // Selection Logic - const onSelectChange: MiddlewareFunction = (action, state): void => { - const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? []; - setSelectedRows(selectedIds); - onSelectionChange?.({ - selectedIds, - values: data.nodes.filter((node) => selectedIds.includes(node.id)), }); - }; - const rowSelectConfig = useRowSelect( - data, - { - onChange: onSelectChange, - state: { - ...(selectionType === 'multiple' - ? { ids: selectedRows } - : selectionType === 'single' - ? { id: selectedRows[0] } - : {}), - }, - }, - { - clickType: - multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick, - rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined, - }, - ); + useEffect(() => { + console.log('ref', ref); + if (ref?.current && !height && !width) { + const { width, height } = ref?.current.getBoundingClientRect(); + setVirtualizedTableDimensions({ width, height }); + console.log('Parent dimensions:', { width, height }); + // You can use the width and height to set your table dimensions + } + }, [ref]); + + useEffect(() => { + // Get the total number of items + setTotalItems(data.nodes.length); + }, [data.nodes]); + + // Selection Logic + const onSelectChange: MiddlewareFunction = (action, state): void => { + const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? []; + setSelectedRows(selectedIds); + onSelectionChange?.({ + selectedIds, + values: data.nodes.filter((node) => selectedIds.includes(node.id)), + }); + }; - const toggleRowSelectionById = useMemo( - () => (id: Identifier): void => { - rowSelectConfig.fns.onToggleById(id); - }, - [rowSelectConfig.fns], - ); + const rowSelectConfig = useRowSelect( + data, + { + onChange: onSelectChange, + state: { + ...(selectionType === 'multiple' + ? { ids: selectedRows } + : selectionType === 'single' + ? { id: selectedRows[0] } + : {}), + }, + }, + { + clickType: + multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick, + rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined, + }, + ); - const deselectAllRows = useMemo( - () => (): void => { - rowSelectConfig.fns.onRemoveAll(); - }, - [rowSelectConfig.fns], - ); + const toggleRowSelectionById = useMemo( + () => (id: Identifier): void => { + rowSelectConfig.fns.onToggleById(id); + }, + [rowSelectConfig.fns], + ); - const toggleAllRowsSelection = useMemo( - () => (): void => { - if (selectedRows.length > 0) { + const deselectAllRows = useMemo( + () => (): void => { rowSelectConfig.fns.onRemoveAll(); - } else { - const ids = data.nodes - .map((item: TableNode) => (disabledRows.includes(item.id) ? null : item.id)) - .filter(Boolean) as Identifier[]; - - rowSelectConfig.fns.onAddAll(ids); - } - }, - [rowSelectConfig.fns, data.nodes, selectedRows, disabledRows], - ); - - // Sort Logic - const handleSortChange: MiddlewareFunction = (action, state) => { - onSortChange?.({ - sortKey: state.sortKey, - isSortReversed: state.reverse, - }); - }; - - const sort = useSort( - data, - { - onChange: handleSortChange, - }, - { - // @ts-expect-error ignore this, if sortFunctions is undefined, it will be ignored - sortFns: sortFunctions, - }, - ); - - const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { - return { - sortKey: sort.state.sortKey, - isSortReversed: sort.state.reverse, - sortableColumns: Object.keys(sortFunctions ?? {}), + }, + [rowSelectConfig.fns], + ); + + const toggleAllRowsSelection = useMemo( + () => (): void => { + if (selectedRows.length > 0) { + rowSelectConfig.fns.onRemoveAll(); + } else { + const ids = data.nodes + .map((item: TableNode) => (disabledRows.includes(item.id) ? null : item.id)) + .filter(Boolean) as Identifier[]; + + rowSelectConfig.fns.onAddAll(ids); + } + }, + [rowSelectConfig.fns, data.nodes, selectedRows, disabledRows], + ); + + // Sort Logic + const handleSortChange: MiddlewareFunction = (action, state) => { + onSortChange?.({ + sortKey: state.sortKey, + isSortReversed: state.reverse, + }); }; - }, [sort.state, sortFunctions]); - const toggleSort = useCallback( - (sortKey: string): void => { - sort.fns.onToggleSort({ - sortKey, - }); - }, - [sort.fns], - ); + const sort = useSort( + data, + { + onChange: handleSortChange, + }, + { + // @ts-expect-error ignore this, if sortFunctions is undefined, it will be ignored + sortFns: sortFunctions, + }, + ); + + const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { + return { + sortKey: sort.state.sortKey, + isSortReversed: sort.state.reverse, + sortableColumns: Object.keys(sortFunctions ?? {}), + }; + }, [sort.state, sortFunctions]); + + const toggleSort = useCallback( + (sortKey: string): void => { + sort.fns.onToggleSort({ + sortKey, + }); + }, + [sort.fns], + ); - // Pagination + // Pagination - const hasPagination = Boolean(pagination); + const hasPagination = Boolean(pagination); - const paginationConfig = usePagination( - data, - { - state: { - page: 0, - size: tablePagination.defaultPageSize, + const paginationConfig = usePagination( + data, + { + state: { + page: 0, + size: tablePagination.defaultPageSize, + }, }, - }, - { - isServer: paginationType === 'server', - }, - ); - - const currentPaginationState = useMemo(() => { - return hasPagination - ? { - page: paginationConfig.state.page, - size: paginationConfig.state.size, - } - : undefined; - }, [paginationConfig.state, hasPagination]); - - const setPaginationPage = useCallback( - (page: number): void => { - paginationConfig.fns.onSetPage(page); - }, - [paginationConfig.fns], - ); + { + isServer: paginationType === 'server', + }, + ); + + const currentPaginationState = useMemo(() => { + return hasPagination + ? { + page: paginationConfig.state.page, + size: paginationConfig.state.size, + } + : undefined; + }, [paginationConfig.state, hasPagination]); + + const setPaginationPage = useCallback( + (page: number): void => { + paginationConfig.fns.onSetPage(page); + }, + [paginationConfig.fns], + ); - const setPaginationRowSize = useCallback( - (size: number): void => { - paginationConfig.fns.onSetSize(size); - }, - [paginationConfig.fns], - ); - - // Toolbar Component - if (__DEV__) { - if (toolbar && !isValidAllowedChildren(toolbar, ComponentIds.TableToolbar)) { - throwBladeError({ - message: 'Only TableToolbar component is allowed in the `toolbar` prop', - moduleName: 'Table', - }); + const setPaginationRowSize = useCallback( + (size: number): void => { + paginationConfig.fns.onSetSize(size); + }, + [paginationConfig.fns], + ); + + // Toolbar Component + if (__DEV__) { + if (toolbar && !isValidAllowedChildren(toolbar, ComponentIds.TableToolbar)) { + throwBladeError({ + message: 'Only TableToolbar component is allowed in the `toolbar` prop', + moduleName: 'Table', + }); + } } - } - // Table Context - const tableContext: TableContextType = useMemo( - () => ({ - selectionType, - selectedRows, - totalItems, - toggleRowSelectionById, - toggleAllRowsSelection, - deselectAllRows, - rowDensity, - toggleSort, - currentSortedState, - setPaginationPage, - setPaginationRowSize, - currentPaginationState, - showStripedRows, - disabledRows, - setDisabledRows, - paginationType, - setPaginationType, - backgroundColor, - headerRowDensity, - setHeaderRowDensity, - showBorderedCells, - hasHoverActions, - setHasHoverActions, - columnCount, - gridTemplateColumns, - }), - [ - selectionType, - selectedRows, - totalItems, - toggleRowSelectionById, - toggleAllRowsSelection, - deselectAllRows, - gridTemplateColumns, - rowDensity, - toggleSort, - columnCount, - currentSortedState, - setPaginationPage, - setPaginationRowSize, - currentPaginationState, - showStripedRows, - disabledRows, - setDisabledRows, - paginationType, - setPaginationType, - backgroundColor, - headerRowDensity, - setHeaderRowDensity, - showBorderedCells, - hasHoverActions, - setHasHoverActions, - ], - ); - - return ( - - {isLoading ? ( - - - - ) : ( - - {isRefreshSpinnerMounted && ( - - - - )} - {toolbar} - ({ + selectionType, + selectedRows, + totalItems, + toggleRowSelectionById, + toggleAllRowsSelection, + deselectAllRows, + rowDensity, + toggleSort, + currentSortedState, + setPaginationPage, + setPaginationRowSize, + currentPaginationState, + showStripedRows, + disabledRows, + setDisabledRows, + paginationType, + setPaginationType, + backgroundColor, + headerRowDensity, + setHeaderRowDensity, + showBorderedCells, + hasHoverActions, + setHasHoverActions, + columnCount, + gridTemplateColumns, + }), + [ + selectionType, + selectedRows, + totalItems, + toggleRowSelectionById, + toggleAllRowsSelection, + deselectAllRows, + gridTemplateColumns, + rowDensity, + toggleSort, + columnCount, + currentSortedState, + setPaginationPage, + setPaginationRowSize, + currentPaginationState, + showStripedRows, + disabledRows, + setDisabledRows, + paginationType, + setPaginationType, + backgroundColor, + headerRowDensity, + setHeaderRowDensity, + showBorderedCells, + hasHoverActions, + setHasHoverActions, + ], + ); + + return ( + + {isLoading ? ( + - {children} - - {pagination} - - )} - - ); -}; + + + ) : ( + + {isRefreshSpinnerMounted && ( + + + + )} + {toolbar} + + {children} + + {pagination} + + )} + + ); + }, +); const Table = assignWithoutSideEffects(_Table, { componentId: ComponentIds.Table, diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 9a05dc9ca8a..585afc87151 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -27,51 +27,24 @@ import { makeAccessible } from '~utils/makeAccessible'; import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect'; import type { Theme } from '~components/BladeProvider'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; - -const getTableRowBackgroundTransition = (theme: Theme): string => { - const rowBackgroundTransition = `background-color ${makeMotionTime( - getIn(theme.motion, tableRow.backgroundColorMotionDuration), - )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`; - - return rowBackgroundTransition; -}; - -const getTableActionsHoverStyles = ({ - hoverColor, - theme, - backgroundGradientColor, -}: { - hoverColor: DotNotationToken; - backgroundGradientColor?: DotNotationToken>; - theme: Theme; -}): React.CSSProperties => { - const rowBackgroundTransition = getTableRowBackgroundTransition(theme); - - return { - // Solid layer 1 background - should match the table background - [`& .${classes.HOVER_ACTIONS}`]: { - backgroundColor: getIn(theme.colors, tableBackgroundColor), - transition: rowBackgroundTransition, - }, - // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc - [`& .${classes.HOVER_ACTIONS_LAYER2}`]: { - backgroundColor: getIn(theme.colors, backgroundGradientColor ?? 'transparent'), - transition: rowBackgroundTransition, - }, - // Alpha layer 3 background - Hover, selection, active background - [`& .${classes.HOVER_ACTIONS_LAYER3}`]: { - backgroundColor: getIn(theme.colors, hoverColor), - transition: rowBackgroundTransition, - }, - }; -}; +import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils'; const StyledVirtualized = styled(Virtualized)<{ $isSelectable: boolean; $showStripedRows: boolean; }>(({ theme, $showStripedRows, $isSelectable }) => { const rowBackgroundTransition = getTableRowBackgroundTransition(theme); - return {}; + return { + // '&': { + // backgroundColor: 'yellow !important', + // border: '1px solid black', + // }, + // change backgroundColor to yellow + '& .cell-wrapper': { + backgroundColor: 'yellow !important', + }, + }; + // return { // '&&&': { // border: 'none', @@ -514,6 +487,7 @@ const StyledRow = styled(Row)<{ $showBorderedCells: boolean; }>(({ theme, $isSelectable, $isHoverable, $showBorderedCells }) => { const { hasHoverActions } = useTableContext(); + console.log({ hasHoverActions }); const rowBackgroundTransition = `background-color ${makeMotionTime( getIn(theme.motion, tableRow.backgroundColorMotionDuration), @@ -522,8 +496,6 @@ const StyledRow = styled(Row)<{ return { '&&&': { backgroundColor: 'transparent', - // display: 'grid', - // gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))', '& .cell-wrapper': $showBorderedCells ? { borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)), @@ -673,6 +645,7 @@ const _TableRow = ({ flexShrink={0} flexGrow={1} width="max-content" + border="1px solid black" > >; const nodes: Item[] = [ - ...Array.from({ length: 400 }, (_, i) => ({ + ...Array.from({ length: 4 }, (_, i) => ({ id: (i + 1).toString(), paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, amount: Number((Math.random() * 10000).toFixed(2)), @@ -120,16 +121,17 @@ const data: TableData = { }; const TableTemplate: StoryFn = ({ ...args }) => { + const tableRef = useRef(null); return ( - + <> total rows : {nodes.length} @@ -140,6 +142,14 @@ const TableTemplate: StoryFn = ({ ...args }) => { } + sortFunctions={{ + ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + ref={tableRef} isVirtualized > {(tableData) => ( @@ -155,7 +165,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { Account Date Method - Status demo + Status )} @@ -166,6 +176,29 @@ const TableTemplate: StoryFn = ({ ...args }) => { onClick={() => { console.log('where'); }} + hoverActions={ + <> + + { + console.log('Approved', tableItem.id); + }} + /> + { + console.log('Rejected', tableItem.id); + }} + /> + + } > {tableItem.paymentId} diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts new file mode 100644 index 00000000000..5872cbc585a --- /dev/null +++ b/packages/blade/src/components/Table/utils.ts @@ -0,0 +1,46 @@ +import { classes, tableRow, tableBackgroundColor } from './tokens'; +import type { Theme } from '~components/BladeProvider'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; + +import { makeMotionTime } from '~utils'; +import getIn from '~utils/lodashButBetter/get'; + +const getTableRowBackgroundTransition = (theme: Theme): string => { + const rowBackgroundTransition = `background-color ${makeMotionTime( + getIn(theme.motion, tableRow.backgroundColorMotionDuration), + )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`; + + return rowBackgroundTransition; +}; + +const getTableActionsHoverStyles = ({ + hoverColor, + theme, + backgroundGradientColor, +}: { + hoverColor: DotNotationToken; + backgroundGradientColor?: DotNotationToken>; + theme: Theme; +}): React.CSSProperties => { + const rowBackgroundTransition = getTableRowBackgroundTransition(theme); + + return { + // Solid layer 1 background - should match the table background + [`& .${classes.HOVER_ACTIONS}`]: { + backgroundColor: getIn(theme.colors, tableBackgroundColor), + transition: rowBackgroundTransition, + }, + // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc + [`& .${classes.HOVER_ACTIONS_LAYER2}`]: { + backgroundColor: getIn(theme.colors, backgroundGradientColor ?? 'transparent'), + transition: rowBackgroundTransition, + }, + // Alpha layer 3 background - Hover, selection, active background + [`& .${classes.HOVER_ACTIONS_LAYER3}`]: { + backgroundColor: getIn(theme.colors, hoverColor), + transition: rowBackgroundTransition, + }, + }; +}; + +export { getTableActionsHoverStyles, getTableRowBackgroundTransition }; From b7105ab16b9c65c8f60ffe47e06a2dc21e90ce9f Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 21 Jan 2025 19:16:14 +0530 Subject: [PATCH 12/97] chore: table hover actions fixes --- packages/blade/src/components/Table/Table.web.tsx | 12 +++++++++++- .../blade/src/components/Table/TableBody.web.tsx | 4 +++- .../src/components/Table/TableEditableCell.web.tsx | 2 ++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 0c5d6e4e723..6e6ee47473f 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -143,6 +143,15 @@ const StyledReactTable = styled(ReactTable)<{ '&': { overflow: 'hidden !important', }, + // for virtualized table, we need to apply some styles to tbody + '.tbody > div': { + display: 'block !important', + }, + // for virtualized table, we need to apply some styles to tbody + tr: { + display: 'grid', + gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', + }, '.tbody tr:last-child .cell-wrapper': { borderBottom: 'none', }, @@ -157,6 +166,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, theme, }), + border: '1px solid red', }, '.tbody .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), @@ -713,7 +723,7 @@ const _Table = forwardRef( )} {toolbar} ({ {...makeAccessible({ selected: isSelected })} {...metaAttribute({ name: MetaConstants.TableRow, testID })} {...makeAnalyticsAttribute(rest)} + role="row" + as="tr" > {isMultiSelect && ( ({ flexShrink={0} flexGrow={1} width="max-content" - border="1px solid black" > Date: Tue, 21 Jan 2025 20:13:48 +0530 Subject: [PATCH 13/97] fix: row bottom not visible with rowHeight --- packages/blade/src/components/Table/Table.web.tsx | 4 +++- .../blade/src/components/Table/docs/BasicTable.stories.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 6e6ee47473f..0a1b7c5a350 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -120,7 +120,9 @@ const StyledReactTable = styled(ReactTable)<{ theme, height: $styledProps?.height, //Todo : virtualized table - width: $styledProps?.width, + ...($styledProps?.isVirtualized && { + width: $styledProps?.width, + }), // auto is isVirtualized ? 'scroll' : 'auto', }); const $isSelectable = true; diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 8ab4fbf1c54..63e0a33d3b2 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -35,6 +35,8 @@ import { SelectTypes, } from '@table-library/react-table-library/select'; import { useRef } from 'react'; +import { isBackgroundColorToken } from '../../../../../razorsharp/src/code/blade/utils/color'; +import { getBackgroundColorToken } from '../../Button/BaseButton/BaseButton'; export default { title: 'Components/Table', @@ -123,7 +125,7 @@ const data: TableData = { const TableTemplate: StoryFn = ({ ...args }) => { const tableRef = useRef(null); return ( - + <> total rows : {nodes.length} = ({ ...args }) => { {(tableData) => ( {}} header={() => ( From e236d3e2a9d342a5e9c08a3c8f70147eaf8381d4 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 21 Jan 2025 20:26:20 +0530 Subject: [PATCH 14/97] fix: distance between header height and table height --- .../blade/src/components/Table/docs/BasicTable.stories.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 63e0a33d3b2..417243c3758 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -157,7 +157,10 @@ const TableTemplate: StoryFn = ({ ...args }) => { {(tableData) => ( { + // header height and row height + return index === 0 ? 50 : 58; + }} // header={()=>{}} header={() => ( From bf39ca1ee45b4bd99b0db5d1942b5fb30f415b3e Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 21 Jan 2025 22:45:50 +0530 Subject: [PATCH 15/97] fix: gap between table cells --- .../blade/src/components/Table/Table.web.tsx | 50 ++++++++++--------- .../Table/docs/BasicTable.stories.tsx | 3 +- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 0a1b7c5a350..dd142ae2ebd 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -125,6 +125,7 @@ const StyledReactTable = styled(ReactTable)<{ }), // auto is isVirtualized ? 'scroll' : 'auto', }); + //TODO: fix this const $isSelectable = true; const $showStripedRows = true; @@ -153,24 +154,27 @@ const StyledReactTable = styled(ReactTable)<{ tr: { display: 'grid', gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', + columnGap: '0', }, - '.tbody tr:last-child .cell-wrapper': { + '.tbody div tr:last-child .cell-wrapper': { borderBottom: 'none', }, - '.tbody .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { + '.tbody div.row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), }, - '.tbody .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { + '.tbody div td': { + padding: '0', + }, + '.tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, theme, }), - border: '1px solid red', }, - '.tbody .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { + '.tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, @@ -178,7 +182,7 @@ const StyledReactTable = styled(ReactTable)<{ theme, }), }, - '.tbody .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { + '.tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, @@ -188,54 +192,54 @@ const StyledReactTable = styled(ReactTable)<{ }, ...($isSelectable && { - '.tbody tr:active:not(.disabled-row) .cell-wrapper': { + '.tbody div tr:active:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), }, }), ...($showStripedRows && { - '.tbody tr:nth-child(even) .cell-wrapper': { + '.tbody div tr:nth-child(even) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), }, - '.tbody tr:nth-child(even) .cell-wrapper-base': { + '.tbody div tr:nth-child(even) .cell-wrapper-base': { backgroundColor: tableRow.stripe.backgroundColor, }, }), ...($showStripedRows && $isSelectable && { - '.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + '.tbody div tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), }, - '.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + '.tbody div tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), }, - '.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + '.tbody div tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), }, - '.tbody .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { + '.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), }, - '.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + '.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedHover, ), }, - '.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + '.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedFocus, ), }, - '.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + '.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedActive, ), }, - '.tbody tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { + '.tbody div tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorHover, @@ -243,7 +247,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, }), }, - '.tbody tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { + '.tbody div tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorFocus, @@ -251,7 +255,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, }), }, - '.tbody tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { + '.tbody div tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorActive, @@ -260,7 +264,7 @@ const StyledReactTable = styled(ReactTable)<{ }), }, - '.tbody .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { + '.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelected, @@ -268,7 +272,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, }), }, - '.tbody .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { + '.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedHover, @@ -276,7 +280,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, }), }, - '.tbody .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { + '.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedFocus, @@ -284,7 +288,7 @@ const StyledReactTable = styled(ReactTable)<{ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, }), }, - '.tbody .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { + '.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedActive, diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 417243c3758..eeb35a0e957 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -153,13 +153,14 @@ const TableTemplate: StoryFn = ({ ...args }) => { }} ref={tableRef} isVirtualized + defaultSelectedIds={['1', '3']} > {(tableData) => ( { // header height and row height - return index === 0 ? 50 : 58; + return index === 0 ? 50 : 57.5; }} // header={()=>{}} header={() => ( From 96cbd91f8a0eaf34be7c954f7a122c5504c783ce Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 21 Jan 2025 23:23:32 +0530 Subject: [PATCH 16/97] chore: added isSelectable todo --- packages/blade/src/components/Table/Table.web.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index dd142ae2ebd..a1302b1772d 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -113,6 +113,8 @@ const StyledReactTable = styled(ReactTable)<{ height?: BoxProps['height']; width?: BoxProps['width']; isVirtualized?: boolean; + isSelectable?: boolean; + showStripedRows?: boolean; }; }>(({ $styledProps }) => { const { theme } = useTheme(); @@ -126,8 +128,8 @@ const StyledReactTable = styled(ReactTable)<{ // auto is isVirtualized ? 'scroll' : 'auto', }); //TODO: fix this - const $isSelectable = true; - const $showStripedRows = true; + const $isSelectable = $styledProps?.isSelectable; + const $showStripedRows = $styledProps?.showStripedRows; return { '&&&': { @@ -740,6 +742,8 @@ const _Table = forwardRef( height: height || `${VirtualizedTableDimensions.height}px`, width: width || `${VirtualizedTableDimensions.width}px`, isVirtualized, + isSelectable: selectionType !== 'none', + showStripedRows, }} pagination={hasPagination ? paginationConfig : null} {...makeAccessible({ multiSelectable: selectionType === 'multiple' })} From 463c2b90cb79cedbe514847467299934c2f38a2e Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 00:07:27 +0530 Subject: [PATCH 17/97] chore: add isVirtualized prop --- .../blade/src/components/Table/Table.web.tsx | 10 ++++---- .../src/components/Table/TableContext.tsx | 2 ++ .../src/components/Table/TableHeader.web.tsx | 23 +++++++++++-------- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index a1302b1772d..111c9a7715b 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -478,7 +478,7 @@ const _Table = forwardRef( console.log('Parent dimensions:', { width, height }); // You can use the width and height to set your table dimensions } - }, [ref]); + }, [height, ref, width]); useEffect(() => { // Get the total number of items @@ -657,6 +657,7 @@ const _Table = forwardRef( setHasHoverActions, columnCount, gridTemplateColumns, + isVirtualized, }), [ selectionType, @@ -684,6 +685,7 @@ const _Table = forwardRef( showBorderedCells, hasHoverActions, setHasHoverActions, + isVirtualized, ], ); @@ -696,7 +698,7 @@ const _Table = forwardRef( alignItems="center" justifyContent="center" height={height} - width={width} + width={isVirtualized ? width : undefined} {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} {...makeAnalyticsAttribute(rest)} @@ -710,7 +712,7 @@ const _Table = forwardRef( position="relative" {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} - width={width || `${VirtualizedTableDimensions.width}px`} + width={isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined} > {isRefreshSpinnerMounted && ( void; columnCount: number; gridTemplateColumns: string | undefined; + isVirtualized?: boolean; }; const TableContext = React.createContext({ @@ -70,6 +71,7 @@ const TableContext = React.createContext({ setHasHoverActions: () => {}, columnCount: 0, gridTemplateColumns: undefined, + isVirtualized: false, }); const useTableContext = (): TableContextType => { diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 703ed199c5a..43c750fa739 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -213,6 +213,7 @@ const StyledHeaderRow = styled(HeaderRow)<{ $hasHoverActions: boolean; $selectionType: TableProps['selectionType']; $columnCount: number; + $isVirtualized?: boolean; }>( ({ theme, @@ -221,21 +222,23 @@ const StyledHeaderRow = styled(HeaderRow)<{ $hasHoverActions, $selectionType, $columnCount, + $isVirtualized, }) => ({ '& th': $showBorderedCells ? { borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)), borderRightColor: getIn(theme.colors, tableRow.borderColor), borderRightStyle: 'solid', - //TODO: add check to only add this for virtalized tables - display: 'grid', - gridTemplateColumns: $gridTemplateColumns - ? `${$gridTemplateColumns} ${$hasHoverActions ? 'min-content' : ''}` - : ` ${ - $selectionType === 'multiple' ? 'min-content' : '' - } repeat(${$columnCount},minmax(100px, 1fr)) ${ - $hasHoverActions ? 'min-content' : '' - } !important;`, + ...($isVirtualized && { + display: 'grid', + gridTemplateColumns: $gridTemplateColumns + ? `${$gridTemplateColumns} ${$hasHoverActions ? 'min-content' : ''}` + : ` ${ + $selectionType === 'multiple' ? 'min-content' : '' + } repeat(${$columnCount},minmax(100px, 1fr)) ${ + $hasHoverActions ? 'min-content' : '' + } !important;`, + }), } : undefined, '& th:last-child ': { @@ -260,6 +263,7 @@ const _TableHeaderRow = ({ hasHoverActions, gridTemplateColumns, columnCount, + isVirtualized, } = useTableContext(); const isMultiSelect = selectionType === 'multiple'; const isAllSelected = selectedRows && selectedRows.length === totalItems; @@ -285,6 +289,7 @@ const _TableHeaderRow = ({ $hasHoverActions={hasHoverActions} $selectionType={selectionType} $columnCount={columnCount} + $isVirtualized={isVirtualized} > {isMultiSelect && ( Date: Wed, 22 Jan 2025 00:44:33 +0530 Subject: [PATCH 18/97] chore: remove unused classes --- packages/blade/src/components/Table/TableHeader.web.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 43c750fa739..558d0bac32c 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -72,8 +72,6 @@ const StyledHeader = styled(Header)({ '&&&': { '& tr:first-child th': { borderTop: 'none', - display: 'flex', - justifyContent: 'space-between', }, }, }); From 6b20fcb42889c03c5940bd0482ee6e88f8ee2b1b Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 01:17:09 +0530 Subject: [PATCH 19/97] chore: remove comments --- packages/blade/src/components/Table/Table.web.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 111c9a7715b..df7969a0773 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -74,8 +74,6 @@ const getTableHeaderCellCount = ( return tableHeaderCells.length; } } - // const tableHeaderArray = tableRootComponent.props.header().props.children; - // return tableHeaderArray; } } @@ -121,13 +119,10 @@ const StyledReactTable = styled(ReactTable)<{ const styledPropsCSSObject = getBaseBoxStyles({ theme, height: $styledProps?.height, - //Todo : virtualized table ...($styledProps?.isVirtualized && { width: $styledProps?.width, }), - // auto is isVirtualized ? 'scroll' : 'auto', }); - //TODO: fix this const $isSelectable = $styledProps?.isSelectable; const $showStripedRows = $styledProps?.showStripedRows; @@ -136,9 +131,6 @@ const StyledReactTable = styled(ReactTable)<{ ...styledPropsCSSObject, }, ...($styledProps?.isVirtualized && { - // applying style to 1st child of table - // apply these styles in case of isVisible - // virtualized table adds some styles which should be overridden '& > div ': { overflow: 'auto !important', height: `${$styledProps?.height} !important`, From 39dc02ae87444bdb2d6c4931db0e07f1555c4929 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 01:19:55 +0530 Subject: [PATCH 20/97] chore: code clean up --- .../src/components/Table/TableBody.web.tsx | 151 ------------------ 1 file changed, 151 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 81b0df6fb96..57873a90a0a 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -35,161 +35,10 @@ const StyledVirtualized = styled(Virtualized)<{ }>(({ theme, $showStripedRows, $isSelectable }) => { const rowBackgroundTransition = getTableRowBackgroundTransition(theme); return { - // '&': { - // backgroundColor: 'yellow !important', - // border: '1px solid black', - // }, - // change backgroundColor to yellow '& .cell-wrapper': { backgroundColor: 'yellow !important', }, }; - - // return { - // '&&&': { - // border: 'none', - // transition: rowBackgroundTransition, - - // '& tr:last-child .cell-wrapper': { - // borderBottom: 'none', - // }, - - // '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), - // }, - // '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, - // backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, - // theme, - // }), - // }, - // '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, - // backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, - // theme, - // }), - // }, - // '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, - // backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, - // theme, - // }), - // }, - - // ...($isSelectable && { - // '& tr:active:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), - // }, - // }), - - // ...($showStripedRows && { - // '& tr:nth-child(even) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), - // }, - // '& tr:nth-child(even) .cell-wrapper-base': { - // backgroundColor: tableRow.stripe.backgroundColor, - // }, - // }), - - // ...($showStripedRows && - // $isSelectable && { - // '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), - // }, - // '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), - // }, - // '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), - // }, - // '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { - // backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), - // }, - // '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn( - // theme.colors, - // tableRow.stripeWrapper.backgroundColorSelectedHover, - // ), - // }, - // '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn( - // theme.colors, - // tableRow.stripeWrapper.backgroundColorSelectedFocus, - // ), - // }, - // '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - // backgroundColor: getIn( - // theme.colors, - // tableRow.stripeWrapper.backgroundColorSelectedActive, - // ), - // }, - - // '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorHover, - // theme, - // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, - // }), - // }, - // '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorFocus, - // theme, - // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, - // }), - // }, - // '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorActive, - // backgroundGradientColor: tableRow.stripe.backgroundColorHover, - // theme, - // }), - // }, - - // '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorSelected, - // theme, - // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, - // }), - // }, - // '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorSelectedHover, - // theme, - // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, - // }), - // }, - // '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorSelectedFocus, - // theme, - // backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, - // }), - // }, - // '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { - // backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), - // ...getTableActionsHoverStyles({ - // hoverColor: tableRow.stripe.backgroundColorSelectedActive, - // theme, - // backgroundGradientColor: tableRow.stripe.backgroundColorHover, - // }), - // }, - // }), - // }, - // }; }); const StyledBody = styled(Body)<{ From e8b7f4d65976f0839fb59fa939aed5b91c75bad4 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 01:36:56 +0530 Subject: [PATCH 21/97] fix: old table styling --- packages/blade/src/components/Table/Table.web.tsx | 2 +- .../blade/src/components/Table/TableBody.web.tsx | 15 +++++++++++---- .../components/Table/TableEditableCell.web.tsx | 8 ++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index df7969a0773..657da2a0d4a 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -725,7 +725,7 @@ const _Table = forwardRef( )} {toolbar} { const isChildrenString = typeof children === 'string'; - const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext(); + const { + selectionType, + rowDensity, + showStripedRows, + backgroundColor, + isVirtualized, + } = useTableContext(); const isSelectable = selectionType !== 'none'; return ( ({ setDisabledRows, showBorderedCells, setHasHoverActions, + isVirtualized, } = useTableContext(); const isSelectable = selectionType !== 'none'; const isMultiSelect = selectionType === 'multiple'; @@ -475,8 +482,8 @@ const _TableRow = ({ {...makeAccessible({ selected: isSelected })} {...metaAttribute({ name: MetaConstants.TableRow, testID })} {...makeAnalyticsAttribute(rest)} - role="row" - as="tr" + role={isVirtualized ? 'row' : undefined} + as={isVirtualized ? 'tr' : undefined} > {isMultiSelect && ( { - const { rowDensity, showStripedRows, backgroundColor } = useTableContext(); + const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext(); return ( { - const { rowDensity, showStripedRows, backgroundColor } = useTableContext(); + const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext(); return ( Date: Wed, 22 Jan 2025 12:37:00 +0530 Subject: [PATCH 22/97] chore: table height fix --- packages/blade/src/components/Table/Table.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 657da2a0d4a..2c944f536f2 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -733,7 +733,7 @@ const _Table = forwardRef( select={selectionType !== 'none' ? rowSelectConfig : null} sort={sortFunctions ? sort : null} $styledProps={{ - height: height || `${VirtualizedTableDimensions.height}px`, + height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height, width: isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined, isVirtualized, isSelectable: selectionType !== 'none', From 628ec0f0bfa50c1eda2c4bb1cc357514b99a6c3f Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 13:06:11 +0530 Subject: [PATCH 23/97] fix: table bg on hover , (but hover actions are not working now ;_;) --- .../blade/src/components/Table/Table.web.tsx | 2 +- .../src/components/Table/TableBody.web.tsx | 6 +- .../Table/TableEditableCell.web.tsx | 4 +- .../Table/docs/BasicTable.stories.tsx | 233 ++++++++++++++---- 4 files changed, 185 insertions(+), 60 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 2c944f536f2..4da220627f0 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -145,7 +145,7 @@ const StyledReactTable = styled(ReactTable)<{ display: 'block !important', }, // for virtualized table, we need to apply some styles to tbody - tr: { + '.tbody > div > .tr': { display: 'grid', gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', columnGap: '0', diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index a9444304ed1..7b41a8320e6 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -273,7 +273,7 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R ({ {...makeAccessible({ selected: isSelected })} {...metaAttribute({ name: MetaConstants.TableRow, testID })} {...makeAnalyticsAttribute(rest)} - role={isVirtualized ? 'row' : undefined} - as={isVirtualized ? 'tr' : undefined} + // role={isVirtualized ? 'row' : undefined} + // as={isVirtualized ? 'tr' : undefined} > {isMultiSelect && ( = ({ ...args }) => { }; export const NormalTable: StoryFn = ({ ...args }) => { + const ref = useRef(null); return ( - - { - console.log(selectedIds); - // setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id))); - }} - toolbar={ - - - - - - - } - sortFunctions={{ - ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), - AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), - STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - }} - > - {(tableData) => ( - <> - - - ID - Amount - Account - Date - Method - Status - - - - {tableData.map((tableItem, index) => ( + + Normal Table- + + { + console.log(selectedIds); + // setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id))); + }} + toolbar={ + + + + + + + } + sortFunctions={{ + ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + > + {(tableData) => ( + <> + + + ID + Amount + Account + Date + Method + Status + + + + {tableData.map((tableItem, index) => ( + + + { + console.log('Approved', tableItem.id); + }} + /> + { + console.log('Rejected', tableItem.id); + }} + /> + + } + onClick={() => { + console.log('where'); + }} + > + + {tableItem.paymentId} + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + ))} + + + )} + + + Virtualized Table- + + <> total rows : {nodes.length} + + + + + + + } + sortFunctions={{ + ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + ref={ref} + isVirtualized + defaultSelectedIds={['1', '3']} + > + {(tableData) => ( + { + // header height and row height + return index === 0 ? 50 : 57.5; + }} + // header={()=>{}} + header={() => ( + + + ID + Amount + Account + Date + Method + Status + + + )} + body={(tableItem, index) => ( { + console.log('where'); + }} hoverActions={ <> - { - console.log('Approved', tableItem.id); - }} - /> - { - console.log('Rejected', tableItem.id); - }} - /> - - } > {tableItem.paymentId} @@ -302,29 +286,6 @@ export const NormalTable: StoryFn = ({ ...args }) => { - - { - console.log('Approved', tableItem.id); - }} - /> - { - console.log('Rejected', tableItem.id); - }} - /> - - } onClick={() => { console.log('where'); }} @@ -371,14 +332,12 @@ export const NormalTable: StoryFn = ({ ...args }) => { Virtualized Table- - <> total rows : {nodes.length} + <> total rows : {largeNodes.length} @@ -399,6 +358,8 @@ export const NormalTable: StoryFn = ({ ...args }) => { ref={ref} isVirtualized defaultSelectedIds={['1', '3']} + rowDensity="normal" + isFirstColumnSticky > {(tableData) => ( = ({ ...args }) => { onClick={() => { console.log('where'); }} - hoverActions={ - <> - - { - console.log('Approved', tableItem.id); - }} - /> - { - console.log('Rejected', tableItem.id); - }} - /> - - } > {tableItem.paymentId} From ed697075447b03d36e48ee6df7948210cd5edea5 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 18:39:08 +0530 Subject: [PATCH 27/97] chore: update story --- .../components/Table/docs/BasicTable.stories.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 72801131ea8..df20f9809ae 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -19,7 +19,7 @@ import { import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Amount } from '~components/Amount'; -import { Code } from '~components/Typography'; +import { Code, Heading } from '~components/Typography'; import { Badge } from '~components/Badge'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import { Button } from '~components/Button'; @@ -133,7 +133,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { const tableRef = useRef(null); return ( - <> total rows : {largeNodes.length} + Total rows : {largeNodes.length} = ({ ...args }) => { const ref = useRef(null); return ( - Normal Table- + Normal Table- = ({ ...args }) => { )} - Virtualized Table- - - <> total rows : {largeNodes.length} + + Virtualized Table- + + Total rows : {largeNodes.length} = ({ ...args }) => { export const Table = TableTemplate.bind({}); // Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting -Table.storyName = 'Basic Table'; +Table.storyName = 'Virtualized Table'; From 6c0be96970901e2dcd63c7473d8b31a8c3ef9b7f Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 18:50:23 +0530 Subject: [PATCH 28/97] chore: pagination check and prop fix --- .../blade/src/components/Table/TablePagination.web.tsx | 8 +++++++- .../src/components/Table/docs/BasicTable.stories.tsx | 1 - packages/blade/src/components/Table/types.ts | 3 ++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx index 8871ee73820..8259d5b56d8 100644 --- a/packages/blade/src/components/Table/TablePagination.web.tsx +++ b/packages/blade/src/components/Table/TablePagination.web.tsx @@ -27,7 +27,13 @@ import { throwBladeError } from '~utils/logger'; import { getFocusRingStyles } from '~utils/getFocusRingStyles'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; -const pageSizeOptions: NonNullable[] = [10, 25, 50]; +const pageSizeOptions: NonNullable[] = [ + 10, + 25, + 50, + 100, + 200, +]; const PageSelectionButton = styled.button<{ isSelected?: boolean }>(({ theme, isSelected }) => ({ backgroundColor: isSelected diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index df20f9809ae..5fc1e47736c 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -369,7 +369,6 @@ export const NormalTable: StoryFn = ({ ...args }) => { // header height and row height return index === 0 ? 50 : 57.5; }} - // header={()=>{}} header={() => ( diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 47d8b036fcb..5978d7268ed 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -354,8 +354,9 @@ type TablePaginationCommonProps = { * The default page size. * Page size controls how rows are shown per page. * @default 10 + * consider using virtualization for large page sizes **/ - defaultPageSize?: 10 | 25 | 50; + defaultPageSize?: 10 | 25 | 50 | 100 | 200; /** * The current page. Passing this prop will make the component controlled and will not update the page on its own. **/ From 41fb380855afde2e6e8ba4d6a7417cb13c97c688 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 18:52:46 +0530 Subject: [PATCH 29/97] chore: throw error --- packages/blade/src/components/Table/Table.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index ebe6f720861..4c4a20f1fa4 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -621,7 +621,7 @@ const _Table = forwardRef( } } - if (selectionType !== 'none' && hasHoverActions) { + if (selectionType !== 'none' && hasHoverActions && __DEV__) { throwBladeError({ message: 'Hover actions are not supported with selectionType', moduleName: 'Table', From 9976ef517d437d6ff005b30c9e41995d7535fe71 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 22 Jan 2025 18:53:47 +0530 Subject: [PATCH 30/97] chore: added error --- packages/blade/src/components/Table/Table.web.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 4c4a20f1fa4..45ecee3e7ab 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -622,8 +622,9 @@ const _Table = forwardRef( } if (selectionType !== 'none' && hasHoverActions && __DEV__) { + // their is no point of using hover actions with selectionType throwBladeError({ - message: 'Hover actions are not supported with selectionType', + message: 'Consider removing hover actions when selectionType is set', moduleName: 'Table', }); } From 0522eb155a0a9fb1050cc5c136996c4965074f01 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 01:06:37 +0530 Subject: [PATCH 31/97] fix: make table response --- .../blade/src/components/Table/Table.web.tsx | 15 +- .../VirtualizedTableAPI.stories.tsx | 152 ++++++++++++++++++ 2 files changed, 164 insertions(+), 3 deletions(-) create mode 100644 packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 45ecee3e7ab..8bc7a69e990 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -463,12 +463,21 @@ const _Table = forwardRef( }); useEffect(() => { - console.log('ref', ref); if (ref?.current && !height && !width) { const { width, height } = ref?.current.getBoundingClientRect(); setVirtualizedTableDimensions({ width, height }); - console.log('Parent dimensions:', { width, height }); - // You can use the width and height to set your table dimensions + + // can we react to width and height changes? + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + const { width } = entry.contentRect; + setVirtualizedTableDimensions((prev) => ({ ...prev, width })); + } + }); + resizeObserver.observe(ref.current); + return () => { + resizeObserver.disconnect(); + }; } }, [height, ref, width]); diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx new file mode 100644 index 00000000000..2c4bf3bb795 --- /dev/null +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -0,0 +1,152 @@ +import React from 'react'; +import type { StoryFn, Meta } from '@storybook/react'; +import type { TableData } from '../../types'; +import { Table as TableComponent } from '../../Table'; +import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; +import { TableRow, TableCell, TableVirtulized } from '../../TableBody'; +import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; +import { Box } from '~components/Box'; +import { Amount } from '~components/Amount'; +import { Code } from '~components/Typography'; +import { Badge } from '~components/Badge'; + +export default { + title: 'Components/Table/API', + component: TableVirtulized, + args: {}, + argTypes: { + children: { + control: { + disable: true, + }, + }, + }, + parameters: { + docs: { + page: () => ( + + ), + }, + }, +} as Meta; + +const nodes: Item[] = [ + ...Array.from({ length: 5000 }, (_, i) => ({ + id: (i + 1).toString(), + paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, + amount: Number((Math.random() * 10000).toFixed(2)), + status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], + date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1), + type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)], + method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)], + bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)], + account: Math.floor(Math.random() * 1000000000).toString(), + name: [ + 'John Doe', + 'Jane Doe', + 'Bob Smith', + 'Alice Smith', + 'John Smith', + 'Jane Smith', + 'Bob Doe', + 'Alice Doe', + ][Math.floor(Math.random() * 8)], + })), +]; + +type Item = { + id: string; + paymentId: string; + amount: number; + status: string; + date: Date; + type: string; + method: string; + bank: string; + account: string; + name: string; +}; +const data: TableData = { + nodes, +}; + +const TableTemplate: StoryFn = ({ ...args }) => { + const parentRef = React.useRef(null); + return ( + + + {(tableData) => ( + { + // header height and row height + return index === 0 ? 50 : 57.5; + }} + header={() => ( + + + ID + Amount + Account + Date + Method + Status + + + )} + body={(tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + /> + )} + + + ); +}; + +export const VirtualizedTable = TableTemplate.bind({}); +// Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting +VirtualizedTable.storyName = 'VirtualizedTable'; From 0209b1f797464a69202c3685682b44d2571cf3c1 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 02:18:52 +0530 Subject: [PATCH 32/97] chore: update docs & components and types --- .../codemods/aicodemod/knowledge/Table.md | 86 +++++++++++++++ .../src/components/Table/TableBody.web.tsx | 32 +++--- .../components/Table/_decisions/decisions.md | 101 +++++++++++++++++- .../src/components/Table/componentIds.ts | 1 + .../VirtualizedTableAPI.stories.tsx | 4 +- .../Table/docs/BasicTable.stories.tsx | 6 +- packages/blade/src/components/Table/types.ts | 67 ++++++++++++ 7 files changed, 272 insertions(+), 25 deletions(-) diff --git a/packages/blade/codemods/aicodemod/knowledge/Table.md b/packages/blade/codemods/aicodemod/knowledge/Table.md index 30d77d70df7..927b241a818 100644 --- a/packages/blade/codemods/aicodemod/knowledge/Table.md +++ b/packages/blade/codemods/aicodemod/knowledge/Table.md @@ -594,3 +594,89 @@ const TableComponent: StoryFn = ({ ...args }) => { ); }; ``` + +# Virtualized Table + +Virtaulized table is a table component that renders only the visible rows and columns. This is useful when you have a large dataset and you want to render only the visible rows and columns to improve the performance of the table. + +Out implementation of virtualized table is an wrapper on top of react-table-library 's implementation. It provides a simple API to create a virtualized table. + +## Props + +most of props are same as Table component. we have added following table component. + +```ts + +isVirtualized = false, // default value is false , it is used to enable virtualization in table + +ref = React.Ref | undefined, // ref to the table container , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns +``` +but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. +VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. + + +```ts +type VirtualizedWrapperProps = { + /** + * * @example + * { + * // header height and row height + * return index === 0 ? 50 : 57.5; + * }} + * header={() => ( + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * )} + * body={(tableItem, index) => ( + * + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date} + * + * {tableItem.method} + * {tableItem.status} + * + * )} + * /> + * + **/ + /** + * + * should be a function that returns TableHeader, + * + **/ + header: () => React.ReactElement; + /** + * + * should be a function that returns TableBody + * + * */ + body: (tableItem: TableNode, index: number) => React.ReactElement; + /** + * + */ + tableData: TableNode[]; + /** + * should be a function that returns the height of the row + * index 0 is the header height + **/ + rowHeight: RowHeight; +}; + +``` diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 1573cb46799..48f066b2bb1 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -3,7 +3,7 @@ import { Body, Row, Cell } from '@table-library/react-table-library/table'; import { Virtualized } from '@table-library/react-table-library/virtualized'; import styled from 'styled-components'; import { useTableContext } from './TableContext'; -import { checkboxCellWidth, classes, tableBackgroundColor, tableRow } from './tokens'; +import { checkboxCellWidth, classes, tableRow } from './tokens'; import { ComponentIds } from './componentIds'; import type { TableProps, @@ -11,9 +11,9 @@ import type { TableRowProps, TableCellProps, TableBackgroundColors, + VirtualizedWrapperProps, } from './types'; import getIn from '~utils/lodashButBetter/get'; -import type { DotNotationToken } from '~utils/lodashButBetter/get'; import { Text } from '~components/Typography'; import type { CheckboxProps } from '~components/Checkbox'; import { Checkbox } from '~components/Checkbox'; @@ -33,18 +33,6 @@ import { getTableDataSelector, } from './utils'; -const StyledVirtualized = styled(Virtualized)<{ - $isSelectable: boolean; - $showStripedRows: boolean; -}>(({ theme, $showStripedRows, $isSelectable }) => { - const rowBackgroundTransition = getTableRowBackgroundTransition(theme); - return { - '& .cell-wrapper': { - backgroundColor: 'yellow !important', - }, - }; -}); - const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean; @@ -540,14 +528,20 @@ const _TableRow = ({ ); }; -const TableVirtulized = ({ header, body, tableData, rowHeight }) => { - return ( - - ); +const _Virtulized = ({ + header, + body, + tableData, + rowHeight, +}: VirtualizedWrapperProps): React.ReactElement => { + return ; }; const TableRow = assignWithoutSideEffects(_TableRow, { componentId: ComponentIds.TableRow, }); -export { TableBody, TableRow, TableCell, TableVirtulized }; +const VirtulizedWrapper = assignWithoutSideEffects(_Virtulized, { + componentId: ComponentIds.VirtualizedTable, +}); +export { TableBody, TableRow, TableCell, VirtulizedWrapper }; diff --git a/packages/blade/src/components/Table/_decisions/decisions.md b/packages/blade/src/components/Table/_decisions/decisions.md index 77fd407e86a..8a05ffcb265 100644 --- a/packages/blade/src/components/Table/_decisions/decisions.md +++ b/packages/blade/src/components/Table/_decisions/decisions.md @@ -649,4 +649,103 @@ While evaluating multiple libraries we identified 3 categories: ## Accessibility - We will be following the [WAI-ARIA Table Practices](https://www.w3.org/WAI/ARIA/apg/patterns/table/) to ensure our table is accessible -- We will be using native HTML elements like ``, ``, ``, ``, ``, `
` & `` to ensure our table is accessible \ No newline at end of file +- We will be using native HTML elements like ``, ``, ``, ``, ``, `
` & `` to ensure our table is accessible + + +# Virtualization + + +Virtaulized table is a table component that renders only the visible rows and columns. This is useful when you have a large dataset and you want to render only the visible rows and columns to improve the performance of the table. + +## Approach +Out implementation of virtualized table is an wrapper on top of react-table-library 's implementation. It provides a simple API to create a virtualized table. +alternatively we can use react-window or react-virtualized to create a virtualized table wrapper. but that would require more effort to create a virtualized table. plus their is a lot of boilerplate code to create a virtualized table using react-window or react-virtualized. +also their is high chance of bugs and performance issues in the implementation of virtualized table using react-window or react-virtualized. if we need more features in the future then we can expore react-window or react-virtualized. + + +## Decision +1. We have made a wrapper on top of react-table-library's implementation to create a virtualized table. +2. if virtualization is enabled we have a wrapper component and we are not passing TableBody, so this breaks a lot of existing styles and features of the table component like hoverAction, rowSelection, etc. so we have to move these styles to table component. +3. we have to pass a ref to the table container to calculate the height and width of the table to render only the visible rows and columns. + + +## Props +most of props are same as Table component. we have added following table component. + +```ts + +isVirtualized = false, // default value is false , it is used to enable virtualization in table + +ref = React.Ref | undefined, // ref to the table container , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns + + +``` +but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. +VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. + + +```ts +type VirtualizedWrapperProps = { + /** + * * @example + * { + * // header height and row height + * return index === 0 ? 50 : 57.5; + * }} + * header={() => ( + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * )} + * body={(tableItem, index) => ( + * + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date} + * + * {tableItem.method} + * {tableItem.status} + * + * )} + * /> + * + **/ + /** + * + * should be a function that returns TableHeader, + * + **/ + header: () => React.ReactElement; + /** + * + * should be a function that returns TableBody + * + * */ + body: (tableItem: TableNode, index: number) => React.ReactElement; + /** + * + */ + tableData: TableNode[]; + /** + * should be a function that returns the height of the row + * index 0 is the header height + **/ + rowHeight: RowHeight; +}; + +``` diff --git a/packages/blade/src/components/Table/componentIds.ts b/packages/blade/src/components/Table/componentIds.ts index f9b790595c5..e5fef6a6891 100644 --- a/packages/blade/src/components/Table/componentIds.ts +++ b/packages/blade/src/components/Table/componentIds.ts @@ -12,6 +12,7 @@ const ComponentIds = { TableFooter: 'TableFooter', TableFooterRow: 'TableFooterRow', TableFooterCell: 'TableFooterCell', + VirtualizedTable: 'VirtualizedTable', TablePagination: 'TablePagination', }; diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 2c4bf3bb795..eced1ac2483 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -3,7 +3,7 @@ import type { StoryFn, Meta } from '@storybook/react'; import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; -import { TableRow, TableCell, TableVirtulized } from '../../TableBody'; +import { TableRow, TableCell, VirtulizedWrapper } from '../../TableBody'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Amount } from '~components/Amount'; @@ -87,7 +87,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { > {(tableData) => ( - { // header height and row height diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 5fc1e47736c..8682568ebcc 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -25,7 +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 '../TableBody.web'; +import { VirtulizedWrapper } from '../TableBody.web'; import { VirtualizedTable } from '../Table.web'; import { spacing } from '~tokens/global'; import { @@ -163,7 +163,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { defaultSelectedIds={['1', '3']} > {(tableData) => ( - { // header height and row height @@ -363,7 +363,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { isFirstColumnSticky > {(tableData) => ( - { // header height and row height diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 5978d7268ed..a7465024595 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -1,4 +1,5 @@ import type React from 'react'; +import type { TableNode as TableLibraryTableNode } from '@table-library/react-table-library/types/table'; import type { Theme } from '~components/BladeProvider'; import type { BoxProps } from '~components/Box'; import type { StyledPropsBlade } from '~components/Box/styledProps'; @@ -19,6 +20,8 @@ type TableBackgroundColors = `surface.background.gray.${DotNotationToken< Theme['colors']['surface']['background']['gray'] >}`; +type RowHeight = number | ((item: TableLibraryTableNode, index: number) => number); + type TableHeaderProps = { /** * The children of TableHeader should be TableHeaderRow @@ -455,6 +458,69 @@ type TableToolbarActionsProps = { } & StyledPropsBlade & DataAnalyticsAttribute; +type VirtualizedWrapperProps = { + /** + * * @example + * { + * // header height and row height + * return index === 0 ? 50 : 57.5; + * }} + * header={() => ( + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * )} + * body={(tableItem, index) => ( + * + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date} + * + * {tableItem.method} + * {tableItem.status} + * + * )} + * /> + * + **/ + /** + * + * should be a function that returns TableHeader, + * + **/ + header: () => React.ReactElement; + /** + * + * should be a function that returns TableBody + * + * */ + body: (tableItem: TableNode, index: number) => React.ReactElement; + /** + * + */ + tableData: TableNode[]; + /** + * should be a function that returns the height of the row + * index 0 is the header height + **/ + rowHeight: RowHeight; +}; + export type { TableProps, Identifier, @@ -477,4 +543,5 @@ export type { TableBackgroundColors, TablePaginationType, TablePaginationCommonProps, + VirtualizedWrapperProps, }; From 9112ea00aefd08e68147d426b0dc54f0b67f672a Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 02:41:29 +0530 Subject: [PATCH 33/97] chore: fixed ts and lint errors in code --- .../blade/src/components/Table/Table.web.tsx | 36 +++++++++++-------- .../src/components/Table/TableBody.web.tsx | 19 ++++------ .../Table/TableEditableCell.web.tsx | 4 +-- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 8bc7a69e990..ee647a660ef 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -29,10 +29,11 @@ import type { TablePaginationType, TableHeaderRowProps, } from './types'; +import { getTableActionsHoverStyles } from './utils'; import { makeBorderSize, makeMotionTime } from '~utils'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; -import { Box, BoxProps } from '~components/Box'; +import type { BoxProps } from '~components/Box'; import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles'; import BaseBox from '~components/Box/BaseBox'; import { Spinner } from '~components/Spinner'; @@ -44,8 +45,6 @@ import getIn from '~utils/lodashButBetter/get'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsMobile } from '~utils/useIsMobile'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; -import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils'; -import { Virtualized } from '@table-library/react-table-library/virtualized'; const rowSelectType: Record< NonNullable['selectionType']>, @@ -65,12 +64,17 @@ const getTableHeaderCellCount = ( ): number => { const tableRootComponent = children([]); if (isVirtualized) { - if (React.isValidElement(tableRootComponent)) { - console.log('tableRootComponent', tableRootComponent); - if (React.isValidElement(tableRootComponent.props.header())) { + if ( + React.isValidElement<{ header?: () => React.ReactElement }>(tableRootComponent) && + tableRootComponent?.props.header + ) { + if (React.isValidElement(tableRootComponent?.props.header())) { const tableHeaderRow = tableRootComponent.props.header().props.children; - if (React.isValidElement(tableHeaderRow)) { - const tableHeaderCells = tableHeaderRow.props.children; + if ( + React.isValidElement<{ children?: React.ReactNode }>(tableHeaderRow) && + tableHeaderRow.props.children + ) { + const tableHeaderCells = React.Children.toArray(tableHeaderRow.props.children); return tableHeaderCells.length; } } @@ -463,22 +467,26 @@ const _Table = forwardRef( }); useEffect(() => { - if (ref?.current && !height && !width) { - const { width, height } = ref?.current.getBoundingClientRect(); - setVirtualizedTableDimensions({ width, height }); + if (ref && 'current' in ref && ref.current && !height && !width) { + if (ref?.current) { + const { width, height } = ref.current.getBoundingClientRect(); + setVirtualizedTableDimensions({ width, height }); + } - // can we react to width and height changes? const resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { + for (const entry of entries) { const { width } = entry.contentRect; setVirtualizedTableDimensions((prev) => ({ ...prev, width })); } }); - resizeObserver.observe(ref.current); + if (ref && 'current' in ref && ref.current) { + resizeObserver.observe(ref.current); + } return () => { resizeObserver.disconnect(); }; } + return undefined; }, [height, ref, width]); useEffect(() => { diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 48f066b2bb1..0a273e44fd5 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -13,6 +13,11 @@ import type { TableBackgroundColors, VirtualizedWrapperProps, } from './types'; +import { + getTableActionsHoverStyles, + getTableRowBackgroundTransition, + getTableDataSelector, +} from './utils'; import getIn from '~utils/lodashButBetter/get'; import { Text } from '~components/Typography'; import type { CheckboxProps } from '~components/Checkbox'; @@ -25,13 +30,7 @@ import { getFocusRingStyles } from '~utils/getFocusRingStyles'; import { size } from '~tokens/global'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect'; -import type { Theme } from '~components/BladeProvider'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; -import { - getTableActionsHoverStyles, - getTableRowBackgroundTransition, - getTableDataSelector, -} from './utils'; const StyledBody = styled(Body)<{ $isSelectable: boolean; @@ -252,13 +251,7 @@ export const CellWrapper = styled(BaseBox)<{ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.ReactElement => { const isChildrenString = typeof children === 'string'; - const { - selectionType, - rowDensity, - showStripedRows, - backgroundColor, - isVirtualized, - } = useTableContext(); + const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext(); const isSelectable = selectionType !== 'none'; return ( diff --git a/packages/blade/src/components/Table/TableEditableCell.web.tsx b/packages/blade/src/components/Table/TableEditableCell.web.tsx index af81c4540b7..105f70f728b 100644 --- a/packages/blade/src/components/Table/TableEditableCell.web.tsx +++ b/packages/blade/src/components/Table/TableEditableCell.web.tsx @@ -69,7 +69,7 @@ const _TableEditableCell = ({ errorText, successText, }: TableEditableCellProps): React.ReactElement => { - const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext(); + const { rowDensity, showStripedRows, backgroundColor } = useTableContext(); return ( { - const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext(); + const { rowDensity, showStripedRows, backgroundColor } = useTableContext(); return ( From 14c19dbc49468c5d3b9050093c13d726e7c6b685 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 03:41:51 +0530 Subject: [PATCH 34/97] fix: more ts error and ignore few files now --- .../SpotlightPopoverTour/docs/TourDocs.tsx | 2 + .../blade/src/components/Table/Table.web.tsx | 736 +++++++++--------- .../Table/docs/BasicTable.stories.tsx | 21 +- .../blade/src/utils/storybook/ArgsTable.tsx | 2 + 4 files changed, 370 insertions(+), 391 deletions(-) diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx index f75e6949af3..10053fd9b67 100644 --- a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx +++ b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx @@ -1,3 +1,5 @@ +//ignore file for ts check +// @ts-nocheck import React from 'react'; import { BasicExample } from './examples'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index ee647a660ef..dfe3a63fded 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -316,73 +316,71 @@ const RefreshWrapper = styled(BaseBox)<{ }; }); -const _Table = forwardRef( - ( - { - children, - data, - multiSelectTrigger = 'row', - selectionType = 'none', - onSelectionChange, - isHeaderSticky, - isFooterSticky, - isFirstColumnSticky, - rowDensity = 'normal', - onSortChange, - sortFunctions, - toolbar, - pagination, - height, - width, - showStripedRows, - gridTemplateColumns, - isLoading = false, - isRefreshing = false, - showBorderedCells = false, - defaultSelectedIds = [], - isVirtualized = false, - ...rest - }: TableProps, - ref: React.Ref | undefined, - ): React.ReactElement => { - const { theme } = useTheme(); - const [selectedRows, setSelectedRows] = React.useState['id'][]>( - selectionType !== 'none' ? defaultSelectedIds : [], - ); - const [disabledRows, setDisabledRows] = React.useState['id'][]>([]); - const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); - const [paginationType, setPaginationType] = React.useState>( - 'client', - ); - const [headerRowDensity, setHeaderRowDensity] = React.useState< - TableHeaderRowProps['rowDensity'] - >(undefined); - const [hasHoverActions, setHasHoverActions] = React.useState(false); - const [VirtualizedTableDimensions, setVirtualizedTableDimensions] = React.useState({ - width: 0, - height: 0, - }); +const _Table = ({ + children, + data, + multiSelectTrigger = 'row', + selectionType = 'none', + onSelectionChange, + isHeaderSticky, + isFooterSticky, + isFirstColumnSticky, + rowDensity = 'normal', + onSortChange, + sortFunctions, + toolbar, + pagination, + height, + width, + showStripedRows, + gridTemplateColumns, + isLoading = false, + isRefreshing = false, + showBorderedCells = false, + defaultSelectedIds = [], + isVirtualized = false, + ...rest + }: TableProps, + ref: React.Ref | undefined, +): React.ReactElement => { + const { theme } = useTheme(); + const [selectedRows, setSelectedRows] = React.useState['id'][]>( + selectionType !== 'none' ? defaultSelectedIds : [], + ); + const [disabledRows, setDisabledRows] = React.useState['id'][]>([]); + const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); + const [paginationType, setPaginationType] = React.useState>( + 'client', + ); + const [headerRowDensity, setHeaderRowDensity] = React.useState( + undefined, + ); + const [hasHoverActions, setHasHoverActions] = React.useState(false); + const [VirtualizedTableDimensions, setVirtualizedTableDimensions] = React.useState({ + width: 0, + height: 0, + }); - // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky - const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; - const backgroundColor = tableBackgroundColor; + // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky + const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; + const backgroundColor = tableBackgroundColor; - const isMobile = useIsMobile(); - const lastHoverActionsColWidth = isMobile ? '1fr' : '0px'; + const isMobile = useIsMobile(); + const lastHoverActionsColWidth = isMobile ? '1fr' : '0px'; - const { - isEntering: isRefreshSpinnerEntering, - isMounted: isRefreshSpinnerMounted, - isExiting: isRefreshSpinnerExiting, - isVisible: isRefreshSpinnerVisible, - } = usePresence(isRefreshing, { - transitionDuration: theme.motion.duration.quick, - }); + const { + isEntering: isRefreshSpinnerEntering, + isMounted: isRefreshSpinnerMounted, + isExiting: isRefreshSpinnerExiting, + isVisible: isRefreshSpinnerVisible, + } = usePresence(isRefreshing, { + transitionDuration: theme.motion.duration.quick, + }); - // Table Theme - const columnCount = getTableHeaderCellCount(children, isVirtualized); - const firstColumnStickyHeaderCellCSS = isFirstColumnSticky - ? ` + // Table Theme + const columnCount = getTableHeaderCellCount(children, isVirtualized); + const firstColumnStickyHeaderCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -397,9 +395,9 @@ const _Table = forwardRef( } ` }` - : ''; - const firstColumnStickyFooterCellCSS = isFirstColumnSticky - ? ` + : ''; + const firstColumnStickyFooterCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -414,9 +412,9 @@ const _Table = forwardRef( } ` }` - : ''; - const firstColumnStickyBodyCellCSS = isFirstColumnSticky - ? ` + : ''; + const firstColumnStickyBodyCellCSS = isFirstColumnSticky + ? ` &:nth-of-type(1) { left: 0 !important; position: sticky !important; @@ -431,14 +429,14 @@ const _Table = forwardRef( } ` }` - : ''; + : ''; - const tableTheme = useTableTheme({ - Table: ` + const tableTheme = useTableTheme({ + Table: ` height:${isFooterSticky ? `100%` : undefined}; border: ${makeBorderSize(theme.border.width.thin)} solid ${ - theme.colors.surface.border.gray.muted - }; + theme.colors.surface.border.gray.muted + }; --data-table-library_grid-template-columns: ${ gridTemplateColumns ? `${gridTemplateColumns} ${hasHoverActions ? lastHoverActionsColWidth : ''}` @@ -450,341 +448,335 @@ const _Table = forwardRef( } !important; background-color: ${getIn(theme.colors, backgroundColor)}; `, - HeaderCell: ` + HeaderCell: ` position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'}; top: ${shouldHeaderBeSticky ? '0' : undefined}; ${firstColumnStickyHeaderCellCSS} `, - Cell: ` + Cell: ` ${firstColumnStickyBodyCellCSS} `, - FooterCell: ` + FooterCell: ` position: ${isFooterSticky ? 'sticky' : 'relative'}; bottom: ${isFooterSticky ? '0' : undefined}; ${firstColumnStickyFooterCellCSS} `, - }); + }); - useEffect(() => { - if (ref && 'current' in ref && ref.current && !height && !width) { - if (ref?.current) { - const { width, height } = ref.current.getBoundingClientRect(); - setVirtualizedTableDimensions({ width, height }); - } + useEffect(() => { + if (ref && 'current' in ref && ref.current && !height && !width) { + if (ref?.current) { + const { width, height } = ref.current.getBoundingClientRect(); + setVirtualizedTableDimensions({ width, height }); + } - const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - const { width } = entry.contentRect; - setVirtualizedTableDimensions((prev) => ({ ...prev, width })); - } - }); - if (ref && 'current' in ref && ref.current) { - resizeObserver.observe(ref.current); + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + const { width } = entry.contentRect; + setVirtualizedTableDimensions((prev) => ({ ...prev, width })); } - return () => { - resizeObserver.disconnect(); - }; - } - return undefined; - }, [height, ref, width]); - - useEffect(() => { - // Get the total number of items - setTotalItems(data.nodes.length); - }, [data.nodes]); - - // Selection Logic - const onSelectChange: MiddlewareFunction = (action, state): void => { - const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? []; - setSelectedRows(selectedIds); - onSelectionChange?.({ - selectedIds, - values: data.nodes.filter((node) => selectedIds.includes(node.id)), }); - }; + if (ref && 'current' in ref && ref.current) { + resizeObserver.observe(ref.current); + } + return () => { + resizeObserver.disconnect(); + }; + } + return undefined; + }, [height, ref, width]); + + useEffect(() => { + // Get the total number of items + setTotalItems(data.nodes.length); + }, [data.nodes]); + + // Selection Logic + const onSelectChange: MiddlewareFunction = (_, state): void => { + const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? []; + setSelectedRows(selectedIds); + onSelectionChange?.({ + selectedIds, + values: data.nodes.filter((node) => selectedIds.includes(node.id)), + }); + }; - const rowSelectConfig = useRowSelect( - data, - { - onChange: onSelectChange, - state: { - ...(selectionType === 'multiple' - ? { ids: selectedRows } - : selectionType === 'single' - ? { id: selectedRows[0] } - : {}), - }, - }, - { - clickType: - multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick, - rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined, + const rowSelectConfig = useRowSelect( + data, + { + onChange: onSelectChange, + state: { + ...(selectionType === 'multiple' + ? { ids: selectedRows } + : selectionType === 'single' + ? { id: selectedRows[0] } + : {}), }, - ); + }, + { + clickType: + multiSelectTrigger === 'row' ? SelectClickTypes.RowClick : SelectClickTypes.ButtonClick, + rowSelect: selectionType !== 'none' ? rowSelectType[selectionType] : undefined, + }, + ); - const toggleRowSelectionById = useMemo( - () => (id: Identifier): void => { - rowSelectConfig.fns.onToggleById(id); - }, - [rowSelectConfig.fns], - ); + const toggleRowSelectionById = useMemo( + () => (id: Identifier): void => { + rowSelectConfig.fns.onToggleById(id); + }, + [rowSelectConfig.fns], + ); + + const deselectAllRows = useMemo( + () => (): void => { + rowSelectConfig.fns.onRemoveAll(); + }, + [rowSelectConfig.fns], + ); - const deselectAllRows = useMemo( - () => (): void => { + const toggleAllRowsSelection = useMemo( + () => (): void => { + if (selectedRows.length > 0) { rowSelectConfig.fns.onRemoveAll(); - }, - [rowSelectConfig.fns], - ); - - const toggleAllRowsSelection = useMemo( - () => (): void => { - if (selectedRows.length > 0) { - rowSelectConfig.fns.onRemoveAll(); - } else { - const ids = data.nodes - .map((item: TableNode) => (disabledRows.includes(item.id) ? null : item.id)) - .filter(Boolean) as Identifier[]; - - rowSelectConfig.fns.onAddAll(ids); - } - }, - [rowSelectConfig.fns, data.nodes, selectedRows, disabledRows], - ); - - // Sort Logic - const handleSortChange: MiddlewareFunction = (action, state) => { - onSortChange?.({ - sortKey: state.sortKey, - isSortReversed: state.reverse, - }); - }; + } else { + const ids = data.nodes + .map((item: TableNode) => (disabledRows.includes(item.id) ? null : item.id)) + .filter(Boolean) as Identifier[]; - const sort = useSort( - data, - { - onChange: handleSortChange, - }, - { - // @ts-expect-error ignore this, if sortFunctions is undefined, it will be ignored - sortFns: sortFunctions, - }, - ); + rowSelectConfig.fns.onAddAll(ids); + } + }, + [rowSelectConfig.fns, data.nodes, selectedRows, disabledRows], + ); + + // Sort Logic + const handleSortChange: MiddlewareFunction = (_, state) => { + onSortChange?.({ + sortKey: state.sortKey, + isSortReversed: state.reverse, + }); + }; - const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { - return { - sortKey: sort.state.sortKey, - isSortReversed: sort.state.reverse, - sortableColumns: Object.keys(sortFunctions ?? {}), - }; - }, [sort.state, sortFunctions]); + const sort = useSort( + data, + { + onChange: handleSortChange, + }, + { + // @ts-expect-error ignore this, if sortFunctions is undefined, it will be ignored + sortFns: sortFunctions, + }, + ); - const toggleSort = useCallback( - (sortKey: string): void => { - sort.fns.onToggleSort({ - sortKey, - }); - }, - [sort.fns], - ); + const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { + return { + sortKey: sort.state.sortKey, + isSortReversed: sort.state.reverse, + sortableColumns: Object.keys(sortFunctions ?? {}), + }; + }, [sort.state, sortFunctions]); - // Pagination + const toggleSort = useCallback( + (sortKey: string): void => { + sort.fns.onToggleSort({ + sortKey, + }); + }, + [sort.fns], + ); - const hasPagination = Boolean(pagination); + // Pagination - const paginationConfig = usePagination( - data, - { - state: { - page: 0, - size: tablePagination.defaultPageSize, - }, - }, - { - isServer: paginationType === 'server', - }, - ); - - const currentPaginationState = useMemo(() => { - return hasPagination - ? { - page: paginationConfig.state.page, - size: paginationConfig.state.size, - } - : undefined; - }, [paginationConfig.state, hasPagination]); - - const setPaginationPage = useCallback( - (page: number): void => { - paginationConfig.fns.onSetPage(page); - }, - [paginationConfig.fns], - ); + const hasPagination = Boolean(pagination); - const setPaginationRowSize = useCallback( - (size: number): void => { - paginationConfig.fns.onSetSize(size); + const paginationConfig = usePagination( + data, + { + state: { + page: 0, + size: tablePagination.defaultPageSize, }, - [paginationConfig.fns], - ); - - // Toolbar Component - if (__DEV__) { - if (toolbar && !isValidAllowedChildren(toolbar, ComponentIds.TableToolbar)) { - throwBladeError({ - message: 'Only TableToolbar component is allowed in the `toolbar` prop', - moduleName: 'Table', - }); - } - } + }, + { + isServer: paginationType === 'server', + }, + ); + + const currentPaginationState = useMemo(() => { + return hasPagination + ? { + page: paginationConfig.state.page, + size: paginationConfig.state.size, + } + : undefined; + }, [paginationConfig.state, hasPagination]); + + const setPaginationPage = useCallback( + (page: number): void => { + paginationConfig.fns.onSetPage(page); + }, + [paginationConfig.fns], + ); + + const setPaginationRowSize = useCallback( + (size: number): void => { + paginationConfig.fns.onSetSize(size); + }, + [paginationConfig.fns], + ); - if (selectionType !== 'none' && hasHoverActions && __DEV__) { - // their is no point of using hover actions with selectionType + // Toolbar Component + if (__DEV__) { + if (toolbar && !isValidAllowedChildren(toolbar, ComponentIds.TableToolbar)) { throwBladeError({ - message: 'Consider removing hover actions when selectionType is set', + message: 'Only TableToolbar component is allowed in the `toolbar` prop', moduleName: 'Table', }); } + } - // Table Context - const tableContext: TableContextType = useMemo( - () => ({ - selectionType, - selectedRows, - totalItems, - toggleRowSelectionById, - toggleAllRowsSelection, - deselectAllRows, - rowDensity, - toggleSort, - currentSortedState, - setPaginationPage, - setPaginationRowSize, - currentPaginationState, - showStripedRows, - disabledRows, - setDisabledRows, - paginationType, - setPaginationType, - backgroundColor, - headerRowDensity, - setHeaderRowDensity, - showBorderedCells, - hasHoverActions, - setHasHoverActions, - columnCount, - gridTemplateColumns, - isVirtualized, - }), - [ - selectionType, - selectedRows, - totalItems, - toggleRowSelectionById, - toggleAllRowsSelection, - deselectAllRows, - gridTemplateColumns, - rowDensity, - toggleSort, - columnCount, - currentSortedState, - setPaginationPage, - setPaginationRowSize, - currentPaginationState, - showStripedRows, - disabledRows, - setDisabledRows, - paginationType, - setPaginationType, - backgroundColor, - headerRowDensity, - setHeaderRowDensity, - showBorderedCells, - hasHoverActions, - setHasHoverActions, - isVirtualized, - ], - ); - - return ( - - {isLoading ? ( - ({ + selectionType, + selectedRows, + totalItems, + toggleRowSelectionById, + toggleAllRowsSelection, + deselectAllRows, + rowDensity, + toggleSort, + currentSortedState, + setPaginationPage, + setPaginationRowSize, + currentPaginationState, + showStripedRows, + disabledRows, + setDisabledRows, + paginationType, + setPaginationType, + backgroundColor, + headerRowDensity, + setHeaderRowDensity, + showBorderedCells, + hasHoverActions, + setHasHoverActions, + columnCount, + gridTemplateColumns, + isVirtualized, + }), + [ + selectionType, + selectedRows, + totalItems, + toggleRowSelectionById, + toggleAllRowsSelection, + deselectAllRows, + gridTemplateColumns, + rowDensity, + toggleSort, + columnCount, + currentSortedState, + setPaginationPage, + setPaginationRowSize, + currentPaginationState, + showStripedRows, + disabledRows, + setDisabledRows, + paginationType, + setPaginationType, + backgroundColor, + headerRowDensity, + setHeaderRowDensity, + showBorderedCells, + hasHoverActions, + setHasHoverActions, + isVirtualized, + ], + ); + + return ( + + {isLoading ? ( + + + + ) : ( + + {isRefreshSpinnerMounted && ( + + + + )} + {toolbar} + - - - ) : ( - - {isRefreshSpinnerMounted && ( - - - - )} - {toolbar} - - {children} - - {pagination} - - )} - - ); - }, -); - -const Table = assignWithoutSideEffects(_Table, { - componentId: ComponentIds.Table, -}); - -const VirtualizedTable = assignWithoutSideEffects(_Table, { + {children} + + {pagination} + + )} + + ); +}; +const Table = assignWithoutSideEffects(forwardRef(_Table), { componentId: ComponentIds.Table, }); -export { Table, VirtualizedTable }; +export { Table }; diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 8682568ebcc..f5e0df74f7a 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn, Meta } from '@storybook/react'; +import { useRef } from 'react'; import type { TableData, TableProps } from '../types'; import { Table as TableComponent, @@ -11,32 +12,14 @@ import { TableCell, TableToolbar, TableToolbarActions, - TableFooter, - TableFooterRow, - TableFooterCell, - TablePagination, } from '../../Table'; +import { VirtulizedWrapper } from '../TableBody.web'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; -import { Amount } from '~components/Amount'; import { Code, Heading } from '~components/Typography'; import { Badge } from '~components/Badge'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import { Button } from '~components/Button'; -import { IconButton } from '~components/Button/IconButton'; -import { CheckIcon, CloseIcon } from '~components/Icons'; -import { VirtulizedWrapper } from '../TableBody.web'; -import { VirtualizedTable } from '../Table.web'; -import { spacing } from '~tokens/global'; -import { - HeaderCellSelect, - useRowSelect, - CellSelect, - SelectTypes, -} from '@table-library/react-table-library/select'; -import { useRef } from 'react'; -import { isBackgroundColorToken } from '../../../../../razorsharp/src/code/blade/utils/color'; -import { getBackgroundColorToken } from '../../Button/BaseButton/BaseButton'; export default { title: 'Components/Table', diff --git a/packages/blade/src/utils/storybook/ArgsTable.tsx b/packages/blade/src/utils/storybook/ArgsTable.tsx index c27f3933453..485dfe70008 100644 --- a/packages/blade/src/utils/storybook/ArgsTable.tsx +++ b/packages/blade/src/utils/storybook/ArgsTable.tsx @@ -1,3 +1,5 @@ +//ignore file for ts check +// @ts-nocheck import { Box } from '~components/Box'; import type { BaseBoxProps } from '~components/Box/BaseBox'; import { From 48c5af673c60fa8845fb33f423d9177ac2d1455a Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 11:20:14 +0530 Subject: [PATCH 35/97] chore: ignore table test --- packages/blade/src/components/Table/__tests__/Table.web.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 4a5ee3fa293..c9231c5556c 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; From 0d68ee5846c929cdcb15c0d7edcd56698b7c419c Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 11:21:00 +0530 Subject: [PATCH 36/97] chore: update test --- packages/blade/src/components/Table/__tests__/Table.web.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index c9231c5556c..09b1e287d20 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -574,6 +574,7 @@ describe('', () => { isHeaderSticky isFooterSticky isFirstColumnSticky + gridTemplateColumns="" > {(tableData) => ( <> From 30f712218e26dec660abe72279909d75f790bfb9 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 15:02:56 +0530 Subject: [PATCH 37/97] fix: ts error --- .../SpotlightPopoverTour/docs/TourDocs.tsx | 1 - .../blade/src/components/Table/Table.web.tsx | 16 ++++++++++++---- .../Table/__tests__/Table.web.test.tsx | 3 +-- packages/blade/src/utils/storybook/ArgsTable.tsx | 1 - 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx index 10053fd9b67..c58a93813f6 100644 --- a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx +++ b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx @@ -1,5 +1,4 @@ //ignore file for ts check -// @ts-nocheck import React from 'react'; import { BasicExample } from './examples'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index dfe3a63fded..8ed7fca8205 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -316,7 +316,8 @@ const RefreshWrapper = styled(BaseBox)<{ }; }); -const _Table = ({ +const _Table = ( + { children, data, multiSelectTrigger = 'row', @@ -775,8 +776,15 @@ const _Table = ({ ); }; -const Table = assignWithoutSideEffects(forwardRef(_Table), { - componentId: ComponentIds.Table, -}); +const Table = assignWithoutSideEffects( + forwardRef(_Table) as ( + // https://oida.dev/typescript-react-generic-forward-refs/ + // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref + props: TableProps & { ref?: React.ForwardedRef }, + ) => React.ReactElement, + { + componentId: ComponentIds.Table, + }, +); export { Table }; diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 09b1e287d20..e294d560ce9 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,4 +1,3 @@ -// @ts-nocheck import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; @@ -248,7 +247,7 @@ const nodes: Item[] = [ method: 'Netbanking', name: 'John Doe', }, -]; +] describe('
', () => { it('should render table', () => { diff --git a/packages/blade/src/utils/storybook/ArgsTable.tsx b/packages/blade/src/utils/storybook/ArgsTable.tsx index 485dfe70008..fd47270119c 100644 --- a/packages/blade/src/utils/storybook/ArgsTable.tsx +++ b/packages/blade/src/utils/storybook/ArgsTable.tsx @@ -1,5 +1,4 @@ //ignore file for ts check -// @ts-nocheck import { Box } from '~components/Box'; import type { BaseBoxProps } from '~components/Box/BaseBox'; import { From e74cc16071a49a14208dfb83fece14bd6a71e1f6 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 16:07:16 +0530 Subject: [PATCH 38/97] fix: more ts error --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 2 +- .../Table/docs/APIStories/VirtualizedTableAPI.stories.tsx | 2 +- packages/blade/src/components/Table/docs/BasicTable.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index e294d560ce9..fc6948e9673 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -247,7 +247,7 @@ const nodes: Item[] = [ method: 'Netbanking', name: 'John Doe', }, -] +]; describe('
', () => { it('should render table', () => { diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index eced1ac2483..36a2fdaeb50 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -74,7 +74,7 @@ const data: TableData = { nodes, }; -const TableTemplate: StoryFn = ({ ...args }) => { +const TableTemplate: StoryFn = () => { const parentRef = React.useRef(null); return ( Date: Thu, 23 Jan 2025 16:21:36 +0530 Subject: [PATCH 39/97] chore: update virtuazlied table api --- .../Table/docs/APIStories/VirtualizedTableAPI.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 36a2fdaeb50..04f85a851d5 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -12,7 +12,7 @@ import { Badge } from '~components/Badge'; export default { title: 'Components/Table/API', - component: TableVirtulized, + component: VirtulizedWrapper, args: {}, argTypes: { children: { @@ -32,7 +32,7 @@ export default { ), }, }, -} as Meta; +} as Meta; const nodes: Item[] = [ ...Array.from({ length: 5000 }, (_, i) => ({ From 8be1b12886ed8596612824d9fc4d1879a25ed675 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 23 Jan 2025 23:29:18 +0530 Subject: [PATCH 40/97] chore: added table body styles --- .../blade/src/components/Table/Table.web.tsx | 169 +--------------- .../components/Table/commonStyles/index.ts | 1 + .../Table/commonStyles/tableBodyStyles.tsx | 187 ++++++++++++++++++ 3 files changed, 196 insertions(+), 161 deletions(-) create mode 100644 packages/blade/src/components/Table/commonStyles/index.ts create mode 100644 packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 8ed7fca8205..00159e18de0 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -20,7 +20,6 @@ import { refreshWrapperZIndex, tableBackgroundColor, tablePagination, - tableRow, } from './tokens'; import type { TableProps, @@ -29,7 +28,7 @@ import type { TablePaginationType, TableHeaderRowProps, } from './types'; -import { getTableActionsHoverStyles } from './utils'; +import { getTableBodyStyles } from './commonStyles'; import { makeBorderSize, makeMotionTime } from '~utils'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; @@ -135,166 +134,14 @@ const StyledReactTable = styled(ReactTable)<{ ...styledPropsCSSObject, }, ...($styledProps?.isVirtualized && { - '& > div ': { - overflow: 'auto !important', - height: `${$styledProps?.height} !important`, - width: `${$styledProps?.width} !important`, - }, - // and remove scroll from the main table element - '&': { - overflow: 'hidden !important', - }, - // for virtualized table, we need to apply some styles to tbody - '.tbody > div': { - display: 'block !important', - }, - // for virtualized table, we need to apply some styles to tbody - '.tbody div .tr': { - display: 'grid', - gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', - columnGap: '0', - }, - '.tbody div .tr:last-child .cell-wrapper': { - borderBottom: 'none', - }, - - '.tbody div .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), - }, - '.tbody div td': { - padding: '0', - }, - '.tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, - backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, - theme, - }), - }, - '.tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, - backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, - theme, - }), - }, - '.tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, - backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, - theme, - }), - }, - - ...($isSelectable && { - '.tbody div .tr:active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), - }, + ...getTableBodyStyles({ + isVirtualized: $styledProps?.isVirtualized, + theme, + height: $styledProps?.height, + width: $styledProps?.width, + isSelectable: $isSelectable, + showStripedRows: $showStripedRows, }), - - ...($showStripedRows && { - '.tbody div .tr:nth-child(even) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), - }, - '.tbody div .tr:nth-child(even) .cell-wrapper-base': { - backgroundColor: tableRow.stripe.backgroundColor, - }, - }), - - ...($showStripedRows && - $isSelectable && { - '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), - }, - '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), - }, - '.tbody div.tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), - }, - '.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), - }, - '.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedHover, - ), - }, - '.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedFocus, - ), - }, - '.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedActive, - ), - }, - - '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorHover, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, - }), - }, - '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorFocus, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, - }), - }, - '.tbody div .tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorActive, - backgroundGradientColor: tableRow.stripe.backgroundColorHover, - theme, - }), - }, - - '.tbody div .tr.row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelected, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, - }), - }, - '.tbody div .tr.row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedHover, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, - }), - }, - '.tbody div .tr.row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedFocus, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, - }), - }, - '.tbody div .tr.row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedActive, - theme, - backgroundGradientColor: tableRow.stripe.backgroundColorHover, - }), - }, - }), }), }; }); diff --git a/packages/blade/src/components/Table/commonStyles/index.ts b/packages/blade/src/components/Table/commonStyles/index.ts new file mode 100644 index 00000000000..068d039f486 --- /dev/null +++ b/packages/blade/src/components/Table/commonStyles/index.ts @@ -0,0 +1 @@ +export { getTableBodyStyles } from './tableBodyStyles'; diff --git a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx new file mode 100644 index 00000000000..c42bad52acc --- /dev/null +++ b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx @@ -0,0 +1,187 @@ +import { tableRow } from '../tokens'; +import { getTableActionsHoverStyles } from '../utils'; +import getIn from '~utils/lodashButBetter/get'; +import type { Theme } from '~components/BladeProvider'; +import type { BoxProps } from '~components/Box'; + +const getTableBodyStyles = ({ + isVirtualized, + theme, + height, + width, + isSelectable, + showStripedRows, +}: { + isVirtualized: boolean; + theme: Theme; + height: BoxProps['height']; + width: BoxProps['width']; + isSelectable?: boolean; + showStripedRows?: boolean; +}): Record => { + return { + ...(isVirtualized && { + '& > div ': { + overflow: 'auto !important', + height: `${height} !important`, + width: `${width} !important`, + }, + // and remove scroll from the main table element + '&': { + overflow: 'hidden !important', + }, + // for virtualized table, we need to apply some styles to tbody + '.tbody > div': { + display: 'block !important', + }, + // for virtualized table, we need to apply some styles to tbody + '.tbody div .tr': { + display: 'grid', + gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', + columnGap: '0', + }, + '.tbody div .tr:last-child .cell-wrapper': { + borderBottom: 'none', + }, + + '.tbody div .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), + }, + '.tbody div td': { + padding: '0', + }, + '.tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, + backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, + theme, + }), + }, + '.tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, + backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, + theme, + }), + }, + '.tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, + backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, + theme, + }), + }, + + ...(isSelectable && { + '.tbody div .tr:active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), + }, + }), + + ...(showStripedRows && { + '.tbody div .tr:nth-child(even) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), + }, + '.tbody div .tr:nth-child(even) .cell-wrapper-base': { + backgroundColor: tableRow.stripe.backgroundColor, + }, + }), + + ...(showStripedRows && + isSelectable && { + '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), + }, + '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), + }, + '.tbody div.tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), + }, + '.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { + backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), + }, + '.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedHover, + ), + }, + '.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedFocus, + ), + }, + '.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + backgroundColor: getIn( + theme.colors, + tableRow.stripeWrapper.backgroundColorSelectedActive, + ), + }, + + '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorHover, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, + }), + }, + '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorFocus, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, + }), + }, + '.tbody div .tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorActive, + backgroundGradientColor: tableRow.stripe.backgroundColorHover, + theme, + }), + }, + + '.tbody div .tr.row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelected, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, + }), + }, + '.tbody div .tr.row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedHover, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, + }), + }, + '.tbody div .tr.row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedFocus, + theme, + backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, + }), + }, + '.tbody div .tr.row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { + backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), + ...getTableActionsHoverStyles({ + hoverColor: tableRow.stripe.backgroundColorSelectedActive, + theme, + backgroundGradientColor: tableRow.stripe.backgroundColorHover, + }), + }, + }), + }), + }; +}; +export { getTableBodyStyles }; From 7cb1f2e02078c94aff17f80d9f698dc0ef84df24 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 01:20:14 +0530 Subject: [PATCH 41/97] refactor: styles for table and table body --- .../src/components/Table/TableBody.web.tsx | 138 +---------------- .../Table/commonStyles/tableBodyStyles.tsx | 142 ++++++++++++++---- packages/blade/src/components/Table/utils.ts | 4 +- 3 files changed, 122 insertions(+), 162 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 0a273e44fd5..79c9bebe6b8 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -18,6 +18,7 @@ import { getTableRowBackgroundTransition, getTableDataSelector, } from './utils'; +import { getTableBodyStyles } from './commonStyles'; import getIn from '~utils/lodashButBetter/get'; import { Text } from '~components/Typography'; import type { CheckboxProps } from '~components/Checkbox'; @@ -47,140 +48,15 @@ const StyledBody = styled(Body)<{ borderBottom: 'none', }, - '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), - }, - '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, - backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover, - theme, - }), - }, - '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, - backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus, - theme, - }), - }, - '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, - backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, + ...{ + ...getTableBodyStyles({ + addCommonStyles: true, theme, + isSelectable: $isSelectable, + showStripedRows: $showStripedRows, + isVirtualized: false, }), }, - - ...($isSelectable && { - '& tr:active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), - }, - }), - - ...($showStripedRows && { - '& tr:nth-child(even) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), - }, - '& tr:nth-child(even) .cell-wrapper-base': { - backgroundColor: tableRow.stripe.backgroundColor, - }, - }), - - ...($showStripedRows && - $isSelectable && { - '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), - }, - '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), - }, - '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), - }, - '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { - backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), - }, - '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedHover, - ), - }, - '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedFocus, - ), - }, - '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { - backgroundColor: getIn( - theme.colors, - tableRow.stripeWrapper.backgroundColorSelectedActive, - ), - }, - - '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorHover, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, - }), - }, - '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorFocus, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, - }), - }, - '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorActive, - backgroundGradientColor: tableRow.stripe.backgroundColorHover, - theme, - }), - }, - - '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelected, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, - }), - }, - '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedHover, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, - }), - }, - '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedFocus, - theme, - backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, - }), - }, - '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { - backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), - ...getTableActionsHoverStyles({ - hoverColor: tableRow.stripe.backgroundColorSelectedActive, - theme, - backgroundGradientColor: tableRow.stripe.backgroundColorHover, - }), - }, - }), }, }; }); diff --git a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx index c42bad52acc..2efb2907fe1 100644 --- a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx +++ b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx @@ -1,24 +1,39 @@ import { tableRow } from '../tokens'; -import { getTableActionsHoverStyles } from '../utils'; +import { getTableActionsHoverStyles, getTableRowSelector } from '../utils'; import getIn from '~utils/lodashButBetter/get'; import type { Theme } from '~components/BladeProvider'; import type { BoxProps } from '~components/Box'; +const getRowWrapperSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { + return isVirtualized ? '.tbody div' : '&'; +}; + +const addTableRowSelectorIFVirtualized = ({ + isVirtualized, +}: { + isVirtualized?: boolean; +}): string => { + return isVirtualized ? '.tr' : ''; +}; + const getTableBodyStyles = ({ isVirtualized, + addCommonStyles, theme, height, width, isSelectable, showStripedRows, }: { - isVirtualized: boolean; + isVirtualized?: boolean; + addCommonStyles?: boolean; theme: Theme; - height: BoxProps['height']; - width: BoxProps['width']; + height?: BoxProps['height']; + width?: BoxProps['width']; isSelectable?: boolean; showStripedRows?: boolean; }): Record => { + const shouldAddCommonStyle = isVirtualized ?? addCommonStyles; return { ...(isVirtualized && { '& > div ': { @@ -34,7 +49,6 @@ const getTableBodyStyles = ({ '.tbody > div': { display: 'block !important', }, - // for virtualized table, we need to apply some styles to tbody '.tbody div .tr': { display: 'grid', gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', @@ -43,14 +57,20 @@ const getTableBodyStyles = ({ '.tbody div .tr:last-child .cell-wrapper': { borderBottom: 'none', }, - - '.tbody div .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': { - backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), - }, '.tbody div td': { padding: '0', }, - '.tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': { + }), + // these styles are common for both virtualized and non-virtualized tables + ...(shouldAddCommonStyle && { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base`]: { + backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected), + }, + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedHover, @@ -58,7 +78,9 @@ const getTableBodyStyles = ({ theme, }), }, - '.tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus, @@ -66,7 +88,9 @@ const getTableBodyStyles = ({ theme, }), }, - '.tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.nonStripe.backgroundColorSelectedActive, @@ -76,54 +100,90 @@ const getTableBodyStyles = ({ }, ...(isSelectable && { - '.tbody div .tr:active:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:active:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), }, }), ...(showStripedRows && { - '.tbody div .tr:nth-child(even) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), }, - '.tbody div .tr:nth-child(even) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even) .cell-wrapper-base`]: { backgroundColor: tableRow.stripe.backgroundColor, }, }), ...(showStripedRows && isSelectable && { - '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), }, - '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), }, - '.tbody div.tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), }, - '.tbody div .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected), }, - '.tbody div .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedHover, ), }, - '.tbody div .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedFocus, ), }, - '.tbody div .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': { + [`${getRowWrapperSelector({ + isVirtualized, + })} .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn( theme.colors, tableRow.stripeWrapper.backgroundColorSelectedActive, ), }, - '.tbody div .tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorHover, @@ -131,7 +191,11 @@ const getTableBodyStyles = ({ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover, }), }, - '.tbody div .tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorFocus, @@ -139,7 +203,11 @@ const getTableBodyStyles = ({ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus, }), }, - '.tbody div .tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${getTableRowSelector({ + isVirtualized, + })}:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorActive, @@ -148,7 +216,11 @@ const getTableBodyStyles = ({ }), }, - '.tbody div .tr.row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${addTableRowSelectorIFVirtualized({ + isVirtualized, + })}.row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base `]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelected, @@ -156,7 +228,11 @@ const getTableBodyStyles = ({ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected, }), }, - '.tbody div .tr.row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${addTableRowSelectorIFVirtualized({ + isVirtualized, + })} .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base `]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedHover, @@ -164,7 +240,11 @@ const getTableBodyStyles = ({ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover, }), }, - '.tbody div .tr.row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${addTableRowSelectorIFVirtualized({ + isVirtualized, + })} .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base `]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedFocus, @@ -172,7 +252,11 @@ const getTableBodyStyles = ({ backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus, }), }, - '.tbody div .tr.row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': { + [`${getRowWrapperSelector({ + isVirtualized, + })} ${addTableRowSelectorIFVirtualized({ + isVirtualized, + })}.row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base `]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorSelectedActive, diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts index 1a4f520b819..ac09d77a3bf 100644 --- a/packages/blade/src/components/Table/utils.ts +++ b/packages/blade/src/components/Table/utils.ts @@ -43,11 +43,11 @@ const getTableActionsHoverStyles = ({ }; }; -const getTableRowSelector = ({ isVirtualized }: { isVirtualized: boolean }): string => { +const getTableRowSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { return isVirtualized ? '.tr' : 'tr'; }; -const getTableDataSelector = ({ isVirtualized }: { isVirtualized: boolean }): string => { +const getTableDataSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { return isVirtualized ? '.td' : 'td'; }; From fae4a09f4b90dc2bb6cf202cb9eafdd1283d5a04 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 01:28:35 +0530 Subject: [PATCH 42/97] chore: code clean up --- .../blade/src/components/Table/TableBody.web.tsx | 12 ------------ .../components/Table/__tests__/Table.web.test.tsx | 1 - packages/blade/src/utils/storybook/ArgsTable.tsx | 1 - 3 files changed, 14 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 79c9bebe6b8..54d7b1f6035 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -88,7 +88,6 @@ export const StyledCell = styled(Cell)<{ '&&&': { height: '100%', backgroundColor: getIn(theme.colors, $backgroundColor), - // todo: add check only in case of virtulizatoin '& > div:first-child': { alignSelf: 'stretch', }, @@ -134,7 +133,6 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R { return ( - // false in case of virtualization ({ const isMultiSelect = selectionType === 'multiple'; const isSelected = selectedRows?.includes(item.id); const hasHoverActions = Boolean(hoverActions); - console.log({ - isSelectable, - isMultiSelect, - isSelected, - hasHoverActions, - hoverActions, - }); useEffect(() => { if (isDisabled) { @@ -347,8 +337,6 @@ const _TableRow = ({ {...metaAttribute({ name: MetaConstants.TableRow, testID })} {...makeAnalyticsAttribute(rest)} $isVirtualized={isVirtualized} - // role={isVirtualized ? 'row' : undefined} - // as={isVirtualized ? 'tr' : undefined} > {isMultiSelect && ( ', () => { isHeaderSticky isFooterSticky isFirstColumnSticky - gridTemplateColumns="" > {(tableData) => ( <> diff --git a/packages/blade/src/utils/storybook/ArgsTable.tsx b/packages/blade/src/utils/storybook/ArgsTable.tsx index fd47270119c..c27f3933453 100644 --- a/packages/blade/src/utils/storybook/ArgsTable.tsx +++ b/packages/blade/src/utils/storybook/ArgsTable.tsx @@ -1,4 +1,3 @@ -//ignore file for ts check import { Box } from '~components/Box'; import type { BaseBoxProps } from '~components/Box/BaseBox'; import { From 9cafe8a48c201defea13edc130e9b94326e01554 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 02:52:41 +0530 Subject: [PATCH 43/97] chore: added test & updated ref type --- .../blade/src/components/Table/Table.web.tsx | 9 +- .../Table/__tests__/Table.web.test.tsx | 93 +++++++++- .../__snapshots__/Table.web.test.tsx.snap | 169 ++++++++++++++++++ 3 files changed, 265 insertions(+), 6 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 00159e18de0..53cce4210cd 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -29,6 +29,7 @@ import type { TableHeaderRowProps, } from './types'; import { getTableBodyStyles } from './commonStyles'; +import type { BladeElementRef } from '~utils/types'; import { makeBorderSize, makeMotionTime } from '~utils'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; @@ -189,7 +190,7 @@ const _Table = ( isVirtualized = false, ...rest }: TableProps, - ref: React.Ref | undefined, + ref: React.Ref | undefined, ): React.ReactElement => { const { theme } = useTheme(); const [selectedRows, setSelectedRows] = React.useState['id'][]>( @@ -315,7 +316,7 @@ const _Table = ( useEffect(() => { if (ref && 'current' in ref && ref.current && !height && !width) { if (ref?.current) { - const { width, height } = ref.current.getBoundingClientRect(); + const { width, height } = (ref.current as HTMLElement).getBoundingClientRect(); setVirtualizedTableDimensions({ width, height }); } @@ -326,7 +327,7 @@ const _Table = ( } }); if (ref && 'current' in ref && ref.current) { - resizeObserver.observe(ref.current); + resizeObserver.observe(ref.current as HTMLElement); } return () => { resizeObserver.disconnect(); @@ -627,7 +628,7 @@ const Table = assignWithoutSideEffects( forwardRef(_Table) as ( // https://oida.dev/typescript-react-generic-forward-refs/ // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - props: TableProps & { ref?: React.ForwardedRef }, + props: TableProps & { ref?: React.ForwardedRef }, ) => React.ReactElement, { componentId: ComponentIds.Table, diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 4a5ee3fa293..38510ba0028 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,8 +1,8 @@ import userEvent from '@testing-library/user-event'; -import { useState } from 'react'; +import { useState, useRef } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { Table } from '../Table'; -import { TableBody, TableCell, TableRow } from '../TableBody'; +import { TableBody, TableCell, TableRow, VirtulizedWrapper } from '../TableBody'; import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter'; import { TableHeader, TableHeaderCell, TableHeaderRow } from '../TableHeader'; import { TableToolbar } from '../TableToolbar'; @@ -10,6 +10,9 @@ import { TablePagination } from '../TablePagination'; import { TableEditableCell } from '../TableEditableCell'; import renderWithTheme from '~utils/testing/renderWithTheme.web'; import { Amount } from '~components/Amount'; +import { Box } from '~components/Box'; +import { Code } from '~components/Typography'; +import { Badge } from '~components/Badge'; type Item = { id: string; @@ -1196,4 +1199,90 @@ describe('
', () => { ); expect(container).toMatchSnapshot(); }); + it('should render virtualized table', () => { + const ReactVirtualTable = (): React.ReactElement => { + const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); + const boxRef = useRef(null); + return ( + +
array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + ref={boxRef} + isVirtualized + defaultSelectedIds={['1', '3']} + rowDensity="normal" + isFirstColumnSticky + > + {(tableData) => ( + { + // header height and row height + return index === 0 ? 50 : 57.5; + }} + header={() => ( + + + ID + Amount + Method + Status + + + )} + body={(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + + + {tableItem.method} + + + {tableItem.status} + + + + )} + /> + )} +
+ + ); + }; + const { container } = renderWithTheme(); + + expect(container).toMatchSnapshot(); + }); }); diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index fbb647ad02d..672e2c125d7 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -10146,3 +10146,172 @@ exports[` should render table with sticky header, footer & first column `; + +exports[`
should render virtualized table 1`] = ` +.c0.c0.c0.c0.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; + width: 0px; +} + +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + height: 0px; + width: 0px; +} + +.c1.c1.c1.c1.c1 > div { + overflow: auto !important; + height: 0px !important; + width: 0px !important; +} + +.c1.c1.c1.c1.c1 { + overflow: hidden !important; +} + +.c1.c1.c1.c1.c1 .tbody > div { + display: block !important; +} + +.c1.c1.c1.c1.c1 .tbody div .tr { + display: grid; + grid-template-columns: var(--data-table-library_grid-template-columns); + -webkit-column-gap: 0; + column-gap: 0; +} + +.c1.c1.c1.c1.c1 .tbody div .tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c1.c1.c1.c1.c1 .tbody div td { + padding: 0; +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.09); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.18); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(0,0%,100%,0); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.18); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.09); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(0,0%,100%,0); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.09); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.18); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(211,20%,52%,0.12); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.18); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .tr:active:not(.disabled-row) .cell-wrapper { + background-color: hsla(211,20%,52%,0.12); +} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; From c1fc368cbff3d6d978b4fc315004dacf44197239 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 02:55:45 +0530 Subject: [PATCH 44/97] chore: added changeset --- .changeset/quiet-students-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-students-allow.md diff --git a/.changeset/quiet-students-allow.md b/.changeset/quiet-students-allow.md new file mode 100644 index 00000000000..e5c57a38712 --- /dev/null +++ b/.changeset/quiet-students-allow.md @@ -0,0 +1,5 @@ +--- +'@razorpay/blade': minor +--- + +feat(blade): add support for table virtualization From 44c03ec2d61bbf92e88333ba1221ef49aba59355 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 10:40:13 +0530 Subject: [PATCH 45/97] fix: lint error --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 38510ba0028..ebbaf7758c0 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1201,6 +1201,7 @@ describe('
', () => { }); it('should render virtualized table', () => { const ReactVirtualTable = (): React.ReactElement => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); const boxRef = useRef(null); return ( @@ -1213,7 +1214,6 @@ describe('
', () => { ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} ref={boxRef} From 0e3a352193036ddd412ef7ca5024efc1a7ccafb2 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 12:40:24 +0530 Subject: [PATCH 46/97] chore: cleanup --- .../blade/src/components/Table/Table.web.tsx | 2 +- .../src/components/Table/TableBody.web.tsx | 10 ++--- .../Table/commonStyles/tableBodyStyles.tsx | 44 ++++++------------- packages/blade/src/components/Table/utils.ts | 4 +- 4 files changed, 20 insertions(+), 40 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 53cce4210cd..ab3d13a64e7 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -598,7 +598,7 @@ const _Table = ( {toolbar} { - return isVirtualized ? '.tr' : ''; + return isVirtualized ? 'tr' : ''; }; const getTableBodyStyles = ({ @@ -49,12 +49,12 @@ const getTableBodyStyles = ({ '.tbody > div': { display: 'block !important', }, - '.tbody div .tr': { + '.tbody div tr': { display: 'grid', gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', columnGap: '0', }, - '.tbody div .tr:last-child .cell-wrapper': { + '.tbody div tr:last-child .cell-wrapper': { borderBottom: 'none', }, '.tbody div td': { @@ -102,9 +102,7 @@ const getTableBodyStyles = ({ ...(isSelectable && { [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:active:not(.disabled-row) .cell-wrapper`]: { + })} tr:active:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive), }, }), @@ -112,16 +110,12 @@ const getTableBodyStyles = ({ ...(showStripedRows && { [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even) .cell-wrapper`]: { + })} tr:nth-child(even) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor), }, [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even) .cell-wrapper-base`]: { + })} tr:nth-child(even) .cell-wrapper-base`]: { backgroundColor: tableRow.stripe.backgroundColor, }, }), @@ -130,23 +124,17 @@ const getTableBodyStyles = ({ isSelectable && { [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: { + })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover), }, [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: { + })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus), }, [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: { + })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: { backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive), }, [`${getRowWrapperSelector({ @@ -181,9 +169,7 @@ const getTableBodyStyles = ({ [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: { + })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorHover, @@ -193,9 +179,7 @@ const getTableBodyStyles = ({ }, [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: { + })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorFocus, @@ -205,9 +189,7 @@ const getTableBodyStyles = ({ }, [`${getRowWrapperSelector({ isVirtualized, - })} ${getTableRowSelector({ - isVirtualized, - })}:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: { + })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: { backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive), ...getTableActionsHoverStyles({ hoverColor: tableRow.stripe.backgroundColorActive, diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts index ac09d77a3bf..4f696bad065 100644 --- a/packages/blade/src/components/Table/utils.ts +++ b/packages/blade/src/components/Table/utils.ts @@ -44,11 +44,11 @@ const getTableActionsHoverStyles = ({ }; const getTableRowSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { - return isVirtualized ? '.tr' : 'tr'; + return isVirtualized ? 'tr' : 'tr'; }; const getTableDataSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { - return isVirtualized ? '.td' : 'td'; + return isVirtualized ? 'td' : 'td'; }; export { From 51cf688492fc99199d2e31e711fdec3e9f629f4f Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 12:43:11 +0530 Subject: [PATCH 47/97] chore: update snap --- .../Table/__tests__/Table.web.test.tsx | 168 ++-- .../__snapshots__/Table.web.test.tsx.snap | 855 +----------------- 2 files changed, 91 insertions(+), 932 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index ebbaf7758c0..ac967dda1aa 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1199,90 +1199,90 @@ describe('
', () => { ); expect(container).toMatchSnapshot(); }); - it('should render virtualized table', () => { - const ReactVirtualTable = (): React.ReactElement => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); - const boxRef = useRef(null); - return ( - -
array.sort((a, b) => Number(a.id) - Number(b.id)), - AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - }} - ref={boxRef} - isVirtualized - defaultSelectedIds={['1', '3']} - rowDensity="normal" - isFirstColumnSticky - > - {(tableData) => ( - { - // header height and row height - return index === 0 ? 50 : 57.5; - }} - header={() => ( - - - ID - Amount - Method - Status - - - )} - body={(tableItem, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - + // it('should render virtualized table', () => { + // const ReactVirtualTable = (): React.ReactElement => { + // // eslint-disable-next-line @typescript-eslint/no-unused-vars + // const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); + // const boxRef = useRef(null); + // return ( + // + //
array.sort((a, b) => Number(a.id) - Number(b.id)), + // AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + // PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + // STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + // }} + // ref={boxRef} + // isVirtualized + // defaultSelectedIds={['1', '3']} + // rowDensity="normal" + // isFirstColumnSticky + // > + // {(tableData) => ( + // { + // // header height and row height + // return index === 0 ? 50 : 57.5; + // }} + // header={() => ( + // + // + // ID + // Amount + // Method + // Status + // + // + // )} + // body={(tableItem, index) => ( + // { + // console.log('where'); + // }} + // > + // + // {tableItem.paymentId} + // + // - {tableItem.method} - - - {tableItem.status} - - - - )} - /> - )} -
- - ); - }; - const { container } = renderWithTheme(); + // {tableItem.method} + // + // + // {tableItem.status} + // + // + // + // )} + // /> + // )} + //
+ // + // ); + // }; + // const { container } = renderWithTheme(); - expect(container).toMatchSnapshot(); - }); + // expect(container).toMatchSnapshot(); + // }); }); diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 672e2c125d7..b72ed671652 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -87,89 +87,6 @@ exports[` should accept data-analytics-* props 1`] = ` border-bottom: none; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -316,7 +233,7 @@ exports[`
should accept data-analytics-* props 1`] = ` >
should render table 1`] = ` border-bottom: none; } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -1462,7 +1296,7 @@ exports[`
should render table 1`] = `
should render table with TableEditableCell and Bordered cells border-bottom: none; } -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -3260,7 +3011,7 @@ exports[`
should render table with TableEditableCell and Bordered cells
should render table with comfortable rowDensity 1`] = ` border-bottom: none; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -4271,7 +3939,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` >
should render table with compact rowDensity 1`] = ` border-bottom: none; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -5212,7 +4797,7 @@ exports[`
should render table with compact rowDensity 1`] = ` >
should render table with isRefreshing 1`] = ` border-bottom: none; } -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -6353,7 +5855,7 @@ exports[`
should render table with isRefreshing 1`] = `
should render table with showStripedRows 1`] = ` border-bottom: none; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:nth-child(even) .cell-wrapper { - background-color: hsla(211,20%,52%,0.12); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:nth-child(even) .cell-wrapper-base { - background-color: transparent; -} - .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -7299,7 +6710,7 @@ exports[`
should render table with showStripedRows 1`] = ` >
should render table with sticky header, footer & first column border-bottom: none; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -10146,172 +9474,3 @@ exports[`
should render table with sticky header, footer & first column `; - -exports[`
should render virtualized table 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; - width: 0px; -} - -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { - height: 0px; - width: 0px; -} - -.c1.c1.c1.c1.c1 > div { - overflow: auto !important; - height: 0px !important; - width: 0px !important; -} - -.c1.c1.c1.c1.c1 { - overflow: hidden !important; -} - -.c1.c1.c1.c1.c1 .tbody > div { - display: block !important; -} - -.c1.c1.c1.c1.c1 .tbody div .tr { - display: grid; - grid-template-columns: var(--data-table-library_grid-template-columns); - -webkit-column-gap: 0; - column-gap: 0; -} - -.c1.c1.c1.c1.c1 .tbody div .tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c1.c1.c1.c1.c1 .tbody div td { - padding: 0; -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected .cell-wrapper-base, -.c1.c1.c1.c1.c1 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c1.c1.c1.c1.c1 .tbody div .tr:active:not(.disabled-row) .cell-wrapper { - background-color: hsla(211,20%,52%,0.12); -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; From 43a0f2db90e7283bc8ce2e8f686ddb89d10cd9d5 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 14:48:27 +0530 Subject: [PATCH 48/97] chore: removed ununsed code --- packages/blade/src/components/Table/utils.ts | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts index 4f696bad065..10d72b44a8c 100644 --- a/packages/blade/src/components/Table/utils.ts +++ b/packages/blade/src/components/Table/utils.ts @@ -47,13 +47,4 @@ const getTableRowSelector = ({ isVirtualized }: { isVirtualized?: boolean }): st return isVirtualized ? 'tr' : 'tr'; }; -const getTableDataSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { - return isVirtualized ? 'td' : 'td'; -}; - -export { - getTableActionsHoverStyles, - getTableRowBackgroundTransition, - getTableRowSelector, - getTableDataSelector, -}; +export { getTableActionsHoverStyles, getTableRowBackgroundTransition, getTableRowSelector }; From 2656536c9f1d858f67420847cc59df4212c778f6 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 15:04:52 +0530 Subject: [PATCH 49/97] chore: unused code --- .../blade/src/components/Table/TableEditableCell.web.tsx | 2 -- packages/blade/src/components/Table/TableHeader.web.tsx | 7 ------- 2 files changed, 9 deletions(-) diff --git a/packages/blade/src/components/Table/TableEditableCell.web.tsx b/packages/blade/src/components/Table/TableEditableCell.web.tsx index 105f70f728b..8802799d218 100644 --- a/packages/blade/src/components/Table/TableEditableCell.web.tsx +++ b/packages/blade/src/components/Table/TableEditableCell.web.tsx @@ -74,7 +74,6 @@ const _TableEditableCell = ({ return ( Date: Fri, 24 Jan 2025 15:07:55 +0530 Subject: [PATCH 50/97] chore: move updates --- packages/blade/src/components/Table/TableBody.web.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 881ab39d9a6..1efd269558c 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -13,11 +13,7 @@ import type { TableBackgroundColors, VirtualizedWrapperProps, } from './types'; -import { - getTableActionsHoverStyles, - getTableRowBackgroundTransition, - getTableDataSelector, -} from './utils'; +import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils'; import { getTableBodyStyles } from './commonStyles'; import getIn from '~utils/lodashButBetter/get'; import { Text } from '~components/Typography'; From 8d6df4c223b05ee353b4bc07bb6a5ceb66afd77a Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 15:12:57 +0530 Subject: [PATCH 51/97] chore: update snap --- .../__snapshots__/Table.web.test.tsx.snap | 5416 +---------------- 1 file changed, 14 insertions(+), 5402 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index f16b0495484..f0568b2b72e 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -98,7 +98,7 @@ exports[`
should accept data-analytics-* props 1`] = ` border-bottom: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { height: 100%; background-color: hsla(0,0%,100%,1); } @@ -1134,89 +1134,6 @@ exports[`
should render table 1`] = ` border-bottom: none; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected .cell-wrapper-base, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -1445,7 +1362,7 @@ exports[`
should render table 1`] = `
should render table with TableEditableCell and Bordered cells border-bottom: none; } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -3293,7 +3127,7 @@ exports[`
should render table with TableEditableCell and Bordered cells
should render table with comfortable rowDensity 1`] = ` border-bottom: none; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -4354,7 +4105,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` >
should render table with compact rowDensity 1`] = ` border-bottom: none; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -5345,7 +5013,7 @@ exports[`
should render table with compact rowDensity 1`] = ` >
should render table with isRefreshing 1`] = ` `; -exports[`
should render table with TableEditableCell and Bordered cells 1`] = ` +exports[`
should render table with showStripedRows 1`] = ` .c0.c0.c0.c0.c0 { -webkit-flex: 1; -ms-flex: 1; @@ -7074,41 +6742,18 @@ exports[`
should render table with TableEditableCell and Bordered cells position: relative; } -.c1.c1.c1.c1.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - position: absolute; - z-index: 3; - height: 100%; - width: 100%; - background-color: hsla(0,0%,0%,0.56); -} - -.c3.c3.c3.c3.c3 { +.c4.c4.c4.c4.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; } -.c12.c12.c12.c12.c12 { +.c9.c9.c9.c9.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -7120,4863 +6765,7 @@ exports[`
should render table with TableEditableCell and Bordered cells height: 100%; } -.c13.c13.c13.c13.c13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: normal; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - pointer-events: auto; -} - -.c17.c17.c17.c17.c17 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c19.c19.c19.c19.c19 { - margin: 4px; - width: 100%; -} - -.c20.c20.c20.c20.c20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; - width: 100%; -} - -.c4.c4.c4.c4.c4 { - padding: 1px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; - animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; -} - -.c8.c8.c8.c8.c8 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c15.c15.c15.c15.c15 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow-wrap: break-word; -} - -.c2.c2.c2.c2.c2 { - opacity: 1; - -webkit-transition: opacity 200ms; - transition: opacity 200ms; -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { - border: none; - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - height: 100%; - width: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 0px; - padding-right: 0px; - min-height: 48px; - height: 100%; - width: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { - background-color: transparent; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .cell-wrapper { - border-right-width: 1px; - border-right-style: solid; - border-right-color: hsla(211,20%,52%,0.18); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 td:last-child .cell-wrapper { - border-right: none; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24 { - background-color: hsla(211,20%,52%,0.12); -} - -.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24 tr:last-child th { - border-bottom: none; -} - -.c25.c25.c25.c25.c25 th { - border-right-width: 1px; - border-right-color: hsla(211,20%,52%,0.18); - border-right-style: solid; -} - -.c25.c25.c25.c25.c25 th:last-child { - border-right: none; -} - -.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th { - border-top: none; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6 th { - border-right-width: 1px; - border-right-color: hsla(211,20%,52%,0.18); - border-right-style: solid; -} - -.c6.c6.c6.c6.c6 th:last-child { - border-right: none; -} - -.c23.c23.c23.c23.c23 { - color: hsla(211,26%,34%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 1rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.5rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - background-color: hsla(0,0%,100%,0); - padding-top: 12px; - padding-bottom: 12px; - padding-left: 12px; - padding-right: 12px; - width: 100%; - height: 48px; - min-height: 48px; - resize: none; - outline: none; - border: none; - cursor: auto; -} - -.c23.c23.c23.c23.c23::-webkit-input-placeholder { - color: hsla(211,20%,52%,0.32); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 1rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.5rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c23.c23.c23.c23.c23::-moz-placeholder { - color: hsla(211,20%,52%,0.32); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 1rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.5rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c23.c23.c23.c23.c23:-ms-input-placeholder { - color: hsla(211,20%,52%,0.32); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 1rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.5rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c23.c23.c23.c23.c23::placeholder { - color: hsla(211,20%,52%,0.32); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 1rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.5rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c23.c23.c23.c23.c23:focus { - outline: none; -} - -.c22.c22.c22.c22.c22 { - background-color: hsla(0,0%,100%,0); - border-radius: 0px; - border-style: solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; - position: relative; - border: none; - border-width: 0px; - box-shadow: hsla(0,0%,100%,0) 0px 0px 0px 1px; - -webkit-transition-property: box-shadow,background-color; - transition-property: box-shadow,background-color; - -webkit-transition-duration: 480ms; - transition-duration: 480ms; - -webkit-transition-easing: cubic-bezier(0.3,0,0.2,1); - transition-easing: cubic-bezier(0.3,0,0.2,1); -} - -.c22.c22.c22.c22.c22:hover { - background-color: hsla(210,40%,98%,1); - border-radius: 0px; - border-style: solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; - position: relative; - border: none; - border-width: 0px; - box-shadow: hsla(0,0%,100%,0) 0px 0px 0px 1px; - -webkit-transition-property: background-color; - transition-property: background-color; - -webkit-transition-duration: 160ms; - transition-duration: 160ms; - -webkit-transition-easing: cubic-bezier(0.3,0,0.2,1); - transition-easing: cubic-bezier(0.3,0,0.2,1); - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c22.c22.c22.c22.c22:focus-within { - background-color: hsla(0,0%,100%,0); - border-radius: 0px; - border-style: solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; - position: relative; - border: none; - border-width: 0px; - box-shadow: hsla(0,0%,100%,0) 0px 0px 0px 1px; - -webkit-transition-property: box-shadow,background-color; - transition-property: box-shadow,background-color; - -webkit-transition-duration: 480ms; - transition-duration: 480ms; - -webkit-transition-easing: cubic-bezier(0.3,0,0.2,1); - transition-easing: cubic-bezier(0.3,0,0.2,1); -} - -.c21.c21.c21.c21.c21 { - border-radius: 0px; - width: 100%; -} - -.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16:focus-visible { - outline: 1px solid; -} - -.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16:focus-within { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -@media screen and (min-width:320px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -
-
-
-
-
-
- -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - -exports[` should render table with comfortable rowDensity 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c8.c8.c8.c8.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; -} - -.c9.c9.c9.c9.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: normal; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - pointer-events: auto; -} - -.c4.c4.c4.c4.c4 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c11.c11.c11.c11.c11 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow-wrap: break-word; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { - border: none; - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 12px; - padding-right: 12px; - min-height: 60px; - height: 100%; - width: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { - background-color: transparent; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper { - border-right: none; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { - background-color: hsla(211,20%,52%,0.12); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th { - border-bottom: none; -} - -.c13.c13.c13.c13.c13 th:last-child { - border-right: none; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 60px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { - border-top: none; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 60px; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c2.c2.c2.c2.c2 th:last-child { - border-right: none; -} - -@media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
- 100 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
- 240 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - -exports[` should render table with compact rowDensity 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c8.c8.c8.c8.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; -} - -.c9.c9.c9.c9.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: normal; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - pointer-events: auto; -} - -.c4.c4.c4.c4.c4 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c11.c11.c11.c11.c11 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow-wrap: break-word; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { - border: none; - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 12px; - padding-right: 12px; - min-height: 36px; - height: 100%; - width: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { - background-color: transparent; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper { - border-right: none; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { - background-color: hsla(211,20%,52%,0.12); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th { - border-bottom: none; -} - -.c13.c13.c13.c13.c13 th:last-child { - border-right: none; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 36px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { - border-top: none; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 36px; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c2.c2.c2.c2.c2 th:last-child { - border-right: none; -} - -@media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
- 100 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
- 240 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - -exports[` should render table with isLoading 1`] = ` -.c0.c0.c0.c0.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c1.c1.c1.c1.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c2.c2.c2.c2.c2 { - padding: 1px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; - animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; -} - -
-
-
-
-
- -
-
-
-
-
-`; - -exports[`
should render table with isRefreshing 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c1.c1.c1.c1.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - position: absolute; - z-index: 3; - height: 100%; - width: 100%; - background-color: hsla(0,0%,0%,0.56); -} - -.c3.c3.c3.c3.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c12.c12.c12.c12.c12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; -} - -.c13.c13.c13.c13.c13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: normal; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - pointer-events: auto; -} - -.c4.c4.c4.c4.c4 { - padding: 1px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; - animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; -} - -.c8.c8.c8.c8.c8 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c15.c15.c15.c15.c15 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow-wrap: break-word; -} - -.c2.c2.c2.c2.c2 { - opacity: 1; - -webkit-transition: opacity 200ms; - transition: opacity 200ms; -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { - border: none; - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - height: 100%; - width: 100%; - border-bottom-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { - background-color: transparent; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 td:last-child .cell-wrapper { - border-right: none; -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { - background-color: hsla(211,20%,52%,0.12); -} - -.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 tr:last-child th { - border-bottom: none; -} - -.c17.c17.c17.c17.c17 th:last-child { - border-right: none; -} - -.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th { - border-top: none; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6 th:last-child { - border-right: none; -} - -@media screen and (min-width:320px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c13.c13.c13.c13.c13 { - pointer-events: auto; - } -} - -
-
-
-
-
-
- -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
- 100 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
- 240 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - -exports[` should render table with showStripedRows 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c4.c4.c4.c4.c4 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 500; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; -} - -.c11.c11.c11.c11.c11 { - color: hsla(212,39%,16%,1); - font-family: "Inter","Inter Fallback Arial",Arial; - font-size: 0.875rem; - font-weight: 400; - font-style: normal; - -webkit-text-decoration-line: none; - text-decoration-line: none; - line-height: 1.25rem; - -webkit-letter-spacing: 0px; - -moz-letter-spacing: 0px; - -ms-letter-spacing: 0px; - letter-spacing: 0px; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow-wrap: break-word; -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { - border: none; - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper { - border-bottom: none; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { - height: 100%; - background-color: hsla(0,0%,100%,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - background-color: transparent; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - height: 100%; - width: 100%; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { - background-color: transparent; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper { - border-right: none; -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { - background-color: hsla(211,20%,52%,0.12); -} - -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th { - border-bottom: none; -} - -.c13.c13.c13.c13.c13 th:last-child { - border-right: none; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; -} - -.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { - border-top: none; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { - height: 100%; - background-color: hsla(0,0%,100%,1); - border-bottom-width: 1px; - border-top-width: 1px; - border-bottom-color: hsla(211,20%,52%,0.18); - border-top-color: hsla(211,20%,52%,0.18); - border-bottom-style: solid; - border-top-style: solid; - cursor: auto; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { - background-color: hsla(211,20%,52%,0.12); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding-left: 12px; - padding-right: 12px; - min-height: 48px; -} - -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { - outline: 4px solid hsla(227,100%,59%,0.18); - outline-offset: -4px; - -webkit-transition-property: outline-width; - transition-property: outline-width; - -webkit-transition-duration: 80ms; - transition-duration: 80ms; - -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); - transition-timing-function: cubic-bezier(0.3,0,0.2,1); -} - -.c2.c2.c2.c2.c2 th:last-child { - border-right: none; -} - -@media screen and (min-width:320px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:480px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:768px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1024px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -@media screen and (min-width:1200px) { - .c9.c9.c9.c9.c9 { - pointer-events: auto; - } -} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Payment ID -

-
- 		-
-

- Amount -

-
- 		-
-

- Status -

-
- 		-
-

- Type -

-
- 		-
-

- Method -

-
- 		-
-

- Name -

-
-
-
-
-
-

- rzp01 -

-
-
-
- 		-
-
-
- 100 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- Netbanking -

-
-
-
- 		-
-
-
-

- John Doe -

-
-
-
-
-
-
-
-

- rzp02 -

-
-
-
- 		-
-
-
- 240 -
-
-
- 		-
-
-
-

- pending -

-
-
-
- 		-
-
-
-

- credit -

-
-
-
- 		-
-
-
-

- UPI -

-
-
-
- 		-
-
-
-

- Jane Doe -

-
-
-
-
-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
- 		-
-

- - -

-
-
- - -`; - -exports[` should render table with sticky header, footer & first column 1`] = ` -.c0.c0.c0.c0.c0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - position: relative; -} - -.c9.c9.c9.c9.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; -} - -.c10.c10.c10.c10.c10 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -12043,100 +6832,6 @@ exports[`
should render table with sticky header, footer & first column border-bottom: none; } -<<<<<<< HEAD -======= -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:nth-child(even) .cell-wrapper { - background-color: hsla(211,20%,52%,0.12); -} - -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:nth-child(even) .cell-wrapper-base { - background-color: transparent; -} - ->>>>>>> origin .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { height: 100%; background-color: hsla(0,0%,100%,1); @@ -12331,7 +7026,7 @@ exports[`
should render table with sticky header, footer & first column >
should render table with sticky header, footer & first column border-bottom: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected .cell-wrapper-base, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.09); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(0,0%,100%,0); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.09); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { - background-color: hsla(227,100%,59%,0.18); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { - background-color: hsla(0,0%,100%,1); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { - background-color: hsla(211,20%,52%,0.12); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { - background-color: hsla(227,100%,59%,0.18); - -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); - transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); -} - .c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { height: 100%; background-color: hsla(0,0%,100%,1); From 43758959623f383578061fc29901fd31d554bbf0 Mon Sep 17 00:00:00 2001 From: tewarig Date: Fri, 24 Jan 2025 15:47:11 +0530 Subject: [PATCH 52/97] chore: update table --- packages/blade/src/components/Table/TableBody.web.tsx | 4 +--- .../src/components/Table/__tests__/Table.web.test.tsx | 7 ++----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 1efd269558c..0c3e9a4e737 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -204,10 +204,8 @@ const StyledRow = styled(Row)<{ $isSelectable: boolean; $isHoverable: boolean; $showBorderedCells: boolean; - $isVirtualized: boolean; -}>(({ theme, $isSelectable, $isHoverable, $showBorderedCells, $isVirtualized }) => { +}>(({ theme, $isSelectable, $isHoverable, $showBorderedCells }) => { const { hasHoverActions } = useTableContext(); - console.log({ hasHoverActions }); const rowBackgroundTransition = `background-color ${makeMotionTime( getIn(theme.motion, tableRow.backgroundColorMotionDuration), diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index ac967dda1aa..db08becc4d2 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,8 +1,8 @@ import userEvent from '@testing-library/user-event'; -import { useState, useRef } from 'react'; +import { useState } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { Table } from '../Table'; -import { TableBody, TableCell, TableRow, VirtulizedWrapper } from '../TableBody'; +import { TableBody, TableCell, TableRow } from '../TableBody'; import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter'; import { TableHeader, TableHeaderCell, TableHeaderRow } from '../TableHeader'; import { TableToolbar } from '../TableToolbar'; @@ -10,9 +10,6 @@ import { TablePagination } from '../TablePagination'; import { TableEditableCell } from '../TableEditableCell'; import renderWithTheme from '~utils/testing/renderWithTheme.web'; import { Amount } from '~components/Amount'; -import { Box } from '~components/Box'; -import { Code } from '~components/Typography'; -import { Badge } from '~components/Badge'; type Item = { id: string; From a013e4837fd45a182c80d0a47e16994f00f36bb5 Mon Sep 17 00:00:00 2001 From: tewarig Date: Mon, 27 Jan 2025 12:12:13 +0530 Subject: [PATCH 53/97] chore: self review changes --- .../blade/src/components/Table/Table.web.tsx | 10 +- .../src/components/Table/TableHeader.web.tsx | 1 - .../Table/__tests__/Table.web.test.tsx | 175 +++++++++--------- .../__snapshots__/Table.web.test.tsx.snap | 169 +++++++++++++++++ packages/blade/src/components/Table/types.ts | 4 - 5 files changed, 262 insertions(+), 97 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index ab3d13a64e7..261f89bf4e3 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -180,7 +180,6 @@ const _Table = ( toolbar, pagination, height, - width, showStripedRows, gridTemplateColumns, isLoading = false, @@ -314,7 +313,7 @@ const _Table = ( }); useEffect(() => { - if (ref && 'current' in ref && ref.current && !height && !width) { + if (ref && 'current' in ref && ref.current && !height) { if (ref?.current) { const { width, height } = (ref.current as HTMLElement).getBoundingClientRect(); setVirtualizedTableDimensions({ width, height }); @@ -334,7 +333,7 @@ const _Table = ( }; } return undefined; - }, [height, ref, width]); + }, [height, ref]); useEffect(() => { // Get the total number of items @@ -562,7 +561,6 @@ const _Table = ( alignItems="center" justifyContent="center" height={height} - width={isVirtualized ? width : undefined} {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} {...makeAnalyticsAttribute(rest)} @@ -576,7 +574,7 @@ const _Table = ( position="relative" {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} - width={isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined} + width={isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined} > {isRefreshSpinnerMounted && ( ( sort={sortFunctions ? sort : null} $styledProps={{ height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height, - width: isVirtualized ? width || `${VirtualizedTableDimensions.width}px` : undefined, + width: isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined, isVirtualized, isSelectable: selectionType !== 'none', showStripedRows, diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 84db340d045..ee3bf5b40d7 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -209,7 +209,6 @@ const TableHeaderCellCheckbox = ({ justifyContent="center" flex={1} width={makeSize(checkboxCellWidth)} - {...metaAttribute({ name: 'checkbox-container' })} > ', () => { ); expect(container).toMatchSnapshot(); }); - // it('should render virtualized table', () => { - // const ReactVirtualTable = (): React.ReactElement => { - // // eslint-disable-next-line @typescript-eslint/no-unused-vars - // const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); - // const boxRef = useRef(null); - // return ( - // - //
array.sort((a, b) => Number(a.id) - Number(b.id)), - // AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - // PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - // STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - // }} - // ref={boxRef} - // isVirtualized - // defaultSelectedIds={['1', '3']} - // rowDensity="normal" - // isFirstColumnSticky - // > - // {(tableData) => ( - // { - // // header height and row height - // return index === 0 ? 50 : 57.5; - // }} - // header={() => ( - // - // - // ID - // Amount - // Method - // Status - // - // - // )} - // body={(tableItem, index) => ( - // { - // console.log('where'); - // }} - // > - // - // {tableItem.paymentId} - // - // + it('should render virtualized table', () => { + const ReactVirtualTable = (): React.ReactElement => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); + const boxRef = useRef(null); + return ( + +
array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + ref={boxRef} + isVirtualized + defaultSelectedIds={['1', '3']} + rowDensity="normal" + isFirstColumnSticky + > + {(tableData) => ( + { + // header height and row height + return index === 0 ? 50 : 57.5; + }} + header={() => ( + + + ID + Amount + Method + Status + + + )} + body={(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + - // {tableItem.method} - // - // - // {tableItem.status} - // - // - // - // )} - // /> - // )} - //
- // - // ); - // }; - // const { container } = renderWithTheme(); + {tableItem.method} + + + {tableItem.status} + + + + )} + /> + )} +
+ + ); + }; + const { container } = renderWithTheme(); - // expect(container).toMatchSnapshot(); - // }); + expect(container).toMatchSnapshot(); + }); }); diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index f0568b2b72e..338b0d0aa3a 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -9870,3 +9870,172 @@ exports[` should render table with sticky header, footer & first column `; + +exports[`
should render virtualized table 1`] = ` +.c0.c0.c0.c0.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; + width: 0px; +} + +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + height: 0px; + width: 0px; +} + +.c1.c1.c1.c1.c1 > div { + overflow: auto !important; + height: 0px !important; + width: 0px !important; +} + +.c1.c1.c1.c1.c1 { + overflow: hidden !important; +} + +.c1.c1.c1.c1.c1 .tbody > div { + display: block !important; +} + +.c1.c1.c1.c1.c1 .tbody div tr { + display: grid; + grid-template-columns: var(--data-table-library_grid-template-columns); + -webkit-column-gap: 0; + column-gap: 0; +} + +.c1.c1.c1.c1.c1 .tbody div tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c1.c1.c1.c1.c1 .tbody div td { + padding: 0; +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.09); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.18); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(0,0%,100%,0); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.18); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.09); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(0,0%,100%,0); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.09); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(227,100%,59%,0.18); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { + background-color: hsla(0,0%,100%,1); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { + background-color: hsla(211,20%,52%,0.12); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { + background-color: hsla(227,100%,59%,0.18); + -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); +} + +.c1.c1.c1.c1.c1 .tbody div tr:active:not(.disabled-row) .cell-wrapper { + background-color: hsla(211,20%,52%,0.12); +} + +
+
+
+
+
+
+
+
+
+
+
+
+ + + +`; diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index a3d67815938..974cec16d3e 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -174,10 +174,6 @@ type TableProps = { * The height prop is a responsive styled prop that determines the height of the table. **/ height?: BoxProps['height']; - /** - * The prop width is a prop used to determine the width of the table. - */ - width?: BoxProps['width']; /** * The showStripedRows prop determines whether the table should have striped rows or not. From 9099aa6945b225c07dc28ef7957f93df9a8fadd4 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 12:52:06 +0530 Subject: [PATCH 54/97] chore: removed getTableRowSelector --- packages/blade/src/components/Table/utils.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts index 10d72b44a8c..5872cbc585a 100644 --- a/packages/blade/src/components/Table/utils.ts +++ b/packages/blade/src/components/Table/utils.ts @@ -43,8 +43,4 @@ const getTableActionsHoverStyles = ({ }; }; -const getTableRowSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { - return isVirtualized ? 'tr' : 'tr'; -}; - -export { getTableActionsHoverStyles, getTableRowBackgroundTransition, getTableRowSelector }; +export { getTableActionsHoverStyles, getTableRowBackgroundTransition }; From 74c0f62503d6f38aa0a81207d1dff23ac6323c28 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 13:27:41 +0530 Subject: [PATCH 55/97] chore: minior review changes --- packages/blade/src/components/Table/Table.web.tsx | 6 +++--- packages/blade/src/components/Table/TableBody.web.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 261f89bf4e3..5997e74c2de 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -210,7 +210,7 @@ const _Table = ( }); // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky - const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; + const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky; const backgroundColor = tableBackgroundColor; const isMobile = useIsMobile(); @@ -596,14 +596,14 @@ const _Table = ( {toolbar} Date: Tue, 28 Jan 2025 18:04:40 +0530 Subject: [PATCH 56/97] chore: table api changes --- .../src/components/Table/TableBody.web.tsx | 25 +- .../Table/docs/BasicTable.stories.tsx | 227 +++++++++--------- packages/blade/src/components/Table/types.ts | 26 +- 3 files changed, 147 insertions(+), 131 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 1cf1e0f4c18..02521e43b67 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -28,6 +28,7 @@ import { size } from '~tokens/global'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; +import { throwBladeError } from '~utils/logger'; const StyledBody = styled(Body)<{ $isSelectable: boolean; @@ -57,7 +58,7 @@ const StyledBody = styled(Body)<{ }; }); -const _TableBody = ({ children, ...rest }: TableBodyProps): React.ReactElement => { +const _TableBody = ({ children, ...rest }: TableBodyProps): React.ReactElement => { const { showStripedRows, selectionType } = useTableContext(); const isSelectable = selectionType !== 'none'; @@ -387,12 +388,28 @@ const _TableRow = ({ }; const _Virtulized = ({ - header, - body, tableData, rowHeight, + children, }: VirtualizedWrapperProps): React.ReactElement => { - return ; + const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); + + const bodyFunction = + React.isValidElement(parsedBody) && + parsedBody.props && + typeof parsedBody.props === 'object' && + 'children' in parsedBody.props + ? parsedBody.props.children + : null; + + return ( + parsedHeader} + body={bodyFunction} + /> + ); }; const TableRow = assignWithoutSideEffects(_TableRow, { diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index dcc628e46a9..a76e1abf29f 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -152,63 +152,63 @@ const TableTemplate: StoryFn = ({ ...args }) => { // header height and row height return index === 0 ? 50 : 57.5; }} - // header={()=>{}} - header={() => ( - - - ID - Amount - Account - Date - Method - Status - - - )} - body={(tableItem, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - )} - /> + > + + + ID + Amount + Account + Date + Method + Status + + + + {(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + + )} @@ -352,62 +352,63 @@ export const NormalTable: StoryFn = ({ ...args }) => { // header height and row height return index === 0 ? 50 : 57.5; }} - header={() => ( - - - ID - Amount - Account - Date - Method - Status - - - )} - body={(tableItem, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - )} - /> + > + + + ID + Amount + Account + Date + Method + Status + + + + {(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + + )} diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 974cec16d3e..1328e66cbdc 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -212,7 +212,7 @@ type TableProps = { type Identifier = string | number; -type TableBodyProps = { +type TableBodyProps = { /** * The children of the TableBody component should be TableRow components. * @example @@ -221,8 +221,17 @@ type TableBodyProps = { * ... * * + * if you are using TableBody inside VirtulizedWrapper then you can pass the children as a function + * @example + * + * {(tableItem, index) => ( + * + * ... + * + * )} + * **/ - children: React.ReactNode; + children: React.ReactNode | ((tableItem: TableNode, index: number) => React.ReactElement); } & DataAnalyticsAttribute; type TableRowProps = { @@ -512,18 +521,6 @@ type VirtualizedWrapperProps = { * /> * **/ - /** - * - * should be a function that returns TableHeader, - * - **/ - header: () => React.ReactElement; - /** - * - * should be a function that returns TableBody - * - * */ - body: (tableItem: TableNode, index: number) => React.ReactElement; /** * */ @@ -533,6 +530,7 @@ type VirtualizedWrapperProps = { * index 0 is the header height **/ rowHeight: RowHeight; + children: React.ReactNode; }; export type { From 97c4ead3c14b1701a5564c47666607a48a8b41d3 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 20:54:42 +0530 Subject: [PATCH 57/97] chore: make rowHeight internal --- .../src/components/Table/TableBody.web.tsx | 16 ++- .../VirtualizedTableAPI.stories.tsx | 106 +++++++++--------- packages/blade/src/components/Table/types.ts | 5 +- 3 files changed, 69 insertions(+), 58 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 02521e43b67..298c992d3c3 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -12,6 +12,8 @@ import type { TableCellProps, TableBackgroundColors, VirtualizedWrapperProps, + RowHeightType, + TableNode, } from './types'; import { getTableActionsHoverStyles, getTableRowBackgroundTransition } from './utils'; import { getTableBodyStyles } from './commonStyles'; @@ -28,8 +30,6 @@ import { size } from '~tokens/global'; import { makeAccessible } from '~utils/makeAccessible'; import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; -import { throwBladeError } from '~utils/logger'; - const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean; @@ -393,6 +393,14 @@ const _Virtulized = ({ children, }: VirtualizedWrapperProps): React.ReactElement => { const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); + const { rowDensity } = useTableContext(); + const headerHeight = Number(tableRow.minHeight[rowDensity]); + console.log('rowDensity', rowDensity); + console.log('headerHeight', headerHeight); + + const _rowHeight = (item: TableNode, index: number): number => { + return index === 0 ? headerHeight : rowHeight(item, index); + }; const bodyFunction = React.isValidElement(parsedBody) && @@ -405,9 +413,9 @@ const _Virtulized = ({ return ( parsedHeader} - body={bodyFunction} + body={bodyFunction as (node: Item, index: number) => React.ReactNode} /> ); }; diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 04f85a851d5..767aa04c6ab 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -3,7 +3,7 @@ import type { StoryFn, Meta } from '@storybook/react'; import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; -import { TableRow, TableCell, VirtulizedWrapper } from '../../TableBody'; +import { TableRow, TableCell, VirtulizedWrapper, TableBody } from '../../TableBody'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Amount } from '~components/Amount'; @@ -85,62 +85,64 @@ const TableTemplate: StoryFn = () => { paddingX="0" paddingY="0" > - + {(tableData) => ( { - // header height and row height - return index === 0 ? 50 : 57.5; + console.log('item', item); + console.log('index', index); + return 36; }} - header={() => ( - - - ID - Amount - Account - Date - Method - Status - - - )} - body={(tableItem, index) => ( - - - {tableItem.paymentId} - - - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - )} - /> + > + + + ID + Amount + Account + Date + Method + Status + + + + {(tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + + )} diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 1328e66cbdc..aa9fb2390fd 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -20,7 +20,7 @@ type TableBackgroundColors = `surface.background.gray.${DotNotationToken< Theme['colors']['surface']['background']['gray'] >}`; -type RowHeight = number | ((item: TableLibraryTableNode, index: number) => number); +type RowHeightType = number | ((item: TableLibraryTableNode, index: number) => number); type TableHeaderProps = { /** @@ -529,7 +529,7 @@ type VirtualizedWrapperProps = { * should be a function that returns the height of the row * index 0 is the header height **/ - rowHeight: RowHeight; + rowHeight: (item: TableLibraryTableNode, index: number) => number; children: React.ReactNode; }; @@ -556,4 +556,5 @@ export type { TablePaginationType, TablePaginationCommonProps, VirtualizedWrapperProps, + RowHeightType, }; From bb35c21d8f30b808abb28d8960ad5e72a054bd06 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 21:19:38 +0530 Subject: [PATCH 58/97] chore: more review changes --- .../blade/src/components/Table/Table.web.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 5997e74c2de..dd01f7c6c47 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -134,16 +134,16 @@ const StyledReactTable = styled(ReactTable)<{ '&&&': { ...styledPropsCSSObject, }, - ...($styledProps?.isVirtualized && { - ...getTableBodyStyles({ - isVirtualized: $styledProps?.isVirtualized, - theme, - height: $styledProps?.height, - width: $styledProps?.width, - isSelectable: $isSelectable, - showStripedRows: $showStripedRows, - }), - }), + ...($styledProps?.isVirtualized + ? getTableBodyStyles({ + isVirtualized: $styledProps?.isVirtualized, + theme, + height: $styledProps?.height, + width: $styledProps?.width, + isSelectable: $isSelectable, + showStripedRows: $showStripedRows, + }) + : null), }; }); From 18b99a4d5b156439f098665e52b53d9fc6ca5485 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 21:51:19 +0530 Subject: [PATCH 59/97] chore: update docs --- .../codemods/aicodemod/knowledge/Table.md | 65 +++++++------------ .../components/Table/_decisions/decisions.md | 65 +++++++------------ 2 files changed, 44 insertions(+), 86 deletions(-) diff --git a/packages/blade/codemods/aicodemod/knowledge/Table.md b/packages/blade/codemods/aicodemod/knowledge/Table.md index 927b241a818..ff9dd181a55 100644 --- a/packages/blade/codemods/aicodemod/knowledge/Table.md +++ b/packages/blade/codemods/aicodemod/knowledge/Table.md @@ -619,55 +619,30 @@ VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](http type VirtualizedWrapperProps = { /** * * @example - * { - * // header height and row height - * return index === 0 ? 50 : 57.5; + * return 57.5; * }} - * header={() => ( - * - * - * ID - * Amount - * Account - * Date - * Method - * Status - * - * - * )} - * body={(tableItem, index) => ( - * - * - * {tableItem.paymentId} - * - * - * - * - * {tableItem.account} - * - * {tableItem.date} - * - * {tableItem.method} - * {tableItem.status} - * - * )} - * /> + * > + * + * + * {(tableData) => ( + * + * + * + * + * + * + * {(tableItem, index) => } + * + * + * )} + *
+ * * **/ /** - * - * should be a function that returns TableHeader, - * - **/ - header: () => React.ReactElement; - /** - * - * should be a function that returns TableBody - * - * */ - body: (tableItem: TableNode, index: number) => React.ReactElement; /** * */ @@ -677,6 +652,10 @@ type VirtualizedWrapperProps = { * index 0 is the header height **/ rowHeight: RowHeight; + /** + * should contain the TableHeader and TableBody components + **/ + children: React.ReactNode; }; ``` diff --git a/packages/blade/src/components/Table/_decisions/decisions.md b/packages/blade/src/components/Table/_decisions/decisions.md index 8a05ffcb265..bb5f618208f 100644 --- a/packages/blade/src/components/Table/_decisions/decisions.md +++ b/packages/blade/src/components/Table/_decisions/decisions.md @@ -694,58 +694,37 @@ type VirtualizedWrapperProps = { * // header height and row height * return index === 0 ? 50 : 57.5; * }} - * header={() => ( - * - * - * ID - * Amount - * Account - * Date - * Method - * Status - * - * - * )} - * body={(tableItem, index) => ( - * - * - * {tableItem.paymentId} - * - * - * - * - * {tableItem.account} - * - * {tableItem.date} - * - * {tableItem.method} - * {tableItem.status} - * - * )} - * /> + * > + * + * + * {(tableData) => ( + * + * + * + * + * + * + * {(tableItem, index) => } + * + * + * )} + *
+ * * **/ - /** - * - * should be a function that returns TableHeader, - * - **/ - header: () => React.ReactElement; - /** - * - * should be a function that returns TableBody - * - * */ - body: (tableItem: TableNode, index: number) => React.ReactElement; - /** + /** * */ tableData: TableNode[]; /** * should be a function that returns the height of the row - * index 0 is the header height + * for header we are internally adding height **/ rowHeight: RowHeight; + /** + * should contain the TableHeader and TableBody components + **/ + children: React.ReactNode; }; ``` From cec94806fe8bcfe28043eef1566e549cee1cdcba Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 23:06:07 +0530 Subject: [PATCH 60/97] chore: added more stories --- .../blade/src/components/Table/Table.web.tsx | 10 +- .../APIStories/TableHoverActions.stories.tsx | 176 ++++++++++++++++ .../VirtualizedTableHoverActions.stories.tsx | 197 ++++++++++++++++++ 3 files changed, 374 insertions(+), 9 deletions(-) create mode 100644 packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx create mode 100644 packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index dd01f7c6c47..b701bd3d32b 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -484,14 +484,6 @@ const _Table = ( } } - if (selectionType !== 'none' && hasHoverActions && __DEV__) { - // their is no point of using hover actions with selectionType - throwBladeError({ - message: 'Consider removing hover actions when selectionType is set', - moduleName: 'Table', - }); - } - // Table Context const tableContext: TableContextType = useMemo( () => ({ @@ -603,7 +595,7 @@ const _Table = ( select={selectionType !== 'none' ? rowSelectConfig : null} sort={sortFunctions ? sort : null} $styledProps={{ - height: height ?? `${VirtualizedTableDimensions.height}px`, + height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height, width: isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined, isVirtualized, isSelectable: selectionType !== 'none', diff --git a/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx new file mode 100644 index 00000000000..f4c03c26b8f --- /dev/null +++ b/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx @@ -0,0 +1,176 @@ +import type { StoryFn, Meta } from '@storybook/react'; +import type { TableData } from '../../types'; +import { Table as TableComponent } from '../../Table'; +import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; +import { TableBody, TableRow, TableCell } from '../../TableBody'; +import { TableFooter, TableFooterRow, TableFooterCell } from '../../TableFooter'; +import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; +import { Box } from '~components/Box'; +import { Amount } from '~components/Amount'; +import { Code } from '~components/Typography'; +import { Badge } from '~components/Badge'; +import { IconButton } from '~components/Button/IconButton'; +import { CopyIcon, TrashIcon } from '~components/Icons'; + +export default { + title: 'Components/Table/API', + component: TableHeaderRow, + args: {}, + argTypes: { + children: { + control: { + disable: true, + }, + }, + }, + parameters: { + docs: { + page: () => ( + + ), + }, + }, +} as Meta; + +const nodes: Item[] = [ + ...Array.from({ length: 5 }, (_, i) => ({ + id: (i + 1).toString(), + paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, + amount: Number((Math.random() * 10000).toFixed(2)), + status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], + date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1), + type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)], + method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)], + bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)], + account: Math.floor(Math.random() * 1000000000).toString(), + name: [ + 'John Doe', + 'Jane Doe', + 'Bob Smith', + 'Alice Smith', + 'John Smith', + 'Jane Smith', + 'Bob Doe', + 'Alice Doe', + ][Math.floor(Math.random() * 8)], + })), +]; + +type Item = { + id: string; + paymentId: string; + amount: number; + status: string; + date: Date; + type: string; + method: string; + bank: string; + account: string; + name: string; +}; +const data: TableData = { + nodes, +}; + +const TableTemplate: StoryFn = ({ ...args }) => { + return ( + + + {(tableData) => ( + <> + + + ID + Amount + Account + Date + Method + Status + + + + {tableData.map((tableItem, index) => ( + + console.log('copy', tableItem)} + /> + console.log('delete', tableItem)} + /> + + } + > + + {tableItem.paymentId} + + + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + ))} + + + + - + - + - + - + - + - + - + + + + )} + + + ); +}; + +export const TableHoverActions = TableTemplate.bind({}); +// Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting +TableHoverActions.storyName = 'TableHoverActions'; diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx new file mode 100644 index 00000000000..1958573d1f9 --- /dev/null +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -0,0 +1,197 @@ +import type { StoryFn, Meta } from '@storybook/react'; +import type { TableData } from '../../types'; +import { Table as TableComponent } from '../../Table'; +import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; +import { TableBody, TableRow, TableCell, VirtulizedWrapper } from '../../TableBody'; +import { TablePagination } from '../../TablePagination'; +import { TableToolbarActions, TableToolbar } from '../../TableToolbar'; +import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; +import { Box } from '~components/Box'; +import { Button } from '~components/Button'; +import { Amount } from '~components/Amount'; +import { Code } from '~components/Typography'; +import { Badge } from '~components/Badge'; +import { useTheme } from '~components/BladeProvider'; +import { IconButton } from '~components/Button/IconButton'; +import { CopyIcon, TrashIcon } from '~components/Icons'; + +export default { + title: 'Components/Table/API', + component: TablePagination, + parameters: { + docs: { + page: () => ( + + ), + }, + }, +} as Meta; + +const nodes: Item[] = [ + ...Array.from({ length: 100 }, (_, i) => ({ + id: (i + 1).toString(), + paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, + amount: Number((Math.random() * 10000).toFixed(2)), + status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], + date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1), + type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)], + method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)], + bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)], + account: Math.floor(Math.random() * 1000000000).toString(), + name: [ + 'John Doe', + 'Jane Doe', + 'Bob Smith', + 'Alice Smith', + 'John Smith', + 'Jane Smith', + 'Bob Doe', + 'Alice Doe', + ][Math.floor(Math.random() * 8)], + })), +]; + +type Item = { + id: string; + paymentId: string; + amount: number; + status: string; + date: Date; + type: string; + method: string; + bank: string; + account: string; + name: string; +}; +const data: TableData = { + nodes, +}; + +const TableTemplate: StoryFn = ({ ...args }) => { + const { platform } = useTheme(); + const onMobile = platform === 'onMobile'; + + return ( + + console.log('Selected Rows:', values)} + sortFunctions={{ + ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), + AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), + ACCOUNT: (array) => array.sort((a, b) => Number(a.account) - Number(b.account)), + PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), + METHOD: (array) => array.sort((a, b) => a.method.localeCompare(b.method)), + STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), + }} + onSortChange={({ sortKey, isSortReversed }) => + console.log('Sort Key:', sortKey, 'Sort Reversed:', isSortReversed) + } + selectionType="multiple" + toolbar={ + + + + + + + } + > + {(tableData) => ( + { + console.log('item', item); + console.log('index', index); + return 48; + }} + > + + + ID + Amount + Account + Date + Method + Status + + + + {(tableItem, index) => ( + + console.log('copy', tableItem)} + /> + console.log('delete', tableItem)} + /> + + } + > + + {tableItem.paymentId} + + + + + {tableItem.account} + + {tableItem.date?.toLocaleDateString('en-IN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + })} + + {tableItem.method} + + + {tableItem.status} + + + + )} + + + )} + + + ); +}; + +export const TableHoverActionsStory = TableTemplate.bind({}); +// Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting +TableHoverActionsStory.storyName = 'VirtualizedTableHoverActions'; From e80de07e1cc706a624bd27c688b953f396f26c0c Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 28 Jan 2025 23:43:10 +0530 Subject: [PATCH 61/97] chore: update style type , added isDisbaled and fix double background color in hover actions --- packages/blade/src/components/Table/TableBody.web.tsx | 11 +++-------- .../docs/APIStories/TableHoverActions.stories.tsx | 1 + .../VirtualizedTableHoverActions.stories.tsx | 1 + 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 298c992d3c3..5ef774f02a2 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -222,13 +222,13 @@ const StyledRow = styled(Row)<{ borderRightColor: getIn(theme.colors, tableRow.borderColor), } : undefined, - [`& td:last-child .cell-wrapper`]: { + '& td:last-child .cell-wrapper': { borderRight: 'none', }, ...(hasHoverActions ? { [`@media ${getMediaQuery({ min: theme.breakpoints.m })}`]: { - [`& td:last-child`]: { + '& td:last-child': { opacity: 0, position: 'sticky', zIndex: 2, @@ -238,7 +238,7 @@ const StyledRow = styled(Row)<{ overflow: 'visible', }, }, - [`& td:last-child:focus-within`]: { + '& td:last-child:focus-within': { opacity: 1, ...getTableActionsHoverStyles({ theme, @@ -277,11 +277,6 @@ const StyledRow = styled(Row)<{ transition: rowBackgroundTransition, backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorActive), cursor: 'pointer', - ...getTableActionsHoverStyles({ - hoverColor: tableRow.nonStripe.backgroundColorActive, - backgroundGradientColor: tableRow.nonStripe.backgroundColorHover, - theme, - }), }, }), '&:focus': getFocusRingStyles({ theme, negativeOffset: true }), diff --git a/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx index f4c03c26b8f..7b90d2a88fa 100644 --- a/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/TableHoverActions.stories.tsx @@ -102,6 +102,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { = ({ ...args }) => { Date: Tue, 28 Jan 2025 23:53:54 +0530 Subject: [PATCH 62/97] fix: build error --- packages/blade/src/components/Table/TableBody.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/TableBody.native.tsx b/packages/blade/src/components/Table/TableBody.native.tsx index 4d32e751928..8d8cb740512 100644 --- a/packages/blade/src/components/Table/TableBody.native.tsx +++ b/packages/blade/src/components/Table/TableBody.native.tsx @@ -4,7 +4,7 @@ import React from 'react'; import type { TableBodyProps, TableCellProps, TableRowProps } from './types'; import { Text } from '~components/Typography'; -const TableBody = (props: TableBodyProps): React.ReactElement => { +const TableBody = (props: TableBodyProps): React.ReactElement => { return Table Component is not available for Native mobile apps.; }; From 92906d40f20d8057bb5f17b6f276c93e2684032c Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 00:00:12 +0530 Subject: [PATCH 63/97] chore: update tests --- .../Table/__tests__/Table.web.test.tsx | 100 +++++++++--------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index ebbaf7758c0..ff0589ebcd7 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1226,56 +1226,60 @@ describe('', () => { { - // header height and row height - return index === 0 ? 50 : 57.5; + console.log({ + item, + index, + }); + return 57.5; }} - header={() => ( - - - ID - Amount - Method - Status - - - )} - body={(tableItem, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - + > + + + ID + Amount + Method + Status + + + + {(tableItem, index) => ( + { + console.log('where'); + }} + > + + {tableItem.paymentId} + + - {tableItem.method} - - - {tableItem.status} - - - - )} - /> + {tableItem.method} + + + {tableItem.status} + + + + )} + + )}
From 71dda3108f51aab5b3843f64f801259a7846e7d1 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 00:26:47 +0530 Subject: [PATCH 64/97] fix: update table virtualized --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 2 +- .../Table/docs/APIStories/VirtualizedTableAPI.stories.tsx | 2 +- .../docs/APIStories/VirtualizedTableHoverActions.stories.tsx | 2 +- .../blade/src/components/Table/docs/BasicTable.stories.tsx | 4 ++-- packages/blade/src/components/Table/types.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index ff0589ebcd7..778c5f6c730 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1241,7 +1241,7 @@ describe('', () => { Status - + > {(tableItem, index) => ( = () => { Status - + > {(tableItem, index) => ( diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 46fc934795e..1abd6ff3cdf 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -129,7 +129,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { Status - + > {(tableItem, index) => ( = ({ ...args }) => { Status - + > {(tableItem, index) => ( = ({ ...args }) => { Status - + > {(tableItem, index) => ( = { * )} * **/ - children: React.ReactNode | ((tableItem: TableNode, index: number) => React.ReactElement); + children: React.ReactNode | ((tableItem: Item, index: number) => React.ReactElement); } & DataAnalyticsAttribute; type TableRowProps = { From dce37d2a20b22626e9882e38e94fac226535cbef Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 00:29:36 +0530 Subject: [PATCH 65/97] chore: update snap --- .../__snapshots__/Table.web.test.tsx.snap | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 338b0d0aa3a..57202d446be 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -249,7 +249,7 @@ exports[`
should accept data-analytics-* props 1`] = ` >
should render table 1`] = `
should render table with TableEditableCell and Bordered cells
should render table with comfortable rowDensity 1`] = ` >
should render table with compact rowDensity 1`] = ` >
should render table with isRefreshing 1`] = `
should render table with showStripedRows 1`] = ` >
should render table with sticky header, footer & first column >
should render table with sticky header, footer & first column role="rowheader" >
should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column Date: Wed, 29 Jan 2025 00:37:03 +0530 Subject: [PATCH 66/97] chore: lint fix --- .../docs/APIStories/VirtualizedTableHoverActions.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 1abd6ff3cdf..8c395c6c8e6 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -71,7 +71,7 @@ const data: TableData = { nodes, }; -const TableTemplate: StoryFn = ({ ...args }) => { +const TableTemplate: StoryFn = () => { const { platform } = useTheme(); const onMobile = platform === 'onMobile'; From f18cc5ed506dcdc0b09149cfd08c8e1742b8ae60 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 16:48:46 +0530 Subject: [PATCH 67/97] chore: update default page size --- packages/blade/src/components/Table/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 0da733ae228..75ab9f1cc1b 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -382,7 +382,7 @@ type TablePaginationCommonProps = { * @default 10 * consider using virtualization for large page sizes **/ - defaultPageSize?: 10 | 25 | 50 | 100 | 200; + defaultPageSize?: 10 | 25 | 50; /** * The current page. Passing this prop will make the component controlled and will not update the page on its own. **/ From 6cfa4fc6c34accead45a0279591dd02badb6e144 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 16:57:17 +0530 Subject: [PATCH 68/97] chore: rename VirtulizedWrapper to TableVirtualizedWrapper --- packages/blade/src/components/Table/TableBody.web.tsx | 4 ++-- .../src/components/Table/__tests__/Table.web.test.tsx | 6 +++--- .../docs/APIStories/VirtualizedTableAPI.stories.tsx | 10 +++++----- .../VirtualizedTableHoverActions.stories.tsx | 6 +++--- .../src/components/Table/docs/BasicTable.stories.tsx | 10 +++++----- packages/blade/src/components/Table/types.ts | 2 +- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 5ef774f02a2..64b3bf5cc65 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -419,7 +419,7 @@ const TableRow = assignWithoutSideEffects(_TableRow, { componentId: ComponentIds.TableRow, }); -const VirtulizedWrapper = assignWithoutSideEffects(_Virtulized, { +const TableVirtualizedWrapper = assignWithoutSideEffects(_Virtulized, { componentId: ComponentIds.VirtualizedTable, }); -export { TableBody, TableRow, TableCell, VirtulizedWrapper }; +export { TableBody, TableRow, TableCell, TableVirtualizedWrapper }; diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 778c5f6c730..151c1bc71d2 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event'; import { useState, useRef } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { Table } from '../Table'; -import { TableBody, TableCell, TableRow, VirtulizedWrapper } from '../TableBody'; +import { TableBody, TableCell, TableRow, TableVirtualizedWrapper } from '../TableBody'; import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter'; import { TableHeader, TableHeaderCell, TableHeaderRow } from '../TableHeader'; import { TableToolbar } from '../TableToolbar'; @@ -1223,7 +1223,7 @@ describe('', () => { isFirstColumnSticky > {(tableData) => ( - { console.log({ @@ -1279,7 +1279,7 @@ describe('
', () => { )} - + )}
diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 8da7a3ffe3f..18603bc3e69 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -3,7 +3,7 @@ import type { StoryFn, Meta } from '@storybook/react'; import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; -import { TableRow, TableCell, VirtulizedWrapper, TableBody } from '../../TableBody'; +import { TableRow, TableCell, TableVirtualizedWrapper, TableBody } from '../../TableBody'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Amount } from '~components/Amount'; @@ -12,7 +12,7 @@ import { Badge } from '~components/Badge'; export default { title: 'Components/Table/API', - component: VirtulizedWrapper, + component: TableVirtualizedWrapper, args: {}, argTypes: { children: { @@ -32,7 +32,7 @@ export default { ), }, }, -} as Meta; +} as Meta; const nodes: Item[] = [ ...Array.from({ length: 5000 }, (_, i) => ({ @@ -87,7 +87,7 @@ const TableTemplate: StoryFn = () => { > {(tableData) => ( - { console.log('item', item); @@ -142,7 +142,7 @@ const TableTemplate: StoryFn = () => { )} - + )} diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 8c395c6c8e6..1317047ed3a 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -2,7 +2,7 @@ import type { StoryFn, Meta } from '@storybook/react'; import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; -import { TableBody, TableRow, TableCell, VirtulizedWrapper } from '../../TableBody'; +import { TableBody, TableRow, TableCell, TableVirtualizedWrapper } from '../../TableBody'; import { TablePagination } from '../../TablePagination'; import { TableToolbarActions, TableToolbar } from '../../TableToolbar'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; @@ -111,7 +111,7 @@ const TableTemplate: StoryFn = () => { } > {(tableData) => ( - { console.log('item', item); @@ -186,7 +186,7 @@ const TableTemplate: StoryFn = () => { )} - + )} diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 96c14fdf18d..72452d1eb74 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -13,7 +13,7 @@ import { TableToolbar, TableToolbarActions, } from '../../Table'; -import { VirtulizedWrapper } from '../TableBody'; +import { TableVirtualizedWrapper } from '../TableBody'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Code, Heading } from '~components/Typography'; @@ -146,7 +146,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { defaultSelectedIds={['1', '3']} > {(tableData) => ( - { // header height and row height @@ -208,7 +208,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { )} - + )} @@ -346,7 +346,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { isFirstColumnSticky > {(tableData) => ( - { // header height and row height @@ -408,7 +408,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { )} - + )} diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 75ab9f1cc1b..c6101dc9694 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -221,7 +221,7 @@ type TableBodyProps = { * ... * * - * if you are using TableBody inside VirtulizedWrapper then you can pass the children as a function + * if you are using TableBody inside TableVirtualizedWrapper then you can pass the children as a function * @example * * {(tableItem, index) => ( From 81d70d0c5ae20f66bde6eb53a0a83b8b79a2c990 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 17:10:19 +0530 Subject: [PATCH 69/97] fix: headerHeight , rowHeight by default --- packages/blade/src/components/Table/TableBody.web.tsx | 10 ++++++---- .../docs/APIStories/VirtualizedTableAPI.stories.tsx | 9 +-------- .../VirtualizedTableHoverActions.stories.tsx | 9 +-------- packages/blade/src/components/Table/types.ts | 3 ++- 4 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 64b3bf5cc65..c91f16d8325 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -384,17 +384,19 @@ const _TableRow = ({ const _Virtulized = ({ tableData, + headerHeight, rowHeight, children, }: VirtualizedWrapperProps): React.ReactElement => { const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); const { rowDensity } = useTableContext(); - const headerHeight = Number(tableRow.minHeight[rowDensity]); - console.log('rowDensity', rowDensity); - console.log('headerHeight', headerHeight); + const _tableRow = Number(tableRow.minHeight[rowDensity]); const _rowHeight = (item: TableNode, index: number): number => { - return index === 0 ? headerHeight : rowHeight(item, index); + if (index === 0) { + return headerHeight ?? _tableRow; + } + return rowHeight ? rowHeight(item, index - 1) : _tableRow; }; const bodyFunction = diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 18603bc3e69..593e68df712 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -87,14 +87,7 @@ const TableTemplate: StoryFn = () => { > {(tableData) => ( - { - console.log('item', item); - console.log('index', index); - return 36; - }} - > + ID diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 1317047ed3a..7c15b6a0c42 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -111,14 +111,7 @@ const TableTemplate: StoryFn = () => { } > {(tableData) => ( - { - console.log('item', item); - console.log('index', index); - return 48; - }} - > + ID diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index c6101dc9694..2651b0d5294 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -529,7 +529,8 @@ type VirtualizedWrapperProps = { * should be a function that returns the height of the row * index 0 is the header height **/ - rowHeight: (item: TableLibraryTableNode, index: number) => number; + headerHeight?: number; + rowHeight?: (item: TableLibraryTableNode, index: number) => number; children: React.ReactNode; }; From cd696232f21db381ac25d08567e5e0eb64e2d2e6 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 29 Jan 2025 17:12:29 +0530 Subject: [PATCH 70/97] chore: remove rowHeight --- .../Table/__tests__/Table.web.test.tsx | 11 +---------- .../components/Table/docs/BasicTable.stories.tsx | 16 ++-------------- 2 files changed, 3 insertions(+), 24 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 151c1bc71d2..6e9bd67aac4 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1223,16 +1223,7 @@ describe('', () => { isFirstColumnSticky > {(tableData) => ( - { - console.log({ - item, - index, - }); - return 57.5; - }} - > + ID diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 72452d1eb74..d8bbe0f10f0 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -146,13 +146,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { defaultSelectedIds={['1', '3']} > {(tableData) => ( - { - // header height and row height - return index === 0 ? 50 : 57.5; - }} - > + ID @@ -346,13 +340,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { isFirstColumnSticky > {(tableData) => ( - { - // header height and row height - return index === 0 ? 50 : 57.5; - }} - > + ID From 3292ef6b7ecca6c515e50f76952f788457b8865c Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 02:18:10 +0530 Subject: [PATCH 71/97] chore: able to pass height --- .../blade/src/components/Table/Table.web.tsx | 12 ++++--- .../Table/commonStyles/tableBodyStyles.tsx | 10 +++--- .../VirtualizedTableAPI.stories.tsx | 21 +++++++++++- .../VirtualizedTableHoverActions.stories.tsx | 32 +++++++------------ .../Table/docs/BasicTable.stories.tsx | 16 +++++----- 5 files changed, 52 insertions(+), 39 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index b701bd3d32b..1155db64ca6 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -124,22 +124,22 @@ const StyledReactTable = styled(ReactTable)<{ theme, height: $styledProps?.height, ...($styledProps?.isVirtualized && { - width: $styledProps?.width, + width: '100%', }), }); const $isSelectable = $styledProps?.isSelectable; const $showStripedRows = $styledProps?.showStripedRows; - return { '&&&': { ...styledPropsCSSObject, + overflow: `${$styledProps?.isVirtualized ? 'unset' : 'auto'} !important`, }, ...($styledProps?.isVirtualized ? getTableBodyStyles({ isVirtualized: $styledProps?.isVirtualized, theme, height: $styledProps?.height, - width: $styledProps?.width, + width: '100%', isSelectable: $isSelectable, showStripedRows: $showStripedRows, }) @@ -225,6 +225,8 @@ const _Table = ( transitionDuration: theme.motion.duration.quick, }); + console.log('isVirtualized', isVirtualized); + // Table Theme const columnCount = getTableHeaderCellCount(children, isVirtualized); const firstColumnStickyHeaderCellCSS = isFirstColumnSticky @@ -566,7 +568,7 @@ const _Table = ( position="relative" {...getStyledProps(rest)} {...metaAttribute({ name: MetaConstants.Table })} - width={isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined} + width={isVirtualized ? `100%` : undefined} > {isRefreshSpinnerMounted && ( ( sort={sortFunctions ? sort : null} $styledProps={{ height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height, - width: isVirtualized ? `${VirtualizedTableDimensions.width}px` : undefined, + width: isVirtualized ? `100%` : undefined, isVirtualized, isSelectable: selectionType !== 'none', showStripedRows, diff --git a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx index 5ece8d04189..d06a4e22f90 100644 --- a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx +++ b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx @@ -5,7 +5,7 @@ import type { Theme } from '~components/BladeProvider'; import type { BoxProps } from '~components/Box'; const getRowWrapperSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => { - return isVirtualized ? '.tbody div' : '&'; + return isVirtualized ? 'tbody div' : '&'; }; const addTableRowSelectorIFVirtualized = ({ @@ -46,18 +46,18 @@ const getTableBodyStyles = ({ overflow: 'hidden !important', }, // for virtualized table, we need to apply some styles to tbody - '.tbody > div': { + 'tbody > div': { display: 'block !important', }, - '.tbody div tr': { + 'tbody div tr': { display: 'grid', gridTemplateColumns: 'var(--data-table-library_grid-template-columns)', columnGap: '0', }, - '.tbody div tr:last-child .cell-wrapper': { + 'tbody div tr:last-child .cell-wrapper': { borderBottom: 'none', }, - '.tbody div td': { + 'tbody div td': { padding: '0', }, }), diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 593e68df712..d1e9131fd0d 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -4,11 +4,13 @@ import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; import { TableRow, TableCell, TableVirtualizedWrapper, TableBody } from '../../TableBody'; +import { TableToolbarActions, TableToolbar } from '../../TableToolbar'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; import { Amount } from '~components/Amount'; import { Code } from '~components/Typography'; import { Badge } from '~components/Badge'; +import { Button } from '~components/Button'; export default { title: 'Components/Table/API', @@ -85,7 +87,24 @@ const TableTemplate: StoryFn = () => { paddingX="0" paddingY="0" > - + + + + + + + } + > {(tableData) => ( diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 7c15b6a0c42..f7cc73820a3 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn, Meta } from '@storybook/react'; +import { useRef } from 'react'; import type { TableData } from '../../types'; import { Table as TableComponent } from '../../Table'; import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader'; @@ -73,39 +74,31 @@ const data: TableData = { const TableTemplate: StoryFn = () => { const { platform } = useTheme(); - const onMobile = platform === 'onMobile'; + const parentRef = useRef(null); return ( console.log('Selected Rows:', values)} - sortFunctions={{ - ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), - AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - ACCOUNT: (array) => array.sort((a, b) => Number(a.account) - Number(b.account)), - PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), - METHOD: (array) => array.sort((a, b) => a.method.localeCompare(b.method)), - STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - }} - onSortChange={({ sortKey, isSortReversed }) => - console.log('Sort Key:', sortKey, 'Sort Reversed:', isSortReversed) - } + isVirtualized + ref={parentRef} + rowDensity="compact" selectionType="multiple" + height="700px" toolbar={ - - + } @@ -127,7 +120,6 @@ const TableTemplate: StoryFn = () => { = ({ ...args }) => { {...args} data={largeData} onSelectionChange={console.log} - // selectionType="multiple" - // height="500px" - // width="800px" + selectionType="multiple" toolbar={ @@ -141,9 +139,11 @@ const TableTemplate: StoryFn = ({ ...args }) => { DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} - ref={tableRef} - isVirtualized defaultSelectedIds={['1', '3']} + rowDensity="normal" + height="600px" + isFirstColumnSticky + isVirtualized > {(tableData) => ( @@ -214,15 +214,15 @@ export const NormalTable: StoryFn = ({ ...args }) => { return ( Normal Table- - + { console.log(selectedIds); @@ -334,9 +334,9 @@ export const NormalTable: StoryFn = ({ ...args }) => { STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} ref={ref} - isVirtualized defaultSelectedIds={['1', '3']} rowDensity="normal" + height="600px" isFirstColumnSticky > {(tableData) => ( From 7ffc42155928ffba9c40e1440cbfc9e561dcf796 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 02:25:20 +0530 Subject: [PATCH 72/97] chore: update ref --- .../blade/src/components/Table/Table.web.tsx | 96 ++++++------------- .../VirtualizedTableAPI.stories.tsx | 3 - .../VirtualizedTableHoverActions.stories.tsx | 4 - .../Table/docs/BasicTable.stories.tsx | 8 +- 4 files changed, 31 insertions(+), 80 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 1155db64ca6..c2c60a5a11b 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo } from 'react'; 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'; @@ -164,33 +164,30 @@ const RefreshWrapper = styled(BaseBox)<{ }; }); -const _Table = ( - { - children, - data, - multiSelectTrigger = 'row', - selectionType = 'none', - onSelectionChange, - isHeaderSticky, - isFooterSticky, - isFirstColumnSticky, - rowDensity = 'normal', - onSortChange, - sortFunctions, - toolbar, - pagination, - height, - showStripedRows, - gridTemplateColumns, - isLoading = false, - isRefreshing = false, - showBorderedCells = false, - defaultSelectedIds = [], - isVirtualized = false, - ...rest - }: TableProps, - ref: React.Ref | undefined, -): React.ReactElement => { +const _Table = ({ + children, + data, + multiSelectTrigger = 'row', + selectionType = 'none', + onSelectionChange, + isHeaderSticky, + isFooterSticky, + isFirstColumnSticky, + rowDensity = 'normal', + onSortChange, + sortFunctions, + toolbar, + pagination, + height, + showStripedRows, + gridTemplateColumns, + isLoading = false, + isRefreshing = false, + showBorderedCells = false, + defaultSelectedIds = [], + isVirtualized = false, + ...rest +}: TableProps): React.ReactElement => { const { theme } = useTheme(); const [selectedRows, setSelectedRows] = React.useState['id'][]>( selectionType !== 'none' ? defaultSelectedIds : [], @@ -204,11 +201,6 @@ const _Table = ( undefined, ); const [hasHoverActions, setHasHoverActions] = React.useState(false); - const [VirtualizedTableDimensions, setVirtualizedTableDimensions] = React.useState({ - width: 0, - height: 0, - }); - // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky; const backgroundColor = tableBackgroundColor; @@ -314,29 +306,6 @@ const _Table = ( `, }); - useEffect(() => { - if (ref && 'current' in ref && ref.current && !height) { - if (ref?.current) { - const { width, height } = (ref.current as HTMLElement).getBoundingClientRect(); - setVirtualizedTableDimensions({ width, height }); - } - - const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - const { width } = entry.contentRect; - setVirtualizedTableDimensions((prev) => ({ ...prev, width })); - } - }); - if (ref && 'current' in ref && ref.current) { - resizeObserver.observe(ref.current as HTMLElement); - } - return () => { - resizeObserver.disconnect(); - }; - } - return undefined; - }, [height, ref]); - useEffect(() => { // Get the total number of items setTotalItems(data.nodes.length); @@ -597,7 +566,7 @@ const _Table = ( select={selectionType !== 'none' ? rowSelectConfig : null} sort={sortFunctions ? sort : null} $styledProps={{ - height: isVirtualized ? height || `${VirtualizedTableDimensions.height}px` : height, + height, width: isVirtualized ? `100%` : undefined, isVirtualized, isSelectable: selectionType !== 'none', @@ -616,15 +585,8 @@ const _Table = ( ); }; -const Table = assignWithoutSideEffects( - forwardRef(_Table) as ( - // https://oida.dev/typescript-react-generic-forward-refs/ - // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - props: TableProps & { ref?: React.ForwardedRef }, - ) => React.ReactElement, - { - componentId: ComponentIds.Table, - }, -); +const Table = assignWithoutSideEffects(_Table, { + componentId: ComponentIds.Table, +}); export { Table }; diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index d1e9131fd0d..fd57d67011a 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -77,20 +77,17 @@ const data: TableData = { }; const TableTemplate: StoryFn = () => { - const parentRef = React.useRef(null); return ( = { const TableTemplate: StoryFn = () => { const { platform } = useTheme(); - const parentRef = useRef(null); return ( = { }; const TableTemplate: StoryFn = ({ ...args }) => { - const tableRef = useRef(null); return ( - + Total rows : {largeNodes.length} = ({ ...args }) => { }; export const NormalTable: StoryFn = ({ ...args }) => { - const ref = useRef(null); return ( Normal Table- @@ -309,7 +306,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { Virtualized Table- - + Total rows : {largeNodes.length} = ({ ...args }) => { DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} - ref={ref} defaultSelectedIds={['1', '3']} rowDensity="normal" height="600px" From 907f699dec012f9619dade26431ea3d9b2ccf516 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 03:03:32 +0530 Subject: [PATCH 73/97] chore: exmaple updates --- .../Table/docs/APIStories/VirtualizedTableAPI.stories.tsx | 2 +- .../blade/src/components/Table/docs/BasicTable.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index fd57d67011a..2b71c432313 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -89,7 +89,7 @@ const TableTemplate: StoryFn = () => { data={data} isVirtualized height={'500px'} - rowDensity="compact" + rowDensity="comfortable" selectionType="multiple" toolbar={ diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 831fdffda8d..53b224042b8 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -144,7 +144,7 @@ const TableTemplate: StoryFn = ({ ...args }) => { isVirtualized > {(tableData) => ( - + 57}> ID @@ -336,7 +336,7 @@ export const NormalTable: StoryFn = ({ ...args }) => { isFirstColumnSticky > {(tableData) => ( - + 58}> ID From 795a213b4737e070b00a1b8a2d5b06f17da15002 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 03:09:38 +0530 Subject: [PATCH 74/97] chore: update api docs --- .../codemods/aicodemod/knowledge/Table.md | 129 ++++++-- .../components/Table/_decisions/decisions.md | 303 ++++++++++++------ packages/blade/src/components/Table/types.ts | 124 +++++-- 3 files changed, 390 insertions(+), 166 deletions(-) diff --git a/packages/blade/codemods/aicodemod/knowledge/Table.md b/packages/blade/codemods/aicodemod/knowledge/Table.md index ff9dd181a55..efa704094a7 100644 --- a/packages/blade/codemods/aicodemod/knowledge/Table.md +++ b/packages/blade/codemods/aicodemod/knowledge/Table.md @@ -611,51 +611,118 @@ isVirtualized = false, // default value is false , it is used to enable virtuali ref = React.Ref | undefined, // ref to the table container , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns ``` -but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. -VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. +but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. +VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. ```ts type VirtualizedWrapperProps = { /** * * @example - * { - * return 57.5; - * }} - * > - * - *
- * {(tableData) => ( - * - * - * - * - * - * - * {(tableItem, index) => } - * - * - * )} - *
- * + * + * + * + * + * + * + * } + * > + * {(tableData) => ( + * + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * > + * {(tableItem, index) => ( + * + * console.log('copy', tableItem)} + * /> + * console.log('delete', tableItem)} + * /> + * + * } + * > + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date?.toLocaleDateString('en-IN', { + * year: 'numeric', + * month: '2-digit', + * day: '2-digit', + * })} + * + * {tableItem.method} + * + * + * {tableItem.status} + * + * + * + * )} + * + * + * )} + * * **/ /** - /** - * + /** + * The tableData prop is an array of objects. */ tableData: TableNode[]; /** - * should be a function that returns the height of the row - * index 0 is the header height + * headerHeight is the height of the header **/ - rowHeight: RowHeight; + headerHeight?: number; /** - * should contain the TableHeader and TableBody components + * rowHeight is the height of each row, it can be a fixed number or a function that returns a number **/ - children: React.ReactNode; + rowHeight?: (item: TableLibraryTableNode, index: number) => number; + children: React.ReactNode; + children: React.ReactNode; }; - ``` diff --git a/packages/blade/src/components/Table/_decisions/decisions.md b/packages/blade/src/components/Table/_decisions/decisions.md index bb5f618208f..88b76b39569 100644 --- a/packages/blade/src/components/Table/_decisions/decisions.md +++ b/packages/blade/src/components/Table/_decisions/decisions.md @@ -53,8 +53,8 @@ A table component helps in displaying data in a grid format, through rows and co - [Comparison](#comparison-1) - [Accessibility](#accessibility) - ## Features + - Column Sorting - Row Selection - Single & Multiple - Pagination @@ -66,6 +66,7 @@ A table component helps in displaying data in a grid format, through rows and co - Cell Density - Normal & Comfortable ## Out of scope + We don't have enough use-cases for the following features at Razorpay and hence scoped them out of our Table component. If you are aware of any of these features being used at Razorpay, please let us know by creating an issue - we will evaluate it and scope it for future releases. - Column Reordering @@ -80,6 +81,7 @@ We don't have enough use-cases for the following features at Razorpay and hence - Mobile Apps will be using Lists instead of Tables to convey information ## Anatomy + Table thumbnail ## API @@ -87,11 +89,11 @@ We don't have enough use-cases for the following features at Razorpay and hence ### Example Usage ```jsx - We will be using Composable API for Table + #### Table + | Prop | Type | Default | Description | Required | | ------------------ | --------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| data | TableData | `undefined` | This contains the actual data to be rendered in the table which would be retrieved from some API | ✅ | -| children | `(tableData: TableData) => React.ReactNode[]` | undefined | Expects a function that returns Table composition components like `TableHeader`, `TableBody` & `TableFooter`. The function provides the tableData as an argument which can be used to render the table. The provided tableData will update based on pagination and sort states. | ✅ | +| data | TableData | `undefined` | This contains the actual data to be rendered in the table which would be retrieved from some API | ✅ | +| children | `(tableData: TableData) => React.ReactNode[]` | undefined | Expects a function that returns Table composition components like `TableHeader`, `TableBody` & `TableFooter`. The function provides the tableData as an argument which can be used to render the table. The provided tableData will update based on pagination and sort states. | ✅ | | selectionType | `single`, `multiple` | `single` | This defines the type of selection that is allowed in the table. Possible values are 'single' & 'multiple' | | onSelectionChange | `SelectionChangeEvent` | `undefined` | This is a callback function that is called when the selection changes. It is called with the selected items as an array | | sortFunctions | `SortFunctionsType` | `undefined` | This is an object that contains the sort functions for each column. The key of the object should be the `headerKey` of the column and the value is a function that takes in an array of items and returns a sorted array of items. A column will be made automatically sortable by adding its headerKey along with a sort function here. | @@ -193,6 +198,7 @@ We don't have enough use-cases for the following features at Razorpay and hence | surfaceLevel | `1`, `2`, `3` | `2` | This defines the surface level of the table. Possible values are `1`, `2` & `3` | ##### `TableData` + ```ts type TableNode = { id: Identifier; @@ -207,6 +213,7 @@ type TableData = { ``` ##### `SortFunctionsType` + ```ts type SortFunctionsType = { [key: string]: (array: TableNode[]) => TableNode[]; @@ -214,6 +221,7 @@ type SortFunctionsType = { ``` ##### `SortChangeEvent` + ```ts type SortChangeEvent = { sortKey: string; @@ -222,13 +230,13 @@ type SortChangeEvent = { ``` ##### `SelectionChangeEvent` + ```ts type SelectionChangeEvent = (selectedItems: TableNode[]) => void; ``` - - #### TableToolbar + | Prop | Type | Default | Description | Required | | ------------------ | ----------------- | --------- | ------------------------------------------------------------------- | -------- | | title | `string` | undefined | This defines the title of the table toolbar | | @@ -236,60 +244,69 @@ type SelectionChangeEvent = (selectedItems: TableNode[]) => void; | children | `React.ReactNode` | undefined | This defines the actions to be shown in the table toolbar | | #### TableToolbarActions + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | --------------------------------------------------------- | -------- | | children | `React.ReactNode` | undefined | This defines the actions to be shown in the table toolbar | #### TableHeader + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | ---------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table header rows | ✅ | - +| children | `React.ReactNode` | undefined | This defines the table header rows | ✅ | #### TableHeaderRow + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | ----------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table header cells | ✅ | +| children | `React.ReactNode` | undefined | This defines the table header cells | ✅ | #### TableHeaderCell + | Prop | Type | Default | Description | Required | | --------- | ---------------------------- | --------- | ---------------------------------------------------------------------------- | -------- | -| headerKey | `string` | undefined | This defines the header key of the column | ✅ | -| children | `React.ReactNode` , `string` | undefined | This defines the content of the table header cell. Can be a JSX or a string. | ✅ | +| headerKey | `string` | undefined | This defines the header key of the column | ✅ | +| children | `React.ReactNode` , `string` | undefined | This defines the content of the table header cell. Can be a JSX or a string. | ✅ | #### TableBody + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | -------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table body rows | ✅ | +| children | `React.ReactNode` | undefined | This defines the table body rows | ✅ | #### TableRow + | Prop | Type | Default | Description | Required | | ---------- | ----------------- | --------- | ----------------------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table body cells | ✅ | +| children | `React.ReactNode` | undefined | This defines the table body cells | ✅ | | isDisabled | `boolean` | false | This defines whether the row is disabled or not | #### TableCell + | Prop | Type | Default | Description | Required | | -------- | --------------------------- | --------- | -------------------------------------------------------------- | -------- | -| children | `React.ReactNode`, `string` | undefined | This defines the content of the cell. Can be a JSX or a string | ✅ | +| children | `React.ReactNode`, `string` | undefined | This defines the content of the cell. Can be a JSX or a string | ✅ | #### TableFooter + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | ---------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table footer rows | ✅ | - +| children | `React.ReactNode` | undefined | This defines the table footer rows | ✅ | #### TableFooterRow + | Prop | Type | Default | Description | Required | | -------- | ----------------- | --------- | ----------------------------------- | -------- | -| children | `React.ReactNode` | undefined | This defines the table footer cells | ✅ | +| children | `React.ReactNode` | undefined | This defines the table footer cells | ✅ | #### TableFooterCell + | Prop | Type | Default | Description | Required | | -------- | --------------------------- | --------- | ---------------------------------------------------------------------------- | -------- | -| children | `React.ReactNode`, `string` | undefined | This defines the content of the table footer cell. Can be a JSX or a string. | ✅ | +| children | `React.ReactNode`, `string` | undefined | This defines the content of the table footer cell. Can be a JSX or a string. | ✅ | #### TablePagination + | Prop | Type | Default | Description | Required | | ------------------ | --------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | currentPage | `number` | undefined | This defines the current page of the table. If you pass currentPage, this becomes a controlled component and you will have to manage page selection state on your own | | @@ -301,37 +318,43 @@ type SelectionChangeEvent = (selectedItems: TableNode[]) => void; | onPageSizeChange | `PageSizeChangeEvent` | undefined | This is a callback function that is called when the pageSize changes | ##### `PageChangeEvent` + ```ts -type PageChangeEvent = ({page: number}) => void; +type PageChangeEvent = ({ page: number }) => void; ``` ##### `onPageSizeChange` + ```ts -type PageSizeChangeEvent = ({pageSize: number}) => void; +type PageSizeChangeEvent = ({ pageSize: number }) => void; ``` -### API Design Decisions +### API Design Decisions + > You can skip this section and go to [Table Library Evaluation](#table-library-evaluation) if you are not interested in the API design process. The [Final API](#api) has already been documented above. > The decision was made to go ahead with Composable API after consulting with the frontend leads While evaluating what kind of API we want for our table, we discovered 2 approaches: #### 1. Composable API + Composable API is a pattern where we have a set of components that can be composed together to create a table. This approach allows us to stitch together a table very similar to how you would do it with native HTML. However, it is also more verbose and requires more effort to create a table. ```jsx // Mock data & functions -const data = [{ +const data = [ + { firstName: 'John', lastName: 'Doe', - balance: 1000 -}, -{ + balance: 1000, + }, + { firstName: 'Jane', lastName: 'Doe', - balance: 2000 -}]; + balance: 2000, + }, +]; const sortFunctions = { firstName: (array) => array.sort((a, b) => a.name.localeCompare(b.name)), @@ -342,19 +365,18 @@ const onSelectionChange = (selectedItems) => { }; const onSortChange = ({ headerKey, sortType }) => { - console.log({headerKey, sortType}); + console.log({ headerKey, sortType }); }; ``` - ```jsx // Composable Table -
{ ``` ##### Pros + - Composable API is more intuitive and resembles the native HTML structure of a table - It is easier to understand since the API design is similar to rest of the Blade components - It is easier to extend and add new feature to individual table components - We could leverage tree-shaking to only import the components that are being used in the consumer's table ##### Cons + - Composable API is more verbose and requires more effort to create a table by composing together multiple components - Most popular table libraries like AG Grid, React Table, etc. use a compact API which is battle tested and developers are more familiar with the same #### 2. Compact API + Compact API is a pattern where we have a single component that takes in all the data and renders a table. This approach is more concise and requires less effort to create a table. However, it is also less intuitive and does not resemble the native HTML structure of a table. ```jsx @@ -518,37 +543,40 @@ const pagination = { // Compact Table
Export} - isStickyHeader={true} - isStickyFooter={true} - isStickyFistColumn={true} + data={data} // This contains the actual data to be rendered in the table which would be retrieved from some API + columns={columns} // This contains the column definition for the table + footerRow={footerRow} // This contains the footer definition for the table + selectionType="single" + onSelectionChange={onSelectionChange} + sortFunctions={sortFunctions} + onSortChange={onSortChange} + isLoading={false} + rowDensity="normal" + showStripedRows={true} + toolbarTitle="Users" + toolbarItemsSelectedTitle={`${selectedUsersCount} Users selected`} + toolbarActions={} + isStickyHeader={true} + isStickyFooter={true} + isStickyFistColumn={true} /> ``` ##### Pros + - Compact API is more concise and requires less effort to create a table - Most popular table libraries like AG Grid, React Table, etc. use a compact API which is battle tested and developers are more familiar with the same - It would be relatively easier to swap out the table library in the future if we decide to do so since the API design is similar to other popular table libraries ##### Cons + - Compact API is less intuitive and does not resemble the native HTML structure of a table - It is harder to extend and add new feature to the table component since it is a single component - We would have to import the entire table component even if we are using only a few features of the table resulting in a higher bundle size for the consumer - Internally, we would have to use a composable API to create the compact API anyway since the library we have chosen has a composable API #### Comparison + | Aspect | Composable API | Compact API | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | **API Design** | Multipe components composed together | Single component that takes all data | @@ -559,15 +587,17 @@ const pagination = { | **Bundle Size** | Can leverage tree-shaking for smaller bundles (Only components like Pagination & Footer could be omitted, rest of it might still always be needed) | Bundle size would be unaffected regardless of features used within the table by consumer | | **Future Library Swap** | May require reworking with different library | Easier to swap out the library in the future | - #### Decision + ##### 1. Only Composable API -- We could expose only the Composable API to the consumers + +- We could expose only the Composable API to the consumers - This would take the least amount of implementation time and effort - Strong reasons to go with this approach would be the composability and tree-shaking benefits - Strong reasons to not go with this approach would be the verbosity and the fact that it is not the most popular approach within Table libraries ecosystem ##### 2. Only Compact API + - We could expose only the Compact API to the consumers - This would take the relatively more time and effort since internally we will have to build individual components and stitch them together to create the compact API - Internally we might not need to put in heavy efforts to ensure composable API is very well structured since we will not be exposing it to the consumers. We would use the composable API internally only to derive the final outcome of a compact API. @@ -575,6 +605,7 @@ const pagination = { - Strong reasons to not go with this approach would be the lack of composability and tree-shaking benefits ##### 3. Both Composable & Compact API + - We could expose both the Composable & Compact API to the consumers - This would take the most amount of implementation time and effort since we will have to build both the APIs - This will add a lot of complexity to the library and will make it harder to maintain. Any changes to the Table component, we will have to ensure both APIs are updated accordingly and always maintain parity @@ -583,28 +614,32 @@ const pagination = { - Strong reasons to not go with this approach would be the complexity and maintainability issues as well as education efforts required to educate the consumers about both the APIs ##### Current API Usage Across Razorpay Projects + > This is an approximate usage count. We identified this by searching through the codebase. Actual numbers may vary slightly. - + | Project | Composable API Table Instances | Compact API Table Instances | | --------------- | ------------------------------ | --------------------------- | | PG Dashboard | 101 | 81 | | Admin Dashboard | 19 | 196 | | X Dashboard | 6 | 11 | - - ##### Conclusion + - We took inputs from Frontend Leads across the org and the majority of them were in favour of the **Composable API** for its **composability** and **tree-shaking benefits** - Compact API can be built on top of composable API if needed in the future - We will be going ahead with the **Composable API** for now and will evaluate the need for Compact API in the future ## Table Library Evaluation + ### Why a library? + - The primary reason for using a library is to use a battle-tested solution that has been used by a lot of people and has been proven to work well instead of figuring out all the edge cases ourselves - On a long term we could evaluate swapping it out and building our own solution when the bandwidth and requirements align but until then using an open source library would be the best option ### What are we looking for in a library? + We had a few requirements that we were looking for in a library: + - Well maintained and has a good community around it - Reasonable bundle size - Supports all the features that we need today and in the future (including features marked out of scope) @@ -612,26 +647,31 @@ We had a few requirements that we were looking for in a library: - Flexible API to ensure we can build both the Composable & Compact APIs ### Libraries evaluated -While evaluating multiple libraries we identified 3 categories: + +While evaluating multiple libraries we identified 3 categories: + - **Heavy sized library** with every feature under the sun - **Medium size library** with all of the features we could need plus some more - **Small size library** with all the core features we could need #### Heavy sized library - AG Grid + - [AG Grid](https://www.ag-grid.com/) is the best example of a heavy sized library. It has a lot of features and is very well maintained. However, it is also very heavy and has a lot of features that we don't need. - As of today, AG Grid's bundle size is 75kb (15kb gzipped) but along with this we also need to install some additional dependency libraries like ag-grid-community which would eventually increase the overall bundle size - Replicating the Composable API would be a challenging task with React Table since it internally uses API similar to the Compact API. We would have to build a lot of abstractions to ensure we can build the Composable API on top of the Compact API. - AG Grid is possibly the most battle-tested library but has a ton of features that we won't need and hence would be an overkill for us as of now #### Medium sized library - Tanstack's React Table + - [Tanstack's React Table](https://react-table.tanstack.com/) is the best example of a medium sized library. It has all the features we need and is very well maintained. However, it is also relatively heavy and has a lot of features that we don't need. - As of today, React Table's bundle size is 60kb (14kb gzipped). -- Tanstack's React Table has been around for a longer duration and is extremely well maintained. It has relatively less features than AG Grid but also has a lot of features that we don't need. +- Tanstack's React Table has been around for a longer duration and is extremely well maintained. It has relatively less features than AG Grid but also has a lot of features that we don't need. - Tanstack's React Table is built in a framework agnostic manner which meant they had to use a lot of abstractions to ensure it works well with all the frameworks. This makes it harder to understand, maintain and extend the library. - Replicating the Composable API would be a challenging task with React Table since it internally uses API similar to the Compact API. We would have to build a lot of abstractions to ensure we can build the Composable API on top of the Compact API. - React Table is possibly our 2nd best option if we ever need more complex tables in the future but as of now it would be an overkill for us #### Small sized library - React Table Library + - [React Table Library (@table-library/react-table-library)](https://github.com/table-library/react-table-library) is the best example of a small sized library. It has all the features we need and is relatively well maintained. - It contains all the features we need today as well as the ones we can forsee needing in the future - As of today, React Table Library's bundle size is 23kb (7kb gzipped). @@ -640,36 +680,36 @@ While evaluating multiple libraries we identified 3 categories: - React Table Library is our best option as of today since it has all the features we could need and is relatively lightweight #### Comparison + | Library | Features | Bundle Size | Composable API | Compact API | Maintenance | Our Choice | | --------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------- | -------------------- | ------------- | ------------------------------------------------------- | ---------- | | [AG Grid](https://www.ag-grid.com/) | Very heavy and has a lot of features we don't need | 75kb (15kb gzipped) (+ additional supporting libraries) | Challenging to build | Easy to build | Extremely well maintained. Has paid Enterprise support. | | [Tanstack's React Table](https://react-table.tanstack.com/) | Relatively heavy and has a lot of features we don't need | 60kb (14kb gzipped) | Challenging to build | Easy to build | Very well maintained | -| [React Table Library](https://github.com/table-library/react-table-library) | Relatively lightweight and has all the features we could need | 23kb (7kb gzipped) | Easy to build | Easy to build | Relatively well maintained | ✅ | - +| [React Table Library](https://github.com/table-library/react-table-library) | Relatively lightweight and has all the features we could need | 23kb (7kb gzipped) | Easy to build | Easy to build | Relatively well maintained | ✅ | ## Accessibility + - We will be following the [WAI-ARIA Table Practices](https://www.w3.org/WAI/ARIA/apg/patterns/table/) to ensure our table is accessible - We will be using native HTML elements like `
`, ``, ``, ``, ``, `
` & `` to ensure our table is accessible - # Virtualization - Virtaulized table is a table component that renders only the visible rows and columns. This is useful when you have a large dataset and you want to render only the visible rows and columns to improve the performance of the table. ## Approach + Out implementation of virtualized table is an wrapper on top of react-table-library 's implementation. It provides a simple API to create a virtualized table. alternatively we can use react-window or react-virtualized to create a virtualized table wrapper. but that would require more effort to create a virtualized table. plus their is a lot of boilerplate code to create a virtualized table using react-window or react-virtualized. also their is high chance of bugs and performance issues in the implementation of virtualized table using react-window or react-virtualized. if we need more features in the future then we can expore react-window or react-virtualized. - ## Decision + 1. We have made a wrapper on top of react-table-library's implementation to create a virtualized table. -2. if virtualization is enabled we have a wrapper component and we are not passing TableBody, so this breaks a lot of existing styles and features of the table component like hoverAction, rowSelection, etc. so we have to move these styles to table component. +2. if virtualization is enabled we have a wrapper component and we are not passing TableBody, so this breaks a lot of existing styles and features of the table component like hoverAction, rowSelection, etc. so we have to move these styles to table component. 3. we have to pass a ref to the table container to calculate the height and width of the table to render only the visible rows and columns. - ## Props + most of props are same as Table component. we have added following table component. ```ts @@ -680,51 +720,114 @@ ref = React.Ref | undefined, // ref to the table container , si ``` -but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. -VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. +but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. +VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. ```ts type VirtualizedWrapperProps = { /** - * * @example - * { - * // header height and row height - * return index === 0 ? 50 : 57.5; - * }} - * > - * - * - * {(tableData) => ( - * - * - * - * - * - * - * {(tableItem, index) => } - * - * - * )} - *
- * - * - **/ - /** + * + * + * + * + * + * + * } + * > + * {(tableData) => ( + * + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * > + * {(tableItem, index) => ( + * + * console.log('copy', tableItem)} + * /> + * console.log('delete', tableItem)} + * /> + * + * } + * > + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date?.toLocaleDateString('en-IN', { + * year: 'numeric', + * month: '2-digit', + * day: '2-digit', + * })} + * + * {tableItem.method} + * + * + * {tableItem.status} + * + * + * + * )} + * + * + * )} + * * + /** + * The tableData prop is an array of objects. */ tableData: TableNode[]; /** - * should be a function that returns the height of the row - * for header we are internally adding height + * headerHeight is the height of the header **/ - rowHeight: RowHeight; + headerHeight?: number; /** - * should contain the TableHeader and TableBody components + * rowHeight is the height of each row, it can be a fixed number or a function that returns a number **/ - children: React.ReactNode; + rowHeight?: (item: TableLibraryTableNode, index: number) => number; + children: React.ReactNode; }; - ``` diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 2651b0d5294..9e64b2c1f57 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -483,53 +483,107 @@ type TableToolbarActionsProps = { type VirtualizedWrapperProps = { /** - * * @example - * { - * // header height and row height - * return index === 0 ? 50 : 57.5; - * }} - * header={() => ( + * + * + * + * + * + * + * } + * > + * {(tableData) => ( + * * * - * ID - * Amount - * Account - * Date - * Method - * Status + * ID + * Amount + * Account + * Date + * Method + * Status * * - * )} - * body={(tableItem, index) => ( - * - * - * {tableItem.paymentId} - * - * - * - * - * {tableItem.account} - * - * {tableItem.date} - * - * {tableItem.method} - * {tableItem.status} - * - * )} - * /> + * > + * {(tableItem, index) => ( + * + * console.log('copy', tableItem)} + * /> + * console.log('delete', tableItem)} + * /> + * + * } + * > + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date?.toLocaleDateString('en-IN', { + * year: 'numeric', + * month: '2-digit', + * day: '2-digit', + * })} + * + * {tableItem.method} + * + * + * {tableItem.status} + * + * + * + * )} + * + * + * )} + * * **/ /** - * + * The tableData prop is an array of objects. */ tableData: TableNode[]; /** - * should be a function that returns the height of the row - * index 0 is the header height + * headerHeight is the height of the header **/ headerHeight?: number; + /** + * rowHeight is the height of each row, it can be a fixed number or a function that returns a number + **/ rowHeight?: (item: TableLibraryTableNode, index: number) => number; children: React.ReactNode; }; From 833560540200d40b2b47a2df8b025f08bed8e017 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 03:54:16 +0530 Subject: [PATCH 75/97] feat: move isVirtualized internally --- packages/blade/codemods/aicodemod/knowledge/Table.md | 6 ------ packages/blade/src/components/Table/Table.web.tsx | 12 +++++++++--- .../components/Table/__tests__/Table.web.test.tsx | 5 +---- .../src/components/Table/_decisions/decisions.md | 9 --------- .../docs/APIStories/VirtualizedTableAPI.stories.tsx | 1 - .../VirtualizedTableHoverActions.stories.tsx | 1 - .../src/components/Table/docs/BasicTable.stories.tsx | 1 - packages/blade/src/components/Table/types.ts | 5 ----- 8 files changed, 10 insertions(+), 30 deletions(-) diff --git a/packages/blade/codemods/aicodemod/knowledge/Table.md b/packages/blade/codemods/aicodemod/knowledge/Table.md index efa704094a7..2a664c7acf8 100644 --- a/packages/blade/codemods/aicodemod/knowledge/Table.md +++ b/packages/blade/codemods/aicodemod/knowledge/Table.md @@ -605,12 +605,6 @@ Out implementation of virtualized table is an wrapper on top of react-table-libr most of props are same as Table component. we have added following table component. -```ts - -isVirtualized = false, // default value is false , it is used to enable virtualization in table - -ref = React.Ref | undefined, // ref to the table container , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns -``` but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index c2c60a5a11b..0a033e89b9d 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -185,7 +185,6 @@ const _Table = ({ isRefreshing = false, showBorderedCells = false, defaultSelectedIds = [], - isVirtualized = false, ...rest }: TableProps): React.ReactElement => { const { theme } = useTheme(); @@ -201,6 +200,15 @@ const _Table = ({ undefined, ); const [hasHoverActions, setHasHoverActions] = React.useState(false); + const tableRootComponent = children([]); + const isVirtualized = (React.isValidElement<{ + header?: () => React.ReactElement; + children?: React.ReactNode; + }>(tableRootComponent) && + Array.isArray(tableRootComponent.props?.children) && + tableRootComponent.props.children?.length && + React.isValidElement<{ children?: React.ReactNode }>(tableRootComponent.props?.children[1]) && + typeof tableRootComponent.props?.children[1]?.props.children === 'function') as boolean; // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky; const backgroundColor = tableBackgroundColor; @@ -217,8 +225,6 @@ const _Table = ({ transitionDuration: theme.motion.duration.quick, }); - console.log('isVirtualized', isVirtualized); - // Table Theme const columnCount = getTableHeaderCellCount(children, isVirtualized); const firstColumnStickyHeaderCellCSS = isFirstColumnSticky diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 6e9bd67aac4..57d94842948 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,5 +1,5 @@ import userEvent from '@testing-library/user-event'; -import { useState, useRef } from 'react'; +import { useState } from 'react'; import { fireEvent, waitFor } from '@testing-library/react'; import { Table } from '../Table'; import { TableBody, TableCell, TableRow, TableVirtualizedWrapper } from '../TableBody'; @@ -1203,7 +1203,6 @@ describe('', () => { const ReactVirtualTable = (): React.ReactElement => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); - const boxRef = useRef(null); return (
', () => { PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} - ref={boxRef} - isVirtualized defaultSelectedIds={['1', '3']} rowDensity="normal" isFirstColumnSticky diff --git a/packages/blade/src/components/Table/_decisions/decisions.md b/packages/blade/src/components/Table/_decisions/decisions.md index 88b76b39569..c9b9b04b9da 100644 --- a/packages/blade/src/components/Table/_decisions/decisions.md +++ b/packages/blade/src/components/Table/_decisions/decisions.md @@ -712,14 +712,6 @@ also their is high chance of bugs and performance issues in the implementation o most of props are same as Table component. we have added following table component. -```ts - -isVirtualized = false, // default value is false , it is used to enable virtualization in table - -ref = React.Ref | undefined, // ref to the table container , since in virtualized table we need to calculate the height and width of the table to render only the visible rows and columns - - -``` but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components. VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table. @@ -729,7 +721,6 @@ type VirtualizedWrapperProps = { /** * = () => { > = () => { > = ({ ...args }) => { rowDensity="normal" height="600px" isFirstColumnSticky - isVirtualized > {(tableData) => ( 57}> diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 9e64b2c1f57..e03cb65f173 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -203,10 +203,6 @@ type TableProps = { * An array of default selected row ids. This will be used to set the initial selected rows. */ defaultSelectedIds?: Identifier[]; - /** - * isVirtualized prop determines whether the table is virutalized or not. - */ - isVirtualized?: boolean; } & DataAnalyticsAttribute & StyledPropsBlade; @@ -485,7 +481,6 @@ type VirtualizedWrapperProps = { /** * Date: Thu, 30 Jan 2025 11:30:57 +0530 Subject: [PATCH 76/97] fix: lint change --- packages/blade/src/components/Table/Table.web.tsx | 1 - .../blade/src/components/Table/TablePagination.web.tsx | 8 +------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 0a033e89b9d..0ffa5c73f95 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -29,7 +29,6 @@ import type { TableHeaderRowProps, } from './types'; import { getTableBodyStyles } from './commonStyles'; -import type { BladeElementRef } from '~utils/types'; import { makeBorderSize, makeMotionTime } from '~utils'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx index 867345a9c27..6048634b10b 100644 --- a/packages/blade/src/components/Table/TablePagination.web.tsx +++ b/packages/blade/src/components/Table/TablePagination.web.tsx @@ -28,13 +28,7 @@ import { getFocusRingStyles } from '~utils/getFocusRingStyles'; import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; -const pageSizeOptions: NonNullable[] = [ - 10, - 25, - 50, - 100, - 200, -]; +const pageSizeOptions: NonNullable[] = [10, 25, 50]; const PageSelectionButton = styled.button.attrs(() => { return { From 17e1e09a10ca0d2d869b190ccab37972524c1692 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 30 Jan 2025 11:40:47 +0530 Subject: [PATCH 77/97] chore: update lint --- .../docs/APIStories/VirtualizedTableHoverActions.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 49d419ffff8..28c11273c26 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -11,7 +11,6 @@ import { Button } from '~components/Button'; import { Amount } from '~components/Amount'; import { Code } from '~components/Typography'; import { Badge } from '~components/Badge'; -import { useTheme } from '~components/BladeProvider'; import { IconButton } from '~components/Button/IconButton'; import { CopyIcon, TrashIcon } from '~components/Icons'; @@ -72,7 +71,6 @@ const data: TableData = { }; const TableTemplate: StoryFn = () => { - const { platform } = useTheme(); return ( Date: Wed, 5 Feb 2025 19:35:22 +0530 Subject: [PATCH 78/97] chore: lint fix --- .../docs/APIStories/VirtualizedTableHoverActions.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 28c11273c26..01108e3bb65 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -71,7 +71,6 @@ const data: TableData = { }; const TableTemplate: StoryFn = () => { - return ( Date: Wed, 5 Feb 2025 19:41:20 +0530 Subject: [PATCH 79/97] chore: remove boxref --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 57d94842948..5dbf91a3bda 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1204,7 +1204,7 @@ describe('
', () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [apiData, _] = useState({ nodes: nodes.slice(0, 10) }); return ( - +
Date: Wed, 5 Feb 2025 19:47:52 +0530 Subject: [PATCH 80/97] chore: update table.web.test --- .../__snapshots__/Table.web.test.tsx.snap | 1885 +++++++++-------- 1 file changed, 957 insertions(+), 928 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 57202d446be..6f7100d8bbd 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -8,7 +8,7 @@ exports[`
should accept data-analytics-* props 1`] = ` position: relative; } -.c4.c4.c4.c4.c4 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -19,7 +19,7 @@ exports[`
should accept data-analytics-* props 1`] = ` flex-grow: 1; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -31,7 +31,7 @@ exports[`
should accept data-analytics-* props 1`] = ` height: 100%; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -48,7 +48,7 @@ exports[`
should accept data-analytics-* props 1`] = ` pointer-events: auto; } -.c5.c5.c5.c5.c5 { +.c6.c6.c6.c6.c6 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -65,7 +65,7 @@ exports[`
should accept data-analytics-* props 1`] = ` padding: 0; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -88,28 +88,32 @@ exports[`
should accept data-analytics-* props 1`] = ` overflow-wrap: break-word; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + overflow: auto !important; +} + +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper { +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:last-child .cell-wrapper { border-bottom: none; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -120,7 +124,7 @@ exports[`
should accept data-analytics-* props 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -134,15 +138,15 @@ exports[`
should accept data-analytics-* props 1`] = ` border-bottom-style: solid; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { background-color: transparent; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 td:last-child .cell-wrapper { border-right: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -153,11 +157,11 @@ exports[`
should accept data-analytics-* props 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { +.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 tr:first-child th { border-top: none; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -174,7 +178,7 @@ exports[`
should accept data-analytics-* props 1`] = ` cursor: auto; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -197,7 +201,7 @@ exports[`
should accept data-analytics-* props 1`] = ` min-height: 48px; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -208,36 +212,36 @@ exports[`
should accept data-analytics-* props 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c2.c2.c2.c2.c2 th:last-child { +.c3.c3.c3.c3.c3 th:last-child { border-right: none; } @media screen and (min-width:320px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @@ -249,7 +253,7 @@ exports[`
should accept data-analytics-* props 1`] = ` >
should accept data-analytics-* props 1`] = ` style="--data-table-library_grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);" >
should accept data-analytics-* props 1`] = ` >

Payment ID @@ -292,7 +296,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

Amount @@ -315,7 +319,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

Status @@ -338,7 +342,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

Type @@ -361,7 +365,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

Method @@ -384,7 +388,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

Name @@ -409,21 +413,21 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

rzp01 @@ -451,7 +455,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >
@@ -473,7 +477,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

pending @@ -500,7 +504,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

credit @@ -529,14 +533,14 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

rzp02 @@ -564,7 +568,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >
@@ -586,7 +590,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

pending @@ -613,7 +617,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

credit @@ -642,14 +646,14 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

rzp03 @@ -677,7 +681,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >
@@ -699,7 +703,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

failed @@ -726,7 +730,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

debit @@ -755,14 +759,14 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

rzp04 @@ -790,7 +794,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >
@@ -812,7 +816,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

completed @@ -839,7 +843,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

credit @@ -868,14 +872,14 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

rzp05 @@ -903,7 +907,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >
@@ -925,7 +929,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

completed @@ -952,7 +956,7 @@ exports[` should accept data-analytics-* props 1`] = `
should accept data-analytics-* props 1`] = ` >

credit @@ -1027,7 +1031,7 @@ exports[` should render table 1`] = ` align-items: center; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1038,7 +1042,7 @@ exports[`
should render table 1`] = ` flex-grow: 1; } -.c14.c14.c14.c14.c14 { +.c15.c15.c15.c15.c15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1050,7 +1054,7 @@ exports[`
should render table 1`] = ` height: 100%; } -.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1084,7 +1088,7 @@ exports[`
should render table 1`] = ` padding: 0; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -1101,7 +1105,7 @@ exports[`
should render table 1`] = ` padding: 0; } -.c17.c17.c17.c17.c17 { +.c18.c18.c18.c18.c18 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -1124,28 +1128,32 @@ exports[`
should render table 1`] = ` overflow-wrap: break-word; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { + overflow: auto !important; +} + +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child .cell-wrapper { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child .cell-wrapper { border-bottom: none; } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 > div:first-child { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13:focus-visible { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -1156,7 +1164,7 @@ exports[`
should render table 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { +.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -1170,15 +1178,15 @@ exports[`
should render table 1`] = ` border-bottom-style: solid; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { background-color: transparent; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 td:last-child .cell-wrapper { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 td:last-child .cell-wrapper { border-right: none; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -1189,19 +1197,19 @@ exports[`
should render table 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 { +.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 { background-color: hsla(211,20%,52%,0.12); } -.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 tr:last-child th { +.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 tr:last-child th { border-bottom: none; } -.c19.c19.c19.c19.c19 th:last-child { +.c20.c20.c20.c20.c20 th:last-child { border-right: none; } -.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 { +.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -1212,7 +1220,7 @@ exports[`
should render table 1`] = ` border-top-style: solid; } -.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 > div { +.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21.c21 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -1235,11 +1243,11 @@ exports[`
should render table 1`] = ` justify-content: left; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:first-child th { +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:first-child th { border-top: none; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -1256,7 +1264,7 @@ exports[`
should render table 1`] = ` cursor: auto; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -1279,7 +1287,7 @@ exports[`
should render table 1`] = ` min-height: 48px; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -1290,7 +1298,7 @@ exports[`
should render table 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c7.c7.c7.c7.c7 th:last-child { +.c8.c8.c8.c8.c8 th:last-child { border-right: none; } @@ -1300,31 +1308,31 @@ exports[`
should render table 1`] = ` } @media screen and (min-width:320px) { - .c15.c15.c15.c15.c15 { + .c16.c16.c16.c16.c16 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c15.c15.c15.c15.c15 { + .c16.c16.c16.c16.c16 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c15.c15.c15.c15.c15 { + .c16.c16.c16.c16.c16 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c15.c15.c15.c15.c15 { + .c16.c16.c16.c16.c16 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c15.c15.c15.c15.c15 { + .c16.c16.c16.c16.c16 { pointer-events: auto; } } @@ -1362,25 +1370,25 @@ exports[`
should render table 1`] = `
should render table 1`] = ` >

Payment ID @@ -1403,7 +1411,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Amount @@ -1426,7 +1434,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Status @@ -1449,7 +1457,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Type @@ -1472,7 +1480,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Method @@ -1495,7 +1503,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Name @@ -1520,19 +1528,19 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

rzp01 @@ -1559,7 +1567,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >
@@ -1581,7 +1589,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

pending @@ -1608,7 +1616,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

credit @@ -1635,7 +1643,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Netbanking @@ -1662,7 +1670,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

John Doe @@ -1691,13 +1699,13 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

rzp02 @@ -1724,7 +1732,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >
@@ -1746,7 +1754,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

pending @@ -1773,7 +1781,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

credit @@ -1800,7 +1808,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

UPI @@ -1827,7 +1835,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Jane Doe @@ -1856,13 +1864,13 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

rzp03 @@ -1889,7 +1897,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >
@@ -1911,7 +1919,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

failed @@ -1938,7 +1946,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

debit @@ -1965,7 +1973,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Debit Card @@ -1992,7 +2000,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Alice Smith @@ -2021,13 +2029,13 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

rzp04 @@ -2054,7 +2062,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >
@@ -2076,7 +2084,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

completed @@ -2103,7 +2111,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

credit @@ -2130,7 +2138,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Credit Card @@ -2157,7 +2165,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Bob Smith @@ -2186,13 +2194,13 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

rzp05 @@ -2219,7 +2227,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >
@@ -2241,7 +2249,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

completed @@ -2268,7 +2276,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

credit @@ -2295,7 +2303,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

Netbanking @@ -2322,7 +2330,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

John Doe @@ -2351,18 +2359,18 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2379,7 +2387,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2396,7 +2404,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2413,7 +2421,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2430,7 +2438,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2447,7 +2455,7 @@ exports[` should render table 1`] = `
should render table 1`] = ` >

- @@ -2512,7 +2520,7 @@ exports[` should render table with TableEditableCell and Bordered cells align-items: center; } -.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2523,7 +2531,7 @@ exports[`
should render table with TableEditableCell and Bordered cells flex-grow: 1; } -.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2535,7 +2543,7 @@ exports[`
should render table with TableEditableCell and Bordered cells height: 100%; } -.c14.c14.c14.c14.c14 { +.c15.c15.c15.c15.c15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2552,7 +2560,7 @@ exports[`
should render table with TableEditableCell and Bordered cells pointer-events: auto; } -.c18.c18.c18.c18.c18 { +.c19.c19.c19.c19.c19 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2566,12 +2574,12 @@ exports[`
should render table with TableEditableCell and Bordered cells align-items: center; } -.c20.c20.c20.c20.c20 { +.c21.c21.c21.c21.c21 { margin: 4px; width: 100%; } -.c21.c21.c21.c21.c21 { +.c22.c22.c22.c22.c22 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2596,7 +2604,7 @@ exports[`
should render table with TableEditableCell and Bordered cells animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -2613,7 +2621,7 @@ exports[`
should render table with TableEditableCell and Bordered cells padding: 0; } -.c16.c16.c16.c16.c16 { +.c17.c17.c17.c17.c17 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -2636,34 +2644,38 @@ exports[`
should render table with TableEditableCell and Bordered cells overflow-wrap: break-word; } +.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { + overflow: auto !important; +} + .c2.c2.c2.c2.c2 { opacity: 1; -webkit-transition: opacity 200ms; transition: opacity 200ms; } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 tr:last-child .cell-wrapper { +.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child .cell-wrapper { border-bottom: none; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div:first-child { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus-visible { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -2674,7 +2686,7 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -2688,7 +2700,7 @@ exports[`
should render table with TableEditableCell and Bordered cells border-bottom-style: solid; } -.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 { +.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -2702,21 +2714,21 @@ exports[`
should render table with TableEditableCell and Bordered cells border-bottom-style: solid; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { background-color: transparent; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .cell-wrapper { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 .cell-wrapper { border-right-width: 1px; border-right-style: solid; border-right-color: hsla(211,20%,52%,0.18); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 td:last-child .cell-wrapper { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 td:last-child .cell-wrapper { border-right: none; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -2727,25 +2739,25 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25 { +.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 { background-color: hsla(211,20%,52%,0.12); } -.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25 tr:last-child th { +.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 tr:last-child th { border-bottom: none; } -.c26.c26.c26.c26.c26 th { +.c27.c27.c27.c27.c27 th { border-right-width: 1px; border-right-color: hsla(211,20%,52%,0.18); border-right-style: solid; } -.c26.c26.c26.c26.c26 th:last-child { +.c27.c27.c27.c27.c27 th:last-child { border-right: none; } -.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27 { +.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -2756,7 +2768,7 @@ exports[`
should render table with TableEditableCell and Bordered cells border-top-style: solid; } -.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27 > div { +.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28.c28 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -2779,11 +2791,11 @@ exports[`
should render table with TableEditableCell and Bordered cells justify-content: left; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th { +.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:first-child th { border-top: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -2800,7 +2812,7 @@ exports[`
should render table with TableEditableCell and Bordered cells cursor: auto; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -2823,7 +2835,7 @@ exports[`
should render table with TableEditableCell and Bordered cells min-height: 48px; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -2834,17 +2846,17 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6 th { +.c7.c7.c7.c7.c7 th { border-right-width: 1px; border-right-color: hsla(211,20%,52%,0.18); border-right-style: solid; } -.c6.c6.c6.c6.c6 th:last-child { +.c7.c7.c7.c7.c7 th:last-child { border-right: none; } -.c24.c24.c24.c24.c24 { +.c25.c25.c25.c25.c25 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 1rem; @@ -2876,7 +2888,7 @@ exports[`
should render table with TableEditableCell and Bordered cells cursor: auto; } -.c24.c24.c24.c24.c24::-webkit-input-placeholder { +.c25.c25.c25.c25.c25::-webkit-input-placeholder { color: hsla(211,20%,52%,0.32); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 1rem; @@ -2893,7 +2905,7 @@ exports[`
should render table with TableEditableCell and Bordered cells padding: 0; } -.c24.c24.c24.c24.c24::-moz-placeholder { +.c25.c25.c25.c25.c25::-moz-placeholder { color: hsla(211,20%,52%,0.32); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 1rem; @@ -2910,7 +2922,7 @@ exports[`
should render table with TableEditableCell and Bordered cells padding: 0; } -.c24.c24.c24.c24.c24:-ms-input-placeholder { +.c25.c25.c25.c25.c25:-ms-input-placeholder { color: hsla(211,20%,52%,0.32); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 1rem; @@ -2927,7 +2939,7 @@ exports[`
should render table with TableEditableCell and Bordered cells padding: 0; } -.c24.c24.c24.c24.c24::placeholder { +.c25.c25.c25.c25.c25::placeholder { color: hsla(211,20%,52%,0.32); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 1rem; @@ -2944,11 +2956,11 @@ exports[`
should render table with TableEditableCell and Bordered cells padding: 0; } -.c24.c24.c24.c24.c24:focus { +.c25.c25.c25.c25.c25:focus { outline: none; } -.c23.c23.c23.c23.c23 { +.c24.c24.c24.c24.c24 { background-color: hsla(0,0%,100%,0); border-radius: 0px; border-style: solid; @@ -2972,7 +2984,7 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-easing: cubic-bezier(0.3,0,0.2,1); } -.c23.c23.c23.c23.c23:hover { +.c24.c24.c24.c24.c24:hover { background-color: hsla(210,40%,98%,1); border-radius: 0px; border-style: solid; @@ -2998,7 +3010,7 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c23.c23.c23.c23.c23:focus-within { +.c24.c24.c24.c24.c24:focus-within { background-color: hsla(0,0%,100%,0); border-radius: 0px; border-style: solid; @@ -3022,16 +3034,16 @@ exports[`
should render table with TableEditableCell and Bordered cells transition-easing: cubic-bezier(0.3,0,0.2,1); } -.c22.c22.c22.c22.c22 { +.c23.c23.c23.c23.c23 { border-radius: 0px; width: 100%; } -.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17:focus-visible { +.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18:focus-visible { outline: 1px solid; } -.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17:focus-within { +.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18:focus-within { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -3043,31 +3055,31 @@ exports[`
should render table with TableEditableCell and Bordered cells } @media screen and (min-width:320px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @@ -3127,25 +3139,25 @@ exports[`
should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Payment ID @@ -3168,7 +3180,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Amount @@ -3191,7 +3203,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Status @@ -3214,7 +3226,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Type @@ -3237,7 +3249,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Method @@ -3260,7 +3272,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Name @@ -3285,19 +3297,19 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

rzp01 @@ -3324,22 +3336,22 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells data-blade-component="base-box" >
should render table with TableEditableCell and Bordered cells aria-invalid="false" aria-label="Amount" aria-required="false" - class="c24" + class="c25" data-blade-component="styled-base-input" id="table-editable-cell-input-1-input-2" placeholder="Enter Amount" @@ -3381,7 +3393,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

pending @@ -3408,7 +3420,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

credit @@ -3435,7 +3447,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Netbanking @@ -3462,7 +3474,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

John Doe @@ -3491,13 +3503,13 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

rzp02 @@ -3524,22 +3536,22 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells data-blade-component="base-box" >
should render table with TableEditableCell and Bordered cells aria-invalid="false" aria-label="Amount" aria-required="false" - class="c24" + class="c25" data-blade-component="styled-base-input" id="table-editable-cell-input-7-input-8" placeholder="Enter Amount" @@ -3581,7 +3593,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

pending @@ -3608,7 +3620,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

credit @@ -3635,7 +3647,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

UPI @@ -3662,7 +3674,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

Jane Doe @@ -3691,18 +3703,18 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3719,7 +3731,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3736,7 +3748,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3753,7 +3765,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3770,7 +3782,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3787,7 +3799,7 @@ exports[` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells >

- @@ -3818,7 +3830,7 @@ exports[` should render table with comfortable rowDensity 1`] = ` position: relative; } -.c4.c4.c4.c4.c4 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3829,7 +3841,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` flex-grow: 1; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3841,7 +3853,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` height: 100%; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3858,7 +3870,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` pointer-events: auto; } -.c5.c5.c5.c5.c5 { +.c6.c6.c6.c6.c6 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -3875,7 +3887,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` padding: 0; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -3898,28 +3910,32 @@ exports[`
should render table with comfortable rowDensity 1`] = ` overflow-wrap: break-word; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + overflow: auto !important; +} + +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper { +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:last-child .cell-wrapper { border-bottom: none; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -3930,7 +3946,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -3944,15 +3960,15 @@ exports[`
should render table with comfortable rowDensity 1`] = ` border-bottom-style: solid; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { background-color: transparent; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 td:last-child .cell-wrapper { border-right: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -3963,19 +3979,19 @@ exports[`
should render table with comfortable rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { background-color: hsla(211,20%,52%,0.12); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 tr:last-child th { border-bottom: none; } -.c14.c14.c14.c14.c14 th:last-child { +.c15.c15.c15.c15.c15 th:last-child { border-right: none; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -3986,7 +4002,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` border-top-style: solid; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -4009,11 +4025,11 @@ exports[`
should render table with comfortable rowDensity 1`] = ` justify-content: left; } -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { +.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 tr:first-child th { border-top: none; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -4030,7 +4046,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` cursor: auto; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -4053,7 +4069,7 @@ exports[`
should render table with comfortable rowDensity 1`] = ` min-height: 60px; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -4064,36 +4080,36 @@ exports[`
should render table with comfortable rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c2.c2.c2.c2.c2 th:last-child { +.c3.c3.c3.c3.c3 th:last-child { border-right: none; } @media screen and (min-width:320px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @@ -4105,25 +4121,25 @@ exports[`
should render table with comfortable rowDensity 1`] = ` >
should render table with comfortable rowDensity 1`] = ` >

Payment ID @@ -4146,7 +4162,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Amount @@ -4169,7 +4185,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Status @@ -4192,7 +4208,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Type @@ -4215,7 +4231,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Method @@ -4238,7 +4254,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Name @@ -4263,19 +4279,19 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

rzp01 @@ -4302,7 +4318,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >
@@ -4324,7 +4340,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

pending @@ -4351,7 +4367,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

credit @@ -4378,7 +4394,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Netbanking @@ -4405,7 +4421,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

John Doe @@ -4434,13 +4450,13 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

rzp02 @@ -4467,7 +4483,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >
@@ -4489,7 +4505,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

pending @@ -4516,7 +4532,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

credit @@ -4543,7 +4559,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

UPI @@ -4570,7 +4586,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

Jane Doe @@ -4599,18 +4615,18 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4627,7 +4643,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4644,7 +4660,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4661,7 +4677,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4678,7 +4694,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4695,7 +4711,7 @@ exports[` should render table with comfortable rowDensity 1`] = `
should render table with comfortable rowDensity 1`] = ` >

- @@ -4726,7 +4742,7 @@ exports[` should render table with compact rowDensity 1`] = ` position: relative; } -.c4.c4.c4.c4.c4 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4737,7 +4753,7 @@ exports[`
should render table with compact rowDensity 1`] = ` flex-grow: 1; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4749,7 +4765,7 @@ exports[`
should render table with compact rowDensity 1`] = ` height: 100%; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4766,7 +4782,7 @@ exports[`
should render table with compact rowDensity 1`] = ` pointer-events: auto; } -.c5.c5.c5.c5.c5 { +.c6.c6.c6.c6.c6 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -4783,7 +4799,7 @@ exports[`
should render table with compact rowDensity 1`] = ` padding: 0; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -4806,28 +4822,32 @@ exports[`
should render table with compact rowDensity 1`] = ` overflow-wrap: break-word; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + overflow: auto !important; +} + +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper { +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:last-child .cell-wrapper { border-bottom: none; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -4838,7 +4858,7 @@ exports[`
should render table with compact rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -4852,15 +4872,15 @@ exports[`
should render table with compact rowDensity 1`] = ` border-bottom-style: solid; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { background-color: transparent; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 td:last-child .cell-wrapper { border-right: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -4871,19 +4891,19 @@ exports[`
should render table with compact rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { background-color: hsla(211,20%,52%,0.12); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 tr:last-child th { border-bottom: none; } -.c14.c14.c14.c14.c14 th:last-child { +.c15.c15.c15.c15.c15 th:last-child { border-right: none; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -4894,7 +4914,7 @@ exports[`
should render table with compact rowDensity 1`] = ` border-top-style: solid; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -4917,11 +4937,11 @@ exports[`
should render table with compact rowDensity 1`] = ` justify-content: left; } -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { +.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 tr:first-child th { border-top: none; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -4938,7 +4958,7 @@ exports[`
should render table with compact rowDensity 1`] = ` cursor: auto; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -4961,7 +4981,7 @@ exports[`
should render table with compact rowDensity 1`] = ` min-height: 36px; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -4972,36 +4992,36 @@ exports[`
should render table with compact rowDensity 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c2.c2.c2.c2.c2 th:last-child { +.c3.c3.c3.c3.c3 th:last-child { border-right: none; } @media screen and (min-width:320px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @@ -5013,25 +5033,25 @@ exports[`
should render table with compact rowDensity 1`] = ` >
should render table with compact rowDensity 1`] = ` >

Payment ID @@ -5054,7 +5074,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Amount @@ -5077,7 +5097,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Status @@ -5100,7 +5120,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Type @@ -5123,7 +5143,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Method @@ -5146,7 +5166,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Name @@ -5171,19 +5191,19 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

rzp01 @@ -5210,7 +5230,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >
@@ -5232,7 +5252,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

pending @@ -5259,7 +5279,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

credit @@ -5286,7 +5306,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Netbanking @@ -5313,7 +5333,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

John Doe @@ -5342,13 +5362,13 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

rzp02 @@ -5375,7 +5395,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >
@@ -5397,7 +5417,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

pending @@ -5424,7 +5444,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

credit @@ -5451,7 +5471,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

UPI @@ -5478,7 +5498,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

Jane Doe @@ -5507,18 +5527,18 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5535,7 +5555,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5552,7 +5572,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5569,7 +5589,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5586,7 +5606,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5603,7 +5623,7 @@ exports[` should render table with compact rowDensity 1`] = `
should render table with compact rowDensity 1`] = ` >

- @@ -5767,7 +5787,7 @@ exports[` should render table with isRefreshing 1`] = ` align-items: center; } -.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5778,7 +5798,7 @@ exports[`
should render table with isRefreshing 1`] = ` flex-grow: 1; } -.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5790,7 +5810,7 @@ exports[`
should render table with isRefreshing 1`] = ` height: 100%; } -.c14.c14.c14.c14.c14 { +.c15.c15.c15.c15.c15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5820,7 +5840,7 @@ exports[`
should render table with isRefreshing 1`] = ` animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -5837,7 +5857,7 @@ exports[`
should render table with isRefreshing 1`] = ` padding: 0; } -.c16.c16.c16.c16.c16 { +.c17.c17.c17.c17.c17 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -5860,34 +5880,38 @@ exports[`
should render table with isRefreshing 1`] = ` overflow-wrap: break-word; } +.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 { + overflow: auto !important; +} + .c2.c2.c2.c2.c2 { opacity: 1; -webkit-transition: opacity 200ms; transition: opacity 200ms; } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 tr:last-child .cell-wrapper { +.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child .cell-wrapper { border-bottom: none; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div:first-child { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus-visible { +.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -5898,7 +5922,7 @@ exports[`
should render table with isRefreshing 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -5912,15 +5936,15 @@ exports[`
should render table with isRefreshing 1`] = ` border-bottom-style: solid; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { background-color: transparent; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 td:last-child .cell-wrapper { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 td:last-child .cell-wrapper { border-right: none; } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -5931,19 +5955,19 @@ exports[`
should render table with isRefreshing 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 { +.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 { background-color: hsla(211,20%,52%,0.12); } -.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 tr:last-child th { +.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 tr:last-child th { border-bottom: none; } -.c18.c18.c18.c18.c18 th:last-child { +.c19.c19.c19.c19.c19 th:last-child { border-right: none; } -.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 { +.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -5954,7 +5978,7 @@ exports[`
should render table with isRefreshing 1`] = ` border-top-style: solid; } -.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 > div { +.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -5977,11 +6001,11 @@ exports[`
should render table with isRefreshing 1`] = ` justify-content: left; } -.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th { +.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:first-child th { border-top: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -5998,7 +6022,7 @@ exports[`
should render table with isRefreshing 1`] = ` cursor: auto; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -6021,7 +6045,7 @@ exports[`
should render table with isRefreshing 1`] = ` min-height: 48px; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -6032,36 +6056,36 @@ exports[`
should render table with isRefreshing 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6 th:last-child { +.c7.c7.c7.c7.c7 th:last-child { border-right: none; } @media screen and (min-width:320px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c14.c14.c14.c14.c14 { + .c15.c15.c15.c15.c15 { pointer-events: auto; } } @@ -6121,25 +6145,25 @@ exports[`
should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Payment ID @@ -6162,7 +6186,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Amount @@ -6185,7 +6209,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Status @@ -6208,7 +6232,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Type @@ -6231,7 +6255,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Method @@ -6254,7 +6278,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Name @@ -6279,19 +6303,19 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

rzp01 @@ -6318,7 +6342,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >
@@ -6340,7 +6364,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

pending @@ -6367,7 +6391,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

credit @@ -6394,7 +6418,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Netbanking @@ -6421,7 +6445,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

John Doe @@ -6450,13 +6474,13 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

rzp02 @@ -6483,7 +6507,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >
@@ -6505,7 +6529,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

pending @@ -6532,7 +6556,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

credit @@ -6559,7 +6583,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

UPI @@ -6586,7 +6610,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

Jane Doe @@ -6615,18 +6639,18 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6643,7 +6667,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6660,7 +6684,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6677,7 +6701,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6694,7 +6718,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6711,7 +6735,7 @@ exports[` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` >

- @@ -6742,7 +6766,7 @@ exports[` should render table with showStripedRows 1`] = ` position: relative; } -.c4.c4.c4.c4.c4 { +.c5.c5.c5.c5.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6753,7 +6777,7 @@ exports[`
should render table with showStripedRows 1`] = ` flex-grow: 1; } -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6765,7 +6789,7 @@ exports[`
should render table with showStripedRows 1`] = ` height: 100%; } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -6782,7 +6806,7 @@ exports[`
should render table with showStripedRows 1`] = ` pointer-events: auto; } -.c5.c5.c5.c5.c5 { +.c6.c6.c6.c6.c6 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -6799,7 +6823,7 @@ exports[`
should render table with showStripedRows 1`] = ` padding: 0; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { color: hsla(212,39%,16%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -6822,28 +6846,32 @@ exports[`
should render table with showStripedRows 1`] = ` overflow-wrap: break-word; } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 { +.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + overflow: auto !important; +} + +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { border: none; -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper { +.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:last-child .cell-wrapper { border-bottom: none; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 { height: 100%; background-color: hsla(0,0%,100%,1); } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div:first-child { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } -.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible { +.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -6854,7 +6882,7 @@ exports[`
should render table with showStripedRows 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 { -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); background-color: transparent; @@ -6865,15 +6893,15 @@ exports[`
should render table with showStripedRows 1`] = ` width: 100%; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 { background-color: transparent; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 td:last-child .cell-wrapper { border-right: none; } -.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus { +.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -6884,19 +6912,19 @@ exports[`
should render table with showStripedRows 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 { background-color: hsla(211,20%,52%,0.12); } -.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th { +.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 tr:last-child th { border-bottom: none; } -.c14.c14.c14.c14.c14 th:last-child { +.c15.c15.c15.c15.c15 th:last-child { border-right: none; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 { height: 100%; background-color: hsla(0,0%,100%,1); border-bottom-width: 1px; @@ -6907,7 +6935,7 @@ exports[`
should render table with showStripedRows 1`] = ` border-top-style: solid; } -.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div { +.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -6930,11 +6958,11 @@ exports[`
should render table with showStripedRows 1`] = ` justify-content: left; } -.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th { +.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 tr:first-child th { border-top: none; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 { display: block; -webkit-box-pack: initial; -webkit-justify-content: initial; @@ -6951,7 +6979,7 @@ exports[`
should render table with showStripedRows 1`] = ` cursor: auto; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div { background-color: hsla(211,20%,52%,0.12); display: -webkit-box; display: -webkit-flex; @@ -6974,7 +7002,7 @@ exports[`
should render table with showStripedRows 1`] = ` min-height: 48px; } -.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible { +.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: -4px; -webkit-transition-property: outline-width; @@ -6985,36 +7013,36 @@ exports[`
should render table with showStripedRows 1`] = ` transition-timing-function: cubic-bezier(0.3,0,0.2,1); } -.c2.c2.c2.c2.c2 th:last-child { +.c3.c3.c3.c3.c3 th:last-child { border-right: none; } @media screen and (min-width:320px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:480px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:768px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1024px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @media screen and (min-width:1200px) { - .c10.c10.c10.c10.c10 { + .c11.c11.c11.c11.c11 { pointer-events: auto; } } @@ -7026,25 +7054,25 @@ exports[`
should render table with showStripedRows 1`] = ` >
should render table with showStripedRows 1`] = ` >

Payment ID @@ -7067,7 +7095,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Amount @@ -7090,7 +7118,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Status @@ -7113,7 +7141,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Type @@ -7136,7 +7164,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Method @@ -7159,7 +7187,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Name @@ -7184,19 +7212,19 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

rzp01 @@ -7223,7 +7251,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >
@@ -7245,7 +7273,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

pending @@ -7272,7 +7300,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

credit @@ -7299,7 +7327,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Netbanking @@ -7326,7 +7354,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

John Doe @@ -7355,13 +7383,13 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

rzp02 @@ -7388,7 +7416,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >
@@ -7410,7 +7438,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

pending @@ -7437,7 +7465,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

credit @@ -7464,7 +7492,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

UPI @@ -7491,7 +7519,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

Jane Doe @@ -7520,18 +7548,18 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7548,7 +7576,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7565,7 +7593,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7582,7 +7610,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7599,7 +7627,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7616,7 +7644,7 @@ exports[` should render table with showStripedRows 1`] = `
should render table with showStripedRows 1`] = ` >

- @@ -7728,6 +7756,7 @@ exports[` should render table with sticky header, footer & first column } .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { + overflow: auto !important; height: 300px; } @@ -9877,127 +9906,127 @@ exports[`
should render virtualized table 1`] = ` -ms-flex: 1; flex: 1; position: relative; - width: 0px; + width: 100%; } .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { - height: 0px; - width: 0px; + overflow: unset !important; + width: 100%; } .c1.c1.c1.c1.c1 > div { overflow: auto !important; - height: 0px !important; - width: 0px !important; + height: undefined !important; + width: 100% !important; } .c1.c1.c1.c1.c1 { overflow: hidden !important; } -.c1.c1.c1.c1.c1 .tbody > div { +.c1.c1.c1.c1.c1 tbody > div { display: block !important; } -.c1.c1.c1.c1.c1 .tbody div tr { +.c1.c1.c1.c1.c1 tbody div tr { display: grid; grid-template-columns: var(--data-table-library_grid-template-columns); -webkit-column-gap: 0; column-gap: 0; } -.c1.c1.c1.c1.c1 .tbody div tr:last-child .cell-wrapper { +.c1.c1.c1.c1.c1 tbody div tr:last-child .cell-wrapper { border-bottom: none; } -.c1.c1.c1.c1.c1 .tbody div td { +.c1.c1.c1.c1.c1 tbody div td { padding: 0; } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected .cell-wrapper-base, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected .cell-wrapper-base, .c1.c1.c1.c1.c1 .row-select-selected .cell-wrapper-base { background-color: hsla(227,100%,59%,0.09); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { background-color: hsla(227,100%,59%,0.18); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions, .c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions { background-color: hsla(0,0%,100%,1); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, .c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { background-color: hsla(0,0%,100%,0); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, .c1.c1.c1.c1.c1 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { background-color: hsla(227,100%,59%,0.18); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { background-color: hsla(227,100%,59%,0.09); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions, .c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions { background-color: hsla(0,0%,100%,1); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, .c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { background-color: hsla(0,0%,100%,0); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, .c1.c1.c1.c1.c1 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { background-color: hsla(227,100%,59%,0.09); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { background-color: hsla(227,100%,59%,0.18); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions, .c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions { background-color: hsla(0,0%,100%,1); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2, .c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 { background-color: hsla(211,20%,52%,0.12); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, +.c1.c1.c1.c1.c1 tbody div .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3, .c1.c1.c1.c1.c1 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 { background-color: hsla(227,100%,59%,0.18); -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); transition: background-color 160ms cubic-bezier(0.3,0,0.2,1); } -.c1.c1.c1.c1.c1 .tbody div tr:active:not(.disabled-row) .cell-wrapper { +.c1.c1.c1.c1.c1 tbody div tr:active:not(.disabled-row) .cell-wrapper { background-color: hsla(211,20%,52%,0.12); } From 8f1e1f554a63ab242399783b2495f6dc9f6a3708 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 13:06:16 +0530 Subject: [PATCH 81/97] chore: resolve generics --- .../src/components/Table/docs/BasicTable.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index e665e60eca9..866f5c44cdf 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -154,8 +154,8 @@ const TableTemplate: StoryFn = ({ ...args }) => { Status - > - {(tableItem, index) => ( + + {(tableItem: Item, index) => ( = ({ ...args }) => { Status - > - {(tableItem, index) => ( + + {(tableItem: Item, index) => ( Date: Wed, 12 Feb 2025 16:11:39 +0530 Subject: [PATCH 82/97] chore: move tabledata to context --- packages/blade/src/components/Table/Table.web.tsx | 2 ++ packages/blade/src/components/Table/TableBody.web.tsx | 3 +-- packages/blade/src/components/Table/TableContext.tsx | 6 ++++-- .../src/components/Table/docs/BasicTable.stories.tsx | 8 ++++---- packages/blade/src/components/Table/types.ts | 4 ---- 5 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 0ffa5c73f95..5b48b0fef1a 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -489,6 +489,7 @@ const _Table = ({ columnCount, gridTemplateColumns, isVirtualized, + tableData: data.nodes, }), [ selectionType, @@ -517,6 +518,7 @@ const _Table = ({ hasHoverActions, setHasHoverActions, isVirtualized, + data, ], ); diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index c91f16d8325..98927cd61a8 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -383,13 +383,12 @@ const _TableRow = ({ }; const _Virtulized = ({ - tableData, headerHeight, rowHeight, children, }: VirtualizedWrapperProps): React.ReactElement => { const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); - const { rowDensity } = useTableContext(); + const { rowDensity, tableData } = useTableContext(); const _tableRow = Number(tableRow.minHeight[rowDensity]); const _rowHeight = (item: TableNode, index: number): number => { diff --git a/packages/blade/src/components/Table/TableContext.tsx b/packages/blade/src/components/Table/TableContext.tsx index 444348aaaf3..c7e24bb051d 100644 --- a/packages/blade/src/components/Table/TableContext.tsx +++ b/packages/blade/src/components/Table/TableContext.tsx @@ -43,9 +43,10 @@ export type TableContextType = { columnCount: number; gridTemplateColumns: string | undefined; isVirtualized?: boolean; + tableData: TableNode[]; }; -const TableContext = React.createContext({ +const TableContext = React.createContext({ selectionType: 'none', selectedRows: undefined, totalItems: 0, @@ -72,11 +73,12 @@ const TableContext = React.createContext({ columnCount: 0, gridTemplateColumns: undefined, isVirtualized: false, + tableData: [], }); const useTableContext = (): TableContextType => { const context = React.useContext(TableContext); - return context; + return context as TableContextType; }; export { useTableContext, TableContext }; diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 866f5c44cdf..8c4fabecea6 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -142,8 +142,8 @@ const TableTemplate: StoryFn = ({ ...args }) => { height="600px" isFirstColumnSticky > - {(tableData) => ( - 57}> + {() => ( + 57}> ID @@ -334,8 +334,8 @@ export const NormalTable: StoryFn = ({ ...args }) => { height="600px" isFirstColumnSticky > - {(tableData) => ( - 58}> + {() => ( + 58}> ID diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index e03cb65f173..4ded45c955e 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -568,10 +568,6 @@ type VirtualizedWrapperProps = { * * **/ - /** - * The tableData prop is an array of objects. - */ - tableData: TableNode[]; /** * headerHeight is the height of the header **/ From 3ceb7ef3d1cc6fa70ccba27b301d43cf125aac21 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 12 Feb 2025 16:16:09 +0530 Subject: [PATCH 83/97] chore: more ts changes --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 4 ++-- .../Table/docs/APIStories/VirtualizedTableAPI.stories.tsx | 4 ++-- .../docs/APIStories/VirtualizedTableHoverActions.stories.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 5dbf91a3bda..aa90fbc658b 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1219,8 +1219,8 @@ describe('
', () => { rowDensity="normal" isFirstColumnSticky > - {(tableData) => ( - + {() => ( + ID diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 3a2bb1faca8..64afe26bc0b 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -101,8 +101,8 @@ const TableTemplate: StoryFn = () => { } > - {(tableData) => ( - + {() => ( + ID diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 01108e3bb65..171088dc847 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -95,8 +95,8 @@ const TableTemplate: StoryFn = () => { } > - {(tableData) => ( - + {() => ( + ID From 0797781dfd3474d77e394e923450fbacc86247cb Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 13 Feb 2025 00:41:40 +0530 Subject: [PATCH 84/97] chore: update body ts type --- packages/blade/src/components/Table/TableBody.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 98927cd61a8..cc29f226bf0 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -411,7 +411,7 @@ const _Virtulized = ({ tableList={tableData} rowHeight={_rowHeight as RowHeightType} header={() => parsedHeader} - body={bodyFunction as (node: Item, index: number) => React.ReactNode} + body={bodyFunction as (node: TableNode, index: number) => React.ReactNode} /> ); }; From b054cbf3a5d667b0f1fdf4ad89bc86703e2d4fc3 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 13 Feb 2025 01:15:35 +0530 Subject: [PATCH 85/97] chore: more changes --- packages/blade/src/components/Chip/utils.ts | 57 +++++++++++++++++++ .../blade/src/components/Table/Table.web.tsx | 4 +- .../src/components/Table/TableBody.web.tsx | 2 +- .../src/components/Table/TableContext.tsx | 13 +++-- 4 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 packages/blade/src/components/Chip/utils.ts diff --git a/packages/blade/src/components/Chip/utils.ts b/packages/blade/src/components/Chip/utils.ts new file mode 100644 index 00000000000..9361ad4bf14 --- /dev/null +++ b/packages/blade/src/components/Chip/utils.ts @@ -0,0 +1,57 @@ +// ref - /blade/packages/blade/src/components/Box/styledProps/getStyledProps.ts +// since here the use case is too specific that's why makeLayout Prop is inside Chip. + +import type { ChipGroupContainerLayoutProps } from './types'; +import { removeUndefinedStyledProps } from '~components/Box/styledProps'; +import type { KeysRequired } from '~utils/types'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type StyledPropsInputType = Record; + +const makeStyledProps = ( + props: StyledPropsInputType, +): KeysRequired => { + return { + display: props.display, + gridColumn: props.gridColumn, + gridRow: props.gridRow, + gridArea: props.gridArea, + alignSelf: props.alignSelf, + justifySelf: props.justifySelf, + placeSelf: props.placeSelf, + order: props.order, + gridColumnStart: props.gridColumnStart, + gridColumnEnd: props.gridColumnEnd, + alignContent: props.alignContent, + alignItems: props.alignItems, + columnGap: props.columnGap, + gap: props.gap, + gridAutoColumns: props.gridAutoColumns, + gridAutoFlow: props.gridAutoFlow, + gridAutoRows: props.gridAutoRows, + gridTemplateAreas: props.gridTemplateAreas, + grid: props.grid, + gridTemplate: props.gridTemplate, + gridTemplateColumns: props.gridTemplateColumns, + gridTemplateRows: props.gridTemplateRows, + justifyContent: props.justifyContent, + justifyItems: props.justifyItems, + rowGap: props.rowGap, + flexBasis: props.flexBasis, + flexDirection: props.flexDirection, + flexGrow: props.flexGrow, + flexShrink: props.flexShrink, + flexWrap: props.flexWrap, + flex: props.flex, + placeItems: props.placeItems, + gridRowEnd: props.gridRowEnd, + gridRowStart: props.gridRowStart, + }; +}; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const getLayOutProps = (props: Record): ChipGroupContainerLayoutProps => { + return removeUndefinedStyledProps(makeStyledProps(props)); +}; + +export { getLayOutProps }; diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 5b48b0fef1a..5382058750c 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -393,7 +393,7 @@ const _Table = ({ }, ); - const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { + const currentSortedState: TableContextType['currentSortedState'] = useMemo(() => { return { sortKey: sort.state.sortKey, isSortReversed: sort.state.reverse, @@ -461,7 +461,7 @@ const _Table = ({ } // Table Context - const tableContext: TableContextType = useMemo( + const tableContext: TableContextType = useMemo( () => ({ selectionType, selectedRows, diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index cc29f226bf0..6aaefb19daf 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -388,7 +388,7 @@ const _Virtulized = ({ children, }: VirtualizedWrapperProps): React.ReactElement => { const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); - const { rowDensity, tableData } = useTableContext(); + const { rowDensity, tableData } = useTableContext(); const _tableRow = Number(tableRow.minHeight[rowDensity]); const _rowHeight = (item: TableNode, index: number): number => { diff --git a/packages/blade/src/components/Table/TableContext.tsx b/packages/blade/src/components/Table/TableContext.tsx index c7e24bb051d..f88856b1d01 100644 --- a/packages/blade/src/components/Table/TableContext.tsx +++ b/packages/blade/src/components/Table/TableContext.tsx @@ -7,9 +7,10 @@ import type { TableProps, TablePaginationType, TableHeaderRowProps, + TableNode as localTableNode, } from './types'; -export type TableContextType = { +export type TableContextType = { selectionType?: TableProps['selectionType']; selectedRows?: TableNode['id'][]; totalItems: number; @@ -43,10 +44,10 @@ export type TableContextType = { columnCount: number; gridTemplateColumns: string | undefined; isVirtualized?: boolean; - tableData: TableNode[]; + tableData: localTableNode[]; }; -const TableContext = React.createContext({ +const TableContext = React.createContext>({ selectionType: 'none', selectedRows: undefined, totalItems: 0, @@ -76,9 +77,9 @@ const TableContext = React.createContext({ tableData: [], }); -const useTableContext = (): TableContextType => { - const context = React.useContext(TableContext); - return context as TableContextType; +const useTableContext = (): TableContextType => { + const context = React.useContext(TableContext as React.Context>); + return context; }; export { useTableContext, TableContext }; From 9a96e2f825e68a7b384198cd4ec94a641e8eafbd Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 13 Feb 2025 01:21:22 +0530 Subject: [PATCH 86/97] chore: remove unsed file --- packages/blade/src/components/Chip/utils.ts | 57 --------------------- 1 file changed, 57 deletions(-) delete mode 100644 packages/blade/src/components/Chip/utils.ts diff --git a/packages/blade/src/components/Chip/utils.ts b/packages/blade/src/components/Chip/utils.ts deleted file mode 100644 index 9361ad4bf14..00000000000 --- a/packages/blade/src/components/Chip/utils.ts +++ /dev/null @@ -1,57 +0,0 @@ -// ref - /blade/packages/blade/src/components/Box/styledProps/getStyledProps.ts -// since here the use case is too specific that's why makeLayout Prop is inside Chip. - -import type { ChipGroupContainerLayoutProps } from './types'; -import { removeUndefinedStyledProps } from '~components/Box/styledProps'; -import type { KeysRequired } from '~utils/types'; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type StyledPropsInputType = Record; - -const makeStyledProps = ( - props: StyledPropsInputType, -): KeysRequired => { - return { - display: props.display, - gridColumn: props.gridColumn, - gridRow: props.gridRow, - gridArea: props.gridArea, - alignSelf: props.alignSelf, - justifySelf: props.justifySelf, - placeSelf: props.placeSelf, - order: props.order, - gridColumnStart: props.gridColumnStart, - gridColumnEnd: props.gridColumnEnd, - alignContent: props.alignContent, - alignItems: props.alignItems, - columnGap: props.columnGap, - gap: props.gap, - gridAutoColumns: props.gridAutoColumns, - gridAutoFlow: props.gridAutoFlow, - gridAutoRows: props.gridAutoRows, - gridTemplateAreas: props.gridTemplateAreas, - grid: props.grid, - gridTemplate: props.gridTemplate, - gridTemplateColumns: props.gridTemplateColumns, - gridTemplateRows: props.gridTemplateRows, - justifyContent: props.justifyContent, - justifyItems: props.justifyItems, - rowGap: props.rowGap, - flexBasis: props.flexBasis, - flexDirection: props.flexDirection, - flexGrow: props.flexGrow, - flexShrink: props.flexShrink, - flexWrap: props.flexWrap, - flex: props.flex, - placeItems: props.placeItems, - gridRowEnd: props.gridRowEnd, - gridRowStart: props.gridRowStart, - }; -}; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const getLayOutProps = (props: Record): ChipGroupContainerLayoutProps => { - return removeUndefinedStyledProps(makeStyledProps(props)); -}; - -export { getLayOutProps }; From 86370a51512b5954c19b28de6399579e4c1babb5 Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 13 Feb 2025 01:37:49 +0530 Subject: [PATCH 87/97] chore: change types --- packages/blade/src/components/Table/TableBody.web.tsx | 2 +- packages/blade/src/components/Table/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 6aaefb19daf..e2fd8b36247 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -386,7 +386,7 @@ const _Virtulized = ({ headerHeight, rowHeight, children, -}: VirtualizedWrapperProps): React.ReactElement => { +}: VirtualizedWrapperProps): React.ReactElement => { const [parsedHeader = null, parsedBody = null] = React.Children.toArray(children); const { rowDensity, tableData } = useTableContext(); const _tableRow = Number(tableRow.minHeight[rowDensity]); diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 4ded45c955e..f7253f2d29c 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -477,7 +477,7 @@ type TableToolbarActionsProps = { } & StyledPropsBlade & DataAnalyticsAttribute; -type VirtualizedWrapperProps = { +type VirtualizedWrapperProps = { /** * Date: Thu, 13 Feb 2025 01:45:50 +0530 Subject: [PATCH 88/97] chore: more values --- packages/blade/src/components/Table/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index f7253f2d29c..2a76de14b1f 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -574,6 +574,11 @@ type VirtualizedWrapperProps = { headerHeight?: number; /** * rowHeight is the height of each row, it can be a fixed number or a function that returns a number + * @default rowHeight values + * compact: '36' + * normal: '48' + * comfortable: '60' + * **/ rowHeight?: (item: TableLibraryTableNode, index: number) => number; children: React.ReactNode; From 69801f963de5feb0c8c1dfc31e570280986aa04a Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 18 Feb 2025 14:39:57 +0530 Subject: [PATCH 89/97] chore: review changes --- .../blade/src/components/Table/Table.web.tsx | 25 ++----------------- .../src/components/Table/componentIds.ts | 1 - .../VirtualizedTableAPI.stories.tsx | 4 +-- .../VirtualizedTableHoverActions.stories.tsx | 12 +++------ 4 files changed, 7 insertions(+), 35 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 5382058750c..fedd2668cb7 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -57,29 +57,8 @@ const rowSelectType: Record< // Get the number of TableHeaderCell components. // This is very complicated but the only way to iterate through the structure and get number of header cells. // Assuming number of header cells is the same as number of columns -const getTableHeaderCellCount = ( - children: (data: []) => React.ReactElement, - isVirtualized: boolean, -): number => { +const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): number => { const tableRootComponent = children([]); - if (isVirtualized) { - if ( - React.isValidElement<{ header?: () => React.ReactElement }>(tableRootComponent) && - tableRootComponent?.props.header - ) { - if (React.isValidElement(tableRootComponent?.props.header())) { - const tableHeaderRow = tableRootComponent.props.header().props.children; - if ( - React.isValidElement<{ children?: React.ReactNode }>(tableHeaderRow) && - tableHeaderRow.props.children - ) { - const tableHeaderCells = React.Children.toArray(tableHeaderRow.props.children); - return tableHeaderCells.length; - } - } - } - } - if (tableRootComponent && React.isValidElement(tableRootComponent)) { const tableComponentArray = React.Children.toArray(tableRootComponent); if (React.isValidElement(tableComponentArray[0])) { @@ -225,7 +204,7 @@ const _Table = ({ }); // Table Theme - const columnCount = getTableHeaderCellCount(children, isVirtualized); + const columnCount = getTableHeaderCellCount(children); const firstColumnStickyHeaderCellCSS = isFirstColumnSticky ? ` &:nth-of-type(1) { diff --git a/packages/blade/src/components/Table/componentIds.ts b/packages/blade/src/components/Table/componentIds.ts index e5fef6a6891..f9b790595c5 100644 --- a/packages/blade/src/components/Table/componentIds.ts +++ b/packages/blade/src/components/Table/componentIds.ts @@ -12,7 +12,6 @@ const ComponentIds = { TableFooter: 'TableFooter', TableFooterRow: 'TableFooterRow', TableFooterCell: 'TableFooterCell', - VirtualizedTable: 'VirtualizedTable', TablePagination: 'TablePagination', }; diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index 64afe26bc0b..a11dcebd8d2 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -113,8 +113,8 @@ const TableTemplate: StoryFn = () => { Status - > - {(tableItem, index) => ( + + {(tableItem: Item, index) => ( {tableItem.paymentId} diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx index 171088dc847..eb72d028e17 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx @@ -72,13 +72,7 @@ const data: TableData = { const TableTemplate: StoryFn = () => { return ( - + = () => { Status - > - {(tableItem, index) => ( + + {(tableItem: Item, index) => ( Date: Tue, 18 Feb 2025 14:51:18 +0530 Subject: [PATCH 90/97] chore: remove basic table example --- .../Table/docs/BasicTable.stories.tsx | 286 ++++-------------- 1 file changed, 67 insertions(+), 219 deletions(-) diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx index 8c4fabecea6..d9f3c6831d9 100644 --- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx +++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx @@ -11,14 +11,20 @@ import { TableCell, TableToolbar, TableToolbarActions, + TableFooter, + TableFooterRow, + TableFooterCell, + TablePagination, } from '../../Table'; -import { TableVirtualizedWrapper } from '../TableBody'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Box } from '~components/Box'; -import { Code, Heading } from '~components/Typography'; +import { Amount } from '~components/Amount'; +import { Code } from '~components/Typography'; import { Badge } from '~components/Badge'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import { Button } from '~components/Button'; +import { IconButton } from '~components/Button/IconButton'; +import { CheckIcon, CloseIcon } from '~components/Icons'; export default { title: 'Components/Table', @@ -64,8 +70,8 @@ export default { }, } as Meta>; -const getNodes = (number: number): Item[] => [ - ...Array.from({ length: number }, (_, i) => ({ +const nodes: Item[] = [ + ...Array.from({ length: 100 }, (_, i) => ({ id: (i + 1).toString(), paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, amount: Number((Math.random() * 10000).toFixed(2)), @@ -88,9 +94,6 @@ const getNodes = (number: number): Item[] => [ })), ]; -const nodes: Item[] = getNodes(20); - -const largeNodes: Item[] = getNodes(500); type Item = { id: string; paymentId: string; @@ -107,19 +110,16 @@ const data: TableData = { nodes, }; -const largeData: TableData = { - nodes: largeNodes, -}; - const TableTemplate: StoryFn = ({ ...args }) => { return ( - - Total rows : {largeNodes.length} + @@ -137,13 +137,18 @@ const TableTemplate: StoryFn = ({ ...args }) => { DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), }} - defaultSelectedIds={['1', '3']} - rowDensity="normal" - height="600px" - isFirstColumnSticky + pagination={ + + } > - {() => ( - 57}> + {(tableData) => ( + <> ID @@ -151,14 +156,37 @@ const TableTemplate: StoryFn = ({ ...args }) => { Account Date Method - Status + Status - {(tableItem: Item, index) => ( + {tableData.map((tableItem, index) => ( + + { + console.log('Approved', tableItem.id); + }} + /> + { + console.log('Rejected', tableItem.id); + }} + /> + + } onClick={() => { console.log('where'); }} @@ -197,208 +225,28 @@ const TableTemplate: StoryFn = ({ ...args }) => { - )} + ))} - + + + Total + - + - + - + - + {args.selectionType === 'multiple' ? - : null} + + + + + + )} ); }; -export const NormalTable: StoryFn = ({ ...args }) => { - return ( - - Normal Table- - - { - console.log(selectedIds); - // setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id))); - }} - toolbar={ - - - - - - - } - sortFunctions={{ - ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), - AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), - STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - }} - > - {(tableData) => ( - <> - - - ID - Amount - Account - Date - Method - Status - - - - {tableData.map((tableItem, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - ))} - - - )} - - - - Virtualized Table- - - Total rows : {largeNodes.length} - - - - - - - } - sortFunctions={{ - ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)), - AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount), - PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), - DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()), - STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)), - }} - defaultSelectedIds={['1', '3']} - rowDensity="normal" - height="600px" - isFirstColumnSticky - > - {() => ( - 58}> - - - ID - Amount - Account - Date - Method - Status - - - - {(tableItem: Item, index) => ( - { - console.log('where'); - }} - > - - {tableItem.paymentId} - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - )} - - - )} - - - - ); -}; - export const Table = TableTemplate.bind({}); // Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting -Table.storyName = 'Virtualized Table'; +Table.storyName = 'Basic Table'; From 43763816cae00e717d508c2f3a0e92dc508742bb Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 18 Feb 2025 14:55:57 +0530 Subject: [PATCH 91/97] chore: add component id --- packages/blade/src/components/Table/componentIds.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blade/src/components/Table/componentIds.ts b/packages/blade/src/components/Table/componentIds.ts index f9b790595c5..e5fef6a6891 100644 --- a/packages/blade/src/components/Table/componentIds.ts +++ b/packages/blade/src/components/Table/componentIds.ts @@ -12,6 +12,7 @@ const ComponentIds = { TableFooter: 'TableFooter', TableFooterRow: 'TableFooterRow', TableFooterCell: 'TableFooterCell', + VirtualizedTable: 'VirtualizedTable', TablePagination: 'TablePagination', }; From 8ac31e003aee815c4ebcc838fc106396dafca174 Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 18 Feb 2025 14:57:45 +0530 Subject: [PATCH 92/97] chore: remove extra stories --- .../VirtualizedTableAPI.stories.tsx | 8 +- .../VirtualizedTableHoverActions.stories.tsx | 169 ------------------ 2 files changed, 1 insertion(+), 176 deletions(-) delete mode 100644 packages/blade/src/components/Table/docs/APIStories/VirtualizedTableHoverActions.stories.tsx diff --git a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx index a11dcebd8d2..bfc453a6dc0 100644 --- a/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx +++ b/packages/blade/src/components/Table/docs/APIStories/VirtualizedTableAPI.stories.tsx @@ -78,13 +78,7 @@ const data: TableData = { const TableTemplate: StoryFn = () => { return ( - + ( - - ), - }, - }, -} as Meta; - -const nodes: Item[] = [ - ...Array.from({ length: 100 }, (_, i) => ({ - id: (i + 1).toString(), - paymentId: `rzp${Math.floor(Math.random() * 1000000)}`, - amount: Number((Math.random() * 10000).toFixed(2)), - status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], - date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1), - type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)], - method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)], - bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)], - account: Math.floor(Math.random() * 1000000000).toString(), - name: [ - 'John Doe', - 'Jane Doe', - 'Bob Smith', - 'Alice Smith', - 'John Smith', - 'Jane Smith', - 'Bob Doe', - 'Alice Doe', - ][Math.floor(Math.random() * 8)], - })), -]; - -type Item = { - id: string; - paymentId: string; - amount: number; - status: string; - date: Date; - type: string; - method: string; - bank: string; - account: string; - name: string; -}; -const data: TableData = { - nodes, -}; - -const TableTemplate: StoryFn = () => { - return ( - - - - - - - - } - > - {() => ( - - - - ID - Amount - Account - Date - Method - Status - - - - {(tableItem: Item, index) => ( - - console.log('copy', tableItem)} - /> - console.log('delete', tableItem)} - /> - - } - > - - {tableItem.paymentId} - - - - - {tableItem.account} - - {tableItem.date?.toLocaleDateString('en-IN', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - })} - - {tableItem.method} - - - {tableItem.status} - - - - )} - - - )} - - - ); -}; - -export const TableHoverActionsStory = TableTemplate.bind({}); -// Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting -TableHoverActionsStory.storyName = 'VirtualizedTableHoverActions'; From 28d180f0e5510cdf2682a1969d48a606f7c92abb Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 18 Feb 2025 15:15:10 +0530 Subject: [PATCH 93/97] refactor: isVirtualized code --- packages/blade/src/components/Table/Table.web.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index fedd2668cb7..5db0cc1f103 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -179,14 +179,7 @@ const _Table = ({ ); const [hasHoverActions, setHasHoverActions] = React.useState(false); const tableRootComponent = children([]); - const isVirtualized = (React.isValidElement<{ - header?: () => React.ReactElement; - children?: React.ReactNode; - }>(tableRootComponent) && - Array.isArray(tableRootComponent.props?.children) && - tableRootComponent.props.children?.length && - React.isValidElement<{ children?: React.ReactNode }>(tableRootComponent.props?.children[1]) && - typeof tableRootComponent.props?.children[1]?.props.children === 'function') as boolean; + const isVirtualized = getComponentId(tableRootComponent) === ComponentIds.VirtualizedTable; // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky; const backgroundColor = tableBackgroundColor; From 405e28756a8ac376be77c6921ca6d8caa7660c7e Mon Sep 17 00:00:00 2001 From: tewarig Date: Tue, 18 Feb 2025 15:44:28 +0530 Subject: [PATCH 94/97] chore: update snaps --- .../blade/src/components/Table/__tests__/Table.web.test.tsx | 1 + .../Table/__tests__/__snapshots__/Table.web.test.tsx.snap | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index aa90fbc658b..b578324a47b 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1218,6 +1218,7 @@ describe('
', () => { defaultSelectedIds={['1', '3']} rowDensity="normal" isFirstColumnSticky + height="500px" > {() => ( diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 6f7100d8bbd..373c4168078 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -9911,12 +9911,13 @@ exports[`
should render virtualized table 1`] = ` .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 { overflow: unset !important; + height: 500px; width: 100%; } .c1.c1.c1.c1.c1 > div { overflow: auto !important; - height: undefined !important; + height: 500px !important; width: 100% !important; } From 4e7ac3803adf8f495cf0c2f11b848f208909f934 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 19 Feb 2025 18:11:29 +0530 Subject: [PATCH 95/97] chore: change to local table node --- packages/blade/src/components/Table/TableContext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/TableContext.tsx b/packages/blade/src/components/Table/TableContext.tsx index f88856b1d01..08aae071046 100644 --- a/packages/blade/src/components/Table/TableContext.tsx +++ b/packages/blade/src/components/Table/TableContext.tsx @@ -7,7 +7,7 @@ import type { TableProps, TablePaginationType, TableHeaderRowProps, - TableNode as localTableNode, + TableNode as LocalTableNode, } from './types'; export type TableContextType = { @@ -44,7 +44,7 @@ export type TableContextType = { columnCount: number; gridTemplateColumns: string | undefined; isVirtualized?: boolean; - tableData: localTableNode[]; + tableData: LocalTableNode[]; }; const TableContext = React.createContext>({ From d743491bd76566a58f4d498ff14c4e3f686dba9c Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 19 Feb 2025 18:16:52 +0530 Subject: [PATCH 96/97] chore: update jsdocs --- packages/blade/src/components/Table/types.ts | 159 +++++++++---------- 1 file changed, 71 insertions(+), 88 deletions(-) diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 2a76de14b1f..ef35a5da99b 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -479,95 +479,79 @@ type TableToolbarActionsProps = { type VirtualizedWrapperProps = { /** - * - * - * - * - * - * - * } - * > - * {(tableData) => ( - * - * - * - * ID - * Amount - * Account - * Date - * Method - * Status - * - * - * > - * {(tableItem, index) => ( - * - * console.log('copy', tableItem)} - * /> - * console.log('delete', tableItem)} - * /> - * - * } - * > - * - * {tableItem.paymentId} - * - * - * - * - * {tableItem.account} - * - * {tableItem.date?.toLocaleDateString('en-IN', { - * year: 'numeric', - * month: '2-digit', - * day: '2-digit', - * })} - * - * {tableItem.method} - * - * - * {tableItem.status} - * - * - * - * )} - * - * - * )} - * + * + * @example + * + * + * + * + * + * + * } + * > + * {() => ( + * + * + * + * ID + * Amount + * Account + * Date + * Method + * Status + * + * + * + * {(tableItem: Item, index) => ( + * + * + * {tableItem.paymentId} + * + * + * + * + * {tableItem.account} + * + * {tableItem.date?.toLocaleDateString('en-IN', { + * year: 'numeric', + * month: '2-digit', + * day: '2-digit', + * })} + * + * {tableItem.method} + * + * + * {tableItem.status} + * + * + * + * )} + * + * + * )} + * * **/ + children: React.ReactNode; /** * headerHeight is the height of the header **/ @@ -581,7 +565,6 @@ type VirtualizedWrapperProps = { * **/ rowHeight?: (item: TableLibraryTableNode, index: number) => number; - children: React.ReactNode; }; export type { From 710433b9c95b0b8447317beadb2c6f1f6c332694 Mon Sep 17 00:00:00 2001 From: tewarig Date: Wed, 19 Feb 2025 18:25:35 +0530 Subject: [PATCH 97/97] chore: review changes --- packages/blade/src/components/Table/Table.web.tsx | 2 +- .../Table/__tests__/__snapshots__/Table.web.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 5db0cc1f103..862eaed02f5 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -537,7 +537,7 @@ const _Table = ({ )} {toolbar} should render virtualized table 1`] = ` class="c1 css-oiy9me-Table" data-blade-component="table" data-table-library_table="" - role="grid" + role="table" >