first commit

src/components/tables/AdvancedTables.tsx

@@ -0,0 +1,45 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import FixedTable from './FixedTable';
+import ExpandedTable from './ExpandedTable';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+
+class AdvancedTables extends React.Component {
+    render() {
+        return (
+            <div className="gutter-example">
+                <BreadcrumbCustom breads={['表格', '高级表格']} />
+                <Row gutter={16}>
+                    <Col className="gutter-row" md={24}>
+                        <div className="gutter-box">
+                            <Card title="固定列" bordered={false}>
+                                <FixedTable />
+                            </Card>
+                        </div>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col className="gutter-row" md={12}>
+                        <div className="gutter-box">
+                            <Card title="可展开" bordered={false}>
+                                <ExpandedTable />
+                            </Card>
+                        </div>
+                    </Col>
+                    {/* <Col className="gutter-row" md={12}>
+                        <div className="gutter-box">
+                            <Card title="可编辑" bordered={false}>
+                                <EditableTable />
+                            </Card>
+                        </div>
+                    </Col> */}
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default AdvancedTables;

src/components/tables/AsynchronousTable.tsx

@@ -0,0 +1,102 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table, Button, Row, Col, Card } from 'antd';
+import { getBbcNews } from '../../service';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+
+const columns = [
+    {
+        title: '新闻标题',
+        dataIndex: 'title',
+        width: 100,
+        render: (text: any, record: any) => (
+            <a href={record.url} target="_blank" rel="noopener noreferrer">
+                {text}
+            </a>
+        ),
+    },
+    {
+        title: '作者',
+        dataIndex: 'author',
+        width: 80,
+    },
+    {
+        title: '发布时间',
+        dataIndex: 'publishedAt',
+        width: 80,
+    },
+    {
+        title: '描述',
+        dataIndex: 'description',
+        width: 200,
+    },
+];
+
+class AsynchronousTable extends React.Component {
+    state = {
+        selectedRowKeys: [], // Check here to configure the default column
+        loading: false,
+        data: [],
+    };
+    componentDidMount() {
+        this.start();
+    }
+    start = () => {
+        this.setState({ loading: true });
+        getBbcNews().then(({ articles }: { articles: any }) => {
+            this.setState({
+                data: articles,
+                loading: false,
+            });
+        });
+    };
+    onSelectChange = (selectedRowKeys: string[]) => {
+        console.log('selectedRowKeys changed: ', selectedRowKeys);
+        this.setState({ selectedRowKeys });
+    };
+    render() {
+        const { loading, selectedRowKeys } = this.state;
+        const rowSelection = {
+            selectedRowKeys,
+            onChange: this.onSelectChange,
+        };
+        const hasSelected = selectedRowKeys.length > 0;
+        return (
+            <div className="gutter-example">
+                <BreadcrumbCustom breads={['表格', '异步表格']} />
+                <Row gutter={16}>
+                    <Col className="gutter-row" md={24}>
+                        <div className="gutter-box">
+                            <Card title="异步表格--BBC新闻今日热门" bordered={false}>
+                                <div style={{ marginBottom: 16 }}>
+                                    <Button
+                                        type="primary"
+                                        onClick={this.start}
+                                        disabled={loading}
+                                        loading={loading}
+                                    >
+                                        Reload
+                                    </Button>
+                                    <span style={{ marginLeft: 8 }}>
+                                        {hasSelected
+                                            ? `Selected ${selectedRowKeys.length} items`
+                                            : ''}
+                                    </span>
+                                </div>
+                                <Table
+                                    rowSelection={rowSelection as any}
+                                    columns={columns}
+                                    dataSource={this.state.data}
+                                />
+                            </Card>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default AsynchronousTable;

src/components/tables/BasicTable.tsx

@@ -0,0 +1,65 @@
+/**
+ * Created by hao.cheng on 2017/4/15.
+ */
+import React from 'react';
+import { Table, Button } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        render: (text: any) => <span>{text}</span>,
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+    },
+    {
+        title: 'Address',
+        dataIndex: 'address',
+        key: 'address',
+    },
+    {
+        title: 'Action',
+        key: 'action',
+        render: (text: any, record: any) => (
+            <span>
+                <Button>Action 一 {record.name}</Button>
+                <span className="ant-divider" />
+                <Button>Delete</Button>
+                <span className="ant-divider" />
+                <Button className="ant-dropdown-link">
+                    More actions <DownOutlined />
+                </Button>
+            </span>
+        ),
+    },
+];
+
+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',
+    },
+];
+
+const BasicTable = () => <Table columns={columns} dataSource={data} />;
+
+export default BasicTable;

src/components/tables/BasicTables.tsx

@@ -0,0 +1,52 @@
+/**
+ * Created by hao.cheng on 2017/4/15.
+ */
+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import BasicTable from './BasicTable';
+import SelectTable from './SelectTable';
+import SortTable from './SortTable';
+import SearchTable from './SearchTable';
+import BreadcrumbCustom from '../widget/BreadcrumbCustom';
+
+const BasicTables = () => (
+    <div className="gutter-example">
+        <BreadcrumbCustom breads={['表格', '基础表格']} />
+        <Row gutter={16}>
+            <Col className="gutter-row" md={24}>
+                <div className="gutter-box">
+                    <Card title="基础表格" bordered={false}>
+                        <BasicTable />
+                    </Card>
+                </div>
+            </Col>
+        </Row>
+        <Row gutter={16}>
+            <Col className="gutter-row" md={24}>
+                <div className="gutter-box">
+                    <Card title="基础表格" bordered={false}>
+                        <SelectTable />
+                    </Card>
+                </div>
+            </Col>
+        </Row>
+        <Row gutter={16}>
+            <Col className="gutter-row" md={12}>
+                <div className="gutter-box">
+                    <Card title="可控的筛选和排序" bordered={false}>
+                        <SortTable />
+                    </Card>
+                </div>
+            </Col>
+            <Col className="gutter-row" md={12}>
+                <div className="gutter-box">
+                    <Card title="自定义筛选" bordered={false}>
+                        <SearchTable />
+                    </Card>
+                </div>
+            </Col>
+        </Row>
+    </div>
+);
+
+export default BasicTables;

src/components/tables/ExpandedTable.tsx

@@ -0,0 +1,28 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table, Button } from 'antd';
+
+const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Age', dataIndex: 'age', key: 'age' },
+    { title: 'Address', dataIndex: 'address', key: 'address' },
+    { title: 'Action', dataIndex: '', key: 'x', render: () => <Button>Delete</Button> },
+];
+
+const data = [
+    { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
+    { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
+    { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
+];
+
+const ExpandedTable = () => (
+    <Table
+        columns={columns}
+        expandedRowRender={record => <p>{record.description}</p>}
+        dataSource={data}
+    />
+);
+
+export default ExpandedTable;

src/components/tables/FixedTable.tsx

@@ -0,0 +1,45 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table } from 'antd';
+import { ColumnProps } from 'antd/lib/table';
+
+const columns: ColumnProps<any>[] = [
+    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
+    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+    { title: 'Column 1', dataIndex: 'address', key: '1' },
+    { title: 'Column 2', dataIndex: 'address', key: '2' },
+    { title: 'Column 3', dataIndex: 'address', key: '3' },
+    { title: 'Column 4', dataIndex: 'address', key: '4' },
+    { title: 'Column 5', dataIndex: 'address', key: '5' },
+    { title: 'Column 6', dataIndex: 'address', key: '6' },
+    { title: 'Column 7', dataIndex: 'address', key: '7' },
+    { title: 'Column 8', dataIndex: 'address', key: '8' },
+    {
+        title: 'Action',
+        key: 'operation',
+        fixed: 'right',
+        width: 100,
+        render: () => <span>action</span>,
+    },
+];
+
+const data = [
+    {
+        key: '1',
+        name: 'John Brown',
+        age: 32,
+        address: 'New York Park',
+    },
+    {
+        key: '2',
+        name: 'Jim Green',
+        age: 40,
+        address: 'London Park',
+    },
+];
+
+const FixedTable = () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
+
+export default FixedTable;

src/components/tables/SearchTable.tsx

@@ -0,0 +1,150 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table, Input, Button } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
+
+const data = [
+    {
+        key: '1',
+        name: 'John Brown',
+        age: 32,
+        address: 'New York No. 1 Lake Park',
+    },
+    {
+        key: '2',
+        name: 'Joe Black',
+        age: 42,
+        address: 'London No. 1 Lake Park',
+    },
+    {
+        key: '3',
+        name: 'Jim Green',
+        age: 32,
+        address: 'Sidney No. 1 Lake Park',
+    },
+    {
+        key: '4',
+        name: 'Jim Red',
+        age: 32,
+        address: 'London No. 2 Lake Park',
+    },
+];
+
+class SearchTable extends React.Component {
+    state = {
+        filterDropdownVisible: false,
+        data,
+        searchText: '',
+        filtered: false,
+    };
+    searchInput: any;
+    onInputChange = (e: any) => {
+        this.setState({ searchText: e.target.value });
+    };
+    onSearch = () => {
+        const { searchText } = this.state;
+        const reg = new RegExp(searchText, 'gi');
+        this.setState({
+            filterDropdownVisible: false,
+            filtered: !!searchText,
+            data: data
+                .map((record) => {
+                    const match = record.name.match(reg);
+                    if (!match) {
+                        return null;
+                    }
+                    return {
+                        ...record,
+                        name: (
+                            <span>
+                                {record.name
+                                    .split(reg)
+                                    .map((text, i) =>
+                                        i > 0
+                                            ? [<span className="highlight">{match[0]}</span>, text]
+                                            : text
+                                    )}
+                            </span>
+                        ),
+                    };
+                })
+                .filter((record) => !!record),
+        });
+    };
+    render() {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+                filterDropdown: (
+                    <div className="custom-filter-dropdown">
+                        <Input
+                            ref={(ele) => (this.searchInput = ele)}
+                            placeholder="Search name"
+                            value={this.state.searchText}
+                            onChange={this.onInputChange}
+                            onPressEnter={this.onSearch}
+                        />
+                        <Button type="primary" onClick={this.onSearch}>
+                            Search
+                        </Button>
+                    </div>
+                ),
+                filterIcon: (
+                    <SmileOutlined style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />
+                ),
+                filterDropdownVisible: this.state.filterDropdownVisible,
+                onFilterDropdownVisibleChange: (visible: boolean) =>
+                    this.setState({ filterDropdownVisible: visible }, () =>
+                        this.searchInput.focus()
+                    ),
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+                key: 'address',
+                filters: [
+                    {
+                        text: 'London',
+                        value: 'London',
+                    },
+                    {
+                        text: 'New York',
+                        value: 'New York',
+                    },
+                ],
+                onFilter: (value: any, record: any) => record.address.indexOf(value) === 0,
+            },
+        ];
+        return (
+            <div>
+                <Table columns={columns} dataSource={this.state.data} />
+                <style>{`
+                    .custom-filter-dropdown {
+                      padding: 8px;
+                      border-radius: 6px;
+                      background: #fff;
+                      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+                    }
+                    .custom-filter-dropdown input {
+                      width: 130px;
+                      margin-right: 8px;
+                    }
+                    .highlight {
+                      color: #f50;
+                    }
+                `}</style>
+            </div>
+        );
+    }
+}
+
+export default SearchTable;

