How to customize how a filter value is rendered?

[ZakKa89]

I want to be able to customize how a value is rendered for a type: "value" filter. Is this possible? I've only seen this possible for the 'range' type where you can render a value for a specific range. But what I want is a lot simpler:

Why this is a problem

Sometimes the data you work with just doesn't have human readable friendly values, for example:

Example of what I'm looking for

<Facet renderValue={(value) => value.toLowerCase() } />

Or something similar in the config is also fine.

Example implementation in MUI

Other popular component libraries have something like this in the api like 'renderValue' in the select component of MUI renderValue in MUII API

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[ZakKa89]

The issue is still very important, imo this is a must have for any frontend library/package. Almost no frontend would render the raw data from a backend without mapping/transforming.

[omonk]

@ZakKa89 I assume you're using react so does this help?

<Facet field={"Name"} label="Name" view={CustomFacet} />

const CustomFacet = ({
  label,
  options,
  onRemove,
  onSelect,
  onSearch,
  showSearch,
  searchPlaceholder,
  showMore,
  onMoreClick,
}: FacetViewProps) => {
  return (
    <>
      <p>{label}</p>
      <div>
        {options.length < 1 && <p>No matching options</p>}
        {options.map(op => (
          <Checkbox
            fullWidth
            // This is what you're looking for
            label={op.value.toLowerCase()}
            onChange={() =>
              op.selected
                ? onRemove(op.value as FieldValue)
                : onSelect(op.value as FieldValue)
            }
            state={op.selected ? "selected" : "unselected"}
          />
        ))}
      </div>
    </>
  );
};

[ZakKa89]

@omonk Thanks ! Will try that out. I think the issue should remain open because I think the library should support this without the need to render a complete custom facet.

[omonk]

@ZakKa89 for sure, trouble with rewriting the value that is rendered is that it'll screw up the filters but there should be an option to augment what is visually rendered

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[ZakKa89]

Nah, don't mark as stale. Feature request still stands.

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[ZakKa89]

Nah, don't mark as stale. Feature request still stands.

[joemcelroy]

Thanks il put this on a list of improvements. For now developers can override the view component for this.

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[ZakKa89]

bad bot