Ultra Dynamic Filters

🤝 Community Show & Tell
1

In this very quick tutorial I showcase how you can use Global functions (see info here to request access to this beta functionality) to make your table filters super dynamic, showing, for each filter component, only options that are visible on your table

Here's the video tutorial: https://youtu.be/eXaVL9wDt-U

And here's the code to the global function:

{
  if (!datatable || !Array.isArray(datatable)) return true;

  // Apply filters using the AND operator.
  // Only active filters (not disabled and with a non-null value) are applied.
  const filteredData = datatable.filter(row => {
    return filterstack.filters.every(filter => {
      // If the filter is disabled or its value is null, ignore it.
      if (filter.disabled || filter.value === null) return true;
      return row[filter.columnId] === filter.value;
    });
  });

  // Check if any row in the filtered data has the given value in the specified key.
  const exists = filteredData.some(row => row[key] === value);

  // Return true if the value does NOT exist in the filtered data, otherwise false.
  return !exists;
}

with parameters being, value key filterstack datatable

Here's the jsonb so you can upload it and test it.

Hope this is helpful!

Ultra dynamic filters.json (3.7 MB)

4 Likes
2

This is a great feature to add - nice work!!

1 Like