Skip to content

Missing information for the 'select all' checkbox in the Table onChange function (rowSelection prop) #35585

@artrn-nt

Description

@artrn-nt

Reproduction link

Edit on CodeSandbox

Steps to reproduce

See the link to minimal reproduction.

Requirements:

  • Create an Antd table with a minimal data set (4 items for this use case) and enabled rowSelection prop
  • Use the onChange function (rowSelection prop):

Common for use cases

  1. Select the 1st item:
onChange: (
          selectedRowKeys
) => {
        console.log('selectedRowKeys: ', selectedRowKeys)
        // result: selectedRowKeys: [0]
}

Use case 1 - select all:

  1. Then select all items by clicking on the 'select all' checkbox in the table header (global checkbox):
onChange: (
          selectedRowKeys
) => {
         console.log('selectedRowKeys: ', selectedRowKeys)
         // result: selectedRowKeys: [0, 1, 2, 3]
}

Use case 2 - multiple selection (shift key):

  1. Then select multiple items by pressing and holding the 'shift' keyboard key and by clicking on the last item:
onChange: (
          selectedRowKeys
) => {
         console.log('selectedRowKeys: ', selectedRowKeys)
         // result: selectedRowKeys: [0, 1, 2, 3]
}

Use case 3 - single selection (one by one):

  1. Then select item one by one, from 2nd to 4th:
    For this use case we will take the last onChange function call
onChange: (
          selectedRowKeys
) => {
         console.log('selectedRowKeys: ', selectedRowKeys)
         // result: selectedRowKeys: [0, 1, 2, 3]
}

Conclusion:

As you can see there are no difference for the onChange param (selectedRowKeys) between use cases 1, 2 and 3, and because of this we are not able to differentiate the use of the 'select all' checkbox in the table header (global checkbox) and the use of the 'SHIFT' keyboard key, and the use of simple repetitive selection.

In our app, we really need to know if the user clicked on the checkbox 'select all' in the table header (global checkbox) or not.

What is expected?

onSelectAll function VS onChange function: by using the onChange function, we should be able to easily know if the user selected all items one by one OR by using the 'select all' checkbox in the table header (global checkbox).

onSelectMultiple function VS onChange function: by using the onChange function, we should be able to easily know if the user selected all items by using the 'MAJ' keyboard key OR if he used the 'select all' checkbox in the table header (global checkbox).

If onSelectAll, onSelectMultiple, onSelect (...) are deprecated, the onChange function must evolve to provide the accuracy that deprecated functions had.

What is actually happening?

See the link to minimal reproduction.

onSelectAll function VS onChange function: by using the onChange function, if the user selected all items, we are unable to know if he did so by selecting them one by one, or by using the 'select all' checkbox in the table header (global checkbox).

onSelectMultiple function VS onChange function: by using the onChange function, if the user selected all items by using the 'MAJ' keyboard key, we are unable to know if all items were selected by using that key, or by using the 'select all' checkbox in the table header (global checkbox).

Environment Info
antd 4.20.5
React 17.0.2
System macOS
Browser 101.0.4951.64 (Build officiel) (arm64)

This bug issue is linked to closed feature issue: "Should clarify Table component API regarding rowSelection prop - onSelectAll / onSelectMultiple #35543"

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions