feat: ✨ 新增表格控制

packages/gbeata/docs/api/index.ts

@@ -1,7 +1,7 @@
 /**
  * 此文件为模拟模拟接口的文件，不要复制，仅供参考
  */
-import { AnyKeyProps, Record } from 'multiway';
+import { AnyKeyProps, Record } from 'gbeata';
 
 export const professionOptions = [
   { label: '近卫干员', value: '近卫' },

packages/gbeata/docs/components/ExtraConfig.md

@@ -0,0 +1,296 @@
+---
+nav: 组件
+group: 表格table
+order: 3
+---
+
+# 扩展按钮配置
+
+在表格头部右侧，则是扩展区域，可以通过配置来控制它们的展示。
+
+全屏按钮，是网页全屏，并非是页面全屏。
+
+全屏遮罩默认层级是固定 999，如果发生覆盖现象，可以考虑调整此参数。
+
+```css
+.mw-search-table.full {
+  z-index: 999;
+}
+```
+
+全局配置请参考 [这里](../global/set-search-table-default-value)。
+
+## 扩展按钮的配置
+
+### 刷新按钮
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右边没有刷新按钮"
+      rowKey="sort_id"
+      extraRefreshVisible={false}
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右边没有刷新按钮"
++ extraRefreshVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```
+
+### 密度按钮
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右边没有密度按钮"
+      rowKey="sort_id"
+      extraSizeVisible={false}
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右边没有密度按钮"
++ extraSizeVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右边没有密度默认值为紧凑"
+      rowKey="sort_id"
+      extraSizeDefaultValue="small"
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右边没有密度按钮"
++ extraSizeVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```
+
+### 展示列按钮
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右边没有展示列"
+      rowKey="sort_id"
+      extraSettingVisible={false}
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右边没有展示列"
++ extraSettingVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```
+
+### 全屏按钮
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右边没有全屏按钮"
+      rowKey="sort_id"
+      extraFullscreenVisible={false}
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右边没有全屏按钮"
++ extraFullscreenVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```
+
+### 不展示所有扩展按钮
+
+可以配置右侧没有按钮，而不需要单独配置。
+
+```tsx
+import React from 'react';
+import { GSearchTable, GSearchTableField } from 'gbeata';
+import { listApi } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '姓名',
+    key: 'cn',
+    dialog: {
+      required: true,
+    },
+  },
+  {
+    title: '英文名',
+    key: 'en',
+    dialog: {
+      required: true,
+    },
+  },
+];
+export default function Demo() {
+  return (
+    <GSearchTable
+      title="右侧没有扩展按钮"
+      rowKey="sort_id"
+      extraVisible={false}
+      fields={fields}
+      api={listApi}
+    />
+  );
+}
+```
+
+```diff
+<GSearchTable
+  title="右侧没有扩展按钮"
++ extraVisible={false}
+  fields={fields}
+  api={listApi}
+/>
+```