diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index 30479e6149..8e347c04c4 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -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 , Pavel Sakalo +// Definitions by: Roy Xue , Pavel Sakalo , Krzysztof Porębski // 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; +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; + + /** 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}) =>
Cell Value
, */ - 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}) =>
Header Name
, */ - 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}) =>
Footer Name
, */ - 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> {} +export default class ReactTable extends React.Component> { } diff --git a/types/react-table/react-table-tests.tsx b/types/react-table/react-table-tests.tsx index cc69a39114..a5609394ce 100644 --- a/types/react-table/react-table-tests.tsx +++ b/types/react-table/react-table-tests.tsx @@ -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 (
{ + 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={() =>  } + 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' />