Search code examples
angularvmware-clarity

Clarity - Ability to customize the selection of datagrid component

I intend to use Clarity for my development. For the Datagrid component, Do the UI library give us the ability to customize the selection box on the header?

I want to have a dropdown next to the selection box on the header for different types of "Select All" options as the image below.

Customizable selection on header

Thank you.

Solution

  • You cannot modify the existing select all button, but you could develop a button that lives above the datagrid using the batch action bar. See https://v2.clarity.design/datagrid/batch-action for details, and you could use a dropdown like the export example in the documentation.

    If you really wanted to disable the existing select all button in addition, you would need to use CSS to hide it. Something like this should suffice.

    ::ng-deep .datagrid-column clr-checkbox-wrapper.clr-checkbox-wrapper {
    display: none;
}