docs(grid): add grid customs doc and demo #3690
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughAdds a new public Grid API prop customs with a corresponding ICustomConfig type. Introduces Vue demo components and a Playwright test showcasing default column visibility/width via customs. Updates demo registry entries and tweaks Chinese doc descriptions in editor demos. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant App as App (Demo)
participant Grid as TinyGrid
participant Columns as Grid Columns
participant Toolbar as GridToolbar
participant Storage as Storage (persist)
User->>App: Load demo page
App->>Grid: Mount with props { data, customs, resizable }
Grid->>Columns: Initialize columns (defaults from grid-column)
note over Grid,Columns: Apply customs overrides (visibility, width)
Grid-->>App: Render table with initial personalized config
App->>Toolbar: Mount with { id, setting, resizable:{storage:true} }
Toolbar->>Storage: Read persisted layout (if any)
alt persisted layout exists
Toolbar->>Grid: Apply persisted layout
else No persisted layout
Grid->>Toolbar: Current layout (from customs)
Toolbar->>Storage: Persist on change
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
examples/sites/demos/pc/app/grid/webdoc/grid-editor.js (2)
10-10: Zh-CN: add spacing around “attrs” for readabilityInsert a space after so it matches surrounding style.
- <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件，<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p> + <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件，<code>attrs</code> 配置组件的属性， <code>events</code> 配置组件事件。</p>
26-26: Zh-CN: add spacing around “attrs”; sync en-US textSame spacing nit. Also, the en-US paragraph for this demo does not mention attrs like Zh-CN; please update for i18n parity.
- <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p> + <p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。<code>attrs</code> 配置组件的属性， <code>events</code> 配置组件事件。</p>examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue (1)
4-4: Use a unique toolbar id to avoid storage collisions across demosIf both demos render on the same page, shared id will mix persisted states. Prefer a unique id.
- <tiny-grid-toolbar id="default-customs" :resizable="{ storage: true }" setting></tiny-grid-toolbar> + <tiny-grid-toolbar id="default-customs-composition" :resizable="{ storage: true }" setting></tiny-grid-toolbar>examples/sites/demos/apis/grid.js (2)
162-174: Prop docs polish: fix zh-CN spacing; link to the new demo
- Add spaces around “grid-column” in zh-CN.
- Point pcDemo to this PR’s new demo anchor.
{ name: 'customs', typeAnchorName: 'ICustomConfig', type: 'ICustomConfig[]', defaultValue: '', desc: { - 'zh-CN': '表格的初始化个性配置，可以控制表格列是否隐藏，设置列宽。优先级高于grid-column上的配置。', + 'zh-CN': '表格的初始化个性配置，可以控制表格列是否隐藏，设置列宽。优先级高于 grid-column 上的配置。', 'en-US': 'Initialize the table personalized configuration to control whether the table columns are hidden and set the column width. It takes precedence over the configuration on grid-column.' }, mode: ['pc', 'mobile-first'], - pcDemo: 'grid-faq#custom-column' + pcDemo: 'grid-custom#custom-default-customs' },
4231-4241: Type ICustomConfig: clarify width semantics in code blockMinor clarity: note how numeric width is interpreted.
interface ICustomConfig { // 表格列字段 property: string // 是否显示 visible?: boolean - // 列宽 + // 列宽（数值按 px 解释；字符串支持 px/%） width?: number | string }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
examples/sites/demos/apis/grid.js(2 hunks)examples/sites/demos/pc/app/grid/custom/default-customs-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts(1 hunks)examples/sites/demos/pc/app/grid/custom/default-customs.vue(1 hunks)examples/sites/demos/pc/app/grid/webdoc/grid-custom.js(1 hunks)examples/sites/demos/pc/app/grid/webdoc/grid-editor.js(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
examples/sites/demos/pc/app/grid/custom/default-customs.vue (1)
24-27: LGTM: clear, minimal “customs” exampleThe initial hidden column and width override demonstrate the API well.
Comment on lines
+5
to
+8
| await page.goto('grid-custom#custom-default-csutoms') | ||
| const demo = page.locator('#custom-default-csutoms') | ||
| await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible() | ||
| await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Standardize demo id spelling and scope assertions to the demo container
- Fix “csutoms” → “customs” to avoid a lingering typo in routes/anchors.
- Scope the second assertion to the demo to prevent cross-demo interference.
- await page.goto('grid-custom#custom-default-csutoms')
- const demo = page.locator('#custom-default-csutoms')
+ await page.goto('grid-custom#custom-default-customs')
+ const demo = page.locator('#custom-default-customs')
await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible()
- await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible()
+ await expect(demo.getByRole('cell', { name: '员工数' })).toBeVisible()📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| await page.goto('grid-custom#custom-default-csutoms') | |
| const demo = page.locator('#custom-default-csutoms') | |
| await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible() | |
| await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible() | |
| await page.goto('grid-custom#custom-default-customs') | |
| const demo = page.locator('#custom-default-customs') | |
| await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible() | |
| await expect(demo.getByRole('cell', { name: '员工数' })).toBeVisible() |
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts around lines
5 to 8, fix the typo in the route/anchor and demo id from "csutoms" to "customs"
(both in page.goto and the locator selector) and scope the second assertion to
the demo container by changing page.getByRole(...) to demo.getByRole(...) so
both assertions target the same demo element.
Comment on lines
+16
to
+26
| { | ||
| demoId: 'custom-default-csutoms', | ||
| name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' }, | ||
| desc: { | ||
| 'zh-CN': | ||
| '<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n', | ||
| 'en-US': | ||
| '<p>Configure <code>resizable="true"</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable="{storage: true}"</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n' | ||
| }, | ||
| codeFiles: ['custom/default-customs.vue'] | ||
| }, |
There was a problem hiding this comment.
Fix demoId typo and incorrect en-US description
- Correct “csutoms” → “customs”.
- Replace en-US text (it currently describes resizable/localStorage) with “customs” usage to match the demo.
{
- demoId: 'custom-default-csutoms',
+ demoId: 'custom-default-customs',
name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' },
desc: {
'zh-CN':
'<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n',
'en-US':
- '<p>Configure <code>resizable="true"</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable="{storage: true}"</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
+ '<p>Configure <code>customs</code> on the <code>grid</code> to set initial per‑column visibility and width. It takes precedence over settings on <code>grid-column</code>.</p>\n'
},
codeFiles: ['custom/default-customs.vue']
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| { | |
| demoId: 'custom-default-csutoms', | |
| name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' }, | |
| desc: { | |
| 'zh-CN': | |
| '<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n', | |
| 'en-US': | |
| '<p>Configure <code>resizable="true"</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable="{storage: true}"</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n' | |
| }, | |
| codeFiles: ['custom/default-customs.vue'] | |
| }, | |
| { | |
| demoId: 'custom-default-customs', | |
| name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' }, | |
| desc: { | |
| 'zh-CN': | |
| '<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n', | |
| 'en-US': | |
| '<p>Configure <code>customs</code> on the <code>grid</code> to set initial per-column visibility and width. It takes precedence over settings on <code>grid-column</code>.</p>\n' | |
| }, | |
| codeFiles: ['custom/default-customs.vue'] | |
| }, |
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/webdoc/grid-custom.js around lines 16 to 26,
fix the demoId typo and swap the incorrect en-US description: change demoId from
'custom-default-csutoms' to 'custom-default-customs' and replace the current
en-US desc (which mistakenly documents resizable/localStorage) with a concise
description of the demo's actual "customs" usage — e.g., explain that
configuring the grid's customs allows initializing column visibility, order, and
widths (persisted if applicable) and that this demo shows how to apply those
initial personal configurations; keep the zh-CN desc unchanged.
zzcr
approved these changes
Sep 10, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR
优化表格文档，添加customs属性文档和demo
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Documentation
Tests