Data table extension: batch actions

[elycheea]

Data table extensions: batch actions

Brief description

This issue will focus on the batch actions data table extension.

• [ ] Add Select all button in data table toolbar
• [ ] Add More button when more than 4 actions present in the toolbar
  • This should become an overflow menu at smaller screen sizes

Details

Design specs

This is partially implemented, but we are missing select all across all pages. Our current implementation includes this in a dropdown that shows “Select all on page” and “Select all.” The updated implementation should use a select all button in the toolbar.

Additionally, we need to include a More button if more than 4 actions are present in the data table toolbar. On smaller screen sizes, this should become an overflow menu.

Links to other materials

e.g. sketch files, icons, images, prototypes

Design Maintainer(s)

• Marion Brülls
• Virginia Nicholson
• Mitchell Bernstein

Tasks

Before starting work on this epic, please review and complete the following.

• [ ] Initial review of design/existing code

Working in Carbon for IBM Products package

• [ ] Have you reviewed our contribution guidelines?
• [ ] Have you noted our code guidelines?
• [ ] Did you use the CLI to scaffold your new component?

[holmansze]

Hi @elycheea - questions about the "select all" button.

1. The checkbox next to the first column header performs "select all" or "unselect all" already. Would the addition of another "select all" button be redundant and maybe a source of confusion?
2. For paginated tables, it is not always possible to perform a "select all" operation. You may select all records on the current page, but since you may not have all the pages, you may not be able to select all records.

Based on that, may I recommend:

• just have have the checkbox next to the first column header which selects all records on the current page
• do not add another "select all" button

[elycheea]

@holmansze I spoke with @marion-bruells for clarification when we opened this issue. The behavior from WKC was changed in the PAL guidance.

Reading the Box note again, I believe the Select all button would only be used/recommended in cases with more than 100 rows? So the option to Select all would only appear after at least one item is selected if there’s more than 100 rows.

We do currently have Select all from all pages — are you recommending to remove select from all pages entirely for paginated tables and to only support selecting all items from the current page? @holmansze @marion-bruells

[holmansze]

@elycheea

Saw the storybook, thanks.

I think we can keep the "select all on page" and "select all" options in the column header checkbox. I actually like the fact that it offers the 2 options clearly. We can leave it to the consumer to decide if they can support "select all" based on the nature of the application. For example, if the application does not have a paginated backend API and it always fetches all records, it makes sense to support both "select all" and "select all on page". For an application that has a paginated backend API (and potentially handling high volume of data), the consumer would probably just support "select all on page".

I would recommend not adding the explicit "Select all" button in the table toolbar area. The column header checkbox already handles that and it clearly shows the 2 select options.

[marion-bruells]

Thanks fo reaching out. We aligned across our design teams on the PAL guidance with the simple select all button and no longer go with the dropdown.

For a basic table it is ok to follow the standard carbon behaviour to select only the items on the page. But we should offer the option to select items across all pages for certain use cases. In some tables it makes sense to have that addition in others probably not. Thats something each designer needs to decide based on their use case.

However if we see issues in the implementation for large amount of data we can revisit that decision and I can discuss again with the other designers. Do you see any issues with having a select all for tables with for example 1000 items? @holmansze @elycheea

Latest published guidance: https://pages.github.ibm.com/cdai-design/pal/components/data-table/batchactions/usage

[matthewgallo]

@marion-bruells is the "Select all" button with the left hand placement something we can address later on given the discussion over slack, here. Everything else in the batch action designs is included in the current component.

[matthewgallo]

We previously included an implementation here which included an overflow menu allowing for selecting all. Is this something we want to still keep?

[marion-bruells]

@matthewgallo no that one needs to be replaced. We shouldn’t have this overflow menu anymore, since it brings some issues in spacing and alignment. That pattern came from WKC but got reworked by PAL to simplify and avoid any extra space in the column header which this overflow button needs. It should be adjusted with this new guidance.

[elycheea]

@allcontributors add @marion-bruells for design

[allcontributors[bot]]

@elycheea

I've put up a pull request to add @marion-bruells! :tada:

[elycheea]

https://github.com/carbon-design-system/carbon/issues/12595