React 漂亮的table模板

table效果：

代码实现：

js代码：

import React from 'react';
import styles from './styles.less';
import {
    Input, Button, Modal, DatePicker, Table, Divider, Popconfirm, message } from 'antd';
import {
    DownOutlined } from '@ant-design/icons';

const {
    TextArea } = Input;
class InformationList extends React.Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            selectedRowKeys: [],
            visible: false,
            newVisible: false,
            columns: [
                {
   
                    title: '标题内容',
                    dataIndex: 'name',
                    ellipsis: true,
                },
                {
   
                    title: '类型',
                    dataIndex: 'type',
                    filterIcon: filtered  => <DownOutlined  style={
   {
    color: filtered ? '#1890ff' : undefined }} />,
                    filters: [
                        {
    text: '草稿', value: '草稿' },
                        {
    text: '已发送', value: '已发送' },
                    ],
                    
                    ellipsis: true,
                    onFilter: (value, record) => record.type.indexOf(value) === 0,
                },
                {
   
                    title: '创建时间',
                    dataIndex: 'createTime',
                    ellipsis: true,
                },
                {
   
                    title: '操作',
                    dataIndex: 'operation',
                    render: (text, record) =>
                        this.state.data.length >= 1 ? (
                            <div>
                                <Button style={
   {
    marginRight: 10 }} onClick={
   this.showInfo.bind(this, record)}>查看</Button>
                                <Popconfirm title