diff --git a/types/reactable/index.d.ts b/types/reactable/index.d.ts new file mode 100644 index 0000000000..4509d421c1 --- /dev/null +++ b/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 +// 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 { + 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 { + data?: T; + className?: string; +} + +export interface TdProperties { + column: string; + value?: any; + data?: any; +} + +export class Table extends React.Component, {}> { +} + +export class Thead extends React.Component<{}, {}> { +} + +export class Th extends React.Component { +} + +export class Tr extends React.Component, {}> { +} + +export class Td extends React.Component { +} + +export class Tfoot extends React.Component<{}, {}> { +} diff --git a/types/reactable/reactable-tests.tsx b/types/reactable/reactable-tests.tsx new file mode 100644 index 0000000000..91d80c27ef --- /dev/null +++ b/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; +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; +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 ; + } +} + +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( + + {colName} + + ); + } + let rows: JSX.Element[] = []; + for (let d of data) { + let tds: JSX.Element[] = []; + displayedColumns.forEach(col => tds.push( + +

d[col]

+
+ )); + rows.push( + + {tds} + + ); + } + return ( + + + {columns} + + {rows} + + + footer cell1 + footer cell2 + + + + ); + } +} diff --git a/types/reactable/tsconfig.json b/types/reactable/tsconfig.json new file mode 100644 index 0000000000..c3300f0e32 --- /dev/null +++ b/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" + ] +} diff --git a/types/reactable/tslint.json b/types/reactable/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/reactable/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }