@opentiny/vue-docs 1.0.0

package/resources/pc/demo-config/en-US/grid-grid-stripe.json

@@ -0,0 +1,10 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "Whether the <p><code>stripe</code> has zebra prints is disabled by default. Enabled when <code>:stripe=\"true\" </code> is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.) </p>\n",
+    "link": "grid/stripe/stripe",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "stripe-stripe"
+  }
+]

package/resources/pc/demo-config/en-US/grid-header.json

@@ -0,0 +1,34 @@
+[
+  {
+    "title": "Hide table headers.",
+    "content": "<p>Set <code>showHeader</code> to <code>fasle</code> to control the hidden table header. The default value is <code>true</code>. </p>\n",
+    "link": "grid/header/hide-grid-header",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "header-hide-grid-header"
+  },
+  {
+    "title": "User-defined table header",
+    "content": "<p>Customize the table header by column <code>slot</code> slot</p>\n",
+    "link": "grid/header/custom-grid-header",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "header-custom-grid-header"
+  },
+  {
+    "title": "Configure the template for customizing table header content",
+    "content": "<p>Set the <code>header</code> slot and configure the template of the customized table header content. </p>\n",
+    "link": "grid/header/slot-header",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "header-slot-header"
+  },
+  {
+    "title": "Basic Description",
+    "content": "<p>Add the class name to the cell of the table header through the column attribute <code>header-class-name</code>, or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n</p>\n",
+    "link": "grid/header/header-class-name",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "header-header-class-name"
+  }
+]

package/resources/pc/demo-config/en-US/grid-highlight.json

@@ -0,0 +1,50 @@
+[
+  {
+    "title": "Highlight Hover Line",
+    "content": "<p>Set the <code>highlight-hover-row</code> attribute to control whether to enable the highlight function when the cursor is moved to the current line. The default value is <code>true</code>. If you do not need to hover and highlight, set <code>highlight-hover-row</code> to <code>false</code>. </p>\n",
+    "link": "grid/highlight/highlight-hover-row",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "highlight-highlight-hover-row"
+  },
+  {
+    "title": "Highlight a specified line",
+    "content": "The <p><code>setCurrentRow(row)</code> can be used to set the highlight status of a line. </p>\n",
+    "link": "grid/methods/set-current-row",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-current-row"
+  },
+  {
+    "title": "Enable the selected row to be highlighted",
+    "content": "<p>Set the <code>highlight-current-row</code> attribute to control whether to highlight selected lines.</p>\n<p>\nThe lines with zebra crossings are not highlighted.\n</p>\n",
+    "link": "grid/highlight/highlight-current-row",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "highlight-highlight-current-row"
+  },
+  {
+    "title": "Whether to highlight the column header",
+    "content": "<p>Set the <code>highlight-hover-column</code> attribute to control whether to enable the highlight function when the cursor is moved to the column header of the current column. </p>\n",
+    "link": "grid/highlight/highlight-hover-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "highlight-highlight-hover-column"
+  },
+  {
+    "title": "Specifies whether to highlight the selected column.",
+    "content": "<p>Set the <code>highlight-current-column</code> attribute to determine whether to highlight the current column.</p>\n",
+    "link": "grid/highlight/highlight-current-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "highlight-highlight-current-column"
+  },
+  {
+    "title": "Highlight cell borders during editing",
+    "content": "<p>Sets whether <code>highlight-cell</code> highlights the cell border during editing. This parameter is valid only when <code>editConfig</code> is configured</p>\n",
+    "link": "grid/highlight/highlight-cell",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "highlight-highlight-cell"
+  }
+]

package/resources/pc/demo-config/en-US/grid-import-export.json

@@ -0,0 +1,10 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "For details, see the following example.",
+    "link": "grid/tiny-first-menu/export-excel",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-export-excel"
+  }
+]

package/resources/pc/demo-config/en-US/grid-keyboard.json

