Error occurs when data is empty, isLoading is true and a filter for a nested field is set about material-react-table HOT 7 CLOSED

The following changes in MRT_TableRoot.tsx fix the problem. (I haven't yet figured out all the types and there is probably a more elegant way to achieve this.) However there is still the separate problem that the filter gets rid of all the skeleton rows and therefore of the loading animation (this has nothing to do with object nesting).

 const data: TData[] = useMemo(
    () =>
      (props.state?.isLoading || props.state?.showSkeletons) &&
      !props.data.length
        ? [
            ...Array(
              props.state?.pagination?.pageSize ||
                initialState?.pagination?.pageSize ||
                10,
            ).fill(null),
          ].map(() => {
            let row = {};
            for(const col of getAllLeafColumnDefs(props.columns as MRT_ColumnDef[])) {
              assign(row, (col.id ?? col.accessorKey ?? '').split('.'), null)
            }
            return row;
          })
        : props.data,
    [props.data, props.state?.isLoading, props.state?.showSkeletons],
  );

using:

function assign(obj: any, keyPath: string[], value: any): any {
   let lastKeyIndex = keyPath.length - 1;
   for (var i = 0; i < lastKeyIndex; ++i) {
     const key = keyPath[i];
     if (!(key in obj)) {
       obj[key] = {}
     }
     obj = obj[key];
   }
   obj[keyPath[lastKeyIndex]] = value;
}

from material-react-table.

@brunol55 @BendixP Good news, this will be fixed in v1.5.0.

Or if you need to fix it now, the solution is to set manualFiltering={isLoading} if you are not already using it for server-side filtering.

from material-react-table.

I'm having the problem with the skeleton when using filters, any solution to this?

from material-react-table.

I don't think so. We should probably open a separate issue for that. But the workaround also kind of works. Just set the filters only when the loading is done.

from material-react-table.

I don't think so. We should probably open a separate issue for that. But the workaround also kind of works. Just set the filters only when the loading is done.

Yeah, I was going to suggest enableFiltering could be false when isLoading is true

from material-react-table.

I tried putting the enableFilters to true only when the loading is done, but the problem seems to be related with the initialState, where I set the columnFilters that I get from the queryString as a initial filter value, when I don't have a queryString, the columnFilters on the initialState is an empty array and there is no problem with the skeleton, when I get to the page through a URL containing a queryString the columnFilters is not empty and the skeleton don't load, it appears a message "No results found" and the progress bar.

from material-react-table.

I opened an issue for this secondary problem: #237

from material-react-table.