feat: table in RB

src/Common/Helper.tsx

@@ -450,7 +450,7 @@ export function useAsync<T>(
             setState((state) => ({ ...state, loading: false }))
             return
         }
-        setState((state) => ({ ...state, dependencies: dependencyArray }))
+        setState((state) => ({ ...state, loading: true, dependencies: dependencyArray }))
         reload()
         return () =>
             setState((state) => ({

src/Common/PopupMenu.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { Modal } from './Modals/Modal'
 import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
 
@@ -155,19 +155,33 @@ const PopupMenu = ({
     )
 }
 
-const Button = ({
+const Button = forwardRef(({
     children = null,
     disabled = false,
     rootClassName = '',
     tabIndex = 0,
     onHover = false,
     isKebab = false,
     dataTestId = '',
-}: PopupMenuButtonType) => {
+}: PopupMenuButtonType, forwardedRef) => {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
+
+    const refCallback = (node) => {
+        initialiseButtonWidth.current = node
+
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node)
+            return
+        }
+
+        if (forwardedRef && typeof forwardedRef === 'object') {
+            forwardedRef.current = node
+        }
+    }
+
     return (
         <button
-            ref={initialiseButtonWidth}
+            ref={refCallback}
             type="button"
             tabIndex={tabIndex}
             disabled={disabled}
@@ -181,7 +195,7 @@ const Button = ({
             {children}
         </button>
     )
-}
+})
 
 const Body = ({
     children = null,

src/Shared/Components/Table/InternalTable.tsx

@@ -15,7 +15,7 @@ import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
 
 import { BulkSelection } from '../BulkSelection'
 import BulkSelectionActionWidget from './BulkSelectionActionWidget'
-import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, SHIMMER_DUMMY_ARRAY } from './constants'
+import { BULK_ACTION_GUTTER_LABEL, EVENT_TARGET, NO_ROWS_OR_GET_ROWS_ERROR, SHIMMER_DUMMY_ARRAY } from './constants'
 import { FiltersTypeEnum, InternalTableProps, PaginationEnum, SignalsType } from './types'
 import useTableWithKeyboardShortcuts from './useTableWithKeyboardShortcuts'
 import { getFilteringPromise, searchAndSortRows } from './utils'
@@ -42,6 +42,7 @@ const InternalTable = ({
     handleToggleBulkSelectionOnRow,
     paginationVariant,
     RowActionsOnHoverComponent,
+    children,
 }: InternalTableProps) => {
     const rowsContainerRef = useRef<HTMLDivElement>(null)
     const parentRef = useRef<HTMLDivElement>(null)
@@ -103,9 +104,9 @@ const InternalTable = ({
         [visibleColumns],
     )
 
-    const [areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
+    const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
         if (!rows && !getRows) {
-            throw new Error('Neither rows nor getRows function provided')
+            throw NO_ROWS_OR_GET_ROWS_ERROR
         }
 
         return getFilteringPromise({
@@ -120,6 +121,8 @@ const InternalTable = ({
         })
     }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, JSON.stringify(otherFilters)])
 
+    const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
+
     const bulkSelectionCount = getSelectedIdentifiersCount?.() ?? 0
 
     const visibleRows = useMemo(() => {
@@ -170,7 +173,7 @@ const InternalTable = ({
         paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
 
     const renderRows = () => {
-        if (loading && !visibleColumns.length) {
+        if (loading) {
             return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
                 <div
                     key={shimmerRowLabel}
@@ -257,7 +260,7 @@ const InternalTable = ({
                                     value={row.data[field]}
                                     signals={EVENT_TARGET as SignalsType}
                                     row={row}
-                                    filterData={filterData}
+                                    filterData={filterData as any}
                                     isRowActive={isRowActive}
                                     {...additionalProps}
                                 />
@@ -282,23 +285,23 @@ const InternalTable = ({
     }
 
     const renderContent = () => {
-        if (!areFilteredRowsLoading && !filteredRows?.length) {
+        if (filteredRowsError && !areFilteredRowsLoading && !loading) {
+            return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
+        }
+
+        if (!areFilteredRowsLoading && !filteredRows?.length && !loading) {
             return filtersVariant !== FiltersTypeEnum.NONE && isFilterApplied ? (
                 <GenericFilterEmptyState handleClearFilters={clearFilters} />
             ) : (
                 <GenericEmptyState {...emptyStateConfig.noRowsConfig} />
             )
         }
 
-        if (filteredRowsError && !areFilteredRowsLoading) {
-            return <ErrorScreenManager code={filteredRowsError.code} reload={reloadFilteredRows} />
-        }
-
         return (
             <div tabIndex={0} role="grid" className="generic-table flexbox-col dc__overflow-hidden flex-grow-1">
                 <div className="flexbox-col flex-grow-1 w-100 dc__overflow-auto" ref={parentRef}>
                     <div className="bg__primary dc__min-width-fit-content px-20 border__secondary--bottom">
-                        {loading && !visibleColumns.length ? (
+                        {loading ? (
                             <div className="flexbox py-12 dc__gap-16">
                                 {SHIMMER_DUMMY_ARRAY.map((label) => (
                                     <div key={label} className="shimmer w-180" />
@@ -312,7 +315,7 @@ const InternalTable = ({
                                 }}
                             >
                                 {visibleColumns.map(({ label, field, isSortable, size, showTippyOnTruncate }) => {
-                                    const isResizable = !!size.range
+                                    const isResizable = !!size?.range
 
                                     if (field === BULK_ACTION_GUTTER_LABEL) {
                                         return <BulkSelection key={field} showPagination={showPagination} />
@@ -361,10 +364,12 @@ const InternalTable = ({
                         changePage={changePage}
                         changePageSize={changePageSize}
                         offset={offset}
-                        rootClassName="border__primary--top flex dc__content-space px-20"
+                        rootClassName="border__secondary--top flex dc__content-space px-20"
                         size={filteredRows.length}
                     />
                 )}
+
+                {children}
             </div>
         )
     }

src/Shared/Components/Table/constants.ts

@@ -11,3 +11,5 @@ export const EVENT_TARGET = new EventTarget()
 export const DRAG_SELECTOR_IDENTIFIER = 'table-drag-selector'
 
 export const SHIMMER_DUMMY_ARRAY = [1, 2, 3]
+
+export const NO_ROWS_OR_GET_ROWS_ERROR = new Error('Neither rows nor getRows function provided')