Clarity: Replace the datagrid placeholer image

[yanyixing]

[ ] bug
[√ ] feature request
[ ] enhancement

How can i replace the datagrid placeholder image?

[yanyixing]

Or can i hide this image?

[hippee-lee]

Hi @yanyixing.

The placeholder image in datagrid is not configurable at this time and always appears when the datagrid is empty.

This feature will be added when your issue makes its way through our pipeline.

[Jinnie]

In the meantime you can workaround it by overriding the image in CSS, like this:
https://plnkr.co/edit/ytSJyf?p=preview
See the global <style> section in index.html

In a Clarity seed project, you'd prefer to do it in the global styles.css

[yanyixing]

@Jinnie thanks

[ewaschenko]

Any updates?

[gnomeontherun]

Hi @ewaschen you can use the workaround described here https://github.com/vmware/clarity/issues/580#issuecomment-286052934 until this is implemented. It is something we'd be happy to get a contribution for, but it does not have any prioritization at the moment.

[joshjohnsonux]

In addition to the ability to replace this, it would be useful for the component to differentiate between "empty state due to no data at all" versus "empty state due to data being actively filtered out" since the latter case can have a call-to-action of adjusting the filters.

[dbyard-vmware]

Hi there. A stakeholder recently was confused by the use of a giant funnel to mean 'nothing available'. Also, I have reports that customers in the field didn't realize it meant they could actually use filters.

I suggest replacing it with an arrow pointing to the filters if filters are available, and a generic 'empty' if not.

I explicitly don't recommend using a frowny-face like some UI systems. Large enterprises depend on our products, and such a thing can come across as pithy or condescending, especially cross-culturally.

[gnomeontherun]

Thanks for the update, in the meantime please use https://clarity.design/documentation/datagrid/placeholder to change the image if you have specific needs.

[Shijir]

A workaround for this issue is to replace (in your global style file) the default background image defined in .datagrid-placeholder-image class.

[gnomeontherun]

There is a workaround available for this issue, and we recommend using it for Clarity Angular. As we build Clarity Core implementations, we expect that this issue won’t be an issue or will be configurable on the application side. To help us clean up our backlog, we are going to close this with a functional workaround available and suggest you follow updates for Clarity Core for enhancements that can support your use case with Clarity Core components.