src/components/tables/SelectTable.tsx

@@ -0,0 +1,82 @@
+/**
+ * Created by hao.cheng on 2017/4/15.
+ */
+import React from 'react';
+import { Table } from 'antd';
+// import { TableRowSelection } from 'antd/lib/table';
+
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+    },
+    {
+        title: 'Address',
+        dataIndex: 'address',
+    },
+];
+
+const data: any[] = [];
+for (let i = 0; i < 46; i++) {
+    data.push({
+        key: i,
+        name: `Edward King ${i}`,
+        age: 32,
+        address: `London, Park Lane no. ${i}`,
+    });
+}
+
+class SelectTable extends React.Component {
+    state = {
+        selectedRowKeys: [], // Check here to configure the default column
+    };
+    onSelectChange = (selectedRowKeys: string[] | number[]) => {
+        console.log('selectedRowKeys changed: ', selectedRowKeys);
+        this.setState({ selectedRowKeys });
+    };
+    render() {
+        const { selectedRowKeys } = this.state;
+        const rowSelection: any = {
+            selectedRowKeys,
+            onChange: this.onSelectChange,
+            selections: [
+                {
+                    key: 'odd',
+                    text: '选择奇数列',
+                    onSelect: (changableRowKeys: string[]) => {
+                        let newSelectedRowKeys = [];
+                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+                            if (index % 2 !== 0) {
+                                return false;
+                            }
+                            return true;
+                        });
+                        this.setState({ selectedRowKeys: newSelectedRowKeys });
+                    },
+                },
+                {
+                    key: 'even',
+                    text: '选择偶数列',
+                    onSelect: (changableRowKeys: string[]) => {
+                        let newSelectedRowKeys = [];
+                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+                            if (index % 2 !== 0) {
+                                return true;
+                            }
+                            return false;
+                        });
+                        this.setState({ selectedRowKeys: newSelectedRowKeys });
+                    },
+                },
+            ],
+            // onSelection: this.onSelection,
+        };
+        return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
+    }
+}
+
+export default SelectTable;

