create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppTable/table/components/TableComponent.tsx

@@ -0,0 +1,567 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type ReactElement,
+  type RefAttributes,
+} from 'react'
+import { useLocale } from '@/locale'
+import 'handsontable/styles/handsontable.min.css'
+import 'handsontable/styles/ht-theme-main.min.css'
+import { cn } from '@/lib/utils'
+import { useUnsavedChangesRegistration } from '@/context/UnsavedChangesProvider'
+import { createTableIntlFormatter } from '@/components/AppTable/engine/cell/formatting'
+import { createSearchModel } from '@/components/AppTable/engine/search/query'
+import { resolveTableLoadingMask } from '@/components/AppTable/engine/shared/feedback'
+import { resolveTableKey } from '@/components/AppTable/engine/shared/tableKey'
+import type {
+  TableRow,
+  TableRowInteractionContext,
+} from '@/components/AppTable/engine/shared/types'
+import { type TableController } from '@/components/AppTable/engine/table/controller/TableController'
+import {
+  createTableCellComponentSession,
+  createTableCellLayer,
+  TableCellComponentLayer,
+  TableCellLayer,
+} from '../../cell'
+import { useTableColumnPreferenceActions } from '../../columns/useTableColumnPreferenceActions'
+import {
+  createTableComponentPropsResolver,
+  type TableConfiguration,
+} from '../../config'
+import {
+  AppTableMessagesContext,
+  resolveAppTableMessages,
+} from '../../messages'
+import { TablePaginationBar } from '../../pagination'
+import { useTablePreference } from '../../preference'
+import { useTableReporting } from '../../reporting'
+import { TableSearchBar, useTableQuery } from '../../search'
+import { useTableSelection } from '../../selection'
+import '../../styles/index.css'
+import { TableToolbar } from '../../toolbar'
+import { useTableController, useTableLifecycle } from '../controller'
+import { useTableGrid } from '../grid'
+import {
+  TablePanelRegion,
+  resolveTableInitialGridHeight,
+  useTableAdaptiveHeight,
+  useTablePanels,
+  useTableTheme,
+} from '../layout'
+import { TableErrorFeedback } from './TableErrorFeedback'
+import { TableGridViewport } from './TableGridViewport'
+import type { ITableComponentProps } from './types'
+
+function TableComponentInner<T extends TableRow>(
+  {
+    tableKey: strConfiguredTableKey,
+    controller: objExternalController,
+    layoutTransitioning: bLayoutTransitioning = false,
+    config: objConfig,
+    className,
+    bProtectUnsavedChanges = true,
+    onDataChange,
+    onCellChange,
+    onDirtyChange,
+    onSelectionChange,
+    onSelectionEnd,
+    onRowClick,
+    onRowDoubleClick,
+    onQuery,
+    onQuerySuccess,
+    onPageChange,
+    onPageSizeChange,
+    onSummarySuccess,
+    onExportSuccess,
+    onExportJob,
+    onError,
+    renderEmpty,
+    renderPagination,
+  }: ITableComponentProps<T>,
+  objRef: ForwardedRef<TableController<T>>
+) {
+  const strTableKey = resolveTableKey(strConfiguredTableKey)
+  const fnHandleDataChange = onDataChange
+  const fnHandleCellChange = onCellChange
+  const fnHandleSelectionChange = onSelectionChange
+  const fnHandleQuery = onQuery
+  const fnHandleError = onError
+  const fnHandleRenderEmpty = renderEmpty
+  const fnHandleRowClick = useCallback(
+    (objContext: TableRowInteractionContext<T>) =>
+      onRowClick?.(objContext.row, objContext.rowIndex, objContext),
+    [onRowClick]
+  )
+  const objContainerRef = useRef<HTMLDivElement>(null)
+  const objFixedEndShadowRef = useRef<HTMLDivElement>(null)
+  const [fnResolveProps] = useState(() =>
+    createTableComponentPropsResolver<T>()
+  )
+  const objResolvedProps = useMemo(
+    () =>
+      fnResolveProps({
+        tableKey: strTableKey,
+        controller: objExternalController,
+        config: objConfig,
+      }),
+    [fnResolveProps, objConfig, objExternalController, strTableKey]
+  )
+  const [strUiError, fnSetUiError] = useState<string | null>(null)
+  const [strSelectedCellSum, fnSetSelectedCellSum] = useState<string | null>(
+    null
+  )
+  const fnReportError = useCallback(
+    (objError: unknown) => {
+      fnSetUiError(
+        objError instanceof Error ? objError.message : String(objError)
+      )
+      fnHandleError?.(objError)
+    },
+    [fnHandleError]
+  )
+  const {
+    arrAllConditions,
+    arrOrderedConditions,
+    arrConditionOrder,
+    arrHiddenConditionKeys,
+    fnApplySearchConditionChanges,
+    objPreference,
+    bReady: bPreferenceReady,
+    arrColumns: arrPreferredColumns,
+    nPreferredPageSize,
+    strPreferredDensity,
+    fnUpdatePreference,
+    objSession: objPreferenceSession,
+  } = useTablePreference({
+    strTableKey,
+    objProps: objResolvedProps,
+    fnReportError,
+  })
+  const { objController, objSnapshot, bOwnsController } = useTableController({
+    strTableKey,
+    objExternalController,
+    objProps: objResolvedProps,
+    fnReportError,
+  })
+  useUnsavedChangesRegistration({
+    bIsDirty: objSnapshot.isDirty,
+    bEnabled: bProtectUnsavedChanges,
+  })
+  useEffect(() => {
+    onDirtyChange?.(objSnapshot.isDirty, objController.snapshot)
+  }, [objController, objSnapshot.isDirty, onDirtyChange])
+  useEffect(() => {
+    objController.bindPreferenceSession(objPreferenceSession)
+    return () => objController.bindPreferenceSession(null)
+  }, [objController, objPreferenceSession])
+  useImperativeHandle(objRef, () => objController, [objController])
+  const [objCellLayer] = useState(() =>
+    createTableCellLayer({
+      tableKey: strTableKey,
+      onActionError: fnReportError,
+      onOptionLoadError: fnReportError,
+    })
+  )
+  const [objCellComponentSession] = useState(() =>
+    createTableCellComponentSession()
+  )
+  const objFormatter = useMemo(
+    () =>
+      createTableIntlFormatter({
+        locale: objResolvedProps.locale,
+        timeZone: objResolvedProps.timeZone,
+      }),
+    [objResolvedProps.locale, objResolvedProps.timeZone]
+  )
+  const objReporting = useTableReporting({
+    strTableKey,
+    objController,
+    objSnapshot,
+    objProps: objResolvedProps,
+    arrColumns: arrPreferredColumns,
+    objPreference,
+    objFormatter,
+    fnOnSummarySuccess: onSummarySuccess,
+    fnOnExportSuccess: onExportSuccess,
+    fnOnExportJob: onExportJob,
+    fnReportError,
+  })
+  const objSelection = useTableSelection({
+    strTableKey,
+    objController,
+    objSnapshot,
+    objProps: objResolvedProps,
+    fnOnChange: fnHandleSelectionChange,
+    fnOnSelectionSummary:
+      objReporting.objSummaryOptions?.scope === 'selection'
+        ? objReporting.fnRefreshSummary
+        : undefined,
+    fnReportError,
+  })
+  const objPanels = useTablePanels({
+    objController,
+    objSnapshot,
+    objProps: objResolvedProps,
+    objPreference,
+    fnUpdatePreference,
+  })
+  const { fnCollapseOnQuery, fnOpenRowDetailPanel } = objPanels
+  const { fnCancelSelectionTokenRequest } = objSelection
+  const fnHandleRowDoubleClick = useCallback(
+    (objContext: TableRowInteractionContext<T>) => {
+      onRowDoubleClick?.(objContext.row, objContext.rowIndex, objContext)
+      if (
+        objResolvedProps.rowDetailPanel &&
+        objResolvedProps.rowDetailPanel.openOnDoubleClick !== false
+      ) {
+        fnOpenRowDetailPanel(objContext.row)
+      }
+    },
+    [fnOpenRowDetailPanel, objResolvedProps.rowDetailPanel, onRowDoubleClick]
+  )
+  const fnBeforeQuery = useCallback(() => {
+    fnCancelSelectionTokenRequest()
+    fnCollapseOnQuery()
+  }, [fnCancelSelectionTokenRequest, fnCollapseOnQuery])
+  const {
+    objPagination,
+    objSearchModel,
+    fnSetSearchModel,
+    nPage,
+    nPageSize,
+    objRemoteOptions,
+    objRemoteLoading,
+    bInitialQuerySettled,
+    fnLoadRemoteSearchOptions,
+    fnRunQuery,
+    fnChangePagination,
+  } = useTableQuery({
+    strTableKey,
+    objController,
+    objProps: objResolvedProps,
+    arrSearchConditions: arrOrderedConditions,
+    arrAllSearchConditions: arrAllConditions,
+    fnOnQuery: fnHandleQuery,
+    fnOnQuerySuccess: onQuerySuccess,
+    fnOnDataChange: fnHandleDataChange,
+    fnOnSelectionChange: objSelection.fnEmitSelection,
+    fnBeforeQuery,
+    fnReportError,
+    fnClearError: () => fnSetUiError(null),
+    bPreferenceReady,
+    nPreferredPageSize,
+    fnUpdatePreference,
+  })
+  const {
+    objSectionRef,
+    objThemeController,
+    strDensity,
+    fnSyncThemeTokens,
+    fnChangeDensity,
+  } = useTableTheme({
+    strTableKey,
+    objProps: objResolvedProps,
+    objController,
+    objContainerRef,
+    fnReportError,
+    strPreferredDensity,
+    fnUpdatePreference,
+  })
+  const [objGridHeight, fnSetGridHeight] = useState<number>(() =>
+    resolveTableInitialGridHeight(objResolvedProps.height)
+  )
+  const { bHeightReady } = useTableAdaptiveHeight({
+    objSectionRef,
+    objContainerRef,
+    objController,
+    objHeight: objResolvedProps.height,
+    nRowCount: objSnapshot.rows.length,
+    bWaitForFirstStableHeight: Boolean(
+      objResolvedProps.query && objResolvedProps.autoQuery
+    ),
+    bCanReveal: bInitialQuerySettled,
+    bLayoutTransitioning,
+    fnSetGridHeight,
+  })
+  const objGridSettings = useTableGrid({
+    objContainerRef,
+    objFixedEndShadowRef,
+    objProps: objResolvedProps,
+    arrColumns: arrPreferredColumns,
+    objPreference,
+    fnUpdatePreference,
+    objHeight: objGridHeight,
+    objController,
+    objSnapshot,
+    objSelectionHeaderState: objSelection.objSelectionHeaderState,
+    objPagination,
+    objLayer: objCellLayer.adapter,
+    objCellComponentSession,
+    objFormatter,
+    objThemeController,
+    nPage,
+    nPageSize,
+    fnReportError,
+    fnOnDataChange: fnHandleDataChange,
+    fnOnCellChange: fnHandleCellChange,
+    fnOnSelectionChange: objSelection.fnEmitSelection,
+    fnOnSelectionEnd: onSelectionEnd,
+    fnOnRowClick: fnHandleRowClick,
+    fnOnRowDoubleClick: fnHandleRowDoubleClick,
+    fnOnSelectedCellSumChange: fnSetSelectedCellSum,
+    arrSummaryColumns: objReporting.arrSummaryColumns,
+    strSummaryLabel: objReporting.strSummaryLabel,
+    objSummaryResult: objReporting.objSummaryResult,
+    nSummaryRevision: objReporting.nSummaryRevision,
+    fnRefreshSummary: objReporting.fnRefreshSummary,
+  })
+  useTableLifecycle({
+    objContainerRef,
+    objController,
+    objGridSettings,
+    objLayer: objCellLayer.adapter,
+    fnDestroyCellComponentSession: objCellComponentSession.destroy,
+    bOwnsController,
+    bReady: bPreferenceReady,
+    bLayoutTransitioning,
+    fnSyncThemeTokens,
+  })
+
+  const { fnApplyColumnChanges, fnResetColumnPreference, fnSetFrozenRows } =
+    useTableColumnPreferenceActions({
+      objProps: objResolvedProps,
+      nRowCount: objSnapshot.rows.length,
+      fnUpdatePreference,
+      fnReportError,
+    })
+
+  const arrSelectedRows = objSelection.arrSelectedRows
+  const bShowLoadingMask = resolveTableLoadingMask(
+    objResolvedProps.loadingMask,
+    objSnapshot.loading || !bInitialQuerySettled,
+    objSnapshot.rows.length
+  )
+  const fnHandlePaginationChange = useCallback(
+    (nNextPage: number, nNextPageSize: number) => {
+      const nPreviousPageSize = nPageSize
+      void fnChangePagination(nNextPage, nNextPageSize).then((bApplied) => {
+        if (!bApplied) return
+        if (nNextPageSize !== nPreviousPageSize) {
+          onPageSizeChange?.(nNextPageSize, nNextPage)
+        } else {
+          onPageChange?.(nNextPage, nNextPageSize)
+        }
+      })
+    },
+    [fnChangePagination, nPageSize, onPageChange, onPageSizeChange]
+  )
+  const objFeedback = objResolvedProps.feedback
+  const bShowErrorFeedback =
+    objFeedback !== false && objFeedback.queryError !== false
+  const objEmptyState =
+    objFeedback === false || objFeedback.emptyState === false
+      ? undefined
+      : objFeedback.emptyState
+
+  const fnSaveChanges = useCallback(async () => {
+    fnSetUiError(null)
+    try {
+      await objController.saveChanges()
+    } catch (objError) {
+      fnReportError(objError)
+    }
+  }, [fnReportError, objController])
+
+  return (
+    <section
+      ref={objSectionRef}
+      className={cn(
+        'table-component hgw-table-theme flex h-auto max-h-full min-h-0 w-full flex-col overflow-hidden rounded-md border border-border bg-background',
+        className
+      )}
+    >
+      {objResolvedProps.showSearch && arrAllConditions.length ? (
+        <TableSearchBar
+          strTableKey={strTableKey}
+          arrConditions={arrOrderedConditions}
+          arrAllConditions={arrAllConditions}
+          arrHiddenConditionKeys={arrHiddenConditionKeys}
+          arrConditionOrder={arrConditionOrder}
+          objModel={objSearchModel}
+          objRemoteOptions={objRemoteOptions}
+          objRemoteLoading={objRemoteLoading}
+          objLayout={objResolvedProps.searchLayout}
+          bLoading={objSnapshot.loading}
+          bLayoutTransitioning={bLayoutTransitioning}
+          fnOnRemoteQuery={(objCondition, strQuery) =>
+            void fnLoadRemoteSearchOptions(objCondition, strQuery)
+          }
+          fnOnChange={(strKey, objValue) =>
+            fnSetSearchModel((objCurrent) => ({
+              ...objCurrent,
+              [strKey]: objValue,
+            }))
+          }
+          fnOnReset={() => {
+            const objResetModel = {
+              ...objSearchModel,
+              ...createSearchModel(arrOrderedConditions),
+            }
+            fnSetSearchModel(objResetModel)
+            if (objResolvedProps.searchResetBehavior === 'query') {
+              void fnRunQuery(1, nPageSize, objResetModel)
+            }
+          }}
+          fnOnSearch={() => void fnRunQuery(1, nPageSize, objSearchModel, true)}
+          fnOnConditionsChange={fnApplySearchConditionChanges}
+        />
+      ) : null}
+
+      {objResolvedProps.showToolbar ? (
+        <TableToolbar
+          objProps={objResolvedProps}
+          objController={objController}
+          objSnapshot={objSnapshot}
+          arrSelectedRows={arrSelectedRows}
+          strDensity={strDensity}
+          arrColumns={arrPreferredColumns}
+          nFrozenRows={objPreference.frozenRows ?? 0}
+          bDensityControlEnabled={
+            bPreferenceReady && objPreferenceSession.status === 'ready'
+          }
+          fnOnSave={() => void fnSaveChanges()}
+          fnOnDensityChange={fnChangeDensity}
+          fnOnRefresh={() => void fnRunQuery()}
+          fnOnColumnsChange={fnApplyColumnChanges}
+          fnOnResetColumns={fnResetColumnPreference}
+          fnOnFrozenRowsChange={fnSetFrozenRows}
+          fnReportError={fnReportError}
+          bHasSelection={objSelection.bHasSelection}
+          bCanSelectAllMatching={objSelection.bCanSelectAllMatching}
+          bSelectingAllMatching={objSelection.bSelectingAllMatching}
+          strSelectionLabel={objSelection.strSelectionLabel}
+          arrExportActions={objReporting.arrExportActions}
+          fnOnClearSelection={objSelection.fnClearSelection}
+          fnOnSelectAllMatching={() =>
+            void objSelection.fnRequestSelectAllMatching()
+          }
+          fnOnExportAction={objReporting.fnRunExportAction}
+        />
+      ) : null}
+
+      {bShowErrorFeedback && (strUiError || objSnapshot.error) ? (
+        <TableErrorFeedback
+          objError={strUiError || objSnapshot.error}
+          fnOnDismiss={() => fnSetUiError(null)}
+        />
+      ) : null}
+
+      <TablePanelRegion
+        objProps={objResolvedProps}
+        objPanels={objPanels}
+        arrRows={objSnapshot.rows}
+        arrSelectedRows={arrSelectedRows}
+      >
+        <TableGridViewport
+          objContainerRef={objContainerRef}
+          objFixedEndShadowRef={objFixedEndShadowRef}
+          bHeightReady={bHeightReady}
+          bShowLoadingMask={bShowLoadingMask}
+          bShowEmptyState={
+            objSnapshot.rows.length === 0 &&
+            !objSnapshot.loading &&
+            bInitialQuerySettled
+          }
+          objEmptyState={objEmptyState}
+          fnRenderEmpty={fnHandleRenderEmpty}
+        />
+
+        {objPagination.enabled ? (
+          renderPagination ? (
+            renderPagination({
+              pagination: objPagination,
+              page: nPage,
+              pageSize: nPageSize,
+              total: objSnapshot.total,
+              pageCount: Math.max(
+                1,
+                Math.ceil(objSnapshot.total / Math.max(1, nPageSize))
+              ),
+              selectedCellSum: strSelectedCellSum,
+              loading: objSnapshot.loading,
+              onChange: fnHandlePaginationChange,
+            })
+          ) : (
+            <TablePaginationBar
+              objPagination={objPagination}
+              nPage={nPage}
+              nPageSize={nPageSize}
+              nTotal={objSnapshot.total}
+              strSelectedCellSum={strSelectedCellSum}
+              bLoading={objSnapshot.loading}
+              fnOnChange={fnHandlePaginationChange}
+            />
+          )
+        ) : null}
+      </TablePanelRegion>
+      <TableCellLayer objLayer={objCellLayer} />
+      <TableCellComponentLayer objSession={objCellComponentSession} />
+    </section>
+  )
+}
+
+const TableComponentRoot = forwardRef(TableComponentInner) as <
+  T extends TableRow = TableRow,
+>(
+  objProps: ITableComponentProps<T> & RefAttributes<TableController<T>>
+) => ReactElement | null
+
+function TableComponentLocalized<T extends TableRow>(
+  {
+    config: objConfig,
+    messages: objMessageOverrides,
+    ...objProps
+  }: ITableComponentProps<T>,
+  objRef: ForwardedRef<TableController<T>>
+) {
+  const { strLocale, strTimeZone } = useLocale()
+  const objMessages = useMemo(
+    () => resolveAppTableMessages(strLocale, objMessageOverrides),
+    [objMessageOverrides, strLocale]
+  )
+  const objLocalizedConfig = useMemo<TableConfiguration<T>>(
+    () => ({
+      ...objConfig,
+      appearance: {
+        ...objConfig.appearance,
+        locale: objConfig.appearance?.locale ?? strLocale,
+        timeZone: objConfig.appearance?.timeZone ?? strTimeZone,
+      },
+    }),
+    [objConfig, strLocale, strTimeZone]
+  )
+
+  return (
+    <AppTableMessagesContext.Provider value={objMessages}>
+      <TableComponentRoot
+        {...objProps}
+        ref={objRef}
+        config={objLocalizedConfig}
+      />
+    </AppTableMessagesContext.Provider>
+  )
+}
+
+/** React ref 直接暴露框架无关的 TableController，命令能力与 useTable() 保持一致。 */
+export const TableComponent = forwardRef(TableComponentLocalized) as <
+  T extends TableRow = TableRow,
+>(
+  props: ITableComponentProps<T> & RefAttributes<TableController<T>>
+) => ReactElement | null

