T
TanStack•7mo ago
other-emerald

Issue with typing props on a vue component using ColumnDef type.

I am hitting the issue described here (from 2022) -- https://github.com/TanStack/table/issues/4382. I tried the workaround that someone suggested at the tail end, but I still see type issues when trying to send a columns prop on my component. 
type DataTableProps<TData> = {
  columns: {
    [K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
  }[keyof TData][];
  data: TData[];
};
const props = withDefaults(
  defineProps<
    DataTableProps<TData> 
...
type DataTableProps<TData> = {
  columns: {
    [K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
  }[keyof TData][];
  data: TData[];
};
const props = withDefaults(
  defineProps<
    DataTableProps<TData> 
...
This is a vue component with the following: 
<script setup lang="ts" generic="TData, TValue">
<script setup lang="ts" generic="TData, TValue">
In the component that uses this, it sends in columns as Record<string, unknown> The resulting error: 
Type 'Record<string, unknown>[]' is not assignable to type 'ColumnDef<Record<string, unknown>, unknown>[]'.
  Type 'Record<string, unknown>' is not assignable to type 'ColumnDef<Record<string, unknown>, unknown>'.
    Type 'Record<string, unknown>' is not assignable to type 'AccessorFnColumnDefBase<Record<string, unknown>, unknown> & IdIdentifier<Record<string, unknown>, unknown>'.
      Property 'accessorFn' is missing in type 'Record<string, unknown>' but required in type 'AccessorFnColumnDefBase<Record<string, unknown>, unknown>'.
Type 'Record<string, unknown>[]' is not assignable to type 'ColumnDef<Record<string, unknown>, unknown>[]'.
  Type 'Record<string, unknown>' is not assignable to type 'ColumnDef<Record<string, unknown>, unknown>'.
    Type 'Record<string, unknown>' is not assignable to type 'AccessorFnColumnDefBase<Record<string, unknown>, unknown> & IdIdentifier<Record<string, unknown>, unknown>'.
      Property 'accessorFn' is missing in type 'Record<string, unknown>' but required in type 'AccessorFnColumnDefBase<Record<string, unknown>, unknown>'.
GitHub
Issues · TanStack/table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - Issues · TanStack/table
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?