CODEWITHSUNDEEP
javascriptreactjstypescriptreact-tabletanstack-table
Beginner Laravel
Beginner Laravel

Reputation: 83

How to Fix Error: Property 'header' Does Not Exist on Type 'ColumnMeta<T, unknown>' in @tanstack/react-table?

I am using @tanstack/react-table to build a table in my React project, but I’m encountering the following TypeScript error:

Error: Property 'header' does not exist on type 'ColumnMeta<T, unknown>'.ts(2339)

The error occurs in the meta?.header property in my code.

Here is a simplified version of the code:

<thead className="border border-[#CADED2] bg-[#F9FBFA]">
  {table.getHeaderGroups().map((headerGroup) => (
    <tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <th
          key={header.id}
          className={`${
            header.column.columnDef.meta?.header || ''
          } p-4 text-left text-base font-medium text-[#7D9B90]`}
        >
          {header.isPlaceholder
            ? null
            : flexRender(header.column.columnDef?.header, header.getContext())}
        </th>
      ))}
    </tr>
  ))}
</thead>

Here is the code where I define the column:

import { createColumnHelper } from '@tanstack/react-table';

const columnHelper = createColumnHelper<RequestVerificationAdminData>();

const columns = [
  columnHelper.accessor('number', {
    cell: (info) => info.getValue(),
    header: '번호',
    meta: {
      header: 'font-light w-[100px]',  // Error occurs here
    },
  }),
];

How can I properly define custom meta properties in @tanstack/react-table so that TypeScript doesn't throw this error? Is there a type definition I’m missing for the meta object?

Upvotes: 1

Views: 517

Answers (2)

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

You can expand the tanstack table type for your needs. If you want to expand the meta object, you can use this approach to add your own types here.

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData extends RowData, TValue> {
    table?: string;
}

Meta documentation

Upvotes: 1

Benoit Georges
Benoit Georges

Reputation: 11

The problem comes from typescript:

Try this:

import { CSSProperties } from 'react'
import { createColumnHelper } from '@tanstack/react-table';

type StyleProps = {
  style?: CSSProperties;
  [key: string]: any; // Allow other properties as well
};

export type ColumnMetaWithHeaderProps<T extends object> = {
  header?: StyleProps,
} & ColumnMeta<T, number>;

const columnHelper = createColumnHelper<RequestVerificationAdminData>();

const columns = [
  columnHelper.accessor('number', {
    cell: (info) => info.getValue(),
    header: '번호',
    meta: {
      header: 'font-light w-[100px]',  // Error occurs here
    } as ColumnMetaWithHeaderProps<RequestVerificationAdminData>,
  }),
];

Upvotes: 0

Related Questions