komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
788 stars 58 forks source link

Using useTable along with Custom Editor throws an error table.openEditor is not a function #339

Closed KarthikHebbarMN closed 1 year ago

KarthikHebbarMN commented 1 year ago

Trying out this sample where I attempt to modify external data along with table data. https://komarovalexander.github.io/ka-table/#/remote-data-editing and I have a custom Display component where I am calling table.openEditor const table = useTableInstance(); return ( <div onClick={() => { table.openEditor(rowKeyValue, column.key); }} > test</div>);

Code

 const table = useTable({
    onDispatch: async (action, newState) => {
      if (action.type === ActionType.UpdatePageIndex) {
        //setPageIndex(action.pageIndex);
      }
      if (action.type === ActionType.DeleteRow) {
        // await deleteItem(action.rowKeyValue);
      }
      if (action.type === ActionType.UpdateCellValue) {
        console.log("DataToSave - ", "key", action.columnKey, "value", action.value);
        //await updateItem({ id: action.rowKeyValue, data: { [action.columnKey]: action.value } });
      }
      if (action.type === ActionType.UpdateSortDirection) {
        //setColumns(newState.columns)
      }
      if (action.type === ActionType.OpenEditor) {
        return openEditor(action.rowKeyValue, action.columnKey)
      }
    },
    openEditor: (rowKeyValue, columnKey) => { }

  });

after passing this to the Table. I get

table.openEditor is not a function when I try editing that cell.

Not sure what can be done, I tried by adding an entry called openEditor in useTable context, and imported openEditor from 'ka-table' but looks like its not the right way to do it, by far. Looking forward to your response.

Thanks. Karthik

KarthikHebbarMN commented 1 year ago

Hey, Hope you are doing well and great. Just wanted to follow up and see if got the time to look at these. Just that I know I am close to finding a fix, but not haha. Little bit of a itch. When ever you get the time.

Thanks again for the amazing library.

komarovalexander commented 1 year ago

Hi, please create a stackblitz example of your issue https://stackblitz.com/edit/table-editing-ts?file=Demo.tsx

KarthikHebbarMN commented 1 year ago

Hey, my bad with the code. The table was overlapping with another prop name 'table' which was empty. Not an issue in library.

Thanks