Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table expanded row props #10379

1 task done
AhmadMayo opened this issue May 5, 2018 · 11 comments
1 task done

Table expanded row props #10379

AhmadMayo opened this issue May 5, 2018 · 11 comments


Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

more flexibility for expandable rows

What does the proposed API look like?

table have expandedRowProps - Function(record, index):Object - where more features can be supported. Example use cases:

  • Some rows are expandable and some are not, expandedRowProps(record).expandable // false
  • Expanded row fetches record details on open, so closing and reopening triggers fetching the data, expandedRowProps(record).destroyOnClose // true
  • Instead of passing multiple props for the expanded rows to the table (expandedRowKeys, expandedRowRender, expandRowByClick) now the can be grouped in one function
  key: 1,
  expanded: true,
  expandByClick: false

P.S. I love your work, and I rely on it heavily on all my project. I do realize how much effort you did put, and still are putting into it. Thank you very much for  this magnificent framework

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
Copy link

yesmeck commented May 7, 2018

What particular problems do you want to solve?

Copy link

More control over the expand behaviour, that can be record dependant. Every row can have it's own unique behaviour

Copy link

yesmeck commented May 7, 2018

For expandable see #7817

For destroyOnClose, have you encountered some scenarios need to unmount expanded row?

Copy link

AhmadMayo commented May 7, 2018

the row only displays the record's name, the expanded row fetch the rest of the record details from the server in the onMount hook. so when the user wants to unexpand the row and re-expands it to re-fetch the data. passing expanded (or any boolean that indicates the state of the expanded row) to the expandedRowRender can also do the trick

Copy link

and thanks for the link, it solved my problem, although I suggest you consider my proposed api, as calling the getRenderProps on the table render will not cause any performance issues (as it doesn't render anything) and call the render function returned from it when the user clicks the expand button

Copy link

yesmeck commented May 8, 2018

You can trigger remount by giving a random key to your expanded component:

<Table expandedRowRender={() => <MyComponent key={} />} />

@yesmeck yesmeck closed this as completed May 8, 2018
Copy link

Tried it, results in an infinite loop. When I try to expand the row this happens
details component onMount -> fetch data -> update isFetching flag in redux -> update table component to show loader -> call expanedRowRenderer -> key = result in a new component -> details component onMount -> etc

Copy link

here's a reproduction
expanding any row will result in an infinite loop

Copy link

yesmeck commented May 9, 2018

@AhmedSayed77 I've realized that's not a good idea, I'll add expanded as the fourth parameter to expandedRowRender, so that you can:

<Table expandedRowRender={(record, index, indent, expaned) => expaned ? <MyComponent /> : null)} />

Copy link

Thank you very much

