[v8] vue-table: FlexRender component has invalid prop definitions

lrstanley commented 1 year ago

Describe the bug

@tanstack/vue-table currently defines it's FlexRender component like so:

export const FlexRender = {
  props: ['render', 'props'],
  setup: (props: { render: any; props: any }) => {
    return () => {
      if (
        typeof props.render === 'function' ||
        typeof props.render === 'object'
      ) {
        return h(props.render, props.props)
      }

      return props.render
    }
  },
}

However, it's expected with Vue 3 that if not using <script setup /> (or similar), that the component is wrapped in defineComponent() for proper type inference. Additionally, it looks as though without this, Volar (through VSCode), is accepting string[], rather than any:

Looks like it might be picking the wrong props field from the defined component, as this is the generated FlexRender type from the index.d.ts file, and as you can see from the above screenshot, it thinks the props prop is actually the props field of the component that defines what props should be passed in:

declare const FlexRender: {
    props: string[];
    setup: (props: {
        render: any;
        props: any;
    }) => () => any;
}

Your minimal, reproducible example

https://codesandbox.io/s/github/tanstack/table/tree/main/examples/vue/basic?from-embed=&file=/src/App.vue

Steps to reproduce

Take above CodeSandbox example (directly from tanstack table website), and open it in an editor that supports Vue component intellisense (in my case, VSCode with Volar).
Open App.vue and you should see that it is not expecting the appropriate type.

Expected behavior

I would expect that it should pick up any, as the @tanstack/vue-table defines the props property on FlexRender without a type, and thus should be any.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows 11
Browser: Firefox v106.0b9
Editor: VSCode v1.71.2 (Volar v1.0.3)
Vue: v3.2.40

react-table version

v8.5.15

TypeScript version

v4.8.4

Additional context

If I mirror the FlexRender component into my application, and wrap it with defineComponent, it does seem to recognize that the props prop should actually be any:

import { defineComponent, h } from "vue"

export const FlexRender = defineComponent({
  props: ["render", "props"],
  setup: (props: { render: any; props: any }) => {
    return () => {
      if (typeof props.render === "function" || typeof props.render === "object") {
        return h(props.render, props.props)
      }

      return props.render
    }
  },
})

I can submit a PR to resolve this, if this is a sufficient fix (to wrap with defineComponent).

Terms & Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

JaavierR commented 1 year ago

Hi! I'm having the same error, but if I mirror the component as you suggested it's solve the problem (thanks for the workaround).

Platform

OS: Windows 11
Browser: Firefox v106.1
Editor: VSCode v1.72.2 (Volar v1.0.8)
Vue 3.2.41
Typescript v4.8.4
react-table version (vue) 8.5.15

module17 commented 1 year ago

Same issue here.

Type 'HeaderContext<TCity, unknown>' is not assignable to type 'string[]'

HTML is not being rendered within cell content; not sure if this is related.

hi-reeve commented 1 year ago

got the same issue

lrstanley commented 1 year ago

I'm no longer using this package and cannot validate, however, it looks as though this was fixed in https://github.com/TanStack/table/releases/tag/v8.7.1. Will close this issue, but can easily be reopened if anyone is still having issues.

TanStack / table