Ant Design Table with Ant Motion example

table-example.tsx

import { Input, Table } from "antd";
import QueueAnim from "rc-queue-anim";
import React from "react";
const TextArea = Input.TextArea;

const AnimationWrapper = ({ ...props }) => <QueueAnim duration={1000} component="tbody" {...props} />;

const DataSource = [
  {
    id: "content-1",
    content: "Hello World 1"
  },
  {
    id: "content-2",
    content: "Hello World 2"
  },
  {
    id: "content-2",
    content: "Hello World 3"
  }
];

const Columns = [
  {
    dataIndex: "id",
    key: "id",
    render: (text: string, record: any, index: number): any => {
      return {
        children: text
      };
    },
    title: <div>Id</div>
  },
  {
    dataIndex: "content",
    key: "content",
    render: (text: string, record: any, index: number): any => {
      return {
        children: text
      };
    },
    title: <div>Content</div>
  }
];

interface Props {}

interface State {}

export class TableExample extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <Table
        bordered={false}
        columns={Columns}
        components={{
          body: {
            wrapper: AnimationWrapper
          }
        }}
        dataSource={DataSource}
        locale={{ emptyText: "No Content" }}
        pagination={false}
        size="small"
      />
    );
  }
}