docs: 完善列设置文档

examples/search-table-react/100-columns-setting.md

@@ -5,46 +5,79 @@ toc: content
 
 # 列配置 Columns Setting
 
-- 隐藏与显示
-- 排序
-- 宽度设置
-- 持久化存储与合并算法
+打开 `showSetting` 属性将开启列设置，默认触发按钮在标题栏最右侧。
 
 ```tsx
-/**
- * defaultShowCode: true
- */
 import { sleep } from '@examples/utils'
 import schema from './helpers/schema'
 import columns from './helpers/columns'
 import createDataSource from './helpers/createDataSource'
-
-// 引入 Search
 import SearchTable from '@schema-render/search-table-react'
 
 const Demo = () => {
   return (
     <SearchTable
       search={{ schema }}
+      title={{
+        showSetting: true,
+      }}
       table={{
         columns,
         showRowNumber: true,
+        actionItems: () => [{ text: '编辑' }, { text: '详情' }],
       }}
       request={async (searchParams) => {
-        // 打印搜索条件
-        console.log('searchParams:', searchParams)
+        // 模拟请求接口获取表格数据
+        await sleep()
+        const data = createDataSource(searchParams.pageSize)
+        return { data, total: 100 }
+      }}
+    />
+  )
+}
+
+export default Demo
+```
+
+```tsx
+import { useState } from 'react'
+import { sleep } from '@examples/utils'
+import schema from './helpers/schema'
+import columns from './helpers/columns'
+import columnsVT from './helpers/columns-value-type'
+import createDataSource from './helpers/createDataSource'
+import createDataSourceVT from './helpers/createDataSource-vt'
+import SearchTable from '@schema-render/search-table-react'
 
+const items = [
+  { key: '1', label: '分类一' },
+  { key: '2', label: '分类二' },
+]
+
+const Demo = () => {
+  const [activeKey, setActiveKey] = useState('1')
+  return (
+    <SearchTable
+      search={{ schema }}
+      title={{
+        showSetting: true,
+        tabs: {
+          activeKey,
+          items,
+          onChange: setActiveKey,
+        },
+      }}
+      table={{
+        columns: activeKey === '1' ? columns : columnsVT,
+        showRowNumber: true,
+        actionItems: () => [{ text: '编辑' }, { text: '详情' }],
+      }}
+      request={async (searchParams) => {
         // 模拟请求接口获取表格数据
         await sleep()
-        const data = createDataSource()
-
-        // 返回表格数据渲染
-        return {
-          // 表格数据
-          data,
-          // 数据总数，用于分页
-          total: 100,
-        }
+        const fetchData = activeKey === '1' ? createDataSource : createDataSourceVT
+        const data = fetchData(searchParams.pageSize)
+        return { data, total: 100 }
       }}
     />
   )