Ant 设计排序表代码不适用于反应 typescript

Question

I used following ant design sort table code in react type script, its not working correctly anyone know how to do that correctly

My code here

     import { Table } from 'antd';
  import * as React from 'react';

import { Table } from 'antd';
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        filters: [
            {
                text: 'Joe',
                value: 'Joe',
            },
            {
                text: 'Jim',
                value: 'Jim',
            },
            {
                text: 'Submenu',
                value: 'Submenu',
                children: [
                    {
                        text: 'Green',
                        value: 'Green',
                    },
                    {
                        text: 'Black',
                        value: 'Black',
                    },
                ],
            },
        ],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value:any, record:any) => record.name.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.name.length - b.name.length,
        sortDirections: ['descend'],
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a:any, b:any) => a.age - b.age,
    },
    {
        title: 'Address',
        dataIndex: 'address',
        filters: [
            {
                text: 'London',
                value: 'London',
            },
            {
                text: 'New York',
                value: 'New York',
            },
        ],
        filterMultiple: false,
        onFilter: (value:any, record:any) => record.address.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.address.length - b.address.length,
        sortDirections: ['descend', 'ascend'],
    },
];

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',
    },
    {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
    },
];
function onChange(pagination:any, filters:any, sorter:any, extra:any) {
    console.log('params', pagination, filters, sorter, extra);
}
//Table sample data
export class Customertable extends React.Component {


    render() {
        return (

            /* Start Search button*/
            <div className="customertable-section">
                <div>
                    <Table columns={columns} dataSource={data} onChange={onChange} />

                </div>


            </div>
            /* End of  Search button*/
        );
    }
}

Answer 1

While declaring the variable in typescript, you need to give it like, columns: any = [] and data: any = [] ..

And while making table , you should give the props like,

<Table columns={this.columns} dataSource={this.data} />

Working sample antd table with typescript here...

Answer 2

To add on to Maniraj's comment, the documentation provides a section for Typescript specific usage: https://ant.design/components/table/#Using-in-TypeScript

Setting the type of columns is possible by importing ColumnsType from 'antd/es/table'

Answer 3

Here the solution that may help someone. You should write type for your table config using default ant types and then in compare func, your item is DefaultRecordType, func returns number.

 const TABLE_COLUMNS: ColumnsType<DefaultRecordType> = [ { title: 'ISO #', dataIndex: 'iso', key: 'iso', sorter: (a: DefaultRecordType, b: DefaultRecordType): number => a.iso.localeCompare(b.iso), },]

Answer 4

You can simply sort your ant design table's column by replace your old code with new:

Old Code:

sorter: (a:any, b:any) => a.name.length - b.name.length,

New Code:

sorter: (a:any, b:any) => a.name.localeCompare(b.name),