package/template/src/components/AppTable/table/components/TableErrorFeedback.tsx

@@ -0,0 +1,36 @@
+import { X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useAppTableMessages } from '../../messages'
+
+interface ITableErrorFeedbackProps {
+  objError: unknown
+  fnOnDismiss: () => void
+}
+
+const fnResolveErrorMessage = (objError: unknown) =>
+  objError instanceof Error ? objError.message : String(objError)
+
+/** 表格级错误反馈；与 Handsontable 内部通知保持独立的可访问性边界。 */
+export function TableErrorFeedback({
+  objError,
+  fnOnDismiss,
+}: ITableErrorFeedbackProps) {
+  const objMessages = useAppTableMessages()
+  return (
+    <div
+      role='alert'
+      className='flex shrink-0 items-start justify-between gap-3 border-b border-destructive/20 bg-destructive/5 px-4 py-2.5 text-sm text-destructive'
+    >
+      <span>{fnResolveErrorMessage(objError)}</span>
+      <Button
+        type='button'
+        variant='ghost'
+        size='icon-xs'
+        aria-label={objMessages.strCloseErrorAriaLabel}
+        onClick={fnOnDismiss}
+      >
+        <X />
+      </Button>
+    </div>
+  )
+}

package/template/src/components/AppTable/table/components/TableGridViewport.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode, RefObject } from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { type TableEmptyStateOptions } from '@/components/AppTable/engine/shared/feedback'
+import { useAppTableMessages } from '../../messages'
+
+interface ITableGridViewportProps {
+  objContainerRef: RefObject<HTMLDivElement | null>
+  objFixedEndShadowRef: RefObject<HTMLDivElement | null>
+  bHeightReady: boolean
+  bShowLoadingMask: boolean
+  bShowEmptyState: boolean
+  objEmptyState?: TableEmptyStateOptions
+  fnRenderEmpty?: () => ReactNode
+}
+
+/** Handsontable 宿主视口；只负责加载、空状态和固定尾列阴影的 DOM 所有权。 */
+export function TableGridViewport({
+  objContainerRef,
+  objFixedEndShadowRef,
+  bHeightReady,
+  bShowLoadingMask,
+  bShowEmptyState,
+  objEmptyState,
+  fnRenderEmpty,
+}: ITableGridViewportProps) {
+  const objMessages = useAppTableMessages()
+  return (
+    <div
+      data-slot='table-grid'
+      data-height-ready={bHeightReady ? 'true' : 'false'}
+      className='relative isolate min-h-0 shrink-0 overflow-hidden bg-background'
+    >
+      {bShowLoadingMask ? (
+        <div className='absolute inset-0 z-10 grid place-items-center bg-background/75 backdrop-blur-[1px]'>
+          <div className='flex items-center gap-2 text-sm text-muted-foreground'>
+            <Loader2 className='size-4 animate-spin' />
+            {objMessages.strLoadingData}
+          </div>
+        </div>
+      ) : null}
+      {bShowEmptyState ? (
+        <div className='absolute inset-0 z-10 grid place-items-center bg-background'>
+          {fnRenderEmpty ? (
+            fnRenderEmpty()
+          ) : objEmptyState ? (
+            <div className='grid max-w-md place-items-center gap-2 px-6 text-center'>
+              <strong>{objEmptyState.title ?? objMessages.strEmpty}</strong>
+              {objEmptyState.description ? (
+                <span className='text-sm text-muted-foreground'>
+                  {objEmptyState.description}
+                </span>
+              ) : null}
+              {objEmptyState.action ? (
+                <Button
+                  type='button'
+                  variant={
+                    objEmptyState.action.type === 'primary'
+                      ? 'default'
+                      : 'outline'
+                  }
+                  onClick={objEmptyState.action.onClick}
+                >
+                  {objEmptyState.action.label}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      <div
+        ref={objContainerRef}
+        aria-hidden={bHeightReady ? undefined : true}
+        className={cn('min-h-0 w-full', bHeightReady ? undefined : 'invisible')}
+      />
+      <div
+        ref={objFixedEndShadowRef}
+        aria-hidden='true'
+        className='table-component__fixed-end-shadow'
+        style={{ display: 'none' }}
+      />
+    </div>
+  )
+}

package/template/src/components/AppTable/table/components/index.ts

@@ -0,0 +1,2 @@
+export { TableComponent } from './TableComponent'
+export type { ITableComponentProps } from './types'