TanStackT
TanStack•12mo ago
skinny-azure

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> 
...


This is a vue component with the following:
<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>'.
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
Issues · TanStack/table
Was this page helpful?