src/components/tables/SortTable.tsx

@@ -0,0 +1,117 @@
+/**
+ * Created by hao.cheng on 2017/4/15.
+ */
+import React from 'react';
+import { Table, Button } from 'antd';
+
+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',
+    },
+];
+
+type SortTableState = {
+    filteredInfo: any;
+    sortedInfo: any;
+};
+class SortTable extends React.Component<any, SortTableState> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            filteredInfo: {},
+            sortedInfo: {},
+        };
+    }
+    handleChange = (pagination: any, filters: any, sorter: any) => {
+        console.log('Various parameters', pagination, filters, sorter);
+        this.setState({
+            filteredInfo: filters,
+            sortedInfo: sorter,
+        });
+    };
+    clearFilters = () => {
+        this.setState({ filteredInfo: null });
+    };
+    clearAll = () => {
+        this.setState({
+            filteredInfo: null,
+            sortedInfo: null,
+        });
+    };
+    setAgeSort = () => {
+        this.setState({
+            sortedInfo: {
+                order: 'descend',
+                columnKey: 'age',
+            },
+        });
+    };
+    render() {
+        let { sortedInfo, filteredInfo } = this.state;
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+                filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }],
+                filteredValue: filteredInfo.name || null,
+                onFilter: (value: any, record: any) => record.name.includes(value),
+                sorter: (a: any, b: any) => a.name.length - b.name.length,
+                sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+                sorter: (a: any, b: any) => a.age - b.age,
+                sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+                key: 'address',
+                filters: [
+                    { text: 'London', value: 'London' },
+                    { text: 'New York', value: 'New York' },
+                ],
+                filteredValue: filteredInfo.address || null,
+                onFilter: (value: any, record: any) => record.address.includes(value),
+                sorter: (a: any, b: any) => a.address.length - b.address.length,
+                sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
+            },
+        ];
+        return (
+            <div>
+                <div className="table-operations">
+                    <Button onClick={this.setAgeSort}>Sort age</Button>
+                    <Button onClick={this.clearFilters}>Clear filters</Button>
+                    <Button onClick={this.clearAll}>Clear filters and sorters</Button>
+                </div>
+                <Table columns={columns} dataSource={data} onChange={this.handleChange} />
+            </div>
+        );
+    }
+}
+
+export default SortTable;