yesmeck added a commit to react-component/table that referenced this issue May 9, 2018
afc163 added a commit that referenced this issue Jun 8, 2018
bors bot added a commit to mozilla/delivery-console that referenced this issue Jul 16, 2018
310: Update dependency antd to v3.7.0 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd]( from `v3.6.6` to `v3.7.0`

<summary>Release Notes</summary>

### [`v3.7.0`](
[Compare Source](ant-design/ant-design@3.6.6...3.7.0)
3.7.0 is a heavy update that brings a lot of exciting changes and new features.  
Here are some highlights ✨:
- 🌟 Add drawer component : [Drawer]( [#&#8203;10791](`ant-design/ant-design#10791)
- 🌟 Horizontal menu automatically collapses when there is no enough space. [#&#8203;11234](`ant-design/ant-design#11234)
- 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#&#8203;7749](`ant-design/ant-design#7749)
Component Fixes / Enhancements:
- Upgrade `rc-tree-select` to `2.0.5` for TreeSelect, refactored to fix the logic of the check.
  - 🌟 Add `autoClearSearchValue` prop to clear the value of search input when multiple select is selected or deselected. [10996](`ant-design/ant-design#10996)
  - 🌟 Add `searchValue` prop to set the value of search input. [6ff7dd8](ant-design/ant-design@6ff7dd8#diff-1e8e47abbdbe6e12d009aa61619ab22f)
  - 🌟 Add `maxTagCount` prop to set the max count of visible tags. [fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 Add `maxTagPlaceholder` prop to set the content when the tag is hidden. [fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 Search input now supports case sensitive search. [#&#8203;10990](`ant-design/ant-design#10990)
  - 🗑 Remove `label` prop and use `title` prop instead in the `treeData`. 
- Upgrade `rc-upload` to `2.5.0` for Upload. 
  - 🌟 Add `directory` prop to support folder uploading. [#&#8203;7315](`ant-design/ant-design#7315)
  - 🌟 `action` prop supports to be the a function which returns a Promise object. [fd96967](ant-design/ant-design@fd96967)
- Dropdown
  - 🌟 Provide default margin for icon in the menu item. [8e60a59](ant-design/ant-design@8e60a59)
  - 🌟 Be able to adjust the menu position for the trigger mode of `contextMenu` automatically. [16e4260](ant-design/ant-design@16e4260)
- Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](ant-design/ant-design@f2fddff)
  - 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#&#8203;10379](`ant-design/ant-design#10379)
  - 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](ant-design/ant-design@59cc3a8) [@&#8203;chrvadala]
  - 🌟 `filterIcon` prop  supports to be a render function which returns ReactNode. [1af4392](ant-design/ant-design@1af4392)
  - 🐞 Fix the row dislocation problem when the column is fixed. [#&#8203;10392](`ant-design/ant-design#10392)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](ant-design/ant-design@f0b684d)
- 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#&#8203;10798](`ant-design/ant-design#10798)
- 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner Input for DatePicker. [e63f9d4](ant-design/ant-design@e63f9d4)
- 🌟 Add `event` object as the second param of `onSearch` prop for Input.Search. [#&#8203;11015](`ant-design/ant-design#11015)
- 🌟 Add `onBreakPoint` prop for Layout.Sider to be the callback function when breakpoint is triggered. [#&#8203;10750](`ant-design/ant-design#10750) [@&#8203;nuintun]
- 🌟 Add `okButtonProps` prop to set the props of ok button and add `cancelButtonProps` prop to set the props of cancal button for Modal. [#&#8203;10955](`ant-design/ant-design#10955) [@&#8203;djyde]
- 🌟 Add `strokeColor` prop to set the color of progress bar for Progress. [#&#8203;10725](`ant-design/ant-design#10725)
- 🌟 Add `buttonStyle` prop whose optional value is `outline` or `solid` to set the Radio.Group style. [60e3cfa](ant-design/ant-design@60e3cfa#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Add `setDefaultIndicator` static function to set global indicator for Spin. [#&#8203;10787](`ant-design/ant-design#10787)
- 🌟 Add `visible` prop to set the visibility for `Tag`. [4ac0277](ant-design/ant-design@4ac0277)
- Upgrade `rc-tree` to `1.12.0` for Tree
  - 🌟 Add `loadedKeys` prop to set the loaded nodes, which usually works with loadData prop. [#&#8203;10666](`ant-design/ant-design#10666)
  - 🌟 Add `onLoad` prop to be the callback function when all the nodes are loaded. [c488aca](ant-design/ant-design@c488aca)
- 🗑 Deprecate `combobox` value for `Select[mode]` and please replace it with `AutoComplete`. [53046a4](ant-design/ant-design@53046a4)
- 🐞 Cascader adds `fieldNames` and discards the misspelled `filedNames`. [#&#8203;10896](`ant-design/ant-design#10896)
- 🐞 Fix Timeline dot not working with Tooltip. [0e3b67e](ant-design/ant-design@0e3b67e)
- 🐞 Fix border radius when avatar has custom size. [e1e6523](ant-design/ant-design@e1e6523)
- 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#&#8203;10955](`ant-design/ant-design#10955)


- 🔥 增加抽屉组件 : [`Drawer`]( [#&#8203;10791](`ant-design/ant-design#10791)
- 🔥 Menu 增加一个横向菜单在空间不足时溢出部分自动收起的特性。[#&#8203;11234](`ant-design/ant-design#11234)
- 🔥 新增 `Tree.DirectoryTree` 组件,作为内置的目录树。[#&#8203;7749](`ant-design/ant-design#7749)
- TreeSelect 组件升级 `rc-tree-select` 到 `2.0.5`,进行了重构,修复了 check 的逻辑。
  - 🌟 新增 `autoClearSearchValue` 属性,当多选模式下值被选择,用于自动清空搜索框。[10996](`ant-design/ant-design#10996)
  - 🌟 新增 `searchValue` 属性,用于设置搜索框的值。[6ff7dd8](ant-design/ant-design@6ff7dd8#diff-1e8e47abbdbe6e12d009aa61619ab22f)
  - 🌟 新增 `maxTagCount` 属性,用于设置显示标签的最大数量。[fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 新增 `maxTagPlaceholder` 属性,用于设置标签隐藏时显示的内容。[fb96c9d](ant-design/ant-design@fb96c9d)
  - 🌟 搜索框支持大小写敏感。[#&#8203;10990](`ant-design/ant-design#10990)
  - 🗑 `treeData` 数据格式中的 `label` 属性被废弃,使用 `title` 属性代替。
- Upload 组件升级 `rc-upload` 到 `2.5.0`
  - 🌟 新增 `directory` 属性,支持上传一个文件夹。[#&#8203;7315](`ant-design/ant-design#7315)
  - 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数,使用更加灵活。[fd96967](ant-design/ant-design@fd96967)
- Dropdown 增加新特性,可以做为右键菜单来使用。
  - 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](ant-design/ant-design@8e60a59)
  - 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](ant-design/ant-design@16e4260)
- Table 组件升级 `rc-table` 到 `6.2.2`。 [f2fddff](ant-design/ant-design@f2fddff)
  - 🌟 新增 `expanded` 作为 `expandedRowRender` 属性函数的第四个参数,用于获取当前行是否展开。[#&#8203;10379](`ant-design/ant-design#10379)
  - 🌟 新增无须使用完全受控组件也能覆盖筛选菜单的能力。[59cc3a8](ant-design/ant-design@59cc3a8) [@&#8203;chrvadala]
  - 🌟 `filterIcon` 属性支持作为一个返回 `ReactNode` 的函数。[1af4392](ant-design/ant-design@1af4392)
  - 🐞 修复在固定列时导致的行错位的问题。[#&#8203;10392](`ant-design/ant-design#10392)
  - 🐞 修复在组件中使用 `combobox` 模式的 `Select` 导致的重影问题。[#&#8203;10828](`ant-design/ant-design#10828)
  - 🐞 修复 components 属性值不能变化的问题。 [c380186](ant-design/ant-design@c380186)
- 🗑 Select 组件废弃了 `combobox` 模式,请使用 `AutoComplete` 组件代替。[53046a4](ant-design/ant-design@53046a4)
- 🌟 Alert 组件允许传递 `data-*`、`aria-*` 和 `role-*` 属性到组件内部。[f0b684d](ant-design/ant-design@f0b684d)
- 🌟 Avatar 组件新增 `alt` 属性,用于设置图像无法显示时的替代文本。[#&#8203;10798](`ant-design/ant-design#10798)
- 🌟 DatePicker 组件允许传递 `data-*`、`aria-*` 和 `role-*` 属性到组件内部的 `Input`。[e63f9d4](ant-design/ant-design@e63f9d4)
- 🌟 Input.Search 组件新增 `event` 事件对象作为 `onSearch` 属性函数的第二个参数。[#&#8203;11015](`ant-design/ant-design#11015)
- 🌟 Layout.Sider 组件新增 `onBreakPoint` 属性,用作响应式布局的断点触发时的回调函数。[#&#8203;10750](`ant-design/ant-design#10750) [@&#8203;nuintun]
- 🌟 Modal 组件新增 `okButtonProps` 和 `cancelButtonProps` 属性,分别用于设置 `取消` 按钮和 `确定` 按钮的属性。[#&#8203;10955](`ant-design/ant-design#10955) [@&#8203;djyde]
- 🌟 Progress 组件新增 `strokeColor` 属性,用于设置进度条的颜色。[#&#8203;10725](`ant-design/ant-design#10725)
- 🌟 Radio.Group 组件新增 `buttonStyle` 属性 (可选值 `outline | solid`),用于设置 `RadioButton` 的风格样式。[60e3cfa](ant-design/ant-design@60e3cfa#diff-c2ee8b5a368a121e9d2cc2661212045d)
- 🌟 Spin 组件新增 `setDefaultIndicator` 静态方法,用于设置全局的加载指示符。[#&#8203;10787](`ant-design/ant-design#10787)
- 🌟 Tag 组件新增 `visible` 属性,用于设置是否显示标签。[4ac0277](ant-design/ant-design@4ac0277)
- Tree 组件升级 `rc-tree` 到 `1.12.0`
  - 🌟 新增 `loadedKeys` 属性,用于设置已经加载的节点,需要配合 `loadData` 使用。[#&#8203;10666](`ant-design/ant-design#10666)
  - 🌟 新增 `onLoad` 属性,作为节点加载完毕时的回调函数。[c488aca](ant-design/ant-design@c488aca)
- 🌟 增加 `okButtonDisabled` and `cancelButtonDisabled` 属性用于禁用确定和取消按钮。[#&#8203;10955](`ant-design/ant-design#10955)
- 🌟 Cascader 新增 fieldNames 并废弃拼写错误的 filedNames。 [#&#8203;10896](`ant-design/ant-design#10896)
- 🐞 修复时间轴不能与`Tooltip`一起使用的问题。  [0e3b67e](ant-design/ant-design@0e3b67e)
- 🐞 修复当 Avata 自定义大小时,圆角不改变的问题。[e1e6523](ant-design/ant-design@e1e6523)




This PR has been generated by [Renovate Bot](

Co-authored-by: Renovate Bot <>
Copy link

i want to I want to remove border spacing from row and its expanded row.. How can I do that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

3 participants