TableBody component should respect isLoading state and not attempt to render empty state fallback during initial loading

[YOOJS1205]

material-react-table version

v3.1.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When isLoading is true, the table still attempts to access and render data properties, which can cause type errors. The table should not try to access or render any data during the initial loading state, and should only show the loading overlay.

Currently, the MRT_TableBody component only checks for empty rows (!rows.length) but doesn't consider the isLoading state. This causes two issues:

Type errors when accessing data properties during loading
Unwanted empty state fallback being rendered behind the loading overlay

Steps to reproduce

1. Create a table with async data loading:

const { data, isLoading } = useQuery(...)

const table = useMaterialReactTable({
  data: data ?? [],
  columns,
  state: {
    isLoading,
    showLoadingOverlay: true
    // when showSkeleton's value is false, Type Error occured
    showSkeleton: false,
  }
});

2. During the initial loading state (isLoading: true):

• Type errors occur as the table tries to access data properties
• Empty state fallback is visible behind the loading overlay
• The table attempts to process data operations even though we're loading

Expected behavior

• When isLoading is true, the table should:
  1. Not attempt to access or process any data
  2. Not render the empty state fallback
  3. Only show the loading overlay
  4. Prevent any data-related operations until loading is complete

The MRT_TableBody component should check for isLoading state before attempting to render or process any data.

Minimal, Reproducible Example - (Optional, but Recommended)

const { data, isLoading } = useQuery(...)

const table = useMaterialReactTable({
  data: data ?? [],
  columns,
  state: {
    isLoading,
    showLoadingOverlay: true
    // when showSkeleton's value is false, Type Error occured
    showSkeleton: false,
  }
});

// MRT_TableBody.tsx

...
// does not check isLoading state
          (!rows.length ? (
            <tr
              style={{
                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
              }}
            >
              <td
                colSpan={table.getVisibleLeafColumns().length}
                style={{
                  display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
                }}
              >

...

Screenshots or Videos (Optional)

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

Yes, I think I know how to fix it and will discuss it in the comments of this issue

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.

[kamaladafrica]

any workaround on that?

[meesvandongen]

material-react-table/packages/material-react-table/src/hooks/useMRT_TableInstance.ts

Lines 222 to 249 in 8293b96

	//if loading, generate blank rows to show skeleton loaders
	statefulTableOptions.data = useMemo(
	() =>
	(statefulTableOptions.state.isLoading ||
	statefulTableOptions.state.showSkeletons) &&
	!statefulTableOptions.data.length
	? [
	...Array(
	Math.min(statefulTableOptions.state.pagination.pageSize, 20),
	).fill(null),
	].map(() =>
	Object.assign(
	{},
	...getAllLeafColumnDefs(statefulTableOptions.columns).map(
	(col) => ({
	[getColumnId(col)]: null,
	}),
	),
	),
	)
	: statefulTableOptions.data,
	[
	statefulTableOptions.data,
	statefulTableOptions.state.isLoading,
	statefulTableOptions.state.showSkeletons,
	],
	);

Here the logic shows isLoading || showSkeletons

statefulTableOptions.state.isLoading || 
       statefulTableOptions.state.showSkeletons

While it seems to me that it should be isLoading && showSkeletons

[YOOJS1205]

@meesvandongen I agree
Can I fix and open pull request?

[meesvandongen]

I am no maintainer so I have no influence here whatsoever. Though I imagine @KevinVandy would be happy to merge it.