@@ -0,0 +1,26 @@
+[
+  {
+    "title": "Keyboard Navigation",
+    "content": "<div class=\"tip custom-block\"><p class=\"custom-block-title\"> Key Description </p>\n<p>| Arrow Up ↑ | Moves to the cell above the current active cell |\n| Arrow Down ← | Moves to the cell below the current active cell |\n| Arrow Left ← | Moves to the cell on the left of the current active cell |\n| Arrow Right → | Moves to the right of the current active cell |\n| Tab | Moves to the cell on the right of the selected or active cell. If the last column is displayed and the next row exists, move from the next row. |\n| Tab + Shift | Moves to the cell on the left of the selected or active cell. If the first column is displayed and there is a previous row, move the cell from the previous row. |\n| Spacebar | If the cell is a check box or option button, switch the selected status. |\n| Enter | Cancel the editing and move the cell to the cell under the current active cell. |\n| Delete | Clear the content. | \n| Backspace | Clear the contents and activate the selected cell to the editing state. |\n| F2 | Activate cell editing. |\n| Esc | Cancel cell editing. |\n| Page Up | Page Up | Page Down | Page Down | Page Down | Page Down | \n| Home | Scroll to the top |\n| End | Scroll to the bottom |</p>\n</div>\n",
+    "link": "grid/keyboard-navigation",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "keyboard-navigation"
+  },
+  {
+    "title": "Set key configuration items",
+    "content": "<p>Table property<code>keyboard-config</code>Set key configuration items. \n</p>\n",
+    "link": "grid/keyboard-config",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "keyboard-config"
+  },
+  {
+    "title": "Setting Mouse Configuration Items",
+    "content": "<p>Table property<code>mouse-config</code>Set the mouse configuration item. \n</p>\n",
+    "link": "grid/mouse-config",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "mouse-config"
+  }
+]

package/resources/pc/demo-config/en-US/grid-large-data.json

