mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
docs: 📖 Add FAQ about table filter logic
This commit is contained in:
parent
ddb0ac46ba
commit
c38324e863
@ -92,14 +92,14 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
|
||||
<Table
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: (event) => {}, // click row
|
||||
onDoubleClick: (event) => {}, // double click row
|
||||
onContextMenu: (event) => {}, // right button click row
|
||||
onMouseEnter: (event) => {}, // mouse enter row
|
||||
onMouseLeave: (event) => {}, // mouse leave row
|
||||
onClick: event => {}, // click row
|
||||
onDoubleClick: event => {}, // double click row
|
||||
onContextMenu: event => {}, // right button click row
|
||||
onMouseEnter: event => {}, // mouse enter row
|
||||
onMouseLeave: event => {}, // mouse leave row
|
||||
};
|
||||
}}
|
||||
onHeaderRow={(column) => {
|
||||
onHeaderRow={column => {
|
||||
return {
|
||||
onClick: () => {}, // click header row
|
||||
};
|
||||
@ -265,7 +265,7 @@ If `dataSource[i].key` is not provided, then you should specify the primary key
|
||||
// primary key is uid
|
||||
return <Table rowKey="uid" />;
|
||||
// or
|
||||
return <Table rowKey={(record) => record.uid} />;
|
||||
return <Table rowKey={record => record.uid} />;
|
||||
```
|
||||
|
||||
## Migrate to v4
|
||||
@ -276,6 +276,12 @@ Besides, the breaking change is changing `dataIndex` from nest string path like
|
||||
|
||||
## FAQ
|
||||
|
||||
### How to hide pagination when single page or not data
|
||||
### How to hide pagination when single page or not data?
|
||||
|
||||
You can set `hideOnSinglePage` with `pagination` prop.
|
||||
|
||||
### Table will return to first page when filter data.
|
||||
|
||||
Table total page count usually reduce after filter data, we defaultly return to first page in case of current page is out of filtered results.
|
||||
|
||||
You may need to keep current page after filtering when fetch data from remote service, please check [this demo](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround.
|
||||
|
@ -95,16 +95,16 @@ const columns = [
|
||||
|
||||
```jsx
|
||||
<Table
|
||||
onRow={(record) => {
|
||||
onRow={record => {
|
||||
return {
|
||||
onClick: (event) => {}, // 点击行
|
||||
onDoubleClick: (event) => {},
|
||||
onContextMenu: (event) => {},
|
||||
onMouseEnter: (event) => {}, // 鼠标移入行
|
||||
onMouseLeave: (event) => {},
|
||||
onClick: event => {}, // 点击行
|
||||
onDoubleClick: event => {},
|
||||
onContextMenu: event => {},
|
||||
onMouseEnter: event => {}, // 鼠标移入行
|
||||
onMouseLeave: event => {},
|
||||
};
|
||||
}}
|
||||
onHeaderRow={(column) => {
|
||||
onHeaderRow={column => {
|
||||
return {
|
||||
onClick: () => {}, // 点击表头行
|
||||
};
|
||||
@ -269,7 +269,7 @@ class NameColumn extends Table.Column<User> {}
|
||||
// 比如你的数据主键是 uid
|
||||
return <Table rowKey="uid" />;
|
||||
// 或
|
||||
return <Table rowKey={(record) => record.uid} />;
|
||||
return <Table rowKey={record => record.uid} />;
|
||||
```
|
||||
|
||||
## 从 v3 升级到 v4
|
||||
@ -283,3 +283,9 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
|
||||
### 如何在没有数据或只有一页数据时隐藏分页栏
|
||||
|
||||
你可以设置 `pagination` 的 `hideOnSinglePage` 属性为 `true`。
|
||||
|
||||
### 表格过滤时会回到第一页?
|
||||
|
||||
前端过滤时通常条目总数会减少,从而导致总页数小于筛选前的当前页数,为了防止当前页面没有数据,我们默认会返回第一页。
|
||||
|
||||
如果你在使用远程分页,很可能需要保持当前页面,你可以参照这个 [受控例子](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) 控制当前页面不变。
|
||||
|
Loading…
Reference in New Issue
Block a user