Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error occurs when data is empty, isLoading is true and a filter for a nested field is set #225

Closed
1 task done
BendixP opened this issue Nov 29, 2022 · 7 comments
Closed
1 task done

Comments

@BendixP
Copy link

BendixP commented Nov 29, 2022

material-react-table version

1.3.16

react & react-dom versions

18.0.20

Describe the bug and the steps to reproduce it

This error only seems to occur when three conditions are met:

  1. isLoading = true
  2. filter ist set for nested field (e.g. "name.firstName")
  3. data is empty (data={[]})

In a real app this would happen if I need to wait for a server request to return before filling in the data.

Workaround: Only set filters when data arrives (Won't work if the server doesn't return any rows).

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-2hvpac?file=src/TS.tsx

Screenshots or Videos (Optional)

image

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@BendixP
Copy link
Author

BendixP commented Dec 3, 2022

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;
}

@brunol55
Copy link

brunol55 commented Dec 7, 2022

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

@BendixP
Copy link
Author

BendixP commented Dec 7, 2022

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.

@KevinVandy
Copy link
Owner

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

@brunol55
Copy link

brunol55 commented Dec 7, 2022

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.

@BendixP
Copy link
Author

BendixP commented Dec 7, 2022

I opened an issue for this secondary problem: #237

@KevinVandy
Copy link
Owner

KevinVandy commented Dec 20, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants