Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

259
Views
Property 'tableData' does not exist on type 'IPerson' in MaterialTable component

I have a MaterialTable component and I added the editable attribute to it. For onRowUpdate and onRowDelete methods, I want to get the index of the updated or removed item.

This is the minimal reproducible sandbox: https://codesandbox.io/s/busy-fast-z84qq?file=/src/App.tsx

I got the error when I obtained the index of the item. Should I include the tableData property to my IPerson interface? How can I overcome this problem?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Should I include the tableData property to my IPerson interface?

No, because you will probably use your IPerson interface throughout your application, and adding a tableData property that may or may not exist (see below) will defeat the purpose of typechecking. Typescript is telling you that tableData doesn't exist on your IPerson interface, which is correct. However, the underlying Javascript from your dependency has appended your object with a tableData property for its own internal purposes (and external if this is the only way to get at the index) and didn't bother to let Typescript know. Your code runs, the index is available for use.

There are probably better ways to do this, but you could create an IPersonAfterRowUpdate interface that has the tableData object on it:

interface IPersonAfterRowUpdate extends IPerson {
  tableData: { id: number };
}

/* ... */

onRowUpdate: (newData, oldData) =>
            new Promise<void>((resolve, _reject) => {
              setTimeout(() => {
                if (oldData) {
                  const updatedData = [...data];
                  const index = (oldData as IPersonAfterRowUpdate).tableData.id;
                  updatedData[index] = newData;
                  setData(updatedData);
                  resolve();
                }
                _reject(new Error('Could not find oldData'));
              }, 1000);
            }),

Notice we have to check that oldData exists otherwise TS wouldn't like us indexing updatedData with a possible undefined value.

Then submit a PR to this library with this function typed correctly!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!