@@ -28,6 +28,7 @@ import type {
2828 TablePaginationType ,
2929 TableHeaderRowProps ,
3030} from './types' ;
31+ import { getTableBodyStyles } from './commonStyles' ;
3132import { makeBorderSize , makeMotionTime } from '~utils' ;
3233import { getComponentId , isValidAllowedChildren } from '~utils/isValidAllowedChildren' ;
3334import { throwBladeError } from '~utils/logger' ;
@@ -87,21 +88,42 @@ const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): nu
8788 return 0 ;
8889} ;
8990
90- const StyledReactTable = styled ( ReactTable ) < { $styledProps ?: { height ?: BoxProps [ 'height' ] } } > (
91- ( { $styledProps } ) => {
92- const { theme } = useTheme ( ) ;
93- const styledPropsCSSObject = getBaseBoxStyles ( {
94- theme,
95- height : $styledProps ?. height ,
96- } ) ;
97-
98- return {
99- '&&&' : {
100- ...styledPropsCSSObject ,
101- } ,
102- } ;
103- } ,
104- ) ;
91+ const StyledReactTable = styled ( ReactTable ) < {
92+ $styledProps ?: {
93+ height ?: BoxProps [ 'height' ] ;
94+ width ?: BoxProps [ 'width' ] ;
95+ isVirtualized ?: boolean ;
96+ isSelectable ?: boolean ;
97+ showStripedRows ?: boolean ;
98+ } ;
99+ } > ( ( { $styledProps } ) => {
100+ const { theme } = useTheme ( ) ;
101+ const styledPropsCSSObject = getBaseBoxStyles ( {
102+ theme,
103+ height : $styledProps ?. height ,
104+ ...( $styledProps ?. isVirtualized && {
105+ width : '100%' ,
106+ } ) ,
107+ } ) ;
108+ const $isSelectable = $styledProps ?. isSelectable ;
109+ const $showStripedRows = $styledProps ?. showStripedRows ;
110+ return {
111+ '&&&' : {
112+ ...styledPropsCSSObject ,
113+ overflow : `${ $styledProps ?. isVirtualized ? 'unset' : 'auto' } ,
114+ } ,
115+ ...( $styledProps ?. isVirtualized
116+ ? getTableBodyStyles ( {
117+ isVirtualized : $styledProps ?. isVirtualized ,
118+ theme,
119+ height : $styledProps ?. height ,
120+ width : '100%' ,
121+ isSelectable : $isSelectable ,
122+ showStripedRows : $showStripedRows ,
123+ } )
124+ : null ) ,
125+ } ;
126+ } ) ;
105127
106128const RefreshWrapper = styled ( BaseBox ) < {
107129 isRefreshSpinnerVisible : boolean ;
@@ -156,8 +178,10 @@ const _Table = <Item,>({
156178 undefined ,
157179 ) ;
158180 const [ hasHoverActions , setHasHoverActions ] = React . useState ( false ) ;
181+ const tableRootComponent = children ( [ ] ) ;
182+ const isVirtualized = getComponentId ( tableRootComponent ) === ComponentIds . VirtualizedTable ;
159183 // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky
160- const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky ;
184+ const shouldHeaderBeSticky = isVirtualized ?? isHeaderSticky ?? isFirstColumnSticky ;
161185 const backgroundColor = tableBackgroundColor ;
162186
163187 const isMobile = useIsMobile ( ) ;
@@ -265,7 +289,7 @@ const _Table = <Item,>({
265289 } , [ data . nodes ] ) ;
266290
267291 // Selection Logic
268- const onSelectChange : MiddlewareFunction = ( action , state ) : void => {
292+ const onSelectChange : MiddlewareFunction = ( _ , state ) : void => {
269293 const selectedIds : Identifier [ ] = state . id ? [ state . id ] : state . ids ?? [ ] ;
270294 setSelectedRows ( selectedIds ) ;
271295 onSelectionChange ?.( {
@@ -323,7 +347,7 @@ const _Table = <Item,>({
323347 ) ;
324348
325349 // Sort Logic
326- const handleSortChange : MiddlewareFunction = ( action , state ) => {
350+ const handleSortChange : MiddlewareFunction = ( _ , state ) => {
327351 onSortChange ?.( {
328352 sortKey : state . sortKey ,
329353 isSortReversed : state . reverse ,
@@ -341,7 +365,7 @@ const _Table = <Item,>({
341365 } ,
342366 ) ;
343367
344- const currentSortedState : TableContextType [ 'currentSortedState' ] = useMemo ( ( ) => {
368+ const currentSortedState : TableContextType < Item > [ 'currentSortedState' ] = useMemo ( ( ) => {
345369 return {
346370 sortKey : sort . state . sortKey ,
347371 isSortReversed : sort . state . reverse ,
@@ -409,7 +433,7 @@ const _Table = <Item,>({
409433 }
410434
411435 // Table Context
412- const tableContext : TableContextType = useMemo (
436+ const tableContext : TableContextType < Item > = useMemo (
413437 ( ) => ( {
414438 selectionType,
415439 selectedRows,
@@ -434,6 +458,10 @@ const _Table = <Item,>({
434458 showBorderedCells,
435459 hasHoverActions,
436460 setHasHoverActions,
461+ columnCount,
462+ gridTemplateColumns,
463+ isVirtualized,
464+ tableData : data . nodes ,
437465 } ) ,
438466 [
439467 selectionType ,
@@ -442,8 +470,10 @@ const _Table = <Item,>({
442470 toggleRowSelectionById ,
443471 toggleAllRowsSelection ,
444472 deselectAllRows ,
473+ gridTemplateColumns ,
445474 rowDensity ,
446475 toggleSort ,
476+ columnCount ,
447477 currentSortedState ,
448478 setPaginationPage ,
449479 setPaginationRowSize ,
@@ -459,6 +489,8 @@ const _Table = <Item,>({
459489 showBorderedCells ,
460490 hasHoverActions ,
461491 setHasHoverActions ,
492+ isVirtualized ,
493+ data ,
462494 ] ,
463495 ) ;
464496
@@ -484,6 +516,7 @@ const _Table = <Item,>({
484516 position = "relative"
485517 { ...getStyledProps ( rest ) }
486518 { ...metaAttribute ( { name : MetaConstants . Table } ) }
519+ width = { isVirtualized ? `100%` : undefined }
487520 >
488521 { isRefreshSpinnerMounted && (
489522 < RefreshWrapper
@@ -513,6 +546,10 @@ const _Table = <Item,>({
513546 sort = { sortFunctions ? sort : null }
514547 $styledProps = { {
515548 height,
549+ width : isVirtualized ? `100%` : undefined ,
550+ isVirtualized,
551+ isSelectable : selectionType !== 'none' ,
552+ showStripedRows,
516553 } }
517554 pagination = { hasPagination ? paginationConfig : null }
518555 { ...makeAccessible ( { multiSelectable : selectionType === 'multiple' } ) }
@@ -527,7 +564,6 @@ const _Table = <Item,>({
527564 </ TableContext . Provider >
528565 ) ;
529566} ;
530-
531567const Table = assignWithoutSideEffects ( _Table , {
532568 componentId : ComponentIds . Table ,
533569} ) ;
0 commit comments