Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Table] TablePaginationActions onChange prop is not overridable

See original GitHub issue

Basically I’ve this interface from Material-UI docs while implementing CustomTablePaginationAction component Material-UI CustomTablePaginationAction

interface TablePaginationActionsProps {
  count: number;
  page: number;
  rowsPerPage: number;
  onChangePage: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
}

The thing is if I want to add/modify on onChangePage prop like below:

onChangePage: (event?: React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<unknown>, newPage: number) => void;

It gets me an error, like I can’t modify/override the prop event type.

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & Pick<TableCellProps, "onError" | "ref" | "abbr" | "slot" | "style" | "title" | "hidden" | "children" | "size" | ... 257 more ... | "variant"> & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '(props: ITablePaginationActionsProps) => JSX.Element' is not assignable to type '"object" | "big" | "small" | "sub" | "sup" | "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "blockquote" | "caption" | "cite" | "code" | "col" | "colgroup" | "dd" | ... 61 more ... | undefined'.
      Type '(props: ITablePaginationActionsProps) => JSX.Element' is not assignable to type 'FunctionComponent<TablePaginationActionsProps>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'PropsWithChildren<TablePaginationActionsProps>' is not assignable to type 'ITablePaginationActionsProps'.
            Types of property 'onChangePage' are incompatible.
              Type '(event: MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => void' is not assignable to type '(event?: MouseEvent<HTMLButtonElement, MouseEvent> | ChangeEvent<unknown> | undefined, currentPage?: number | undefined) => void'.
                Types of parameters 'event' and 'event' are incompatible.
                  Type 'MouseEvent<HTMLButtonElement, MouseEvent> | ChangeEvent<unknown> | undefined' is not assignable to type 'MouseEvent<HTMLButtonElement, MouseEvent> | null'.
                    Type 'undefined' is not assignable to type 'MouseEvent<HTMLButtonElement, MouseEvent> | null'.
  Overload 2 of 2, '(props: DefaultComponentProps<TablePaginationTypeMap<{}, ComponentType<Pick<TableCellProps, "onError" | "ref" | "abbr" | "slot" | "style" | "title" | "hidden" | "children" | "size" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 254 more ... | "variant">>>>): Element', gave the following error.
    Type '(props: ITablePaginationActionsProps) => JSX.Element' is not assignable to type '"object" | "big" | "small" | "sub" | "sup" | "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "blockquote" | "caption" | "cite" | "code" | "col" | "colgroup" | "dd" | ... 61 more ... | undefined'.
      Type '(props: ITablePaginationActionsProps) => JSX.Element' is not assignable to type 'FunctionComponent<TablePaginationActionsProps>'.

Q: why event object is a major paramater and needs to be passed all over? my codebase doesn’t depend or need it.