Unable to apply filter to Retool table column pulling data from Firestore collection

Hi,

I'm having an issue with applying filters to a Retool table. I'm trying to apply a filter to a column called "title", which is pulling data from the "i18n.fr.title" field in a Firestore collection.

I've tried applying the filter with the following columnName:

"i18n.fr.title"

"title"

However, none of these seem to be working. Can you please help me understand what I'm doing wrong and how I can apply the filter correctly?

Thank you for your assistance!

Hey @squero!

Would you mind posting a screenshot of how you're setting the table filters? There's an example here of what a set filter event handler might look like but I'm not sure that applies. Curious to see your setup! It might also help if you can post a screenshot of the column settings for the title column.

I have made changes to how I retrieve data from a Firestore query by using a transformer to format the data. The code allows me to format the data and retrieve the title, which is located in 'i18n.fr'. I would like to know if this is the correct approach?

const formattedData = data.map(obj => {
    const { title, instructions } = obj.i18n.fr;
    return {
      id: obj.id,
      disabled: obj.disabled,
      image: obj.image,
      objective: obj.objective,
      video: obj.video,
      duration: obj.duration,
      title: title ?? title,
      instructions: instructions ?? instructions
    };
  });

return formattedData

Additionally, I have successfully implemented filters with an AND relation between the title and objective fields.

I am currently setting 'setFilters' for both 'Search by title' and 'Search by objective' text inputs. However, I would like to centralize the filters for the table to avoid duplicating code for each text input. Do you have any suggestions on how to accomplish this?

Thank you for your assistance.
Best regards.

1 Like

That transformer looks like an excellent approach here, nice!

For centralizing filters, you can try using the table's .setFilters method in a JavaScript query and have that be triggered by both components. In your case that'd look something like:

Exercsies.setFilters([{columnName: "title", filterValue: textInput25.value, operator: "contains"}, /* ...etc */], "and")

Does that work?

Otherwise, if you're comfortable with SQL then a Query JSON with SQL query is also a powerful way to filter your data. In that case, you'd be feeding the output of the JSON with SQL query to the data field of your table.

Thank you very much! It's working like a charm :slight_smile:

Hello! Just want to give a quick update for anyone who might stumble across this thread that the documentation for table filters has been updated!