antd with typescript : Table with Column align='right' is not compiling

Question

I am using antd Table with Typescript as below

<Table dataSource={data} columns={columns2} />

When I give align: 'right' to one of the columns, it is not compiling. The following error is shown. I couldn't figure out the root cause of these issue. Any help is appreciated.

Types of property 'align' are incompatible.
          Type 'string' is not assignable to type '"right" | "left" | "center" | undefined'.  TS2322

    47 |   public render() {
    48 |     return (
  > 49 |       <Table dataSource={data} columns={columns2} />
       |                                ^
    50 |     );
    51 |   }
    52 | }

Full code is

import React from "react";
import { Table } from "antd";


const columns2 = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    align: 'right'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];


export class Sales extends React.Component<{}, {}> {
  public render() {
    return (
      <Table dataSource={data} columns={columns2} />
    );
  }
}

export default Sales;

Answer 1

import { AlignType } from 'rc-table/lib/interface';

align: 'right' as 'right',// not recommend
align: 'right' as const,// ok
align: 'right' as AlignType,// good

3 ways to solve your problem.

Answer 2

try this one. its work for me

{
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      align: 'right' as 'right',
}

Answer 3

This works for me.

align: 'right' as const,

So the code looks like this:

{
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      align: 'right' as const,
}