diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 1eb7189399..6b4e599c4c 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -5,7 +5,7 @@ type: Data Display title: Table --- -A table displays rows data. +A table displays rows of data. ## When To Use @@ -52,89 +52,89 @@ const columns = [{ | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| -| rowSelection | row selection [config](#rowSelection) | object | null | -| pagination | pagination [config](/components/pagination/), hide it by setting it to `false` | object | | -| size | size of table: `default`, `middle` or `small` | string | `default` | -| dataSource | data record array to be rendered | any[] | | -| columns | columns of table | [ColumnProps](https://git.io/vMMXC)[] | - | -| rowKey | get row's key, could be a string or function that returns a string | string\|Function(record):string | 'key' | -| rowClassName | get row's className | Function(record, index):string | - | -| expandedRowRender | expanded container render for each row | Function | - | -| defaultExpandedRowKeys | initial expanded row keys | string[] | - | -| expandedRowKeys | current expanded rows keys | string[] | - | -| defaultExpandAllRows | expand all rows initially | boolean | false | -| onExpandedRowsChange | function to call when the expanded rows change | Function(expandedRows) | | -| onExpand | function to call when click expand icon | Function(expanded, record) | | -| onChange | callback that is called when pagination, filters, sorter is changed | Function(pagination, filters, sorter) | | -| loading | loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | -| locale | i18n text include filter, sort, empty text...etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
[Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | -| indentSize | indent size in pixels of tree data | number | 15 | -| onRowClick | callback that is called when a row is clicked | Function(record, index, event) | - | -| onRowDoubleClick| callback that is called when a row is double clicked | Function(record, index, event) | - | -| onRowMouseEnter | callback that is called when mouse enter a row | Function(record, index, event) | - | -| onRowMouseLeave | callback that is called when mouse leave a row | Function(record, index, event) | - | -| bordered | whether to show all table borders | boolean | false | -| showHeader | whether to show table header | boolean | true | -| footer | table footer renderer | Function(currentPageData) | | -| title | table title renderer | Function(currentPageData) | | -| scroll | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - | +| rowSelection | Row selection [config](#rowSelection) | object | null | +| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | | +| size | Size of table | `default` \| `middle` \| `small` | `default` | +| dataSource | Data record array to be displayed | any[] | - | +| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)[] | - | +| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | +| rowClassName | Row's className | Function(record, index):string | - | +| expandedRowRender | Expanded container render for each row | Function | - | +| defaultExpandedRowKeys | Initial expanded row keys | string[] | - | +| expandedRowKeys | Current expanded row keys | string[] | - | +| defaultExpandAllRows | Expand all rows initially | boolean | `false` | +| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | | +| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | | +| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | | +| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` | +| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
[Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | +| indentSize | Indent size in pixels of tree data | number | 15 | +| onRowClick | Callback executed when a row is clicked | Function(record, index, event) | - | +| onRowDoubleClick| Callback executed when a row is double clicked | Function(record, index, event) | - | +| onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - | +| onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - | +| bordered | Whether to show all table borders | boolean | `false` | +| showHeader | Whether to show table header | boolean | `true` | +| footer | Table footer renderer | Function(currentPageData) | | +| title | Table title renderer | Function(currentPageData) | | +| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - | ### Column -One of Property `columns` for describing column, Column has the same API. +One of the Table `columns` prop for describing the table's columns, Column has the same API. | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| -| title | title of this column | string\|ReactNode | - | -| key | key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | -| dataIndex | display field of the data record, could be set like `a.b.c` | string | - | -| render | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | -| filters | filter menu config | object[] | - | -| onFilter | callback that is called when when confirm filter button is clicked | Function | - | -| filterMultiple | whether to select multiple filtered item | boolean | true | -| filterDropdown | customized filter overlay | ReactNode | - | -| filterDropdownVisible | whether filterDropdown is visible | boolean | - | -| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - | -| filteredValue | controlled filtered value, filter icon will highlight. | string[] | - | -| filtered | whether the dataSource is filtered | boolean | false | -| filterIcon | customized filter icon | ReactNode | false | -| sorter | sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | -| colSpan | span of this column's title | number | | -| width | width of this column | string\|number | - | +| title | Title of this column | string\|ReactNode | - | +| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | +| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - | +| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | +| filters | Filter menu config | object[] | - | +| onFilter | Callback executed when the confirm filter button is clicked | Function | - | +| filterMultiple | Whether multiple filters can be selected | boolean | `true` | +| filterDropdown | Customized filter overlay | ReactNode | - | +| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | +| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | +| filteredValue | Controlled filtered value, filter icon will highlight | string[] | - | +| filtered | Whether the `dataSource` is filtered | boolean | `false` | +| filterIcon | Customized filter icon | ReactNode | `false` | +| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | +| colSpan | Span of this column's title | number | | +| width | Width of this column | string\|number | - | | className | className of this column | string | - | -| fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | false | -| sortOrder | order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - | -| onCellClick | callback when click cell | Function(record, event) | - | +| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | +| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - | +| onCellClick | Callback executed when table cell is clicked | Function(record, event) | - | ### ColumnGroup | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| -| title | title of the column group | string\|ReactNode | - | +| title | Title of the column group | string\|ReactNode | - | ### rowSelection -Properties for selection. +Properties for row selection. | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| -| type | `checkbox` or `radio` | string | `checkbox` | -| selectedRowKeys | controlled selected row keys | string[] | [] | -| onChange | callback that is called when selected rows change | Function(selectedRowKeys, selectedRows) | - | -| getCheckboxProps | get Checkbox or Radio props | Function(record) | - | -| onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) | - | -| onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) | - | -| onSelectInvert | callback that is called when select invert | Function(selectedRows) | - | -| selections | custom selection [config](#rowSelection), only displays default selections when set to `true` | object[]\|boolean | - | -| hideDefaultSelections | remove the default `Select All` and `Select invert` selections | boolean | false | +| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | +| selectedRowKeys | Controlled selected row keys | string[] | [] | +| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - | +| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | +| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows) | - | +| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - | +| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - | +| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object[]\|boolean | - | +| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | ### selection | Property | Description | Type | Default | |---------------|--------------------------|-----------------|--------------| -| key | key of this selection | string | - | -| text | display text of this selection | string\|React.ReactNode | - | -| onSelect | callback when this selection is clicked | Function(changeableRowKeys) | - | +| key | Unique key of this selection | string | - | +| text | Display text of this selection | string\|React.ReactNode | - | +| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - | ## Using in TypeScript