@@ -0,0 +1,50 @@
+[
+  {
+    "title": "Scroll Pagination",
+    "content": "<p>Scrolling pagination configuration procedure:\n1. Set the table attribute <code>fetch-data</code> to enable the service request. \n2. Set <code>scroll-load</code> to enable scrolling. </p>\n",
+    "link": "grid/tiny-first-menu/scroll-paging",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-scroll-paging"
+  },
+  {
+    "title": "Virtual Scrolling",
+    "content": "<p>Virtual scrolling configuration procedure:\n1. Set <code>height</code> to a fixed height for table attributes. \n2. Set <code>optimization</code> to enable virtual scrolling. </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">optimization(Object) configuration description: </p>\n<p>| delayHover(Number) | (ms) after which the hover event can be triggered when a table is dragged or scrolled. The default value is 250 ms. |\n| scrollX(Object) | Horizontal X virtual scrolling configuration (for manual optimization in special scenarios) Example: {gt: 100} |\n| scrollY(Object) | Vertical Y Virtual Scrolling Configuration (for manual optimization in special scenarios) For example, {gt: 500} |</p>\n</div>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\"> Precautions for enabling virtual scrolling</p>\n<p>1. Before enabling virtual scrolling, ensure that the width of each column is the same. You can configure the uniform width by setting the <code>column-width</code> attribute on the <code>&lt;tiny-grid&gt;</code> tag. \n2. Enabling virtual scrolling will disable the column width adjustment function. Column dragging will change the column width. As a result, the number of columns in virtual scrolling rendering is incorrectly calculated and the table style is disordered. Therefore, column dragging is prohibited. </p>\n</div>\n",
+    "link": "grid/tiny-first-menu/virtual-rolling",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-virtual-rolling"
+  },
+  {
+    "title": "Virtual scrolling of the tree table",
+    "content": "<p><table class=\"table\"><thead><tr><th> Name</th><th>Type</th><th>Description</th>Default Value </th></tr></thead> <tbody><tr><td>optimization.scrollX.gt</td> <td>Number</td> <td> Specifies the number of columns to be automatically started when the number of columns is greater than X Virtual scrolling </td> <td>100</td></tr> <tr><td>optimization.scrollX.rSize</td> <td>Number</td> <td> Number of columns to be rendered each time </td> <td></td></tr> <tr><td>optimization.scrollX.vSize</td> <td>Number</td> <td> Number of columns in the visible area </td> <td></td></tr> <tr><td>optimization.scrollX.adaptive</td> <td>Boolean</td> <td> Automatically adapts to the optimal rendering mode (If this parameter is set to false, the column array is intercepted only once after the scrolling is complete, which improves the performance in big data scenarios. However, the white screen will be displayed for a short time and will be restored after the rendering is complete.) </td> <td>true</td></tr> <tr><td>optimization.scrollY.gt</td> <td>Number</td> <td> specifies the number of lines. Y: The virtual scrolling function is automatically enabled. </td> <td>500</td></tr> <tr><td>optimization.scrollY.rSize</td> <td>Number</td> <td>: number of lines to be rendered each time. </td> <td></td></tr> <tr><td>optimization.scrollY.adaptive</td> <td>Boolean</td> <td>: automatically adapts to the optimal rendering mode. (If this parameter is set to false, the row array is captured only once after the scrolling is complete, which improves the performance in big data scenarios. However, white screen will be displayed for a short time and will be restored after the rendering is complete.) </td> <td>true</td></tr></tbody></table></p>\n</div>\n",
+    "link": "grid/tiny-first-menu/grid-large-tree-data",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-grid-large-tree-data"
+  },
+  {
+    "title": "Full Load",
+    "content": "<p>Performance problems may occur when there is too much data in a table. You can use <code>$refs</code> to obtain table objects and set the <code>loadData</code> method of the table objects to enable full loading to optimize performance. </p>\n",
+    "link": "grid/tiny-first-menu/full-data-loading",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-full-data-loading"
+  },
+  {
+    "title": "Generate 1000 columns",
+    "content": "<p>You can use the <code>loadColumn(columns)</code> method to load column configurations. This method may be used in scenarios where columns need to be reloaded. </p>\n",
+    "link": "grid/large-data/load-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "large-data-load-column"
+  },
+  {
+    "title": "Scroll to the specified position",
+    "content": "<div class=\"tip custom-block\"><p class=\"custom-block-title\"> Method Description </p>\n<p><code>scrollTo(scrollLeft, scrollTop)</code>: Scroll to the corresponding position \n<code>scrollToRow(row)</code>: Scroll to the corresponding row \n<code>scrollToColumn(column)</code>: Scroll to the corresponding column </p>\n</div>\n",
+    "link": "grid/large-data/scroll-to",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "large-data-scroll-to"
+  }
+]

package/resources/pc/demo-config/en-US/grid-nested-grid.json

@@ -0,0 +1,42 @@
+[
+  {
+    "title": "Nested Table",
+    "content": "<p>Implements the nested table function by using the table component in the default slot <code>default</code>. </p>\n",
+    "link": "grid/grid_Example/nestedGrid",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "grid_Example-nestedGrid"
+  },
+  {
+    "title": "Check whether the row is expanded.",
+    "content": "<p>You can invoke the <code>hasRowExpand(row)</code> method to check whether a row is expanded. The row parameter is the row data object. </p>\n",
+    "link": "grid/expand/hasRowExpand",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "expand-hasRowExpand"
+  },
+  {
+    "title": "Set to expand all lines",
+    "content": "<p>You can invoke the <code>setAllRowExpansion(checked)</code> method to set whether to expand or not all rows. </p>\n",
+    "link": "grid/methods/set-all-row-expansion",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-all-row-expansion"
+  },
+  {
+    "title": "Set to expand a specified line",
+    "content": "<p>You can invoke the <code>setRowExpansion(rows, checked)</code> method to expand a specified row. The second parameter specifies whether to expand a specified row. When expanding a specified row, you can invoke the clearRowExpand() method to close the expanded row. </p>\n",
+    "link": "grid/methods/set-row-expansion",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-row-expansion"
+  },
+  {
+    "title": "Manually switch to expand rows",
+    "content": "<p>You can manually switch between expanded rows by invoking the <code>toggleRowExpansion(row)</code> method. </p>\n",
+    "link": "grid/methods/toggle-row-expansion",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-toggle-row-expansion"
+  }
+]

package/resources/pc/demo-config/en-US/grid-operation-column.json

@@ -0,0 +1,106 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>Table column property setting <code>type=&quot;radio&quot;</code> Display radio columns. </p>\n",
+    "link": "grid/tiny-first-menu/default-serial-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-default-serial-column"
+  },
+  {
+    "title": "Manually Canceling a Row",
+    "content": "For details, see the following example.",
+    "link": "grid/tiny-first-menu/clearRadioRow",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-clearRadioRow"
+  },
+  {
+    "title": "Manually select a line",
+    "content": "<p><code>setRadioRow(row)</code> is used to select a single line and set the selected status of a line. </p>\n",
+    "link": "grid/methods/set-radio-row",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-radio-row"
+  },
+  {
+    "title": "Single-choice configuration item",
+    "content": "The <p><code>radio-config</code> configuration item can be used to configure the default selected and disabled options of the option button. </p>\n",
+    "link": "grid/tiny-first-menu/radio-config",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-radio-config"
+  },
+  {
+    "title": "Disable a single option",
+    "content": "<p>Single choice mode. The attribute <code>checkMethod</code> of the <code>radio-config</code> configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is <code>true</code> or <code>false</code>, the data item is enabled or disabled. </p>\n",
+    "link": "grid/disable-radio",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "disable-radio"
+  },
+  {
+    "title": "Display Multiple Select Columns",
+    "content": "<p>Table column attribute setting <code>type=&quot;selection&quot;</code> Display multiple columns. </p>\n",
+    "link": "grid/tiny-first-menu/custom-serial-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-custom-serial-column"
+  },
+  {
+    "title": "Manually Cancel Multiple Rows",
+    "content": "For details, see the following example.",
+    "link": "grid/tiny-first-menu/clearSelection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-clearSelection"
+  },
+  {
+    "title": "Manually select all lines",
+    "content": "<p><code>setAllSelection(checked)</code> is used to select multiple rows. You can set the selected status of all rows. </p>\n",
+    "link": "grid/methods/set-all-selection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-all-selection"
+  },
+  {
+    "title": "Manually select a specified line",
+    "content": "<p><code>setSelection(rows, checked)</code> is used to select multiple lines. You can set the selected status of a specified line. The first parameter can be transferred to an object or array. If an object is used, select a single line. If an array is used, select multiple lines. The second parameter indicates whether to select or not. The </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p><code>setSelection</code> method does not trigger the <code>select-change</code> event. It is triggered only when you click it. </p><p>In multi-selection mode, the <code>checkField</code> attribute of the <code>select-config</code> configuration item determines the selection status of a row of data. (and the selected state and this field are bidirectionally bound).</p>\n</div>\n",
+    "link": "grid/methods/set-selection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-set-selection"
+  },
+  {
+    "title": "Manually switch the selection status of all rows.",
+    "content": "The <p><code>toggleAllSelection()</code> method directly switches the selection status of all rows. </p>\n",
+    "link": "grid/methods/toggle-all-selection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-toggle-all-selection"
+  },
+  {
+    "title": "Manually switch the selected status of a specified row.",
+    "content": "The <p><code>toggleRowSelection(row)</code> method directly switches the selection status of a row. </p>\n",
+    "link": "grid/methods/toggle-row-selection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-toggle-row-selection"
+  },
+  {
+    "title": "Multi-choice disabled",
+    "content": "<p>Multi-choice mode. The attribute <code>checkMethod</code> of the <code>select-config</code> configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is <code>true</code> or <code>false</code>, the data item is enabled or disabled. </p>\n",
+    "link": "grid/disable-selection",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "disable-selection"
+  },
+  {
+    "title": "User-defined Operation Column Content",
+    "content": "<p>Set the customized operation column by slot, that is, <code>&lt;tiny-grid-column&gt;</code> customized operation column content <code>&lt;/tiny-grid-column&gt;</code> . </p>\n",
+    "link": "grid/tiny-first-menu/custom-operation-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-custom-operation-column"
+  }
+]

