import ReactDOM from "react-dom";
import React from "react";
import Table from "tablex";



class Demo extends React.Component {
	generateData(columns, count = 10000, prefix = 'Row') {
		return new Array(count).fill(0).map((row, rowIndex) => {
			return columns.reduce(
				(rowData, column, columnIndex) => {
					if (column.dataIndex !== 'id') {
						rowData[column.dataIndex] = Math.floor(Math.random() * 100 + 1)
					} else {
						rowData[column.dataIndex] =
							prefix + ' ' + rowIndex + ' - Col ' + columnIndex
					}
					return rowData
				},
				{
					id: prefix + rowIndex,
					parentId: null,
				},
			)
		})
	}
	generateColumns = (count = 20, prefix = 'column-', props) =>
    new Array(count).fill(0).map((column, columnIndex) => ({
        ...props,
        key: `${prefix}${columnIndex}`,
        dataKey: `${prefix}${columnIndex}`,
        dataIndex: `${prefix}${columnIndex}`,
        title: `Column ${columnIndex}`,
        width: 100,
		flexGrow: 1,
		fixed: columnIndex === 0 || columnIndex === 1 ? "left" : ""

    }));

	noop = () => { };
	delay = ms => new Promise(resolve => setTimeout(resolve, ms));
	action = message => args => console.log(message, args);


	constructor(props) {
		super(props)
		const columns = this.generateColumns();

		let data = this.generateData(columns, 1000)

		this.state = {
			data: data,
			columns: columns,
		}
	}
	render() {
		let { columns, data } = this.state;
		return <Table rowKey="id" columns={columns} data={data} orderNumber={false}/>
	}
}


ReactDOM.render(
	<React.Fragment>
		<div style={{
			width: "1000px",
			height: "70vh",
			margin: "100px auto"
		}}>
			<Demo />
		</div>
	</React.Fragment>
, document.getElementById("root"));