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

package/template/src/components/AppTable/config/types.ts

@@ -0,0 +1,377 @@
+import type { ComponentType } from 'react'
+import type { TableBottomPanelConfig as EngineTableBottomPanelConfig } from '@/components/AppTable/engine/bottom/types'
+import type { TableCellContext } from '@/components/AppTable/engine/cell/types'
+import type { TableColumn as EngineTableColumn } from '@/components/AppTable/engine/columns/column'
+import type {
+  ResolvedTableComponentProps as EngineResolvedTableComponentProps,
+  TableRowDetailPanelConfig as EngineTableRowDetailPanelConfig,
+  TableComponentProps as EngineTableComponentProps,
+  TableConfiguration as EngineTableConfiguration,
+  TableGridConfig as EngineTableGridConfig,
+  TableSearchConfig as EngineTableSearchConfig,
+} from '@/components/AppTable/engine/component/types'
+import type { TableRightPanelConfig as EngineTableRightPanelConfig } from '@/components/AppTable/engine/right/types'
+import type { TableSearchCondition as EngineTableSearchCondition } from '@/components/AppTable/engine/search/types'
+import type { TableEngineMessages } from '@/components/AppTable/engine/shared/messages'
+import type { TableRow } from '@/components/AppTable/engine/shared/types'
+import type { ISensitiveDataProps } from '@/components/SensitiveData'
+
+/** AppTable 内建交互、反馈和无障碍文案。 */
+export interface IAppTableMessages extends TableEngineMessages {
+  /** 通用取消文案。 */
+  strCancel: string
+  /** 通用确认文案。 */
+  strConfirm: string
+  /** 生成带脏数据数量的保存按钮文案。 */
+  fnSaveChanges: (nCount: number) => string
+  /** 放弃未保存修改文案。 */
+  strDiscardChanges: string
+  /** 选择全部查询匹配项文案。 */
+  strSelectAllMatching: string
+  /** 清除当前选择文案。 */
+  strClearSelection: string
+  /** 导出入口文案。 */
+  strExport: string
+  /** 生成当前密度切换按钮的无障碍名称。 */
+  fnDensityAriaLabel: (strDensity: string) => string
+  /** 表格密度菜单标题。 */
+  strDensity: string
+  /** 紧凑行距选项。 */
+  strDensityCompact: string
+  /** 标准行距选项。 */
+  strDensityDefault: string
+  /** 舒适行距选项。 */
+  strDensityComfortable: string
+  /** 刷新表格按钮的无障碍名称。 */
+  strRefreshAriaLabel: string
+  /** 生成显式选择数量提示。 */
+  fnSelectedCount: (nCount: number) => string
+  /** 生成全部匹配选择提示。 */
+  fnAllMatchingSelected: (nExcluded: number) => string
+  /** 关闭错误提示按钮的无障碍名称。 */
+  strCloseErrorAriaLabel: string
+  /** 全屏加载遮罩文案。 */
+  strLoadingData: string
+  /** 默认空状态标题。 */
+  strEmpty: string
+  /** 默认行详情标题。 */
+  strDetail: string
+  /** 表格选择列标题。 */
+  strSelectionColumn: string
+  /** 禁止批量修改时的错误提示。 */
+  strSingleCellEditOnly: string
+  /** 单元格框选合计标签。 */
+  strSummary: string
+  /** 搜索提交按钮文案。 */
+  strSearch: string
+  /** 搜索条件重置按钮文案。 */
+  strReset: string
+  /** 收起搜索区文案。 */
+  strCollapse: string
+  /** 展开搜索区文案。 */
+  strExpand: string
+  /** 生成远程条件搜索框的无障碍名称。 */
+  fnRemoteSearchAriaLabel: (strLabel: string) => string
+  /** 远程条件搜索框占位文案。 */
+  strSearchPlaceholder: string
+  /** 清空筛选值时的全部文案。 */
+  strAll: string
+  /** 生成日期范围起始输入框的无障碍名称。 */
+  fnStartDateAriaLabel: (strLabel: string) => string
+  /** 生成日期范围结束输入框的无障碍名称。 */
+  fnEndDateAriaLabel: (strLabel: string) => string
+  /** 日期范围两端之间的连接文案。 */
+  strDateSeparator: string
+  /** 默认“包含”查询运算符。 */
+  strOperatorIncludes: string
+  /** 默认“等于”查询运算符。 */
+  strOperatorEquals: string
+  /** 默认“不等于”查询运算符。 */
+  strOperatorNotEquals: string
+  /** 生成查询运算符控件的无障碍名称。 */
+  fnQueryOperatorAriaLabel: (strLabel: string) => string
+  /** 列设置标题。 */
+  strColumnSettings: string
+  /** 列设置面板无障碍名称。 */
+  strColumnSettingsPanel: string
+  /** 列搜索框占位和无障碍文案。 */
+  strSearchColumns: string
+  /** 生成当前显示数量提示。 */
+  fnVisibleCount: (nVisible: number, nTotal: number) => string
+  /** 全部显示文案。 */
+  strShowAll: string
+  /** 全部隐藏文案。 */
+  strHideAll: string
+  /** 生成显示指定列的无障碍名称。 */
+  fnShowColumnAriaLabel: (strLabel: string) => string
+  /** 生成上移指定列的无障碍名称。 */
+  fnMoveColumnUpAriaLabel: (strLabel: string) => string
+  /** 生成下移指定列的无障碍名称。 */
+  fnMoveColumnDownAriaLabel: (strLabel: string) => string
+  /** 列搜索无结果文案。 */
+  strNoMatchingColumns: string
+  /** 冻结顶部数据行文案。 */
+  strFreezeTopRows: string
+  /** 至少保留一列文案。 */
+  strKeepOneColumn: string
+  /** 恢复默认设置文案。 */
+  strRestoreDefaults: string
+  /** 筛选设置标题。 */
+  strFilterSettings: string
+  /** 生成拖动筛选条件排序的无障碍名称。 */
+  fnDragConditionAriaLabel: (strLabel: string) => string
+  /** 生成上移筛选条件的无障碍名称。 */
+  fnMoveConditionUpAriaLabel: (strLabel: string) => string
+  /** 生成下移筛选条件的无障碍名称。 */
+  fnMoveConditionDownAriaLabel: (strLabel: string) => string
+  /** 至少保留一个筛选条件文案。 */
+  strKeepOneCondition: string
+  /** 清空单元格选择的无障碍名称。 */
+  strClearCellSelectionAriaLabel: string
+  /** 单元格选择编辑器搜索占位文案。 */
+  strSearchOptions: string
+  /** 单元格选项加载文案。 */
+  strLoadingOptions: string
+  /** 单元格选择编辑器空状态文案。 */
+  strNoOptions: string
+  /** 生成框选单元格合计提示。 */
+  fnSelectedCellSum: (strValue: string) => string
+  /** 生成结果总数提示。 */
+  fnTotalRows: (nTotal: number) => string
+  /** 每页条数控件的无障碍名称。 */
+  strPageSizeAriaLabel: string
+  /** 生成每页条数选项。 */
+  fnRowsPerPage: (nSize: number) => string
+  /** 生成指定页按钮的无障碍名称。 */
+  fnPageAriaLabel: (nPage: number) => string
+  /** 页码跳转前缀文案。 */
+  strGoTo: string
+  /** 目标页输入框的无障碍名称。 */
+  strTargetPageAriaLabel: string
+  /** 页码跳转单位文案。 */
+  strPage: string
+  /** 页码跳转按钮文案。 */
+  strJump: string
+  /** 默认底部面板名称。 */
+  strBottomPanel: string
+  /** 调整底部面板高度的无障碍名称。 */
+  strResizeBottomPanelAriaLabel: string
+  /** 默认右侧面板名称。 */
+  strRightPanel: string
+  /** 调整右侧面板宽度的无障碍名称。 */
+  strResizeRightPanelAriaLabel: string
+  /** 生成关闭指定面板的无障碍名称。 */
+  fnClosePanelAriaLabel: (strTitle: string) => string
+  /** 导出选中区域的范围文案。 */
+  strExportRange: string
+  /** 导出当前页的范围文案。 */
+  strExportPage: string
+  /** 导出已选数据的范围文案。 */
+  strExportSelection: string
+  /** 导出全部数据的范围文案。 */
+  strExportAll: string
+}
+
+export type { TableSearchLayoutConfig } from '@/components/AppTable/engine/component/types'
+
+/** React 扩展面板组件收到的稳定运行时上下文。 */
+export interface TablePanelComponentProps<T extends TableRow = TableRow> {
+  /** 当前查询已加载的业务行，不包含汇总等展示行。 */
+  rows: readonly T[]
+  /** 当前已选择且已加载的业务行。 */
+  selectedRows: readonly T[]
+  /** 当前详情行；普通底部或右侧面板未必存在该值。 */
+  currentRow?: T
+  /** 关闭当前面板。 */
+  close: () => void
+}
+
+/** React 行详情组件只在存在当前行时渲染。 */
+export interface TableRowDetailComponentProps<
+  T extends TableRow = TableRow,
+> extends Omit<TablePanelComponentProps<T>, 'currentRow'> {
+  /** 当前正在展示详情的业务行。 */
+  row: T
+}
+
+interface TableReactControllablePanelConfig {
+  /** 提供后由业务控制展开状态；省略时使用组件内部状态。 */
+  open?: boolean
+  /** 受控或非受控状态变化时都会通知。 */
+  onOpenChange?: (open: boolean) => void
+}
+
+/** React 底部面板在 engine 尺寸策略上直接配置业务组件。 */
+export interface TableBottomPanelConfig<T extends TableRow = TableRow>
+  extends EngineTableBottomPanelConfig, TableReactControllablePanelConfig {
+  /** 在表格底部工作区渲染的业务组件。 */
+  component: ComponentType<TablePanelComponentProps<T>>
+}
+
+/** React 右侧面板在 engine 尺寸策略上直接配置业务组件。 */
+export interface TableRightPanelConfig<T extends TableRow = TableRow>
+  extends EngineTableRightPanelConfig, TableReactControllablePanelConfig {
+  /** 在表格右侧工作区渲染的业务组件。 */
+  component: ComponentType<TablePanelComponentProps<T>>
+}
+
+/** React 行详情通过配置中的组件渲染，不依赖应用外层适配器。 */
+export interface TableRowDetailPanelConfig<
+  T extends TableRow = TableRow,
+> extends EngineTableRowDetailPanelConfig {
+  /** 用于展示当前业务行详情的 React 组件。 */
+  component: ComponentType<TableRowDetailComponentProps<T>>
+  /** 受控详情行；配置该字段后可由业务命令式打开或切换详情。 */
+  activeRow?: T | null
+  /** 双击、关闭或数据替换导致详情行变化时通知业务。 */
+  onActiveRowChange?: (row: T | undefined) => void
+}
+
+/** AppTable 可挂载的底部、右侧和行详情工作区。 */
+export interface TablePanelsConfig<T extends TableRow = TableRow> {
+  /** 底部工作区配置；`false` 表示不渲染。 */
+  bottom?: false | TableBottomPanelConfig<T>
+  /** 右侧工作区配置；`false` 表示不渲染。 */
+  right?: false | TableRightPanelConfig<T>
+  /** 行详情工作区配置；`false` 表示关闭行详情能力。 */
+  rowDetail?: false | TableRowDetailPanelConfig<T>
+}
+
+/** React 自定义搜索字段收到的受控组件参数。 */
+export interface TableSearchFieldRendererProps<TValue = unknown> {
+  /** 当前字段值。 */
+  value: TValue
+  /** 更新搜索模型中的当前字段值。 */
+  onChange: (value: TValue) => void
+  /** 完整搜索条件配置。 */
+  condition: TableSearchCondition
+  /** 可绑定到实际输入控件的稳定 id。 */
+  inputId: string
+  /** 当前表格的稳定业务 key。 */
+  tableKey: string
+}
+
+/**
+ * React 搜索字段组件。值类型在不同 condition 间天然不同，配置边界使用 any
+ * 保留直接传入强类型业务组件的能力；组件内部仍可使用泛型 Props 精确声明值类型。
+ */
+export type TableSearchFieldRenderer = ComponentType<
+  TableSearchFieldRendererProps<any>
+>
+
+/** React 展示型单元格组件收到的标准 Props。 */
+export interface TableCellRendererProps<
+  T extends TableRow = TableRow,
+  TValue = unknown,
+> extends TableCellContext<T, TValue> {
+  /** formatter/valueGetter 处理后的显示值；value 始终保留业务原值。 */
+  displayValue: unknown
+}
+
+/**
+ * React 展示型单元格组件。配置边界使用 any，允许业务组件精确声明自己的 value 类型。
+ */
+export type TableCellRendererComponent<T extends TableRow = TableRow> =
+  ComponentType<TableCellRendererProps<T, any>>
+
+/** React 组件列与 engine 原生 renderer 互斥，并固定为只读展示列。 */
+export type TableCellComponentColumn<T extends TableRow = TableRow> =
+  EngineTableColumn<T> & {
+    /** 用于渲染当前单元格的 React 展示组件。 */
+    cellComponent: TableCellRendererComponent<T>
+    /** React 组件列不能同时声明 Handsontable renderer。 */
+    renderer?: never
+    /** React 组件列只承担展示，固定为只读。 */
+    readOnly?: true
+  }
+
+/** 敏感数据列的业务配置；复制和只读策略由安全列工厂固定。 */
+export type TableSensitiveDataColumnBase<T extends TableRow = TableRow> = Omit<
+  TableCellComponentColumn<T>,
+  'cellComponent' | 'copyable' | 'exportable' | 'readOnly' | 'renderer'
+>
+
+/** 创建 AppTable 敏感数据列时提供的安全配置。 */
+export interface ICreateSensitiveDataTableColumnOptions<
+  T extends TableRow = TableRow,
+  TValue = unknown,
+> {
+  /** 不含 cellComponent、复制、导出和编辑开关的普通业务列配置。 */
+  readonly objColumn: TableSensitiveDataColumnBase<T>
+  /** 按当前行解析 SensitiveData 参数；字段名称自动取列 label。 */
+  readonly fnResolveSensitiveDataProps: (
+    objCell: TableCellRendererProps<T, TValue>
+  ) => Omit<ISensitiveDataProps, 'strLabel'>
+}
+
+/** React 列既可使用 engine renderer，也可直接配置 React 组件。 */
+export type TableColumn<T extends TableRow = TableRow> =
+  | (EngineTableColumn<T> & {
+      /** 原生 renderer 列不能同时声明 React 单元格组件。 */
+      cellComponent?: never
+    })
+  | TableCellComponentColumn<T>
+
+/** React 搜索条件在 engine 数据合同之上增加本地 UI 渲染器。 */
+export interface TableSearchCondition extends EngineTableSearchCondition {
+  /** 显式配置后优先于 type 对应的内置控件。 */
+  renderer?: TableSearchFieldRenderer
+}
+
+/** React 搜索配置；renderer 仅存在于 React 层，不进入 engine。 */
+export interface TableSearchConfig extends Omit<
+  EngineTableSearchConfig,
+  'conditions'
+> {
+  /** 搜索条件声明；数组顺序决定首次展示顺序。 */
+  conditions?: TableSearchCondition[]
+}
+
+/** React 网格在 engine 公共合同之上增加框架组件列。 */
+export interface TableGridConfig<T extends TableRow = TableRow> extends Omit<
+  EngineTableGridConfig<T>,
+  'columns'
+> {
+  /** 业务列；cellComponent 由 React 层挂载，不进入 engine。 */
+  columns: TableColumn<T>[]
+}
+
+export type TableConfiguration<T extends TableRow = TableRow> = Omit<
+  EngineTableConfiguration<T>,
+  'table' | 'search' | 'panels'
+> & {
+  /** 表格数据、列、网格行为和自适应高度配置。 */
+  table: TableGridConfig<T>
+  /** 搜索区域配置；`false` 表示不渲染搜索区域。 */
+  search?: false | TableSearchConfig
+  /** 底部、右侧及行详情工作区配置；`false` 表示全部关闭。 */
+  panels?: false | TablePanelsConfig<T>
+}
+
+export type TableComponentProps<T extends TableRow = TableRow> = Omit<
+  EngineTableComponentProps<T>,
+  'config'
+> & {
+  /** 按功能域组织的完整 AppTable 配置。 */
+  config: TableConfiguration<T>
+}
+
+export type ResolvedTableComponentProps<T extends TableRow = TableRow> = Omit<
+  EngineResolvedTableComponentProps<T>,
+  | 'columns'
+  | 'searchConditions'
+  | 'bottomPanel'
+  | 'rightPanel'
+  | 'rowDetailPanel'
+> & {
+  /** 解析后的业务列集合。 */
+  columns: TableColumn<T>[]
+  /** 解析并补全默认值后的搜索条件集合。 */
+  searchConditions: TableSearchCondition[]
+  /** 解析后的底部工作区配置。 */
+  bottomPanel?: false | TableBottomPanelConfig<T>
+  /** 解析后的右侧工作区配置。 */
+  rightPanel?: false | TableRightPanelConfig<T>
+  /** 解析后的行详情工作区配置。 */
+  rowDetailPanel?: false | TableRowDetailPanelConfig<T>
+}

