Skip to main content

BulkActions

Base​

Use Button as children of BulkActions.

Select all option​

The option to select all items is optional and can be activated via the showSelectAll property. This option will only be rendered when the total property is also set.

State management with useBulkActions​

tip

You can create your own state control, but we strongly recommend using the hook useBulkActions.

The useBulkActions hook, provided by Tangram, makes available several pieces of information and functions to handle the BulkActions state management and your interactions with listed data.

const initialItems = useMemo(
  () => [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2', selected: true },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' }
  ],
  []
);

const {
  items,
  selectedIds,
  isEveryItemSelected,
  isEveryVisibleItemSelected,
  isEveryVisibleItemUnselected,
  hasOnlyAFewItemsSelected,
  total,
  totalSelected,
  clear,
  toggle,
  toggleAll,
  toggleAllVisible
} = useBulkActions({ items: initialItems, total: 300 });
danger

The hook will regenerate the initial information every time that items and total values change. Consider using the useMemo hook to avoid unnecessaries re-renders (or even infinite loops).

For more details on parameters and returns see the useBulkActions API.

Example:

Using with tables​

To use the BulkActions integrated with Table is required to render it as a first child of Table.Head.

Fixed header​

info

In future versions of Tangram, the placement of these components will be adjusted automatically, without the need to include custom styles.

For the BulkActions component to work properly with fixed-header tables, you need to define a custom style for the Table component.

Example:

With select all option​

If the showSelectAll property is defined, the BulkActions height is different and the custom style should change.

Internacionalization​

danger

When changing the component's default language (English), set values for all properties to keep accessibility consistent.

It is possible to pass custom values for the different texts used by the component. Are they:

  • clearLabel: Text to label the clear selection button
  • totalSelectedLabel: Text to the items selected counter
  • selectAllLabel: Text to label the select all option

To help with the process, constants are available with default values for properties in English, Portuguese and Spanish. For more details see the Component API.

Example of constants in Spanish:

You can define these properties as string or function (that should return a string).

With string​

When set to string, it can contain specific keys - which will be replaced by the final value of each one. The keys available are:

  • {total}: number of items.
  • {totalSelected}: number of selected items.

Example:

With function​

If defined as function, the same values are available through an object via argument.

Example:

Feedback​