如何将Ant Design ProTable默认表头按钮整合到下拉菜单中？

需求：将ProTable自带的「更新」「全屏」「设置」按钮隐藏到下拉菜单中，避免默认按钮分散在表头。默认的options仅支持启用/禁用按钮，直接隐藏会丢失原有功能，因此采用自定义按钮的方式实现。

实现思路 #

1. 通过options配置禁用所有默认表头按钮
2. 在toolbar.actions中添加自定义下拉菜单，将「更新」「全屏」「设置」功能封装进去，复用ProTable内置逻辑

完整代码示例 #

<ProTable
  {...tableProps}
  size={tableSize}
  actionRef={actionRef}
  columns={columnsWithActions}
  dateFormatter="string"
  rowKey="id"
  columnsState={{
    value: columnsStateMap,
    onChange: setColumnsStateMap,
  }}
  cardBordered
  scroll={{ x: 'max-content', y: 'calc(100vh)' }}
  components={{
    body: {
      row: draggable ? TableDraggableRow : undefined
    }
  }}
  rowClassName={rowClassName}
  search={
    showSearch
      ? {
          filterType: 'query',
          defaultCollapsed: true,
          labelWidth: 'auto',
          span: {
            xs: 24,
            sm: 12,
            md: 8,
            lg: 6
          }
        }
      : false
  }
  onSubmit={(values) => {
    const searchFilters = Object.entries(values)
      .filter(([_, value]) => value !== null && value !== undefined)
      .flatMap(([field, value]) => {
        if (field.startsWith('DATE(')) {
          const dateField = field.substring(
            field.indexOf('(') + 1,
            field.indexOf(')')
          )

          if (Array.isArray(value)) {
            return handleDateRange(dateField, value)
          } else {
            return handleSingleDate(dateField, value)
          }
        } else {
          const operatorValue = String(value).split('.')
          return { field, operator: operatorValue[0], value: operatorValue[1] }
        }
      })
      .filter((filter) => filter !== null)
    setFilters(searchFilters)
  }}
  onReset={() => {
    setFilters(() => initialFilter || [])
  }}
  form={form}
  toolbar={{
    menu: {
      type: 'inline',
      items: [
        ...(dropdownFilters
          ? [
              {
                key: 'dropdown',
                label: (
                  <Dropdown
                    menu={{
                      items: dropdownFilters.map((item) => ({
                        key: item.value,
                        label: t(`filter.${resource}.${item.value}`, '') || item.label
                      })),
                      onClick: ({ key }) => {
                        setActiveDropdownFilterValue(key)
                      }
                    }}
                  >
                    <Button size="middle">
                      <Space>
                        {activeDropdownFilter?.label}
                        <DownOutlined />
                      </Space>
                    </Button>
                  </Dropdown>
                )
              }
            ]
          : []),
        ...(categoryFilters
          ? [
              {
                key: 'categoryFilters',
                label: (
                  <Segmented
                    options={localizedCategoryFilters}
                    style={{ fontWeight: 500 }}
                    onChange={(value) => {
                      setActiveCategoryFilterValue(value)
                    }}
                  />
                )
              }
            ]
          : []),
        ...(isSearchEnabled
          ? [
              {
                key: 'search',
                label: (
                  <Button
                    icon={<SearchOutlined />}
                    size="middle"
                    onClick={() => setShowSearch(!showSearch)}
                    type={showSearch ? 'primary' : 'default'}
                  />
                )
              }
            ]
          : [])
      ]
    },
    actions: [
      // 自定义创建按钮逻辑
      ...(disableCreate || !modalFields
        ? []
        : [
            <ProtectedResource
              key="create-table-record"
              action="create"
              appResource={appResource}
            >
              <TableModalForm
                resource={resource}
                modalFields={modalFields}
                selectedRecords={[]}
                parentRecordId={parentRecordId}
              />
            </ProtectedResource>
          ]),
      ...(customActions
        ? customActions.map((action) =>
            typeof action === 'function'
              ? action({
                  recordId: selectedRecords?.[0]?.id,
                  tableQuery,
                  tableProps,
                  columns,
                  resource
                })
              : action
          )
        : []),
      // 自定义表头功能下拉菜单
      <Dropdown
        key="table-toolbar-menu"
        menu={{
          items: [
            {
              key: 'reload',
              label: '更新',
              onClick: () => tableQuery.refetch()
            },
            {
              key: 'fullScreen',
              label: '全屏',
              onClick: () => {
                actionRef.current?.toggleFullScreen()
              }
            },
            {
              key: 'setting',
              label: '设置',
              onClick: () => {
                actionRef.current?.openSetting()
              }
            }
          ]
        }}
      >
        <Button size="middle">
          <Space>
            更多
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>
    ]
  }}
  options={{
    density: false,
    fullScreen: false,
    reload: false,
    setting: false,
    search: false
  }}
  rowSelection={
    enableRowSelection
      ? {
          onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRecords(selectedRows)
          }
        }
      : false
  }
  pagination={{ ...tableProps.pagination }}
/>

关键说明 #

• 通过actionRef调用ProTable内置的toggleFullScreen()和openSetting()方法，无需重新实现全屏和列设置功能
• options中禁用所有默认按钮，避免重复显示
• 自定义下拉菜单整合所有需要的功能按钮，保持表头简洁

内容的提问来源于stack exchange，提问作者user31247628