package/template/src/components/AppTable/engine/bottom/index.ts

@@ -0,0 +1 @@
+export * from './types'

package/template/src/components/AppTable/engine/bottom/types.ts

@@ -0,0 +1,14 @@
+export interface TableBottomPanelConfig {
+  /** 默认关闭，只有业务明确要求时才初始展开。 */
+  defaultOpen?: boolean
+  /** 是否允许用户拖动分隔条调整面板高度，默认 true。 */
+  resizable?: boolean
+  /** 首次打开时的像素高度；已保存的用户偏好优先。 */
+  defaultHeight?: number
+  /** 用户拖动时允许的最小像素高度。 */
+  minHeight?: number
+  /** 用户拖动时允许的最大像素高度。 */
+  maxHeight?: number
+  /** 查询时默认收起，设为 false 可保留面板状态。 */
+  collapseOnQuery?: boolean
+}

package/template/src/components/AppTable/engine/cell/constants.ts

@@ -0,0 +1,32 @@
+/** 自定义单元格与远程选项会话的稳定交互默认值。 */
+export const TABLE_OPTION_DEBOUNCE_MS = 300
+export const TABLE_DEFAULT_MAX_COLLAPSE_TAGS = 1
+export const TABLE_TOOLTIP_OPEN_DELAY_MS = 350
+
+interface TableCellDefaults {
+  /** 操作列直接展示的最大按钮数量，超出后进入更多菜单。 */
+  readonly actionButtonLimit: number
+  /** 自动计算操作列时使用的最小宽度。 */
+  readonly actionColumnMinWidth: number
+  /** 每个操作按钮预留的宽度。 */
+  readonly actionSlotWidth: number
+  /** 单表选项缓存允许保存的最大查询条目数。 */
+  readonly cacheEntries: number
+  /** 区分链接单击和双击的等待时间。 */
+  readonly linkClickDelayMs: number
+  /** 远程候选项缓存的默认有效时间。 */
+  readonly optionCacheTtlMs: number
+  /** 每列为已选值记忆的最大候选项数量。 */
+  readonly rememberedOptionsPerColumn: number
+}
+
+/** 选项、格式化与自定义展示的容量和布局默认值。 */
+export const TABLE_CELL_DEFAULTS: TableCellDefaults = {
+  actionButtonLimit: 3,
+  actionColumnMinWidth: 90,
+  actionSlotWidth: 72,
+  cacheEntries: 100,
+  linkClickDelayMs: 250,
+  optionCacheTtlMs: 60_000,
+  rememberedOptionsPerColumn: 1_000,
+}

package/template/src/components/AppTable/engine/cell/customCell/actions/index.ts

@@ -0,0 +1 @@
+export * from './renderer'

package/template/src/components/AppTable/engine/cell/customCell/actions/renderer.ts

@@ -0,0 +1,162 @@
+import type { TableColumn } from '../../../columns/column'
+import { runTableAction } from '../../../shared/action'
+import type { TableRow } from '../../../shared/types'
+import { TABLE_CELL_DEFAULTS } from '../../constants'
+import type { TableAction, TableCellContext } from '../../types'
+import { resolveCellBoolean } from '../renderers/shared'
+import type { TableRendererOptions } from '../types'
+
+const resolveActionText = <T extends TableRow>(
+  value: string | ((context: TableCellContext<T>) => string) | undefined,
+  context: TableCellContext<T>
+) => (typeof value === 'function' ? value(context) : value)
+
+const appendActionContent = <T extends TableRow>(
+  button: HTMLButtonElement,
+  action: TableAction<T>,
+  context: TableCellContext<T>
+) => {
+  if (action.icon) {
+    const icon = document.createElement('i')
+    icon.className = action.icon
+    icon.setAttribute('aria-hidden', 'true')
+    button.append(icon)
+  }
+  const label = resolveActionText(action.label, context) ?? ''
+  if (label) {
+    const text = document.createElement('span')
+    text.textContent = label
+    button.append(text)
+  }
+  const title = resolveActionText(action.title, context)
+  if (title) button.title = title
+}
+
+const appendMoreActionContent = (button: HTMLButtonElement, label: string) => {
+  const text = document.createElement('span')
+  text.textContent = label
+
+  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  icon.classList.add('table-component__action-dropdown-icon')
+  icon.setAttribute('viewBox', '0 0 16 16')
+  icon.setAttribute('width', '14')
+  icon.setAttribute('height', '14')
+  icon.setAttribute('fill', 'none')
+  icon.setAttribute('stroke', 'currentColor')
+  icon.setAttribute('stroke-width', '1.5')
+  icon.setAttribute('stroke-linecap', 'round')
+  icon.setAttribute('stroke-linejoin', 'round')
+  icon.setAttribute('aria-hidden', 'true')
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute('d', 'm4 6 4 4 4-4')
+  icon.append(path)
+  button.append(text, icon)
+}
+
+const resolveTableActionLayout = <T>(
+  actions: readonly T[],
+  options: { limit?: number; fold?: boolean } = {}
+) => {
+  const limit = Math.max(
+    1,
+    options.limit ?? TABLE_CELL_DEFAULTS.actionButtonLimit
+  )
+  const shouldFold = options.fold !== false && actions.length > limit
+  // buttonLimit 表示可见操作位总数，其中包含“更多”入口。
+  const directCount = shouldFold ? Math.max(0, limit - 1) : actions.length
+  return {
+    direct: actions.slice(0, directCount),
+    overflow: shouldFold ? actions.slice(directCount) : [],
+    shouldFold,
+  }
+}
+
+export const resolveTableActionColumnWidth = (
+  actionCount: number,
+  options: { limit?: number; fold?: boolean } = {}
+) => {
+  if (actionCount <= 0) return undefined
+  const layout = resolveTableActionLayout(
+    Array.from({ length: actionCount }, (_, index) => index),
+    options
+  )
+  const slots = layout.direct.length + (layout.shouldFold ? 1 : 0)
+  return Math.max(
+    TABLE_CELL_DEFAULTS.actionColumnMinWidth,
+    slots * TABLE_CELL_DEFAULTS.actionSlotWidth
+  )
+}
+
+/**
+ * 渲染 button 操作列：常用动作使用原生按钮直接展示，超出限制的动作通过
+ * TableCellLayerAdapter 交给框架层的折叠菜单展示。
+ */
+export const renderTableActions = <T extends TableRow>(
+  td: HTMLTableCellElement,
+  column: TableColumn<T>,
+  context: TableCellContext<T>,
+  rendererOptions: TableRendererOptions
+) => {
+  const { layer, messages } = rendererOptions
+  td.replaceChildren()
+  const container = document.createElement('div')
+  container.className = 'table-component__actions'
+  const actions = (column.actions ?? []).filter(
+    (action) => !resolveCellBoolean(action.hidden, context)
+  )
+  const { direct, overflow, shouldFold } = resolveTableActionLayout(actions, {
+    limit: column.buttonLimit,
+    fold: column.foldActions,
+  })
+  direct.forEach((action) => {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.dataset.slot = 'table-action'
+    button.dataset.variant = 'link'
+    button.className = [
+      'table-component__action',
+      `is-${action.type ?? 'primary'}`,
+      `is-${action.size ?? 'default'}`,
+      action.className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+    appendActionContent(button, action, context)
+    button.disabled = resolveCellBoolean(action.disabled, context)
+    button.onpointerdown = (event) => event.stopPropagation()
+    button.onmousedown = (event) => event.stopPropagation()
+    button.onclick = (event) => {
+      event.stopPropagation()
+      runTableAction(
+        () => action.onClick(context),
+        (error) => layer.reportActionError(error)
+      )
+    }
+    container.append(button)
+  })
+  if (shouldFold) {
+    const more = document.createElement('button')
+    more.type = 'button'
+    more.dataset.slot = 'table-action'
+    more.dataset.variant = 'link'
+    more.className = 'table-component__action is-more'
+    more.setAttribute('aria-haspopup', 'menu')
+    appendMoreActionContent(
+      more,
+      column.moreActionLabel ?? messages.strMoreActions
+    )
+    more.onpointerdown = (event) => event.stopPropagation()
+    more.onmousedown = (event) => event.stopPropagation()
+    more.onclick = (event) => {
+      event.stopPropagation()
+      layer.openActionMenu({
+        anchor: more,
+        actions: overflow,
+        context,
+      })
+    }
+    container.append(more)
+  }
+  td.append(container)
+}

package/template/src/components/AppTable/engine/cell/customCell/date/index.ts

@@ -0,0 +1 @@
+export * from './renderer'