package/resources/pc/demo-config/en-US/grid-pager.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>To ensure that the table is lightweight and open, the table is modularized and split. The core code is lightweight. The paging component needs to be introduced to the paging function. The built-in paging configuration procedure is as follows: \n1. <code>import</code> introduces the official <code>Pager</code> component. That is, <code>import Pager from '@opentiny/vue-pager'</code> or <code>{Pager} from '@opentiny/vue'</code>. \n2. <code>Pager</code> is transferred to the <code>data()</code> function and stored for use in the template. \n3. Set the table attribute <code>pager</code> to configure pagination and inject the pagination component through the <code>{component: Pager}</code> attribute of <code>pager</code>. \n4. Configure the seq-serial attribute to set the sequence number to be displayed consecutively after page turning. By default, the sequence number is displayed discontinuously.</p>\n",
+    "link": "grid/pager/inner-pager",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "pager-inner-pager"
+  },
+  {
+    "title": "The system prompts you to save data.",
+    "content": "<p>Configure the <code>showSaveMsg</code> attribute. When the table data is modified, the system prompts you to save the modification.</p>\n",
+    "link": "grid/pager/showSaveMsg",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "pager-showSaveMsg"
+  }
+]

package/resources/pc/demo-config/en-US/grid-renderer.json

@@ -0,0 +1,26 @@
+[
+  {
+    "title": "Built-in Renderer",
+    "content": "<p>The built-in renderer sets the display obtaining type of the current table column. \n Configure the <code>format-text</code> object in the <code>grid-column</code> column to control the data format. The options of </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p><code>format-text</code> are as follows: </p>\n<ul>\n<li><code>integer</code>: displayed as an integer. </li>\n<li><code>number</code>: The value is displayed as a decimal. </li>\n<li><code>money</code>: displays the amount of money. </li>\n<li>rate: The data is displayed as a percentage. </li>\n<li>filesize: indicates the file size. </li>\n<li>boole: displays the icon with a pair or cross. </li>\n<li>date: indicates the year, month, and day. </li>\n<li>dateTime: indicates the year, month, day, hour, and minute. </li>\n<li>longDateTime: year, month, day, hour, minute, and second. </li>\n<li>time: time and hour. </li>\n<li>longTime: hour, minute, and second. </li>\n<li>yearMonth: displays the adult month. </li>\n<li>enum: Queries the text to be displayed based on the data value. </li>\n<li>ellipsis: displays the omitted content. When you move the cursor to the cell, the complete content is displayed. The len attribute of format must also be configured. </li>\n</ul>\n</div>\n",
+    "link": "grid/grid_Example/gridRenderer/inner-renderer",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "grid_Example-gridRenderer-inner-renderer"
+  },
+  {
+    "title": "Custom Renderer",
+    "content": "<p>The custom renderer can customize the rendering of cells or a <code>vue component</code>. Configure <code>renderer</code> in the <code>grid-column</code> column to support method and object configuration. For details, see the following example. </p>\n",
+    "link": "grid/grid_Example/gridRenderer/custom-renderer",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "grid_Example-gridRenderer-custom-renderer"
+  },
+  {
+    "title": "Column Asynchronous Data Rendering",
+    "content": "<p>After the <code>async</code> attribute of the <code>format-config</code> column is set to <code>true</code>, the <code>data</code> data can be dynamically modified for automatic rendering. Generally, <code>type</code> is set to <code>enum</code>, and <code>value</code> and <code>label</code> can be used to configure the mapping of rendering cells. </p>\n",
+    "link": "grid/news/async-colunm-render",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "news-async-colunm-render"
+  }
+]

package/resources/pc/demo-config/en-US/grid-reverse-column-row.json

@@ -0,0 +1,10 @@
+[
+  {
+    "title": "Grid-Inverting Rows and Columns in a Table",
+    "content": "<p>You need to configure <code>:columns=&quot;tableColumn&quot;</code> <code>:show-header=&quot;false&quot;</code> on the <code>grid</code> tag. Click the 'Reverse Table' button to view the effect. Currently, the operation can only be performed once. If the operation is performed multiple times, problems may occur. For details, see the following example. </p>\n",
+    "link": "grid/grid_Example/reverseRow",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "grid_Example-reverseRow"
+  }
+]

package/resources/pc/demo-config/en-US/grid-row-grouping.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "Row groups can be configured for the <p><code>row-group</code> attribute. Columns with the same value are displayed in groups. </p>\n",
+    "link": "grid/row-grouping",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "row-grouping"
+  },
+  {
+    "title": "Customized Group",
+    "content": "The <p><code>row-group</code> configuration item <code>render</code> can be used to customize group content rendering, and <code>closeable</code> can be used to control whether group lines can be collapsed. </p>\n",
+    "link": "grid/rowGroupRender",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "rowGroupRender"
+  }
+]

package/resources/pc/demo-config/en-US/grid-serial-column.json

@@ -0,0 +1,26 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>Table column attribute setting <code>type=&quot;index&quot;</code> Display sequence number column. </p>\n",
+    "link": "grid/tiny-first-menu/default-serial-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-default-serial-column"
+  },
+  {
+    "title": "User-defined sequence number rule",
+    "content": "<p>The table column attribute sets <code>type=&quot;index&quot;</code> to display the sequence number column. The <code>index-method</code> method sets the user-defined sequence number rule. </p>\n",
+    "link": "grid/tiny-first-menu/custom-serial-column",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-custom-serial-column"
+  },
+  {
+    "title": "Start value of the user-defined sequence number column",
+    "content": "<p>Set the table column attribute <code>type=&quot;index&quot;</code> to display the sequence number column, and <code>start-index</code> to set the start value of the customized sequence number column. </p>\n",
+    "link": "grid/tiny-first-menu/start-index",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-start-index"
+  }
+]

package/resources/pc/demo-config/en-US/grid-slot.json

@@ -0,0 +1,26 @@
+[
+  {
+    "title": "Default slot",
+    "content": "For details, see the following example.",
+    "link": "grid/slot/default-slot",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "slot-default-slot"
+  },
+  {
+    "title": "Toolbar slot",
+    "content": "For details, see the following example.",
+    "link": "grid/slot/buttons-slot",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "slot-buttons-slot"
+  },
+  {
+    "title": "Empty data display slot",
+    "content": "For details, see the following example.",
+    "link": "grid/slot/empty-slot",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "slot-empty-slot"
+  }
+]

package/resources/pc/demo-config/en-US/grid-sort.json

@@ -0,0 +1,50 @@
+[
+  {
+    "title": "Default Sorting",
+    "content": "<p>Enable the sorting function by setting the <code>sortable</code> attribute of the table column. </p>\n",
+    "link": "grid/sort/default-sort",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "sort-default-sort"
+  },
+  {
+    "title": "Unique Primary Key",
+    "content": "<p>Set the <code>row-id</code> field name of the unique primary key of user-defined row data in a table. The default value of this property is _XID</p>\n",
+    "link": "grid/tiny-first-menu/row-id",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tiny-first-menu-row-id"
+  },
+  {
+    "title": "Multi-field sorting",
+    "content": "<p>Set the <code>sortable</code> attribute of the table column to enable the sorting function of the column, and then set the <code>sort-by</code> attribute to implement multi-field sorting. An array list is a sorted list of fields. </p>\n",
+    "link": "grid/sort/combinations-sort",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "sort-combinations-sort"
+  },
+  {
+    "title": "Custom Sorting",
+    "content": "<p>Set the <code>sortable</code> attribute of the table column to enable the sorting function for the column, and then set the <code>sort-method</code> method to implement user-defined sorting. </p>\n",
+    "link": "grid/sort/custom-sort",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "sort-custom-sort"
+  },
+  {
+    "title": "Manual Sorting",
+    "content": "<p>You can use the <code>sort(field, order)</code> method to manually sort tables. If order is empty, the sorting is automatically switched. </p>\n",
+    "link": "grid/methods/sort",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "methods-sort"
+  },
+  {
+    "title": "Table server sorting",
+    "content": "<p>Set the <code>sortable</code> attribute of the table column to enable the sorting function, and then set the <code>remote-sort</code> method to enable the sorting function on the server. \nIn this example, the <code>services/getGridMockData</code> service needs to be implemented. The example simulates the data returned by the remote service.\n</p>\n",
+    "link": "grid/sort/server-sort",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "sort-server-sort"
+  }
+]

package/resources/pc/demo-config/en-US/grid-span.json

@@ -0,0 +1,26 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>Set the built-in row combination rule through the table column attribute <code>row-span</code>. This attribute applies only to common tables and does not apply to nested tree tables. </p>\n",
+    "link": "grid/span/row-span/row-span-easy",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "span-row-span-row-span-easy"
+  },
+  {
+    "title": "Custom Combination Rule",
+    "content": "<p>Set a custom combination rule through the table column attribute <code>span-method</code>. </p>\n",
+    "link": "grid/span/row-span/row-span",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "span-row-span-row-span"
+  },
+  {
+    "title": "Column Merge",
+    "content": "<p>Column combination is a user-defined combination rule implemented by using the <code>span-method</code> table column setting method. For example, </p>\n<blockquote>\n<p> can combine two columns into </p>\n</blockquote>\n",
+    "link": "grid/span/column-span",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "span-column-span"
+  }
+]

package/resources/pc/demo-config/en-US/grid-summary.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>Configure custom statistics through <code>footer-method</code> and <code>show-footer</code>. </p>\n",
+    "link": "grid/summary/custom-summary",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "summary-custom-summary"
+  },
+  {
+    "title": "Set Profile Statistics",
+    "content": "<p>Set the profile statistics using <code>summary-config</code>. </p>\n",
+    "link": "grid/summary/configuration-summary",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "summary-configuration-summary"
+  }
+]

package/resources/pc/demo-config/en-US/grid-tip.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Column Header Prompt",
+    "content": "<p>There are two types of column header prompts. One is <code>show-header-tip</code> prompt (a prompt is displayed regardless of whether the content exceeds the value of <code>show-header-overflow</code>). The other is hidden and prompt when the content exceeds the current line. The options of </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p><code>show-header-overflow</code> are as follows: </p>\n<ul>\n<li><code>tooltip</code>: displays the content that exceeds the value of <code>...</code>, displays all information at the prompt layer on the left or right, and displays the default prompt when <code>show-overflow</code> is enabled. </li>\n<li><code>title</code>: Same as the <code>title</code> attribute of the native tag. </li>\n<li><code>ellipsis</code>: <code>...</code> is displayed for the extra content, and </li>\n</ul>\n</div>\n is not displayed",
+    "link": "grid/tip/column-header-tip",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tip-column-header-tip"
+  },
+  {
+    "title": "Cell Prompt",
+    "content": "<p> There are two types of cell prompts. One is the <code>show-tip</code> prompt (a prompt is displayed regardless of whether the content exceeds the current line). The other is the <code>show-overflow</code> prompt is hidden and displayed when the content exceeds the current line. The options of </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p><code>show-overflow</code> are as follows: </p>\n<ul>\n<li><code>title</code>: consistent with the <code>title</code> attribute of the native tag </li>\n<li><code>ellipsis</code>: <code>...</code> is displayed for the extra content. </li>\n<li><code>tooltip</code>: <code>...</code> is displayed for the extra content. The left/right pop-up prompt layer displays all information. The default prompt when <code>show-overflow</code> is enabled\n<code>tooltip</code> can be prompted through the <code>Grid</code> property <code>: Configure tooltip-config</code>. For details about the configuration method, see </li>\n</ul>\n</div>\n of the Tooltip</code> component",
+    "link": "grid/tip/cell-tip",
+    "component": "Grid Table",
+    "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+    "demoId": "tip-cell-tip"
+  }
+]