Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

2

Answers


  1. 0

    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>,
  }),
];
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search