Comments (9)
I had a similar kind of Issue when deleting a row. I got all new records deleted and found that tableData was in the initial state in the renderRowActions
delete function even though the table shows correct data. later I found that if we set displayColumnDefOptions
prop even with an empty object issue got fixed. This is a strange way but I thought it will help to fix the issue.
from material-react-table.
@udithsc thanks a lot. I had the exact same problem and it was driving me nuts.
I confirm that setting the displayColumnDefOptions prop solves the issue
from material-react-table.
I am having a similar problem. In my case, when I delete a row, it's always the last row that gets deleted (visually).
I found out that the problem is with the table editing mode. It seems to me that MRT_EditCellTextField
is not handling cell value changes, as it only gets the cell value to initialize the value
state (by using the useState
hook).
from material-react-table.
The problem is a unique key for each row is the index, which is the default behavior.
. Therefore you should tell the material-react-table about the unique key for each row by using getRowId method
For example: if the unique key of the row is userId,
you can use the following code:
<MaterialReactTable
getRowId={(originalRow) => {return originalRow.userId }}
editingMode="table"
{...rest}
/>
from material-react-table.
What I think is happening is that displayColumns is being memoized.
This memoization is deep, it includes MRT_ToggleRowActionMenuButton > MRT_EditActionButtons > handleSave > onEditingRowSave. It'll cache the references used in onEditingRowSave and keep using those unless something changes in the useMemo dependency array.
The prop "displayColumnDefOptions" is a dependency, by setting to an empty inline object you're essentially disabling the useMemo, since an inline object will be a new reference every render, it'd work with any other dependency that's an object (for example: localization).
Here's a codesandbox to see what useMemo does to states you want to use inside your functions.
The reason the demo page for editing works is that the original data reference is being modified before it's copied.
from material-react-table.
All of my own editing examples, which are supposed to do the same thing here, are working fine. You will need to create a full sandbox demoing the issue you are running into here.
My guess is that pasteContent
is using the wrong data structures and not actually adding a new row to the table.
renderRowActions
has this type signature: ({ cell, row, table }) => ReactNode
, not the (row, index) one that you are trying to use.
from material-react-table.
I am having a similar problem. In my case, when I delete a row, it's always the last row that gets deleted (visually).
I found out that the problem is with the table editing mode. It seems to me that
MRT_EditCellTextField
is not handling cell value changes, as it only gets the cell value to initialize thevalue
state (by using theuseState
hook).
Need to look into this. Yes makes sense that the input text state is the root of the problem.
from material-react-table.
Having the same issue, even when setting the prop <MaterialReactTable displayColumnDefOptions={{}} editingMode="table" ... />
, I'm using material-react-table version 1.8.5
.
I switched to the editingMode="cell"
type instead of editingMode="table"
; I guess I'll change back to table
once this is resolved.
from material-react-table.
This might be all the way fixed in v2.9.0 as columns are no longer memoized internally except during resizing and dragging events.
from material-react-table.
Related Issues (20)
- Lazy Sub-Rows Example refetching the whole table HOT 3
- How to make checkbox position fix? HOT 2
- Expandable Details Panel
- Filters - Clearing autocomplete filter using "Clear Filter" rather than the 'X' button doesn't clear the selected value.
- Documentation needs update for rowVirtualizerInstanceRef.current?.scrollToIndex with virtualized table and renderDetailPanel
- virtualizer initialOffset seems to have no effect
- When changing column width table scrolls back to the top
- Data not displayed on initial page load with virtualization enabled and table data passed as props to main component
- Can we drag a column using column header instead of drag icon in Material-React-Table?
- Infinite Scrolling - Infinite Loop of loading and stop scrolling after set maxPages in useInfiniteQuery HOT 2
- MRT Grid Infinite scrolling with RTk Query HOT 1
- Inability to Drag Columns on Tablets, Mobiles, or Touch Devices HOT 1
- MUI style breaking in UI
- Column editSelectOptions array with label and value do not select label in edit mode
- 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 1
- 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
- Min, Max and Median functions not working properly on dataset with null values
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.