Ant Design で Table の columns の dataIndex の候補を表示する型

antd の Table の columns には表示する対象を指定する dataIndex がありますが、
これは手動で指定する必要があります。

no-suggestion

type Data = {
  id: number;
  name: string;
};

export const columns: TableProps<Data>['columns'] = [
  {
    title: 'ID',
    key: 'id',
    // これだと候補がでない
    dataIndex: '',
  }
];

そこで以下のような型を定義することで dataIndex の型を指定してみます。

columns-type

import { ColumnGroupType, ColumnType } from 'antd/lib/table/interface';

type AnyData = Record<string, unknown>;

type RenderReturn<TRecord = AnyData> = ReturnType<
  NonNullable<ColumnType<TRecord>['render']>
>;

type Column<TRecord = AnyData> =
  | (Omit<ColumnGroupType<TRecord>, 'render'> & {
      render?: (
        value: TRecord,
        record: TRecord,
        index: number
      ) => RenderReturn<TRecord>;
    })
  | (ColumnType<TRecord> & {
      dataIndex?: keyof TRecord;
      render?: <T = TRecord>(
        value: T,
        record: TRecord,
        index: number
      ) => RenderReturn<TRecord>;
    });

type Columns<TRecord = AnyData> = Column<TRecord>[];

type Data = {
  id: number;
  name: string;
};

export const columns: Columns<Data> = [
  {
    title: 'ID',
    key: 'id',
    dataIndex: '',
  },
];

定義した Columns を指定することで dataIndex に候補が出るようになりました。