BUG: addColumnFilters() not working

[Jaydeep189]

I am trying to implement addColumnFilters but it's not working.

When I am logging the filter object, it is empty.

I have followed the documentation for the same.

My Table

const table = createTable(readable(data), {
    sort: addSortBy({ disableMultiSort: true }),
    page: addPagination(),
    filter: addTableFilter({
      fn: ({ filterValue, value }) => value.includes(filterValue),
    }),
    colFilter: addColumnFilters(),
    select: addSelectedRows(),
    hide: addHiddenColumns(),
  });

Table Colums

const columns = table.createColumns([
    table.column({
      header: (_, { pluginStates }) => {
        const { allPageRowsSelected } = pluginStates.select;
        return createRender(CheckBox, {
          checked: allPageRowsSelected,
        });
      },
      accessor: "id",
      cell: ({ row }, { pluginStates }) => {
        const { getRowState } = pluginStates.select;
        const { isSelected } = getRowState(row);

        return createRender(CheckBox, {
          checked: isSelected,
        });
      },
      plugins: {
        sort: {
          disable: true,
        },
        filter: {
          exclude: true,
        },
      },
    }),
    table.column({
      header: "Status",
      accessor: "status",
      plugins: {
        sort: { disable: true },
        filter: { exclude: true },
        colFilter: {
          fn: ({ filterValue, value }) => {
            if (filterValue === undefined) return true;
            return filterValue === value;
          },
          render: ({ filterValue, preFilteredValues }) =>
            createRender(Select, { filterValue, preFilteredValues }),
        },
      },
    }),
    table.column({
      header: "Email",
      accessor: "email",
      cell: ({ value }) => value.toLowerCase(),
      plugins: {
        filter: {
          getFilterValue(value) {
            return value.toLowerCase();
          },
        },
      },
    }),
    table.column({
      header: "Amount",
      accessor: "amount",
      cell: ({ value }) => {
        const formatted = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(value);
        return formatted;
      },
      plugins: {
        sort: {
          disable: true,
        },
        filter: {
          exclude: true,
        },
      },
    }),
    table.column({
      header: "",
      accessor: ({ id }) => id,
      cell: (item) => {
        return createRender(Actions, { id: item.value });
      },
      plugins: {
        sort: {
          disable: true,
        },
      },
    }),
  ]);

When I am logging the filter object

  const { filterValues } = pluginStates.colFilter;
  console.log($filterValues);

Output

{}

Let me know if I have done any silly mistake here or is there some other issue here. Thanks in advance!

[AlbertMN]

I had the same issue. The addTableFilter.ts file didn't seem to be fed the columnOptions properly.
I'm on the Svelte 4 branch, though, so I can't confirm whether this'd be the case for you too, but I added this simple backup in our fork of this project;

if (!options) {
  // Temp. bugfix... Sometimes doesn't get the column options for some reason!
  options = cell.column?.plugins?.filter ?? undefined;
}

On line 82 in the addTableFilter.ts@getFilteredRows method. This is the commit where we fixed it; SimplyPrint@41d7690#diff-b5d45d51e49d2a038000877c655a868b7e03698365d225d5e9d980c6d5a7bce2

That did the trick! Not the prettiest fix - should probably dive in and figure out why columnOptions wasn't populated, but we also tried to change the project to allow for filtering and sorting of non-data-cells (display cells).

You can use our fork if you're on Svelte 4 and don't mind being a few versions back. Hope this helps.