question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Table selectedRowKeys and selectedRows is not expected

See original GitHub issue

Environment(required)

  • antd version: 2.5.2
  • OS and its version: El Capitan 10.11.5
  • Browser and its version: Chrome 版本 55.0.2883.95 (64-bit)

What did you do? Please provide steps to re-produce your problem.

import React, { Component } from 'react'
import { Table } from 'antd'

class OrderManagement extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedRowKeys: [],  // Check here to configure the default columns
    }
  }
  componentWillMount() {
    console.log('componentWillMount');
    this.props.actions.init()
  }

  componentWillUpdate() {
    console.log('componentWillUpdate');
  }

  render() {
    const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render: text => <a href="#">{text}</a>,
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];
const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}, {
  key: '4',
  name: 'Disabled User',
  age: 99,
  address: 'Sidney No. 1 Lake Park',
}];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User',    // Column configuration not to be checked
  }),
};

return (
  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
)
  }
}

export default OrderManagement

What do you expected?

image

What happen?

selectedRowKeys is not as expected and selectedRows is empty array.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Fairyshicommented, Apr 24, 2017

Solution: <Table rowKey={record => …} />

Reason: Make sure the rowKey set correctly for accessing CheckboxPropsCache of the Table, or the getCheckboxProps won’t run as expected. Ref (Rows from 155 to 170) of the Table source code:

https://github.com/ant-design/ant-design/blob/5d72c6d7e51dbe70ded98da0c87befd0f61c76d8/components/table/Table.tsx#L208-L210

0reactions
lock[bot]commented, May 1, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reset ant design table selected rows? - Stack Overflow
I want onClick reset selected rows. I can not find out where it stores selected rows. const rowSelection = { onChange: (selectedRowKeys, ...
Read more >
[ADF 11.1.1.4.0] How to know selected row count without ...
How to know Selected Row Count in ADF Table using EL Expression. ... selectedRowKeys.size eq 1)} (notice no backing_table)
Read more >
Table - Ant Design - GitHub Pages
To perform operations and clear selections after selecting some rows, use rowSelection.selectedRowKeys to control selected rows.
Read more >
How to get data from selected rows in a lightning datatable
How can I get data from a row selected in a lightning data table? I was looking at this post but ...
Read more >
Documentation: DevExtreme - JavaScript Tree List Configuration
If a column does not need to be customized, this array may include the name of the field ... The UI component expects...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found