How to enable button in a secondary grouping

glimpsed_chaos

Link to test case: https://live.datatables.net/tusodoxo/2/
Error messages shown: No error, however button is not enabled.
Description of problem: Using the general examples for buttons and how to enable/disable buttons based on the number of selected rows works fine. However, in my scenario (linked test case) the buttons in the "topStart" layout are grouped as separate button configurations.

The use of the buttons like this allows me to have multiple button groups without separators, they flex/wrap better (grouped) when mobile, meaning instead of the buttons all wrapping together (6 on a row, if I recall), they stay grouped with their purpose (export, user actions, filters, etc...) In my actual setup, I have 16 buttons in 4 groups (2, 6, 4 and 4) with 2 groups in "topStart" and 2 in "topEnd". Works and looks great.

The issue is that when trying to have the "Count rows selected" button enabled, it does not work. This makes sense but looking for a solution to it that does not involve jamming all the buttons together.

Table setup:

var table = new DataTable('#example', {
    columnDefs: [
        {
            orderable: false,
            render: DataTable.render.select(),
            targets: 0
        }
    ],
    layout: {
        topStart: [
      
      {
            buttons: [
                {
                    text: 'Row selected data',
                    action: function (e, dt, node, config) {
                        alert(
                            'Row data: ' + JSON.stringify(dt.row({ selected: true }).data())
                        );
                    },
                    enabled: false
                }
            ]
        },
        {
            buttons: [
                {
                    text: 'Count rows selected',
                    action: function (e, dt, node, config) {
                        alert('Rows: ' + dt.rows({ selected: true }).count());
                    },
                    enabled: false
                }
            ]
        }          
      ]
    }, 
    select: {
        //style: 'os',
        style: 'multi',
        selector: 'td:first-child',
        headerCheckbox: false
    },
    order: [[1, 'asc']]
});

Select/Deselect that should enable/disable buttons:

table.on('select deselect', function () {
    var selectedRows = table.rows({ selected: true }).count();
 
    table.button(0).enable(selectedRows === 1);
    table.button(1).enable(selectedRows > 0); // Not sure how to address this button to enable. 
});

My actual layout as described where I need to enable/disable buttons in the second group from the left, you can see one is disabled currently:

kthorngren

You will want to pass in the groupSelector parameter of 1 with the buttonSelector parameter of 0. See the button() docs for details. Updated example:
https://live.datatables.net/vuredaze/1/edit

Kevin

glimpsed_chaos

@kthorngren Thank you! My mistake for overlooking that in the docs.