DefinitelyTyped/types/fixed-data-table-2/fixed-data-table-2-tests.tsx

/**
 * The tests are based on tests from types/fixed-data-table
 */

import * as React from "react";
import { Table, Cell, Column, CellProps } from "fixed-data-table-2";

// create your Table
class MyTable1 extends React.Component {
    render() {
        return (
            <Table
                rowsCount={100}
                rowHeight={50}
                headerHeight={50}
                width={1000}
                height={500}>
            // add columns
            </Table>
        );
    }
}

// create your Columns
class MyTable2 extends React.Component {
    render() {
        return (
            <Table
                rowsCount={100}
                rowHeight={50}
                headerHeight={50}
                width={1000}
                height={500}>
                <Column
                    cell={<Cell>Basic content</Cell>}
                    width={200}
                />
            </Table>
        );
    }
}

// provide Custom Data
interface MyTable3State {
    myTableData: Array<{ name: string }>;
}

class MyTable3 extends React.Component<{}, MyTable3State> {
    state = {
        myTableData: [
            { name: "Rylan" },
            { name: "Amelia" },
            { name: "Estevan" },
            { name: "Florence" },
            { name: "Tressa" },
        ]
    };

    render() {
        return (
            <Table
                rowsCount={this.state.myTableData.length}
                rowHeight={50}
                headerHeight={50}
                width={1000}
                height={500}>
                <Column
                    header={<Cell>Name</Cell>}
                    cell={(props) => (
                        <Cell {...props}>
                            {this.state.myTableData[props.rowIndex].name}
                        </Cell>
                    )}
                    width={200}
                />
            </Table>
        );
    }
}

// Create Reusable Cells
interface RowData {
    [field: string]: string;
}

interface MyCellProps extends CellProps {
    field: string;
    myData: RowData[];
}

class MyTextCell extends React.Component<MyCellProps> {
    render() {
        const { rowIndex, field, myData } = this.props;

        return (
            <Cell height={this.props.height}
                width={this.props.height}
                columnKey={this.props.columnKey}
                rowIndex={this.props.rowIndex}
                className="text-cell">
                {myData[rowIndex!][field]}
            </Cell>
        );
    }
}

class MyLinkCell extends React.Component<MyCellProps> {
    render() {
        const { rowIndex, field, myData } = this.props;
        const link: string = myData[rowIndex!][field];

        return (
            <Cell width={this.props.width}
                height={this.props.height}
                rowIndex={this.props.rowIndex}
                columnKey={this.props.columnKey}
                className="link-cell">
                <a href={link}>{link}</a>
            </Cell>
        );
    }
}

interface MyTable4State {
    tableData: RowData[];
}

class MyTable4 extends React.Component<{}, MyTable4State> {
    state = {
        tableData: [
            { name: "Rylan", email: "Angelita_Weimann42@gmail.com" },
            { name: "Amelia", email: "Dexter.Trantow57@hotmail.com" },
            { name: "Estevan", email: "Aimee7@hotmail.com" },
            { name: "Florence", email: "Jarrod.Bernier13@yahoo.com" },
            { name: "Tressa", email: "Yadira1@hotmail.com" }
        ]
    };

    render() {
        return (
            <Table
                rowsCount={this.state.tableData.length}
                rowHeight={50}
                headerHeight={50}
                width={1000}
                height={500}>
                {
                    ["name", "email"].map(field =>
                        <Column
                            key={field}
                            header={<Cell>{field}</Cell>}
                            cell={
                                <MyTextCell
                                    myData={this.state.tableData}
                                    field={field}
                                />
                            }
                            width={200} />
                    )
                }
            </Table>
        );
    }
}

// Listen for events
class MyTable5 extends React.Component {
    render() {
        return (
            <Table
                rowsCount={100}
                rowHeight={50}
                headerHeight={50}
                width={1000}
                height={500}
                onScrollStart={(x: number, y: number) => { }}
                onScrollEnd={(x: number, y: number) => { }}
                onContentHeightChange={(newHeight: number) => { }}
                onRowClick={(event: React.SyntheticEvent<Table>, rowIndex: number) => { }}
                onRowDoubleClick={(event: React.SyntheticEvent<Table>, rowIndex: number) => { }}
                onRowMouseDown={(event: React.SyntheticEvent<Table>, rowIndex: number) => { }}
                onRowMouseEnter={(event: React.SyntheticEvent<Table>, rowIndex: number) => { }}
                onRowMouseLeave={(event: React.SyntheticEvent<Table>, rowIndex: number) => { }}
                onColumnResizeEndCallback={(newColumnWidth: number, columnKey: string) => { }}>
            // add columns
            </Table>
        );
    }
}