Add typings for Reactable 0.14. (#18270)

* Add typings for Reactable 0.14. Not complete but the stuff provided by the typings have been tested/used quite extensively by myself during the development of ReactPlayer!

* Add two tests (very simple one and a quite sophisticated one which contains all the components i created typings for...)

types/reactable/index.d.ts

@@ -0,0 +1,60 @@
+// Type definitions for reactable 0.14
+// Project: https://github.com/glittershark/reactable
+// Definitions by: Christoph Spielmann <https://github.com/spielc>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import * as React from 'react';
+
+export interface KeyLabelObject {
+    key: string;
+    label: string;
+}
+
+export type ColumnsType = string | KeyLabelObject;
+
+export type FilterMethodType = (text: string) => void;
+
+export interface TableComponentProperties<T> {
+    data?: T[];
+    className?: string;
+    columns?: ColumnsType[];
+    id?: string;
+    sortable?: string[];
+    filterable?: string[];
+    filterBy?: string;
+    onFilter?: FilterMethodType;
+}
+
+export interface ThProperties {
+    column: string;
+    className?: string;
+}
+
+export interface TrProperties<T> {
+    data?: T;
+    className?: string;
+}
+
+export interface TdProperties {
+    column: string;
+    value?: any;
+    data?: any;
+}
+
+export class Table<T> extends React.Component<TableComponentProperties<T>, {}> {
+}
+
+export class Thead extends React.Component<{}, {}> {
+}
+
+export class Th extends React.Component<ThProperties, {}> {
+}
+
+export class Tr<T> extends React.Component<TrProperties<T>, {}> {
+}
+
+export class Td extends React.Component<TdProperties, {}> {
+}
+
+export class Tfoot extends React.Component<{}, {}> {
+}

types/reactable/reactable-tests.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as Reactable from "reactable";
+
+interface Person {
+    name: string;
+    age: number;
+}
+
+type PersonTable = new () => Reactable.Table<Person>;
+const PersonTable = Reactable.Table as PersonTable;
+
+type PersonTableHeader = new () => Reactable.Thead;
+const PersonTableHeader = Reactable.Thead as PersonTableHeader;
+
+type PersonTableTh = new () => Reactable.Th;
+const PersonTableTh = Reactable.Th as PersonTableTh;
+
+type PersonRow = new () => Reactable.Tr<Person>;
+const PersonRow = Reactable.Tr as PersonRow;
+
+type PersonTableTd = new () => Reactable.Td;
+const PersonTableTd = Reactable.Td as PersonTableTd;
+
+type PersonTableTfoot = new () => Reactable.Tfoot;
+const PersonTableTfoot = Reactable.Tfoot as PersonTableTfoot;
+
+let data = [
+    {
+        name: "Christoph Spielmann",
+        age: 36
+    }
+];
+
+export class TestComponent extends React.Component<{}, {}> {
+    render(): JSX.Element {
+        return <PersonTable data={data} />;
+    }
+}
+
+export class FullblownReactableTestComponent extends React.Component<{}, {}> {
+    render(): JSX.Element {
+        let displayedColumns = ["name"];
+        // custom table Th-elements
+        let columns: JSX.Element[] = [];
+        for (let colName of displayedColumns) {
+            columns.push(
+                <PersonTableTh column={colName} key={colName}>
+                    <strong className="name-header">{colName}</strong>
+                </PersonTableTh>
+            );
+        }
+        let rows: JSX.Element[] = [];
+        for (let d of data) {
+            let tds: JSX.Element[] = [];
+            displayedColumns.forEach(col => tds.push(
+                <PersonTableTd column={col}>
+                    <p>d[col]</p>
+                </PersonTableTd>
+            ));
+            rows.push(
+                <PersonRow>
+                    {tds}
+                </PersonRow>
+            );
+        }
+        return (
+            <PersonTable>
+                <PersonTableHeader>
+                    {columns}
+                </PersonTableHeader>
+                {rows}
+                <PersonTableTfoot>
+                    <tr className="reactable-footer">
+                        <td>footer cell1</td>
+                        <td>footer cell2</td>
+                    </tr>
+                </PersonTableTfoot>
+            </PersonTable>
+        );
+    }
+}

types/reactable/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+	          "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reactable-tests.tsx"
+    ]
+}

types/reactable/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }