diff --git a/nezha-docs/docs/.vitepress/sidebar.js b/nezha-docs/docs/.vitepress/sidebar.js
index bd3fe66de..e663caaf3 100644
--- a/nezha-docs/docs/.vitepress/sidebar.js
+++ b/nezha-docs/docs/.vitepress/sidebar.js
@@ -40,6 +40,14 @@ export const sidebar = {
             },
           ]
         },
+        {
+          text: 'table',
+          link: '/table',
+          items: [
+            { text: 'deleteButton', link: '/deleteButton',},
+            { text: 'nzDataList', link: '/nzDataList',},
+          ]
+        }
       ],
     }
   ],
diff --git a/nezha-docs/src/chartList/chartList.vue b/nezha-docs/src/chartList/chartList.vue
index 12da0c0cb..84913abe4 100644
--- a/nezha-docs/src/chartList/chartList.vue
+++ b/nezha-docs/src/chartList/chartList.vue
@@ -61,5 +61,6 @@ const props = withDefaults(defineProps<{
 
 <template>
   <div>
+
   </div>
 </template>
diff --git a/nezha-docs/src/table/demo.vue b/nezha-docs/src/table/demo.vue
new file mode 100644
index 000000000..bc8216a9c
--- /dev/null
+++ b/nezha-docs/src/table/demo.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div></div>
+</template>
+
+<style>
+
+</style>
diff --git a/nezha-docs/src/table/index.en-US.md b/nezha-docs/src/table/index.en-US.md
new file mode 100644
index 000000000..c2a517cc2
--- /dev/null
+++ b/nezha-docs/src/table/index.en-US.md
@@ -0,0 +1,58 @@
+---
+map:
+  path: /table
+---
+
+# 关联组件
+以asset为例子 其他表格 将asset换为对应名称
+
+1. deleteButton 删除组件
+2. nzDataList table组件公共部分
+3. assetBox 对应的新增 编辑染成
+4. detailViewTopSearch 详细视图搜索框
+5. assetDetail 详细视图
+6. assetTable 对应table组件
+7. clickSearch 详细搜索框
+8. topToolMoreOptions 右侧工具菜单
+9. alertSilenceBox 告警静默弹窗
+10. nzDetailView 详细视图 公共部分
+
+
+# 示例
+```vue
+<div>
+  <nz-detail-view>
+    <template v-slot:top-tool-left>
+      <detailViewTopSearch />
+    </template>
+    <template v-slot:top-tool-right>
+      <top-tool-more-options></top-tool-more-options>
+    </template>
+    <template v-slot:nz-detail-view-list>
+      <asset-detail></asset-detail>
+    </template>
+    <!-- 分页组件 -->
+    <template v-slot:pagination>
+      <el-pagination></el-pagination>
+    </template>
+  </nz-detail-view>
+  <nz-data-list>
+    <template v-slot:top-tool-right>
+      <top-tool-more-options></top-tool-more-options>
+    </template>
+    <template v-slot:search >
+      <click-search />
+    </template>
+    <template v-slot:default="slotProps">
+      <asset-table></asset-table>
+    </template>
+    <!-- 分页组件 -->
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-data-list>
+  <transition name="right-box">
+    <asset-box />
+  </transition>
+</div>
+```
\ No newline at end of file
diff --git a/nezha-docs/src/table/index.vue b/nezha-docs/src/table/index.vue
new file mode 100644
index 000000000..7afec817a
--- /dev/null
+++ b/nezha-docs/src/table/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * chart相关信息 如id 位置等
+   */
+  chartInfo?: string,
+  /**
+   * 是否报错
+   */
+  isError?: boolean,
+  /**
+   * chart相关数据 若报错 取 item.error
+   */
+  chartData?: {  },
+  /**
+   * 是否显示全部数据
+   */
+  showAllData?: boolean,
+  /**
+   * 全部数据的长度
+   */
+  allDataLength?: number,
+  /**
+   * 是否为快照
+   */
+  isExportHtml?: boolean,
+  /**
+   * 是否为预览
+   */
+  isPreview?: boolean,
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
diff --git a/nezha-docs/src/table/index.zh-CN.md b/nezha-docs/src/table/index.zh-CN.md
new file mode 100644
index 000000000..e39036c57
--- /dev/null
+++ b/nezha-docs/src/table/index.zh-CN.md
@@ -0,0 +1,59 @@
+---
+map:
+  path: /table
+---
+
+# 关联组件
+以asset为例子 其他表格 将asset换为对应名称
+
+1. deleteButton 删除组件
+2. nzDataList table组件公共部分
+3. assetBox 对应的新增 编辑染成
+4. detailViewTopSearch 详细视图搜索框
+5. assetDetail 详细视图
+6. assetTable 对应table组件
+7. clickSearch 详细搜索框
+8. topToolMoreOptions 右侧工具菜单
+9. alertSilenceBox 告警静默弹窗
+10. nzDetailView 详细视图 公共部分
+
+
+# 示例
+```vue
+<div>
+  <nz-detail-view>
+    <template v-slot:top-tool-left>
+      <detailViewTopSearch />
+    </template>
+    <template v-slot:top-tool-right>
+      <top-tool-more-options></top-tool-more-options>
+    </template>
+    <template v-slot:nz-detail-view-list>
+      <asset-detail></asset-detail>
+    </template>
+    <!-- 分页组件 -->
+    <template v-slot:pagination>
+      <el-pagination></el-pagination>
+    </template>
+  </nz-detail-view>
+  <nz-data-list>
+    <template v-slot:top-tool-right>
+      <top-tool-more-options></top-tool-more-options>
+    </template>
+    <template v-slot:search >
+      <click-search />
+      <click-search />
+    </template>
+    <template v-slot:default="slotProps">
+      <asset-table></asset-table>
+    </template>
+    <!-- 分页组件 -->
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-data-list>
+  <transition name="right-box">
+    <asset-box />
+  </transition>
+</div>
+```
\ No newline at end of file
diff --git a/nezha-docs/src/table/tableChild/deleteButton/index.en-US.md b/nezha-docs/src/table/tableChild/deleteButton/index.en-US.md
new file mode 100644
index 000000000..930652b5b
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/deleteButton/index.en-US.md
@@ -0,0 +1,7 @@
+---
+map:
+  path: /deleteButton
+---
+
+<API src="./index.vue" lang="en"></API>
+
diff --git a/nezha-docs/src/table/tableChild/deleteButton/index.vue b/nezha-docs/src/table/tableChild/deleteButton/index.vue
new file mode 100644
index 000000000..b94fb9fc9
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/deleteButton/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * 是否显示强制删除
+   */
+  forceDeleteShow?: boolean,
+  /**
+   * 需要删除的数组
+   */
+  deleteObjs?: Array,
+  /**
+   * 删除接口
+   */
+  api?: string,
+  /**
+   * 唯一id
+   */
+  id?: string,
+  /**
+   * 删除按钮的样式 是按钮 还是文字
+   */
+  type?: string,
+  /**
+   * 删除的标题
+   */
+  deleteTitle?: string,
+  /**
+   * 是否需要强制删除
+   */
+  single?: boolean,
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
diff --git a/nezha-docs/src/table/tableChild/deleteButton/index.zh-CN.md b/nezha-docs/src/table/tableChild/deleteButton/index.zh-CN.md
new file mode 100644
index 000000000..2e6ced74f
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/deleteButton/index.zh-CN.md
@@ -0,0 +1,8 @@
+---
+map:
+  path: /deleteButton
+---
+
+
+
+<API src="./index.vue" lang="zh"></API>
\ No newline at end of file
diff --git a/nezha-docs/src/table/tableChild/nzDataList/index.en-US.md b/nezha-docs/src/table/tableChild/nzDataList/index.en-US.md
new file mode 100644
index 000000000..21e1878a3
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/nzDataList/index.en-US.md
@@ -0,0 +1,7 @@
+---
+map:
+  path: /nzDataList
+---
+
+<API src="./index.vue" lang="en"></API>
+
diff --git a/nezha-docs/src/table/tableChild/nzDataList/index.vue b/nezha-docs/src/table/tableChild/nzDataList/index.vue
new file mode 100644
index 000000000..aaee599d2
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/nzDataList/index.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  /**
+   * 是否显示强制删除
+   */
+  forceDeleteShow?: boolean,
+  /**
+   * 需要删除的数组
+   */
+  deleteObjs?: Array,
+  /**
+   * 删除接口
+   */
+  api?: string,
+  /**
+   * 唯一id
+   */
+  id?: string,
+  /**
+   * 删除按钮的样式 是按钮 还是文字
+   */
+  type?: string,
+  /**
+   * 删除的标题
+   */
+  deleteTitle?: string,
+  /**
+   * 是否需要强制删除
+   */
+  single?: boolean,
+}>(), {
+
+})
+</script>
+
+<template>
+  <div>
+    <!-- 这里是默认插槽，可以插入自定义内容 -->
+    <slot name="top-tool-left">{{ 213123 }}</slot>
+  </div>
+</template>
diff --git a/nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md b/nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md
new file mode 100644
index 000000000..339a2463d
--- /dev/null
+++ b/nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md
@@ -0,0 +1,84 @@
+---
+map:
+  path: /nzDataList
+---
+# 关联组件
+1. SearchBox
+2. bottomBox
+3. panelChart
+4. deleteButton
+5. diagnosisTab
+6. configSync
+
+
+
+# 示例代码
+```vue
+  <div :class="from" class="list-page">
+  <!-- 主页面 -->
+  <div class="main-list">
+    <!-- 顶部工具栏 -->
+    <div class="main-container">
+      <div class="top-tools">
+        <div class="top-tool-left" >
+          <search-box></search-box>
+          <slot name="top-tool-left"></slot>
+        </div>
+        <div class="top-tool-right">
+          <div>
+            <search-input ></search-input>
+          </div>
+          <template>
+            <slot name="top-tool-right"></slot>
+          </template>
+          <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn table-column-setting"
+                  type="button" @click="tools.showCustomTableTitle = true" :title="$t('overall.selectColumns')">
+            <i class="nz-icon-gear nz-icon"></i>
+          </button>
+          <el-dropdown>
+            <button class="top-tool-btn table-column-setting"
+                    type="button" :title="$t('overall.switchView')">
+              <i class="nz-icon nz-icon-list-view" />
+            </button>
+            <el-dropdown-menu slot="dropdown"  class="right-public-box-dropdown-top right-box-select-top">
+              <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
+              <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
+      </div>
+      <div >
+        <slot name="search"></slot>
+      </div>
+      <div>
+        <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
+      </div>
+      <div>
+        <slot name="pagination"></slot>
+      </div>
+    </div>
+    <!-- 自定义table列 -->
+    <transition name="el-zoom-in-top">
+      <element-set></element-set>
+    </transition>
+
+  </div>
+  
+  <transition name="el-zoom-in-bottom">
+    <bottom-box ></bottom-box>
+  </transition>
+  
+  <delete-button></delete-button>
+  <diagnosis-tab></diagnosis-tab>
+  
+  <config-sync></config-sync>
+  
+</div>
+```
+
+
+
+
+<API src="./index.vue" lang="zh"></API>
\ No newline at end of file