diff --git a/examples/App.vue b/examples/App.vue
index b45e796fdd..4e47a5c42f 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -26,6 +26,7 @@ const navList = ref([
   { name: 'TableTest1', routerLink: { name: 'TableTest1' } },
   { name: 'TableTest2', routerLink: { name: 'TableTest2' } },
   { name: 'TableTest3', routerLink: { name: 'TableTest3' } },
+  { name: 'TableTest4', routerLink: { name: 'TableTest4' } },
   { name: 'GridTest', routerLink: { name: 'GridTest' } },
   { name: 'TestKeepTest1', routerLink: { name: 'TestKeepTest1' } },
   { name: 'TestKeepTest2', routerLink: { name: 'TestKeepTest2' } },
diff --git a/examples/router/index.ts b/examples/router/index.ts
index a2710735ba..916d76316d 100644
--- a/examples/router/index.ts
+++ b/examples/router/index.ts
@@ -40,6 +40,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'TableTest3',
     component: () => import('../views/table/TableTest3.vue')
   },
+  {
+    path: '/component/table4',
+    name: 'TableTest4',
+    component: () => import('../views/table/TableTest4.vue')
+  },
   {
     path: '/component/grid',
     name: 'GridTest',
diff --git a/examples/views/table/TableTest4.vue b/examples/views/table/TableTest4.vue
new file mode 100644
index 0000000000..f972960816
--- /dev/null
+++ b/examples/views/table/TableTest4.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <vxe-toolbar ref="toolbarRef" print export import custom></vxe-toolbar>
+
+    <vxe-table
+      border
+      stripe
+      resizable
+      highlight-hover-row
+      height="400"
+      ref="tableRef"
+      id="aaaa"
+      :print-config="{}"
+      :import-config="{}"
+      :export-config="{}"
+      :custom-config="{mode: 'drawer', storage: true}"
+      :loading="demo1.loading"
+      :expand-config="{iconOpen: 'vxe-icon-question-circle-fill', iconClose: 'vxe-icon-question-circle-fill'}"
+      :checkbox-config="{labelField: 'id', highlight: true, range: true}"
+      :data="demo1.tableData">
+      <vxe-column type="seq" width="60"></vxe-column>
+      <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
+      <vxe-colgroup title="分组1" field="g1">
+        <vxe-column type="expand" field="role" title="Role">
+          <template #content="{ row }">
+            <div>{{ row.name }}</div>
+          </template>
+        </vxe-column>
+        <vxe-column field="name" title="Name" sortable></vxe-column>
+      </vxe-colgroup>
+      <vxe-column field="sex11" title="Sex11" :visible="false"></vxe-column>
+      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
+      <vxe-column
+        field="age"
+        title="Age"
+        sortable
+        :filters="demo1.ageOptions"
+        :filter-method="filterAgeMethod"></vxe-column>
+      <vxe-column field="address" title="Address" show-overflow></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, nextTick } from 'vue'
+import { VxeColumnPropTypes, VxeTableInstance, VxeToolbarInstance } from '../../../types'
+
+interface RowVO {
+  [key: string]: any
+}
+
+const tableRef = ref<VxeTableInstance<RowVO>>()
+const toolbarRef = ref<VxeToolbarInstance>()
+
+const demo1 = reactive({
+  loading: false,
+  tableData: [] as any[],
+  sexList: [
+    { label: '女', value: '0' },
+    { label: '男', value: '1' }
+  ],
+  ageOptions: [
+    { label: '大于16岁', value: 16 },
+    { label: '大于26岁', value: 26 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 }
+  ]
+})
+
+const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
+  const item = demo1.sexList.find(item => item.value === cellValue)
+  return item ? item.label : ''
+}
+
+const filterAgeMethod: VxeColumnPropTypes.FilterMethod = ({ value, row }) => {
+  return row.age >= value
+}
+
+onMounted(() => {
+  demo1.loading = true
+  setTimeout(() => {
+    demo1.tableData = [
+      { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
+      { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
+      { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
+      { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
+      { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
+      { id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10008, name: 'Test8', role: 'Develop', sex: '0', age: 35, address: 'test abc' },
+      { id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'test abc' },
+      { id: 10010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10011, name: 'Test11', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10012, name: 'Test12', role: 'Develop', sex: '1', age: 27, address: 'test abc' },
+      { id: 10013, name: 'Test13', role: 'Test', sex: '0', age: 24, address: 'test abc' },
+      { id: 10014, name: 'Test14', role: 'Develop', sex: '1', age: 34, address: 'test abc' },
+      { id: 10015, name: 'Test15', role: 'Test', sex: '1', age: 21, address: 'test abc' },
+      { id: 10016, name: 'Test16', role: 'Develop', sex: '0', age: 20, address: 'test abc' },
+      { id: 10017, name: 'Test17', role: 'Test', sex: '1', age: 31, address: 'test abc' },
+      { id: 10018, name: 'Test18', role: 'Develop', sex: '0', age: 32, address: 'test abc' },
+      { id: 10019, name: 'Test19', role: 'Test', sex: '1', age: 37, address: 'test abc' },
+      { id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc' }
+    ]
+    demo1.loading = false
+  }, 100)
+})
+
+nextTick(() => {
+  // 将表格和工具栏进行关联
+  const $table = tableRef.value
+  const $toolbar = toolbarRef.value
+  if ($table && $toolbar) {
+    $table.connect($toolbar)
+  }
+})
+</script>
diff --git a/package.json b/package.json
index 997797fa1c..e170562854 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.0.46"
+    "vxe-pc-ui": "^4.0.47"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",
diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts
index 4593945a3c..4f9391fd5a 100644
--- a/packages/table/module/custom/panel.ts
+++ b/packages/table/module/custom/panel.ts
@@ -5,7 +5,7 @@ import { addClass, removeClass } from '../../../ui/src/dom'
 import { errLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeModalComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent } from 'vxe-pc-ui'
+import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent } from 'vxe-pc-ui'
 import type { VxeTableDefines, VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeColumnPropTypes } from '../../../../types'
 
 const { getI18n, getIcon } = VxeUI
@@ -20,6 +20,7 @@ export default defineComponent({
   },
   setup (props) {
     const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
+    const VxeUIDrawerComponent = VxeUI.getComponent<VxeDrawerComponent>('VxeDrawer')
     const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
     const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
@@ -493,10 +494,12 @@ export default defineComponent({
       const { customStore } = props
       const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
-      const { modalOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
+      const { modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
       const columnOpts = computeColumnOpts.value
       const { maxFixedSize } = columnOpts
+      const { mode } = customOpts
       const modalOpts = Object.assign({}, modalOptions)
+      const drawerOpts = Object.assign({}, drawerOptions)
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
       const trVNs: VNode[] = []
       XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
@@ -621,15 +624,168 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const scopedSlots = {
+        default: () => {
+          return h('div', {
+            ref: bodyElemRef,
+            class: 'vxe-table-custom-popup--body'
+          }, [
+            h('div', {
+              class: 'vxe-table-custom-popup--table-wrapper'
+            }, [
+              h('table', {}, [
+                h('colgroup', {}, [
+                  allowVisible
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  allowSort
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  h('col', {
+                    style: {
+                      minWidth: '120px'
+                    }
+                  }),
+                  allowResizable
+                    ? h('col', {
+                      style: {
+                        width: '140px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  allowFixed
+                    ? h('col', {
+                      style: {
+                        width: '200px'
+                      }
+                    })
+                    : createCommentVNode()
+                ]),
+                h('thead', {}, [
+                  h('tr', {}, [
+                    allowVisible
+                      ? h('th', {}, [
+                        h('div', {
+                          class: ['vxe-table-custom--checkbox-option', {
+                            'is--checked': isAllChecked,
+                            'is--indeterminate': isAllIndeterminate
+                          }],
+                          title: getI18n('vxe.table.allTitle'),
+                          onClick: allCustomEvent
+                        }, [
+                          h('span', {
+                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                          }),
+                          h('span', {
+                            class: 'vxe-checkbox--label'
+                          }, getI18n('vxe.toolbar.customAll'))
+                        ])
+                      ])
+                      : createCommentVNode(),
+                    allowSort
+                      ? h('th', {}, [
+                        h('span', {
+                          class: 'vxe-table-custom-popup--table-sort-help-title'
+                        }, getI18n('vxe.custom.setting.colSort')),
+                        VxeUITooltipComponent
+                          ? h(VxeUITooltipComponent, {
+                            enterable: true,
+                            content: getI18n('vxe.custom.setting.sortHelpTip')
+                          }, {
+                            default: () => {
+                              return h('i', {
+                                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+                              })
+                            }
+                          })
+                          : createCommentVNode()
+                      ])
+                      : createCommentVNode(),
+                    h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                    allowResizable
+                      ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                      : createCommentVNode(),
+                    allowFixed
+                      ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                      : createCommentVNode()
+                  ])
+                ]),
+                h(TransitionGroup, {
+                  class: 'vxe-table-custom--body',
+                  tag: 'tbody',
+                  name: 'vxe-table-custom--list'
+                }, {
+                  default: () => trVNs
+                })
+              ])
+            ]),
+            h('div', {
+              ref: dragHintElemRef,
+              class: 'vxe-table-custom-popup--drag-hint'
+            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+          ])
+        },
+        footer: () => {
+          return h('div', {
+            class: 'vxe-table-custom-popup--footer'
+          }, [
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
+                onClick: resetCustomEvent
+              })
+              : createCommentVNode(),
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
+                onClick: cancelCustomEvent
+              })
+              : createCommentVNode(),
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                status: 'primary',
+                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
+                onClick: confirmCustomEvent
+              })
+              : createCommentVNode()
+          ])
+        }
+      }
+      if (mode === 'drawer') {
+        return VxeUIDrawerComponent
+          ? h(VxeUIDrawerComponent, {
+            key: 'drawer',
+            className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
+            modelValue: customStore.visible,
+            title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
+            width: drawerOpts.width || Math.min(880, document.documentElement.clientWidth),
+            position: drawerOpts.position,
+            escClosable: !!drawerOpts.escClosable,
+            destroyOnClose: true,
+            showFooter: true,
+            'onUpdate:modelValue' (value: any) {
+              customStore.visible = value
+            }
+          }, scopedSlots)
+          : createCommentVNode()
+      }
       return VxeUIModalComponent
         ? h(VxeUIModalComponent, {
-          key: 'popup',
-          className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+          key: 'modal',
+          className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
           modelValue: customStore.visible,
           title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
-          width: modalOpts.width || '50vw',
+          width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
           minWidth: modalOpts.minWidth || 700,
-          height: modalOpts.height || '50vh',
+          height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
           minHeight: modalOpts.minHeight || 400,
           showZoom: modalOpts.showZoom,
           showMaximize: modalOpts.showMaximize,
@@ -643,147 +799,13 @@ export default defineComponent({
           'onUpdate:modelValue' (value: any) {
             customStore.visible = value
           }
-        }, {
-          default: () => {
-            return h('div', {
-              ref: bodyElemRef,
-              class: 'vxe-table-custom-popup--body'
-            }, [
-              h('div', {
-                class: 'vxe-table-custom-popup--table-wrapper'
-              }, [
-                h('table', {}, [
-                  h('colgroup', {}, [
-                    allowVisible
-                      ? h('col', {
-                        style: {
-                          width: '80px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    allowSort
-                      ? h('col', {
-                        style: {
-                          width: '80px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    h('col', {
-                      style: {
-                        minWidth: '120px'
-                      }
-                    }),
-                    allowResizable
-                      ? h('col', {
-                        style: {
-                          width: '140px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    allowFixed
-                      ? h('col', {
-                        style: {
-                          width: '200px'
-                        }
-                      })
-                      : createCommentVNode()
-                  ]),
-                  h('thead', {}, [
-                    h('tr', {}, [
-                      allowVisible
-                        ? h('th', {}, [
-                          h('div', {
-                            class: ['vxe-table-custom--checkbox-option', {
-                              'is--checked': isAllChecked,
-                              'is--indeterminate': isAllIndeterminate
-                            }],
-                            title: getI18n('vxe.table.allTitle'),
-                            onClick: allCustomEvent
-                          }, [
-                            h('span', {
-                              class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                            }),
-                            h('span', {
-                              class: 'vxe-checkbox--label'
-                            }, getI18n('vxe.toolbar.customAll'))
-                          ])
-                        ])
-                        : createCommentVNode(),
-                      allowSort
-                        ? h('th', {}, [
-                          h('span', {
-                            class: 'vxe-table-custom-popup--table-sort-help-title'
-                          }, getI18n('vxe.custom.setting.colSort')),
-                          VxeUITooltipComponent
-                            ? h(VxeUITooltipComponent, {
-                              enterable: true,
-                              content: getI18n('vxe.custom.setting.sortHelpTip')
-                            }, {
-                              default: () => {
-                                return h('i', {
-                                  class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                                })
-                              }
-                            })
-                            : createCommentVNode()
-                        ])
-                        : createCommentVNode(),
-                      h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                      allowResizable
-                        ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                        : createCommentVNode(),
-                      allowFixed
-                        ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                        : createCommentVNode()
-                    ])
-                  ]),
-                  h(TransitionGroup, {
-                    class: 'vxe-table-custom--body',
-                    tag: 'tbody',
-                    name: 'vxe-table-custom--list'
-                  }, {
-                    default: () => trVNs
-                  })
-                ])
-              ]),
-              h('div', {
-                ref: dragHintElemRef,
-                class: 'vxe-table-custom-popup--drag-hint'
-              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
-            ])
-          },
-          footer: () => {
-            return h('div', {
-              class: 'vxe-table-custom-popup--footer'
-            }, [
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
-                  onClick: resetCustomEvent
-                })
-                : createCommentVNode(),
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
-                  onClick: cancelCustomEvent
-                })
-                : createCommentVNode(),
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  status: 'primary',
-                  content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
-                  onClick: confirmCustomEvent
-                })
-                : createCommentVNode()
-            ])
-          }
-        })
+        }, scopedSlots)
         : createCommentVNode()
     }
 
     const renderVN = () => {
       const customOpts = computeCustomOpts.value
-      if (customOpts.mode === 'popup') {
+      if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
         return renderPopupPanel()
       }
       return renderSimplePanel()
diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts
index 6c111dff90..e0cf80e2de 100644
--- a/packages/table/render/index.ts
+++ b/packages/table/render/index.ts
@@ -651,6 +651,18 @@ renderer.mixin({
     defaultFilterMethod: handleFilterMethod,
     exportMethod: handleExportSelectMethod
   },
+  VxeRadio: {
+    renderDefault: defaultCellRender
+  },
+  VxeRadioGroup: {
+    renderDefault: defaultCellRender
+  },
+  VxeCheckbox: {
+    renderDefault: defaultCellRender
+  },
+  VxeCheckboxGroup: {
+    renderDefault: defaultCellRender
+  },
   VxeSwitch: {
     autofocus: '.vxe-switch--button',
     renderEdit: defaultEditRender,
diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index d44781866c..abbf1693f7 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -97,7 +97,7 @@ export default defineComponent({
           return computeCustomOpts.value
         }
       }
-      return {}
+      return { trigger: '' }
     })
 
     const computeTrigger = computed(() => {
diff --git a/styles/components/table-module/custom.scss b/styles/components/table-module/custom.scss
index 3729492322..d0a0d38cb6 100644
--- a/styles/components/table-module/custom.scss
+++ b/styles/components/table-module/custom.scss
@@ -154,9 +154,12 @@
       outline: none;
     }
     &:hover {
-      color: var(--vxe-ui-font-primary-color);
+      color: var(--vxe-ui-font-primary-lighten-color);
     }
   }
+  .btn--confirm {
+    color: var(--vxe-ui-font-primary-color);
+  }
 }
 
 .vxe-table-custom--checkbox-option {