diff --git a/src/frontend/src/components/Boundary.tsx b/src/frontend/src/components/Boundary.tsx
new file mode 100644
index 0000000000..6f317efb03
--- /dev/null
+++ b/src/frontend/src/components/Boundary.tsx
@@ -0,0 +1,44 @@
+import { t } from '@lingui/macro';
+import { Alert } from '@mantine/core';
+import { ErrorBoundary, FallbackRender } from '@sentry/react';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { ReactNode, useCallback } from 'react';
+
+function DefaultFallback({ title }: { title: String }): ReactNode {
+  return (
+    <Alert
+      color="red"
+      icon={<IconExclamationCircle />}
+      title={t`Error rendering component` + `: ${title}`}
+    >
+      {t`An error occurred while rendering this component. Refer to the console for more information.`}
+    </Alert>
+  );
+}
+
+export function Boundary({
+  children,
+  label,
+  fallback
+}: {
+  children: ReactNode;
+  label: string;
+  fallback?: React.ReactElement | FallbackRender | undefined;
+}): ReactNode {
+  const onError = useCallback(
+    (error: Error, componentStack: string, eventId: string) => {
+      console.error(`Error rendering component: ${label}`);
+      console.error(error, componentStack);
+    },
+    []
+  );
+
+  return (
+    <ErrorBoundary
+      fallback={fallback ?? <DefaultFallback title={label} />}
+      onError={onError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 20258df17c..74a3047048 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -36,6 +36,7 @@ import {
 import { invalidResponse } from '../../functions/notifications';
 import { getDetailUrl } from '../../functions/urls';
 import { PathParams } from '../../states/ApiState';
+import { Boundary } from '../Boundary';
 import {
   ApiFormField,
   ApiFormFieldSet,
@@ -472,81 +473,89 @@ export function ApiForm({
 
   return (
     <Stack>
-      {/* Show loading overlay while fetching fields */}
-      {/* zIndex used to force overlay on top of modal header bar */}
-      <LoadingOverlay visible={isLoading} zIndex={1010} />
+      <Boundary label={`ApiForm-${id}`}>
+        {/* Show loading overlay while fetching fields */}
+        {/* zIndex used to force overlay on top of modal header bar */}
+        <LoadingOverlay visible={isLoading} zIndex={1010} />
 
-      {/* Attempt at making fixed footer with scroll area */}
-      <Paper mah={'65vh'} style={{ overflowY: 'auto' }}>
-        <div>
-          {/* Form Fields */}
-          <Stack spacing="sm">
-            {(!isValid || nonFieldErrors.length > 0) && (
-              <Alert radius="sm" color="red" title={t`Form Errors Exist`}>
-                {nonFieldErrors.length > 0 && (
-                  <Stack spacing="xs">
-                    {nonFieldErrors.map((message) => (
-                      <Text key={message}>{message}</Text>
-                    ))}
-                  </Stack>
+        {/* Attempt at making fixed footer with scroll area */}
+        <Paper mah={'65vh'} style={{ overflowY: 'auto' }}>
+          <div>
+            {/* Form Fields */}
+            <Stack spacing="sm">
+              {(!isValid || nonFieldErrors.length > 0) && (
+                <Alert radius="sm" color="red" title={t`Form Errors Exist`}>
+                  {nonFieldErrors.length > 0 && (
+                    <Stack spacing="xs">
+                      {nonFieldErrors.map((message) => (
+                        <Text key={message}>{message}</Text>
+                      ))}
+                    </Stack>
+                  )}
+                </Alert>
+              )}
+              <Boundary label={`ApiForm-${id}-PreFormContent`}>
+                {props.preFormContent}
+                {props.preFormSuccess && (
+                  <Alert color="green" radius="sm">
+                    {props.preFormSuccess}
+                  </Alert>
                 )}
-              </Alert>
-            )}
-            {props.preFormContent}
-            {props.preFormSuccess && (
-              <Alert color="green" radius="sm">
-                {props.preFormSuccess}
-              </Alert>
-            )}
-            {props.preFormWarning && (
-              <Alert color="orange" radius="sm">
-                {props.preFormWarning}
-              </Alert>
-            )}
-            <FormProvider {...form}>
-              <Stack spacing="xs">
-                {!optionsLoading &&
-                  Object.entries(fields).map(([fieldName, field]) => (
-                    <ApiFormField
-                      key={fieldName}
-                      fieldName={fieldName}
-                      definition={field}
-                      control={form.control}
-                    />
-                  ))}
-              </Stack>
-            </FormProvider>
-            {props.postFormContent}
-          </Stack>
-        </div>
-      </Paper>
+                {props.preFormWarning && (
+                  <Alert color="orange" radius="sm">
+                    {props.preFormWarning}
+                  </Alert>
+                )}
+              </Boundary>
+              <Boundary label={`ApiForm-${id}-FormContent`}>
+                <FormProvider {...form}>
+                  <Stack spacing="xs">
+                    {!optionsLoading &&
+                      Object.entries(fields).map(([fieldName, field]) => (
+                        <ApiFormField
+                          key={fieldName}
+                          fieldName={fieldName}
+                          definition={field}
+                          control={form.control}
+                        />
+                      ))}
+                  </Stack>
+                </FormProvider>
+              </Boundary>
+              <Boundary label={`ApiForm-${id}-PostFormContent`}>
+                {props.postFormContent}
+              </Boundary>
+            </Stack>
+          </div>
+        </Paper>
 
-      {/* Footer with Action Buttons */}
-      <Divider />
-      <div>
-        <Group position="right">
-          {props.actions?.map((action, i) => (
+        {/* Footer with Action Buttons */}
+        <Divider />
+        <div>
+          <Group position="right">
+            {props.actions?.map((action, i) => (
+              <Button
+                key={i}
+                onClick={action.onClick}
+                variant={action.variant ?? 'outline'}
+                radius="sm"
+                color={action.color}
+              >
+                {action.text}
+              </Button>
+            ))}
             <Button
-              key={i}
-              onClick={action.onClick}
-              variant={action.variant ?? 'outline'}
+              onClick={form.handleSubmit(submitForm, onFormError)}
+              variant="filled"
               radius="sm"
-              color={action.color}
+              color={props.submitColor ?? 'green'}
+              disabled={isLoading || (props.fetchInitialData && !isDirty)}
             >
-              {action.text}
+              {props.submitText ?? t`Submit`}
             </Button>
-          ))}
-          <Button
-            onClick={form.handleSubmit(submitForm, onFormError)}
-            variant="filled"
-            radius="sm"
-            color={props.submitColor ?? 'green'}
-            disabled={isLoading || (props.fetchInitialData && !isDirty)}
-          >
-            {props.submitText ?? t`Submit`}
-          </Button>
-        </Group>
-      </div>
+          </Group>
+        </div>
+      </Boundary>
     </Stack>
   );
 }
diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index d1e8a69264..1290d4ee25 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -8,6 +8,7 @@ import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { getActions } from '../../defaults/actions';
 import { InvenTreeStyle } from '../../globalStyle';
 import { useUserState } from '../../states/UserState';
+import { Boundary } from '../Boundary';
 import { Footer } from './Footer';
 import { Header } from './Header';
 
@@ -29,17 +30,17 @@ export default function LayoutComponent() {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const defaultactions = getActions(navigate);
-  const [actions, setActions] = useState(defaultactions);
+  const defaultActions = getActions(navigate);
+  const [actions, setActions] = useState(defaultActions);
   const [customActions, setCustomActions] = useState<boolean>(false);
 
   function actionsAreChanging(change: []) {
-    if (change.length > defaultactions.length) setCustomActions(true);
+    if (change.length > defaultActions.length) setCustomActions(true);
     setActions(change);
   }
   useEffect(() => {
     if (customActions) {
-      setActions(defaultactions);
+      setActions(defaultActions);
       setCustomActions(false);
     }
   }, [location]);
@@ -57,7 +58,10 @@ export default function LayoutComponent() {
         <Flex direction="column" mih="100vh">
           <Header />
           <Container className={classes.layoutContent} size="100%">
-            <Outlet />
+            <Boundary label={'layout'}>
+              <Outlet />
+            </Boundary>
+            {/* </ErrorBoundary> */}
           </Container>
           <Space h="xl" />
           <Footer />
diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx
index 687d0f1b32..26779a3266 100644
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -20,6 +20,7 @@ import {
 } from 'react-router-dom';
 
 import { useLocalState } from '../../states/LocalState';
+import { Boundary } from '../Boundary';
 import { PlaceholderPanel } from '../items/Placeholder';
 import { StylishText } from '../items/StylishText';
 
@@ -103,77 +104,81 @@ function BasePanelGroup({
   const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
-    <Paper p="sm" radius="xs" shadow="xs">
-      <Tabs
-        value={panel}
-        orientation="vertical"
-        onTabChange={handlePanelChange}
-        keepMounted={false}
-      >
-        <Tabs.List position="left">
+    <Boundary label={`PanelGroup-${pageKey}`}>
+      <Paper p="sm" radius="xs" shadow="xs">
+        <Tabs
+          value={panel}
+          orientation="vertical"
+          onTabChange={handlePanelChange}
+          keepMounted={false}
+        >
+          <Tabs.List position="left">
+            {panels.map(
+              (panel) =>
+                !panel.hidden && (
+                  <Tooltip
+                    label={panel.label}
+                    key={panel.name}
+                    disabled={expanded}
+                  >
+                    <Tabs.Tab
+                      p="xs"
+                      value={panel.name}
+                      //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
+                      icon={panel.icon}
+                      hidden={panel.hidden}
+                      disabled={panel.disabled}
+                      style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
+                    >
+                      {expanded && panel.label}
+                    </Tabs.Tab>
+                  </Tooltip>
+                )
+            )}
+            {collapsible && (
+              <ActionIcon
+                style={{
+                  paddingLeft: '10px'
+                }}
+                onClick={() => setExpanded(!expanded)}
+              >
+                {expanded ? (
+                  <IconLayoutSidebarLeftCollapse opacity={0.5} />
+                ) : (
+                  <IconLayoutSidebarRightCollapse opacity={0.5} />
+                )}
+              </ActionIcon>
+            )}
+          </Tabs.List>
           {panels.map(
             (panel) =>
               !panel.hidden && (
-                <Tooltip
-                  label={panel.label}
+                <Tabs.Panel
                   key={panel.name}
-                  disabled={expanded}
+                  value={panel.name}
+                  p="sm"
+                  style={{
+                    overflowX: 'scroll',
+                    width: '100%'
+                  }}
                 >
-                  <Tabs.Tab
-                    p="xs"
-                    value={panel.name}
-                    //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
-                    icon={panel.icon}
-                    hidden={panel.hidden}
-                    disabled={panel.disabled}
-                    style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
-                  >
-                    {expanded && panel.label}
-                  </Tabs.Tab>
-                </Tooltip>
+                  <Stack spacing="md">
+                    {panel.showHeadline !== false && (
+                      <>
+                        <StylishText size="xl">{panel.label}</StylishText>
+                        <Divider />
+                      </>
+                    )}
+                    <Boundary label={`PanelContent-${panel.name}`}>
+                      {panel.content ?? <PlaceholderPanel />}
+                    </Boundary>
+                  </Stack>
+                </Tabs.Panel>
               )
           )}
-          {collapsible && (
-            <ActionIcon
-              style={{
-                paddingLeft: '10px'
-              }}
-              onClick={() => setExpanded(!expanded)}
-            >
-              {expanded ? (
-                <IconLayoutSidebarLeftCollapse opacity={0.5} />
-              ) : (
-                <IconLayoutSidebarRightCollapse opacity={0.5} />
-              )}
-            </ActionIcon>
-          )}
-        </Tabs.List>
-        {panels.map(
-          (panel) =>
-            !panel.hidden && (
-              <Tabs.Panel
-                key={panel.name}
-                value={panel.name}
-                p="sm"
-                style={{
-                  overflowX: 'scroll',
-                  width: '100%'
-                }}
-              >
-                <Stack spacing="md">
-                  {panel.showHeadline !== false && (
-                    <>
-                      <StylishText size="xl">{panel.label}</StylishText>
-                      <Divider />
-                    </>
-                  )}
-                  {panel.content ?? <PlaceholderPanel />}
-                </Stack>
-              </Tabs.Panel>
-            )
-        )}
-      </Tabs>
-    </Paper>
+        </Tabs>
+      </Paper>
+    </Boundary>
   );
 }
 
diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index d6b491f926..5381f07da6 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -36,6 +36,7 @@ import { UserRoles } from '../../enums/Roles';
 import { apiUrl } from '../../states/ApiState';
 import { useUserSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
+import { Boundary } from '../Boundary';
 import { RenderInstance } from '../render/Instance';
 import { ModelInformationDict } from '../render/ModelType';
 
@@ -386,48 +387,50 @@ export function SearchDrawer({
         </Group>
       }
     >
-      {searchQuery.isFetching && (
-        <Center>
-          <Loader />
-        </Center>
-      )}
-      {!searchQuery.isFetching && !searchQuery.isError && (
-        <Stack spacing="md">
-          {queryResults.map((query, idx) => (
-            <QueryResultGroup
-              key={idx}
-              query={query}
-              onRemove={(query) => removeResults(query)}
-              onResultClick={(query, pk) => onResultClick(query, pk)}
-            />
-          ))}
-        </Stack>
-      )}
-      {searchQuery.isError && (
-        <Alert
-          color="red"
-          radius="sm"
-          variant="light"
-          title={t`Error`}
-          icon={<IconAlertCircle size="1rem" />}
-        >
-          <Trans>An error occurred during search query</Trans>
-        </Alert>
-      )}
-      {searchText &&
-        !searchQuery.isFetching &&
-        !searchQuery.isError &&
-        queryResults.length == 0 && (
+      <Boundary label="SearchDrawer">
+        {searchQuery.isFetching && (
+          <Center>
+            <Loader />
+          </Center>
+        )}
+        {!searchQuery.isFetching && !searchQuery.isError && (
+          <Stack spacing="md">
+            {queryResults.map((query, idx) => (
+              <QueryResultGroup
+                key={idx}
+                query={query}
+                onRemove={(query) => removeResults(query)}
+                onResultClick={(query, pk) => onResultClick(query, pk)}
+              />
+            ))}
+          </Stack>
+        )}
+        {searchQuery.isError && (
           <Alert
-            color="blue"
+            color="red"
             radius="sm"
             variant="light"
-            title={t`No results`}
-            icon={<IconSearch size="1rem" />}
+            title={t`Error`}
+            icon={<IconAlertCircle size="1rem" />}
           >
-            <Trans>No results available for search query</Trans>
+            <Trans>An error occurred during search query</Trans>
           </Alert>
         )}
+        {searchText &&
+          !searchQuery.isFetching &&
+          !searchQuery.isError &&
+          queryResults.length == 0 && (
+            <Alert
+              color="blue"
+              radius="sm"
+              variant="light"
+              title={t`No results`}
+              icon={<IconSearch size="1rem" />}
+            >
+              <Trans>No results available for search query</Trans>
+            </Alert>
+          )}
+      </Boundary>
     </Drawer>
   );
 }
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index 8f6e0d64b3..083a3d5511 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -29,6 +29,7 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../App';
+import { Boundary } from '../components/Boundary';
 import { ActionButton } from '../components/buttons/ActionButton';
 import { ButtonMenu } from '../components/buttons/ButtonMenu';
 import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
@@ -557,131 +558,135 @@ export function InvenTreeTable<T = any>({
           onClose={() => setFiltersVisible(false)}
         />
       )}
-      <Stack spacing="sm">
-        <Group position="apart">
-          <Group position="left" key="custom-actions" spacing={5}>
-            {tableProps.tableActions?.map((group, idx) => (
-              <Fragment key={idx}>{group}</Fragment>
-            ))}
-            {(tableProps.barcodeActions?.length ?? 0 > 0) && (
-              <ButtonMenu
-                key="barcode-actions"
-                icon={<IconBarcode />}
-                label={t`Barcode actions`}
-                tooltip={t`Barcode actions`}
-                actions={tableProps.barcodeActions ?? []}
-              />
-            )}
-            {(tableProps.printingActions?.length ?? 0 > 0) && (
-              <ButtonMenu
-                key="printing-actions"
-                icon={<IconPrinter />}
-                label={t`Print actions`}
-                tooltip={t`Print actions`}
-                actions={tableProps.printingActions ?? []}
-              />
-            )}
-            {(tableProps.enableBulkDelete ?? false) && (
-              <ActionButton
-                disabled={tableState.selectedRecords.length == 0}
-                icon={<IconTrash />}
-                color="red"
-                tooltip={t`Delete selected records`}
-                onClick={deleteSelectedRecords}
-              />
-            )}
-          </Group>
-          <Space />
-          <Group position="right" spacing={5}>
-            {tableProps.enableSearch && (
-              <TableSearchInput
-                searchCallback={(term: string) =>
-                  tableState.setSearchTerm(term)
-                }
-              />
-            )}
-            {tableProps.enableRefresh && (
-              <ActionIcon>
-                <Tooltip label={t`Refresh data`}>
-                  <IconRefresh onClick={() => refetch()} />
-                </Tooltip>
-              </ActionIcon>
-            )}
-            {hasSwitchableColumns && (
-              <TableColumnSelect
-                columns={dataColumns}
-                onToggleColumn={toggleColumn}
-              />
-            )}
-            {tableProps.enableFilters && filters.length > 0 && (
-              <Indicator
-                size="xs"
-                label={tableState.activeFilters?.length ?? 0}
-                disabled={tableState.activeFilters?.length == 0}
-              >
+      <Boundary label="inventreetable">
+        <Stack spacing="sm">
+          <Group position="apart">
+            <Group position="left" key="custom-actions" spacing={5}>
+              {tableProps.tableActions?.map((group, idx) => (
+                <Fragment key={idx}>{group}</Fragment>
+              ))}
+              {(tableProps.barcodeActions?.length ?? 0 > 0) && (
+                <ButtonMenu
+                  key="barcode-actions"
+                  icon={<IconBarcode />}
+                  label={t`Barcode actions`}
+                  tooltip={t`Barcode actions`}
+                  actions={tableProps.barcodeActions ?? []}
+                />
+              )}
+              {(tableProps.printingActions?.length ?? 0 > 0) && (
+                <ButtonMenu
+                  key="printing-actions"
+                  icon={<IconPrinter />}
+                  label={t`Print actions`}
+                  tooltip={t`Print actions`}
+                  actions={tableProps.printingActions ?? []}
+                />
+              )}
+              {(tableProps.enableBulkDelete ?? false) && (
+                <ActionButton
+                  disabled={tableState.selectedRecords.length == 0}
+                  icon={<IconTrash />}
+                  color="red"
+                  tooltip={t`Delete selected records`}
+                  onClick={deleteSelectedRecords}
+                />
+              )}
+            </Group>
+            <Space />
+            <Group position="right" spacing={5}>
+              {tableProps.enableSearch && (
+                <TableSearchInput
+                  searchCallback={(term: string) =>
+                    tableState.setSearchTerm(term)
+                  }
+                />
+              )}
+              {tableProps.enableRefresh && (
                 <ActionIcon>
-                  <Tooltip label={t`Table filters`}>
-                    <IconFilter
-                      onClick={() => setFiltersVisible(!filtersVisible)}
-                    />
+                  <Tooltip label={t`Refresh data`}>
+                    <IconRefresh onClick={() => refetch()} />
                   </Tooltip>
                 </ActionIcon>
-              </Indicator>
-            )}
-            {tableProps.enableDownload && (
-              <DownloadAction
-                key="download-action"
-                downloadCallback={downloadData}
-              />
-            )}
+              )}
+              {hasSwitchableColumns && (
+                <TableColumnSelect
+                  columns={dataColumns}
+                  onToggleColumn={toggleColumn}
+                />
+              )}
+              {tableProps.enableFilters && filters.length > 0 && (
+                <Indicator
+                  size="xs"
+                  label={tableState.activeFilters?.length ?? 0}
+                  disabled={tableState.activeFilters?.length == 0}
+                >
+                  <ActionIcon>
+                    <Tooltip label={t`Table filters`}>
+                      <IconFilter
+                        onClick={() => setFiltersVisible(!filtersVisible)}
+                      />
+                    </Tooltip>
+                  </ActionIcon>
+                </Indicator>
+              )}
+              {tableProps.enableDownload && (
+                <DownloadAction
+                  key="download-action"
+                  downloadCallback={downloadData}
+                />
+              )}
+            </Group>
           </Group>
-        </Group>
-        <Box pos="relative">
-          <LoadingOverlay
-            visible={tableOptionQuery.isLoading || tableOptionQuery.isFetching}
-          />
-
-          <DataTable
-            withBorder
-            striped
-            highlightOnHover
-            loaderVariant="dots"
-            pinLastColumn={tableProps.rowActions != undefined}
-            idAccessor={tableProps.idAccessor}
-            minHeight={300}
-            totalRecords={tableState.recordCount}
-            recordsPerPage={tableProps.pageSize ?? defaultPageSize}
-            page={tableState.page}
-            onPageChange={tableState.setPage}
-            sortStatus={sortStatus}
-            onSortStatusChange={handleSortStatusChange}
-            selectedRecords={
-              tableProps.enableSelection
-                ? tableState.selectedRecords
-                : undefined
-            }
-            onSelectedRecordsChange={
-              tableProps.enableSelection ? onSelectedRecordsChange : undefined
-            }
-            rowExpansion={tableProps.rowExpansion}
-            rowStyle={tableProps.rowStyle}
-            fetching={isFetching}
-            noRecordsText={missingRecordsText}
-            records={tableState.records}
-            columns={dataColumns}
-            onRowClick={handleRowClick}
-            onCellClick={tableProps.onCellClick}
-            defaultColumnProps={{
-              noWrap: true,
-              textAlignment: 'left',
-              cellsStyle: {
-                // TODO @SchrodingersGat : Need a better way of handling "wide" cells,
-                overflow: 'hidden'
+          <Box pos="relative">
+            <LoadingOverlay
+              visible={
+                tableOptionQuery.isLoading || tableOptionQuery.isFetching
               }
-            }}
-          />
-        </Box>
-      </Stack>
+            />
+
+            <DataTable
+              withBorder
+              striped
+              highlightOnHover
+              loaderVariant="dots"
+              pinLastColumn={tableProps.rowActions != undefined}
+              idAccessor={tableProps.idAccessor}
+              minHeight={300}
+              totalRecords={tableState.recordCount}
+              recordsPerPage={tableProps.pageSize ?? defaultPageSize}
+              page={tableState.page}
+              onPageChange={tableState.setPage}
+              sortStatus={sortStatus}
+              onSortStatusChange={handleSortStatusChange}
+              selectedRecords={
+                tableProps.enableSelection
+                  ? tableState.selectedRecords
+                  : undefined
+              }
+              onSelectedRecordsChange={
+                tableProps.enableSelection ? onSelectedRecordsChange : undefined
+              }
+              rowExpansion={tableProps.rowExpansion}
+              rowStyle={tableProps.rowStyle}
+              fetching={isFetching}
+              noRecordsText={missingRecordsText}
+              records={tableState.records}
+              columns={dataColumns}
+              onRowClick={handleRowClick}
+              onCellClick={tableProps.onCellClick}
+              defaultColumnProps={{
+                noWrap: true,
+                textAlignment: 'left',
+                cellsStyle: {
+                  // TODO @SchrodingersGat : Need a better way of handling "wide" cells,
+                  overflow: 'hidden'
+                }
+              }}
+            />
+          </Box>
+        </Stack>
+      </Boundary>
     </>
   );
 }