import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';
const data = [
    {
        key: 1,
        name: 'a',
        age: 32,
        address: 'aa',
        children: [
            {
                key: 11,
                name: 'b',
                age: 33,
                address: 'bb',
            },
            {
                key: 12,
                name: 'c',
                age: 33,
                address: 'cc',
                children: [
                    {
                        key: 121,
                        name: 'd',
                        age: 33,
                        address: 'dd',
                    },
                ],
            },
            {
                key: 13,
                name: 'e',
                age: 33,
                address: 'ee',
                children: [
                    {
                        key: 131,
                        name: 'f',
                        age: 33,
                        address: 'ff',
                        children: [
                            {
                                key: 1311,
                                name: 'g',
                                age: 33,
                                address: 'gg',
                            },
                            {
                                key: 1312,
                                name: 'h',
                                age: 33,
                                address: 'hh',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'i',
        age: 32,
        address: 'ii',
        children: [],
    },
];
const tableMixTree = (React.createElement(Table, { dataSource: data, primaryKey: "key", isTree: true, rowSelection: { onChange: () => { } } },
    React.createElement(Table.Column, { title: "Key", dataIndex: "key" }),
    React.createElement(Table.Column, { title: "Name", dataIndex: "name" }),
    React.createElement(Table.Column, { title: "Age", dataIndex: "age" }),
    React.createElement(Table.Column, { title: "Address", dataIndex: "address" })));
const tableMixExpanded = (React.createElement(Table, { dataSource: data, primaryKey: "key", expandedRowRender: record => record.address, rowSelection: { onChange: () => { } } },
    React.createElement(Table.Column, { title: "Key", dataIndex: "key" }),
    React.createElement(Table.Column, { title: "Name", dataIndex: "name" }),
    React.createElement(Table.Column, { title: "Age", dataIndex: "age" }),
    React.createElement(Table.Column, { title: "Address", dataIndex: "address" })));
const tableMixSelectionTreeLock = (React.createElement("div", { style: { width: '500px' } },
    React.createElement(Table, { dataSource: data, primaryKey: "key", rowSelection: { onChange: () => { } }, isTree: true },
        React.createElement(Table.Column, { title: "Key", dataIndex: "key", width: 100 }),
        React.createElement(Table.Column, { title: "Name", dataIndex: "name", lock: true, width: 100 }),
        React.createElement(Table.Column, { title: "Age", dataIndex: "age", width: 200, lock: "right" }),
        React.createElement(Table.Column, { title: "Address", dataIndex: "address", width: 200 }))));
const tableMixLock = (React.createElement("div", { style: { width: '500px' } },
    React.createElement(Table, { dataSource: data, primaryKey: "key", rowSelection: { onChange: () => { } } },
        React.createElement(Table.Column, { title: "Key", dataIndex: "key", width: 100 }),
        React.createElement(Table.Column, { title: "Name", dataIndex: "name", lock: true, width: 100 }),
        React.createElement(Table.Column, { title: "Age", dataIndex: "age", width: 200, lock: "right" }),
        React.createElement(Table.Column, { title: "Address", dataIndex: "address", width: 200 }))));
const tableMixExpandedLock = (React.createElement("div", { style: { width: '500px' } },
    React.createElement(Table, { dataSource: data, primaryKey: "key", rowSelection: { onChange: () => { } }, expandedRowRender: record => record.address, expandedRowIndent: [3, 1] },
        React.createElement(Table.Column, { title: "Key", dataIndex: "key", width: 100 }),
        React.createElement(Table.Column, { title: "Name", dataIndex: "name", lock: true, width: 100 }),
        React.createElement(Table.Column, { title: "Age", dataIndex: "age", width: 200, lock: "right" }),
        React.createElement(Table.Column, { title: "Address", dataIndex: "address", width: 200 }))));
const tableMixTreeLock = (React.createElement("div", { style: { width: '500px' } },
    React.createElement(Table, { dataSource: data, primaryKey: "key", isTree: true },
        React.createElement(Table.Column, { title: "Key", dataIndex: "key", width: 100 }),
        React.createElement(Table.Column, { title: "Name", dataIndex: "name", lock: true, width: 100 }),
        React.createElement(Table.Column, { title: "Age", dataIndex: "age", width: 200, lock: "right" }),
        React.createElement(Table.Column, { title: "Address", dataIndex: "address", width: 200 }))));
ReactDOM.render(React.createElement("div", { className: "mix-demo" },
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "tree & select"),
        tableMixTree),
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "extra & select"),
        tableMixExpanded),
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "tree & lock column & select"),
        tableMixSelectionTreeLock),
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "extra & lock column & select"),
        tableMixExpandedLock),
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "lock column & select"),
        tableMixLock),
    React.createElement("div", { className: "row" },
        React.createElement("h4", null, "tree & lock column"),
        tableMixTreeLock)), document.getElementById('table-demo-22'));
