docs: update Table demo and FAQ about dataIndex and dataSource

content/show/table/index-en-US.md

@@ -257,15 +257,19 @@ This feature can be turned on by passing in `rowSelection`.
 -   Click the selection box in the header, and all rows in the `dataSource` that are not in the state of `disabled` will be selected. The callback function for selecting all rows is `onSelectAll`;
 -   Clicking on the row selection box will select the current row. Its callback function is `onSelect`;
 
-> Note: Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.
+<Notice title='注意事项'>
+    <div>1. Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.</div>
+    <div>2. If you encounter the problem of returning to the first page after clicking a row selection on the second page, please check whether component rendering triggers "dataSource" update (shallow equal). After the "dataSource" is updated, the uncontrolled page turner will return to the first page. Please put "dataSource" inside state. </div>
+</Notice>
 
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
 import { IconMore } from '@douyinfe/semi-icons';
 
 function App() {
-    const columns = [
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const columns = useMemo(() => [
         {
             title: 'Title',
             dataIndex: 'name',
@@ -313,8 +317,8 @@ function App() {
                 return <IconMore />;
             },
         },
-    ];
-    const data = [
+    ], []);
+    const data = useMemo(() => [
         {
             key: '1',
             name: 'Semi Design design draft.fig',
@@ -369,7 +373,7 @@ function App() {
             updateTime: '2020-01-26 11:01',
             avatarBg: 'light-blue',
         },
-    ];
+    ], []);
     const rowSelection = {
         getCheckboxProps: record => ({
             disabled: record.name === 'Design docs', // Column configuration not to be checked
@@ -383,6 +387,7 @@ function App() {
         },
         onChange: (selectedRowKeys, selectedRows) => {
             console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            setSelectedKeys(selectedRowKeys);
         },
     };
 
@@ -1080,6 +1085,8 @@ Filters and sorting controls are integrated inside the table, and users can pass
 
 > Note: Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.
 
+> Note: Sorting and filtering columns must set independent "dataIndex"
+
 ```jsx live=true noInline=true dir="column"
 import React, { useState, useMemo } from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
@@ -5266,15 +5273,15 @@ render(App);
 | clickGroupedRowToExpand | Group content expands or collapses when the group header row is clicked                                                   | boolean |  | **0.29.0** |
 | columns | For a configuration description of the table column, see [Column](#Column)                                                | Column [] | [] |
 | components | Override the elements of Table, such as table, body, row, td, th, etc.                                                    | <a target="_blank" href="https://github.com/DouyinFE/semi-design/blob/340c93e4e1612a879be869c43ad7a9a85ab5a302/packages/semi-ui/table/interface.ts#L200">TableComponents</a> |  |
-| dataSource | Data, Each item needs to have a key, or specify rowKey, see the beginning of the document                                                                                                                      | RecordType[] | [] |
+| dataSource | Data. **An independent key of each data record is need, or use rowKey to specify an attribute name as the primary key**                                                                                                             | RecordType[] | [] |
 | defaultExpandAllRows | All rows are expanded by default                                                                                          | boolean | false |
 | defaultExpandAllGroupRows | All grouped rows are expanded by default                                                                                  | boolean | false | **1.30.0** |
 | defaultExpandedRowKeys | Default expansion of row key array                                                                                        | Array <\*> | [] |
 | empty | Content displayed when there is no data                                                                                   | ReactNode | ReactNode | 'No data yet. ' |
 | expandCellFixed | Whether the column of the expansion icon is fixed or not, the same value as the fixed value in Column                     | boolean\|string | false |
 | expandIcon | Custom expansion icon, hidden when it is `false`                                                                          | boolean <br/>\|ReactNode <br/>\| (expanded: boolean) => ReactNode |  |
 | expandedRowKeys | Expanded rows, the row expansion function will be controlled when this parameter is introduced.                           | (string \| number)[] |  |
-| expandedRowRender | Extra unfolding lines                                                                                                     | (record: object, index: number, expanded: boolean) => ReactNode |  |
+| expandedRowRender | Extra unfolding lines. **An independent key of each data record is need**                                                                                                     | (record: object, index: number, expanded: boolean) => ReactNode |  |
 | expandAllRows | All rows are expanded                                                                                                     | boolean | false | **1.30.0** |
 | expandAllGroupRows | All grouped rows are expanded                                                                                             | boolean | false | **1.30.0** |
 | expandRowByClick | Expand row when click row                                                                                                 | boolean | false | **1.31.0** |
@@ -5437,13 +5444,13 @@ import { Table } from '@douyinfe/semi-ui';
 | resize | Whether to enable resize mode, this property will take effect only after Table resizable is enabled | boolean |  | **2.42.0** |
 | sortChildrenRecord | Whether to sort child data locally | boolean |  | **0.29.0** |
 | sortOrder | The controlled property of the sorting, the sorting of this control column can be set to 'ascend'\|'descended '\|false | boolean | false |
-| sorter | Sorting function, local sorting uses a function (refer to the compareFunction of Array.sort), requiring a server-side sorting can be set to true | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |
+| sorter | Sorting function, local sorting uses a function (refer to the compareFunction of Array.sort), requiring a server-side sorting can be set to true. **An independent dataIndex must be set for the sort column, and an independent key must be set for each data item in the dataSource** | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |
 | sortIcon |Customize the sort icon. The returned node controls the entire sort button, including ascending and descending buttons. Need to control highlighting behavior based on sortOrder | (props: { sortOrder }) => ReactNode | | **2.50.0** |
 | title | Column header displays text. When a function is passed in, title will use the return value of the function; when other types are passed in, they will be aggregated with sorter and filter. It needs to be used with useFullRender to obtain parameters such as filter in the function type | string \| ReactNode\|({ filter: ReactNode, sorter: ReactNode, selection: ReactNode }) => ReactNode. |  | Function type requires **0.34.0** |
 | useFullRender | Whether to completely customize the rendering, see [Full Custom Rendering](#Fully-custom-rendering) for usage details, enabling this feature will cause a certain performance loss | boolean | false | **0.34.0** |
 | width | Column width | string \| number |  |
 | onCell | Set cell properties | (record: RecordType, rowIndex: number) => object |  |
-| onFilter | Determine the running function of the filter in local mode | (filteredValue: any, record: RecordType) => boolean |  |
+| onFilter | Determine the running function of the filter in local mode. **An independent dataIndex must be set for the filter column, and an independent key must be set for each data item in the dataSource** | (filteredValue: any, record: RecordType) => boolean |  |
 | onFilterDropdownVisibleChange | A callback when a custom filter menu is visible | (visible: boolean) => void |  |
 | onHeaderCell | Set the head cell property | (column: RecordType, columnIndex: number) => object |  |
 
@@ -5586,6 +5593,39 @@ function Demo() {
 
 ## FAQ
 
+- **Clicking the row selection button on the second page will jump to the first page? **
+
+     After the Table's dataSource is updated, the page number will be reset to the initial state. Please check if the data source changed when the component was rendered.
+
+     ```typescript
+     function App() {
+         const [dataSource, setDataSource] = useState([]);
+
+         useEffect(() => {
+             // ✅ Correct
+             const getData = () => {
+                 // fetch data
+                 const newData = fetch(/**/);
+                 // set data
+                 setDataSource(dataSource);
+             };
+
+             getData();
+         }, []);
+
+         // ❌ Error
+         const data = [];
+
+         return <Table dataSource={data} columns={[/*...*/]} />;
+     }
+     ```
+
+-   **The number of filtered data is wrong?**
+
+    Please check that your filter columns and data sources are configured correctly.
+
+    The filter column needs to set an independent `dataIndex`, and the dataSource needs to set an independent `key`. Please refer to the `dataSource` API. Otherwise the filtering function will not work properly.
+
 -   **Why is the table data not updated?**  
      At present, all parameters of the table component are shallow comparison. That is to say, if the parameter value type is an array or object, you need to manually change its reference to trigger the update. Similarly, if you don't want to trigger additional updates, try not to use literal values when passing parameters directly or define reference parameter values in the render process: