Comments (7)
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.
Related Issues (20)
- Inability to Drag Columns on Tablets, Mobiles, or Touch Devices HOT 1
- MUI style breaking in UI HOT 1
- Column editSelectOptions array with label and value do not select label in edit mode HOT 1
- Strange Scrolling behaviour with Header Groups and column virtualization HOT 1
- muiPaginationProps does not include rowsPerPage HOT 2
- onColumnVisibilityChange behaves strange when clicked the show menu column showAll or hideAll button HOT 5
- When using `localStorage` or `sessionStorage` to store filter values, I'm encountering an error specifically with the `filterVariant` set to "date" or "date-range": HOT 5
- Column Ordering (DnD) not working on mobile device HOT 1
- Min, Max and Median functions not working properly on dataset with null values HOT 1
- sort on null value HOT 3
- Group columns are too small when enableColumnResizing:true
- Missing InputLabel when filter is a Select, variant is outlined, in custom filter ui
- Change the text of buttons in edit modal HOT 1
- When selecting "Empty" or "Not Emtpy" with multi-select results in TypeError: selected.map is not a function HOT 1
- how to access staticRowIndex inside AggregatedCell HOT 3
- pageCount:-1 does not seem to work as intended
- "enableRowVirtualization" doesn't work correctly with MRT_Table component HOT 1
- Global filter doesnt work on material react table with sub rows HOT 1
- enableClickToCopy only on normal cells and not on AggregatedCell HOT 4
- Revalidating in NextJS when grouping is enabled causes an issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-react-table.