I have a reusable react-component in which i’m using an antd-table.

import type { TableProps } from 'antd/lib/table';

export function TableComponent_TRY<RecordType>(props: TableProps<RecordType>) {
  const {
    columns,
    dataSource,
    rowKey,
    rowClassName,
    rowSelection,
    pagination,
    className,
    loading,
    expandable,
    showSorterTooltip,
  } = props;

/*
~ Deleted unnecessary code
*/

    return (
        <Table
              size='small'
              showSorterTooltip={showSorterTooltip}
              className={className}
              rowClassName={rowClassName}
              loading={loading}
              pagination={pagination}
              dataSource={dataSource}
              columns={columns}
              rowKey={rowKey}
              expandable={expandable}
              rowSelection={rowSelection}
        />
    );
}

Now im getting multiple errors like:

1. Type 'string | RowClassName<RecordType> | undefined' is not assignable to type 'string | RowClassName<object> | undefined'.
   

2. Type 'ColumnsType<RecordType> | undefined' is not assignable to type 'ColumnsType<object> | undefined'.
   

3. same goes for “rowKey”, “dataSource”, “expandable”, “rowSelection”. (all generic types)

Maybe even more if i would use other features of antd-table.

I’ve already tried to create my own interface for that component:

interface IAppProps<RecordType> {
    columns: ColumnsType<object>,
    rowKey: string | GetRowKey<object>,
    ...
}
export function TableComponent_TRY<RecordType>(props: IAppProps<RecordType>) {
    ...
}

but resulted in:

<TableComponent_TRY columns={columns} />

Type 'ColumnsType<tick_Step>' is not assignable to type 'ColumnsType<object>'.

How do i properly out-source the antd-table while still retain types?

PS: Kinda new to generics