kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-05-31 03:02:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21878 from Havret/React-Table.6.7.4

Browse Source 
[@types/react-table] Update to match react-table@6.7.4
This commit is contained in:
Armando Aguirre
2017-12-01 12:29:04 -08:00
committed by GitHub
parent 1c29af989e af5e416be3
commit 0f58847909
2 changed files with 271 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
types/react-table/index.d.ts vendored
View File

@@ -1,6 +1,6 @@
// Type definitions for react-table 6.6
// Type definitions for react-table 6.7
// Project: https://github.com/react-tools/react-table
// Definitions by: Roy Xue <https://github.com/royxue>, Pavel Sakalo <https://github.com/psakalo>
// Definitions by: Roy Xue <https://github.com/royxue>, Pavel Sakalo <https://github.com/psakalo>, Krzysztof Porębski <https://github.com/Havret>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
import * as React from 'react';
@@ -11,19 +11,23 @@ export type Accessor = string | string[] | object | AccessorFunction;
export type Aggregator = (values: any, rows: any) => any;
export type TableCellRenderer = ((data: any, column: any) => React.ReactNode) | React.ReactNode;
export type FilterRender = (params: { column: Column, filter: any, onFilterChange: ReactTableFunction, key?: string }) => React.ReactElement<any>;
export type PivotRenderer = ((cellInfo: any) => React.ReactNode) | (() => any) | string | React.ReactNode;
export type ComponentPropsGetter0 = (finalState: any, rowInfo: undefined, column: undefined, instance?: any) => object | undefined;
export type ComponentPropsGetterR = (finalState: any, rowInfo?: RowInfo, column?: undefined, instance?: any) => object | undefined;
export type ComponentPropsGetterC = (finalState: any, rowInfo?: undefined, column?: Column, instance?: any) => object | undefined;
export type ComponentPropsGetterRC = (finalState: any, rowInfo?: RowInfo, column?: Column, instance?: any) => object | undefined;
export type FilterFunction = (filter: any, row: any, column: any) => boolean;
export type DefaultFilterFunction = (filter: any, row: any, column: any) => boolean;
export type FilterFunction = (filter: any, rows: any[], column: any) => boolean;
export type SubComponentFunction = (rowInfo: RowInfo) => React.ReactNode;
export type PageChangeFunction = (page: number) => void;
export type PageSizeChangeFunction = (newPageSize: number, newPage: number) => void;
export type SortedChangeFunction = (column: any, additive: boolean) => void;
export type FilteredChangeFunction = (column: any, value: any, pivotColumn: any) => void;
export type ExpandedChangeFunction = (column: any, event: any, isTouch: boolean) => void;
export type ResizedChangeFunction = (newResized: any, event: any) => void;
export type SortFunction = (a: any, b: any, desc: any) => -1 | 0 | 1;
/** NOTE: to many configuration ways (only true values are confusing) */
export interface SortingRule {
@@ -46,13 +50,22 @@ export interface TableProps extends
/** Default: false */
loading: boolean;
/** Default: false */
/** Default: true */
showPagination: boolean;
/** Default: false */
showPaginationTop: boolean;
/** Default: true */
showPaginationBottom: boolean;
/** Default: false */
manual: boolean;
/** Default: false */
/** Default: true */
multiSort: boolean;
/** Default: true */
showPageSizeOptions: boolean;
/** Default: [5, 10, 20, 25, 50, 100] */
@@ -66,11 +79,14 @@ export interface TableProps extends
* Otherwise take value from 'pageSize' if defined
* @TODO: add minRows to react-table defaultProps even if undefined
*/
minRows: number;
minRows: number | undefined;
/** Default: true */
showPageJump: boolean;
/** Default: true */
sortable: boolean;
/** Default: true */
collapseOnSortingChange: boolean;
@@ -93,7 +109,10 @@ export interface TableProps extends
defaultFiltering: any[];
/** Default: ... */
defaultFilterMethod: FilterFunction;
defaultFilterMethod: DefaultFilterFunction;
/** Default: ... */
defaultSortMethod: SortFunction;
/** Default: true */
resizable: boolean;
@@ -104,6 +123,21 @@ export interface TableProps extends
/** Default: [] */
defaultResizing: any[];
/** Default: false */
defaultSortDesc: boolean;
/** Default: [] */
defaultSorted: any[];
/** Default: [] */
defaultFiltered: any[];
/** Default: [] */
defaultResized: any[];
/** Default: {} */
defaultExpanded: {};
/** On change. */
onChange: ReactTableFunction;
@@ -128,18 +162,36 @@ export interface TableProps extends
/** Privot defaults. */
pivotDefaults: Partial<PivotDefaults>;
/** The content rendered inside of a padding row */
PadRowComponent: () => React.ReactNode;
/** Server-side callbacks */
onFetchData: () => void;
}
export interface ControlledStateOverrideProps {
/** Default: undefined */
page: number;
page: number | undefined;
/** Default: undefined */
pageSize: number;
pageSize: number | undefined;
/** Default: undefined */
sorting: number;
/** Default: [] */
sorted: any[];
/** Default: [] */
filtered: any[];
/** Default: [] */
resized: any[];
/** Default: {} */
expanded: {};
/** Sub component */
SubComponent: SubComponentFunction;
}
@@ -160,6 +212,21 @@ export interface PivotingProps {
/** Default: _subRows */
subRowsKey: string;
/** Default: _aggregated */
aggregatedKey: string;
/** Default: _nestingLevel */
nestingLevelKey: string;
/** Default: _original */
originalKey: string;
/** Default: _index */
indexKey: string;
/** Default: _groupedByPivot */
groupedByPivotKey: string;
/**
* Default: {} - Pivoting State Overrides (see Fully Controlled Component section)
* @example { 4: true }
@@ -176,11 +243,32 @@ export interface ExpandedRows {
}
export interface ControlledStateCallbackProps {
/** Called when the page index is changed by the user */
onPageChange: PageChangeFunction;
/**
* Called when the pageSize is changed by the user. The resolve page is also sent
* to maintain approximate position in the data
*/
onPageSizeChange: PageSizeChangeFunction;
/**
* Called when a sortable column header is clicked with the column itself and if
* the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
*/
onSortedChange: SortedChangeFunction;
/**
* Called when a user enters a value into a filter input field or the value passed
* to the onFiltersChange handler by the Filter option.
*/
onFilteredChange: FilteredChangeFunction;
/** Called when an expander is clicked. Use this to manage `expanded` */
onExpandedChange: ExpandedChangeFunction;
/** Called when a user clicks on a resizing component (the right edge of a column header) */
onResizedChange: ResizedChangeFunction;
}
export interface ComponentDecoratorProps {
@@ -269,14 +357,38 @@ export interface GlobalColumn extends
export namespace Column {
/** Basic column props */
interface Basics {
/** Default: true */
sortable: boolean;
/** Default: undefined, use table default */
sortable: boolean | undefined;
/** Default: true */
show: boolean;
/** Default: 100 */
minWidth: number;
/** Default: undefined, use table default */
resizable: boolean | undefined;
/** Default: undefined, use table default */
filterable: boolean | undefined;
/** Default: ... */
sortMethod: SortFunction | undefined;
/** Default: false */
defaultSortDesc: boolean | undefined;
/** Used to render aggregated cells. Defaults to a comma separated list of values. */
Aggregated: TableCellRenderer;
/** Used to render a pivoted cell */
Pivot: PivotRenderer;
/** Used to render the value inside of a Pivot cell */
PivotValue: TableCellRenderer;
/** Used to render the expander in both Pivot and Expander cells */
Expander: TableCellRenderer;
}
/** Configuration of a columns cell section */
@@ -288,7 +400,7 @@ export namespace Column {
* @example 'Cell Value'
* @example ({data, column}) => <div>Cell Value</div>,
*/
render: TableCellRenderer;
Cell: TableCellRenderer;
/**
* Set the classname of the `td` element of the column
@@ -317,7 +429,7 @@ export namespace Column {
* @example 'Header Name'
* @example ({data, column}) => <div>Header Name</div>,
*/
header: TableCellRenderer;
Header: TableCellRenderer;
/**
* Set the classname of the `th` element of the column
@@ -347,7 +459,7 @@ export namespace Column {
* @example 'Footer Name'
* @example ({data, column}) => <div>Footer Name</div>,
*/
footer: TableCellRenderer;
Footer: TableCellRenderer;
/**
* Default: string
@@ -370,14 +482,23 @@ export namespace Column {
/** Filtering related column props */
interface FilterProps {
/** Default: undefined */
filterMethod: ReactTableFunction;
/** Default: false */
filterAll: boolean;
/**
* A function returning a boolean that specifies the filtering logic for the column
* 'filter' == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field],
* pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
* 'row' || 'rows' == the row (or rows, if filterAll is set to true) of data supplied to the table
* 'column' == the column that the filter is on
*/
filterMethod: FilterFunction | DefaultFilterFunction;
/** Default: false */
hideFilter: boolean;
/** Default: ... */
filterRender: FilterRender;
Filter: FilterRender;
}
}
@@ -385,14 +506,14 @@ export interface ExpanderDefaults {
/** Default: false */
sortable: boolean;
/** Default: false */
resizable: boolean;
/** Default: false */
filterable: boolean;
/** Default: 35 */
width: number;
/** Default: true */
hideFilter: boolean;
/** Will be overriden in methods.js to display ExpanderComponent */
render: TableCellRenderer;
}
export interface PivotDefaults {
@@ -451,6 +572,13 @@ export interface Column extends
/** Header Groups only */
columns?: any[];
/**
* Turns this column into a special column for specifying pivot position in your column definitions.
* The `pivotDefaults` options will be applied on top of this column's options.
* It will also let you specify rendering of the header (and header group if this special column is placed in the `columns` option of another column)
*/
pivot?: boolean;
}
export interface ColumnRenderProps {
@@ -506,4 +634,4 @@ export interface FinalState extends TableProps {
rowMinWidth: number;
}
export default class ReactTable extends React.Component<Partial<TableProps>> {}
export default class ReactTable extends React.Component<Partial<TableProps>> { }

138
types/react-table/react-table-tests.tsx
View File

@@ -2,52 +2,152 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
// Import React Table
import ReactTable from "react-table";
import ReactTable, { Column } from "react-table";
import "react-table/react-table.css";
const columns = [
const columns: Column[] = [
{
Header: "Name",
columns: [
{Header: "First Name", accessor: "firstName"},
{Header: "Last Name", id: "lastName"}
{ Header: "First Name", accessor: "firstName" },
{ Header: "Last Name", id: "lastName" }
]
},
{
Header: "Info",
columns: [
{Header: "Age", accessor: "age"},
{Header: "Status", accessor: "status"}
{ Header: "Age", accessor: "age" },
{ Header: "Status", accessor: "status" }
]
},
{
Header: 'Stats',
columns: [
{Header: "Visits", accessor: "visits"}
{ Header: "Visits", accessor: "visits" }
]
}
];
const Component = (props: {}) => {
const data = [
{firstName: "plastic", lastName: "leather", age: 1, visits: 87, progress: 53},
{firstName: "eggs", lastName: "quartz", age: 13, visits: 78, progress: 82},
{firstName: "wash", lastName: "wrench", age: 29, visits: 75, progress: 49},
{firstName: "introduction", lastName: "impression", age: 2, visits: 35, progress: 51},
{firstName: "steel", lastName: "difference", age: 9, visits: 64, progress: 94},
{firstName: "snakes", lastName: "corn", age: 17, visits: 55, progress: 47},
{firstName: "ocean", lastName: "definition", age: 26, visits: 17, progress: 22},
{firstName: "drawing", lastName: "fifth", age: 15, visits: 84, progress: 12},
{firstName: "silver", lastName: "riddle", age: 15, visits: 59, progress: 24},
{firstName: "surprise", lastName: "zinc", age: 23, visits: 7, progress: 48},
{firstName: "riddle", lastName: "information", age: 2, visits: 63, progress: 3}
{ firstName: "plastic", lastName: "leather", age: 1, visits: 87, progress: 53 },
{ firstName: "eggs", lastName: "quartz", age: 13, visits: 78, progress: 82 },
{ firstName: "wash", lastName: "wrench", age: 29, visits: 75, progress: 49 },
{ firstName: "introduction", lastName: "impression", age: 2, visits: 35, progress: 51 },
{ firstName: "steel", lastName: "difference", age: 9, visits: 64, progress: 94 },
{ firstName: "snakes", lastName: "corn", age: 17, visits: 55, progress: 47 },
{ firstName: "ocean", lastName: "definition", age: 26, visits: 17, progress: 22 },
{ firstName: "drawing", lastName: "fifth", age: 15, visits: 84, progress: 12 },
{ firstName: "silver", lastName: "riddle", age: 15, visits: 59, progress: 24 },
{ firstName: "surprise", lastName: "zinc", age: 23, visits: 7, progress: 48 },
{ firstName: "riddle", lastName: "information", age: 2, visits: 63, progress: 3 }
];
return (
<div>
<ReactTable
data={data}
loading={false}
showPagination={true}
showPaginationTop={true}
showPaginationBottom={true}
showPageSizeOptions={true}
pageSizeOptions={[5, 10, 20, 25, 50, 100]}
defaultPageSize={20}
minRows={undefined}
showPageJump={true}
collapseOnSortingChange={true}
collapseOnPageChange={true}
collapseOnDataChange={true}
freezeWhenExpanded={false}
sortable={true}
multiSort={true}
resizable={true}
filterable={false}
defaultSortDesc={false}
defaultSorted={[]}
defaultFiltered={[]}
defaultResized={[]}
defaultExpanded={{}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true;
}}
columns={columns}
defaultPageSize={10}
defaultSortMethod={(a, b, desc) => {
// force null and undefined to the bottom
a = (a === null || a === undefined) ? -Infinity : a;
b = (b === null || b === undefined) ? -Infinity : b;
// force any string values to lowercase
a = a === 'string' ? a.toLowerCase() : a;
b = b === 'string' ? b.toLowerCase() : b;
// Return either 1 or -1 to indicate a sort priority
if (a > b) {
return 1;
}
if (a < b) {
return -1;
}
// returning 0, undefined or any falsey value will use subsequent sorts or the index as a tiebreaker
return 0;
}}
PadRowComponent={() => <span>&nbsp;</span>}
page={undefined}
pageSize={undefined}
sorted={[]}
filtered={[]}
resized={[]}
expanded={{}}
pivotValKey='_pivotVal'
pivotIDKey='_pivotID'
subRowsKey='_subRows'
aggregatedKey='_aggregated'
nestingLevelKey='_nestingLevel'
originalKey='_original'
indexKey='_index'
groupedByPivotKey='_groupedByPivot'
className=''
onFetchData={() => null}
style={{}}
column={{
Cell: undefined,
Header: undefined,
Footer: undefined,
Aggregated: undefined,
Pivot: undefined,
PivotValue: undefined,
Expander: undefined,
sortable: undefined,
resizable: undefined,
filterable: undefined,
show: true,
minWidth: 100,
className: '',
style: {},
getProps: () => { },
headerClassName: '',
headerStyle: {},
getHeaderProps: () => { },
footerClassName: '',
footerStyle: {},
getFooterProps: () => { },
filterAll: false,
filterMethod: undefined,
sortMethod: undefined,
defaultSortDesc: undefined,
}}
expanderDefaults={{
sortable: false,
resizable: false,
filterable: false,
}}
pivotDefaults={{}}
previousText='Previous'
nextText='Next'
loadingText='Loading...'
noDataText='No rows found'
pageText='Page'
ofText='of'
rowsText='rows'
/>
<br />
</div>