mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
Changing the name to react-table-v6 (#1584)
Also adds the corresponding changes to the documentation and adds TypeScript definitions.
This commit is contained in:
parent
0fde1ed8d6
commit
3e464faf8c
51
README.md
51
README.md
@ -1,8 +1,8 @@
|
||||
<div style="text-align:center;">
|
||||
<a href="https://github.com/react-tools/react-table" target="\_parent"><img src="https://github.com/react-tools/media/raw/master/logo-react-table.png" alt="React Table Logo" style="width:450px;"/></a>
|
||||
<a href="https://github.com/tannerlinsley/react-table" target="\_parent"><img src="https://github.com/react-tools/media/raw/master/logo-react-table.png" alt="React Table Logo" style="width:450px;"/></a>
|
||||
</div>
|
||||
|
||||
# React Table
|
||||
# React Table v6
|
||||
|
||||
`react-table` is a **lightweight, fast and extendable datagrid** built for React
|
||||
|
||||
@ -28,6 +28,10 @@
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## v6
|
||||
|
||||
This is a v6 of react-table, due to the incredibly massive differences from v7 this branch exists as a way to access its docs and source. I do not intend on offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React. Otherwise, look into using [the most recent version](https://github.com/tannerlinsley/react-table) of react-table!
|
||||
|
||||
## Features
|
||||
|
||||
- Lightweight at 11kb (and just 2kb more for styles)
|
||||
@ -66,6 +70,7 @@
|
||||
|
||||
## Versions
|
||||
|
||||
- [The most recent version](https://github.com/tannerlinsley/react-table)
|
||||
- This documentation is for version 6 of react-table.
|
||||
- [View the Changelog](https://github.com/react-tools/react-table/blob/master/CHANGELOG.md)
|
||||
- Previous versions:
|
||||
@ -169,34 +174,36 @@
|
||||
|
||||
## Installation
|
||||
|
||||
Note that this installation guide uses the `react-table-v6` version of the package; while you could access the earier versions of the package by `react-table` name, in order to provide a better migration workflow from v6 to the most recent version of the 6.x.x exists as `react-table-v6`.
|
||||
|
||||
1. Install React Table as a dependency
|
||||
|
||||
```bash
|
||||
# Yarn
|
||||
$ yarn add react-table
|
||||
$ yarn add react-table-v6
|
||||
|
||||
# NPM
|
||||
$ npm install react-table
|
||||
$ npm install react-table-v6
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
2. Import the `react-table` module
|
||||
2. Import the `react-table-v6` module
|
||||
|
||||
```javascript
|
||||
// ES6
|
||||
import ReactTable from 'react-table'
|
||||
import ReactTable from 'react-table-v6'
|
||||
// ES5
|
||||
var ReactTable = require('react-table').default
|
||||
var ReactTable = require('react-table-v6').default
|
||||
```
|
||||
|
||||
3. Import styles by including `react-table.css`
|
||||
|
||||
```javascript
|
||||
// JS (Webpack)
|
||||
import 'react-table/react-table.css'
|
||||
import 'react-table-v6/react-table.css'
|
||||
// Old-school
|
||||
<link rel="stylesheet" href="node_modules/react-table/react-table.css">
|
||||
<link rel="stylesheet" href="node_modules/react-table-v6/react-table.css">
|
||||
```
|
||||
|
||||
See the example below for further usage.
|
||||
@ -207,12 +214,12 @@ See the example below for further usage.
|
||||
<!-- CSS -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/react-table@latest/react-table.css"
|
||||
href="https://unpkg.com/react-table-v6@latest/react-table.css"
|
||||
/>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="https://unpkg.com/react-table@latest/react-table.js"></script>
|
||||
<script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>
|
||||
<script src="https://unpkg.com/react-table-v6@latest/react-table.js"></script>
|
||||
<script src="https://unpkg.com/react-table-v6@latest/react-table.min.js"></script>
|
||||
|
||||
<script>
|
||||
var ReactTable = window.ReactTable.default
|
||||
@ -222,8 +229,8 @@ See the example below for further usage.
|
||||
## Example
|
||||
|
||||
```javascript
|
||||
import ReactTable from 'react-table'
|
||||
import 'react-table/react-table.css'
|
||||
import ReactTable from 'react-table-v6'
|
||||
import 'react-table-v6/react-table.css'
|
||||
|
||||
render() {
|
||||
const data = [{
|
||||
@ -408,7 +415,7 @@ These are all of the available props (and their default values) for the main `<R
|
||||
}) => component
|
||||
|
||||
// Global Column Defaults
|
||||
// To override only some values, import { ReactTableDefaults } from 'react-table'
|
||||
// To override only some values, import { ReactTableDefaults } from 'react-table-v6'
|
||||
// and construct your overrides (e.g. {...ReactTableDefaults.column, className: 'react-table-cell'})
|
||||
column: {
|
||||
// Renderers
|
||||
@ -445,7 +452,7 @@ These are all of the available props (and their default values) for the main `<R
|
||||
},
|
||||
|
||||
// Global Expander Column Defaults
|
||||
// To override only some values, import { ReactTableDefaults } from 'react-table'
|
||||
// To override only some values, import { ReactTableDefaults } from 'react-table-v6
|
||||
// and construct your overrides (e.g. {...ReactTableDefaults.expanderDefaults, sortable: true})
|
||||
expanderDefaults: {
|
||||
sortable: false,
|
||||
@ -475,7 +482,7 @@ These are all of the available props (and their default values) for the main `<R
|
||||
You can easily override the core defaults like so:
|
||||
|
||||
```javascript
|
||||
import { ReactTableDefaults } from 'react-table'
|
||||
import { ReactTableDefaults } from 'react-table-v6'
|
||||
|
||||
Object.assign(ReactTableDefaults, {
|
||||
defaultPageSize: 10,
|
||||
@ -713,7 +720,7 @@ const columns = [
|
||||
## Styles
|
||||
|
||||
- React-table ships with a minimal and clean stylesheet to get you on your feet quickly.
|
||||
- The stylesheet is located at `react-table/react-table.css`.
|
||||
- The stylesheet is located at `react-table-v6/react-table.css`.
|
||||
- There are countless ways to import a stylesheet. If you have questions on how to do so, consult the documentation of your build system.
|
||||
|
||||
#### Classes
|
||||
@ -1102,7 +1109,7 @@ Though we confidently stand by the markup and architecture behind it, `react-tab
|
||||
|
||||
```javascript
|
||||
// Change the global default
|
||||
import { ReactTableDefaults } from 'react-table'
|
||||
import { ReactTableDefaults } from 'react-table-v6'
|
||||
Object.assign(ReactTableDefaults, {
|
||||
TableComponent: component,
|
||||
TheadComponent: component,
|
||||
@ -1133,7 +1140,7 @@ Object.assign(ReactTableDefaults, {
|
||||
/>
|
||||
```
|
||||
|
||||
If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating <a href="https://github.com/react-tools/react-table/blob/master/src/index.js" target="\_parent">the source</a> for the component you wish to replace.
|
||||
If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating <a href="https://github.com/tannerlinsley/react-table/blob/v6/src/index.js" target="\_parent">the source</a> for the component you wish to replace.
|
||||
|
||||
# HOC Extensions
|
||||
|
||||
@ -1172,8 +1179,8 @@ But there is more documentation on the `select` HOC below.
|
||||
Any of the below HOCs can be imported from react-table like so:
|
||||
|
||||
```javascript
|
||||
import ReactTable from "react-table";
|
||||
import treeTableHOC from "react-table/lib/hoc/treeTable";
|
||||
import ReactTable from "react-table-v6";
|
||||
import treeTableHOC from "react-table-v6/lib/hoc/treeTable";
|
||||
|
||||
const TreeTable = treeTableHOC(ReactTable);
|
||||
```
|
||||
|
||||
748
index.d.ts
vendored
Normal file
748
index.d.ts
vendored
Normal file
@ -0,0 +1,748 @@
|
||||
declare module 'react-table-v6' {
|
||||
// Type definitions for react-table 6.8
|
||||
// Project: https://github.com/react-tools/react-table
|
||||
// Definitions by: Roy Xue <https://github.com/royxue>,
|
||||
// Pavel Sakalo <https://github.com/psakalo>,
|
||||
// Krzysztof Porębski <https://github.com/Havret>,
|
||||
// Andy S <https://github.com/andys8>,
|
||||
// Grzegorz Rozdzialik <https://github.com/Gelio>
|
||||
// Cam Pepin <https://github.com/cpepin>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
import * as React from 'react';
|
||||
|
||||
export type ReactTableFunction = (value?: any) => void;
|
||||
export type AccessorFunction<D = any> = (row: D) => any;
|
||||
export type Accessor<D = any> = string | string[] | AccessorFunction<D>;
|
||||
export type Aggregator = (values: any, rows: any) => any;
|
||||
export type TableCellRenderer = ((cellInfo: CellInfo, column: any) => React.ReactNode) | React.ReactNode;
|
||||
export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement;
|
||||
export type PivotRenderer = ((cellInfo: CellInfo) => 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 DefaultFilterFunction = (filter: Filter, row: any, column: any) => boolean;
|
||||
export type FilterFunction = (filter: Filter, rows: any[], column: any) => any[];
|
||||
export type SubComponentFunction = (rowInfo: RowInfo) => React.ReactNode;
|
||||
export type PageChangeFunction = (page: number) => void;
|
||||
export type PageSizeChangeFunction = (newPageSize: number, newPage: number) => void;
|
||||
export type SortedChangeFunction = (newSorted: SortingRule[], column: any, additive: boolean) => void;
|
||||
export type FilteredChangeFunction = (newFiltering: Filter[], column: any, value: any) => void;
|
||||
export type ExpandedChangeFunction = (column: any, event: any, isTouch: boolean) => void;
|
||||
export type ResizedChangeFunction = (newResized: Resize[], event: any) => void;
|
||||
export type SortFunction = (a: any, b: any, desc: any) => number;
|
||||
|
||||
export interface Resize {
|
||||
id: string;
|
||||
value: any;
|
||||
}
|
||||
export interface Filter {
|
||||
id: string;
|
||||
value: any;
|
||||
pivotId?: string;
|
||||
}
|
||||
|
||||
export interface SortingRule {
|
||||
id: string;
|
||||
desc: boolean;
|
||||
}
|
||||
|
||||
export interface TableProps<D = any, ResolvedData = D> extends
|
||||
TextProps,
|
||||
ComponentDecoratorProps,
|
||||
ControlledStateCallbackProps,
|
||||
PivotingProps,
|
||||
ControlledStateOverrideProps,
|
||||
ComponentProps {
|
||||
/** Default: [] */
|
||||
data: D[];
|
||||
|
||||
resolveData?: (data: D[]) => ResolvedData[];
|
||||
|
||||
/** Default: false */
|
||||
loading: boolean;
|
||||
|
||||
/** Default: true */
|
||||
showPagination: boolean;
|
||||
|
||||
/** Default: false */
|
||||
showPaginationTop: boolean;
|
||||
|
||||
/** Default: true */
|
||||
showPaginationBottom: boolean;
|
||||
|
||||
/** Default: false */
|
||||
manual: boolean;
|
||||
|
||||
/** Default: true */
|
||||
multiSort: boolean;
|
||||
|
||||
/** Default: true */
|
||||
showPageSizeOptions: boolean;
|
||||
|
||||
/** Default: [5, 10, 20, 25, 50, 100] */
|
||||
pageSizeOptions: number[];
|
||||
|
||||
/** Default: 20 */
|
||||
defaultPageSize: number;
|
||||
|
||||
/**
|
||||
* Default: undefined
|
||||
* Otherwise take value from 'pageSize' if defined
|
||||
* @TODO: add minRows to react-table defaultProps even if undefined
|
||||
*/
|
||||
minRows: number | undefined;
|
||||
|
||||
/** Default: true */
|
||||
showPageJump: boolean;
|
||||
|
||||
/** Default: true */
|
||||
sortable: boolean;
|
||||
|
||||
/** Default: true */
|
||||
collapseOnSortingChange: boolean;
|
||||
|
||||
/** Default: true */
|
||||
collapseOnPageChange: boolean;
|
||||
|
||||
/** Default: true */
|
||||
collapseOnDataChange: boolean;
|
||||
|
||||
/** Default: false */
|
||||
freezeWhenExpanded: boolean;
|
||||
|
||||
/** Default: [] */
|
||||
defaultSorting: SortingRule[];
|
||||
|
||||
/** Default: false */
|
||||
showFilters: boolean;
|
||||
|
||||
/** Default: [] */
|
||||
defaultFiltering: Filter[];
|
||||
|
||||
/** Default: ... */
|
||||
defaultFilterMethod: DefaultFilterFunction;
|
||||
|
||||
/** Default: ... */
|
||||
defaultSortMethod: SortFunction;
|
||||
|
||||
/** Default: true */
|
||||
resizable: boolean;
|
||||
|
||||
/** Default: false */
|
||||
filterable: boolean;
|
||||
|
||||
/** Default: [] */
|
||||
defaultResizing: Resize[];
|
||||
|
||||
/** Default: false */
|
||||
defaultSortDesc: boolean;
|
||||
|
||||
/** Default: [] */
|
||||
defaultSorted: SortingRule[];
|
||||
|
||||
/** Default: [] */
|
||||
defaultFiltered: Filter[];
|
||||
|
||||
/** Default: [] */
|
||||
defaultResized: Resize[];
|
||||
|
||||
/** Default: {} */
|
||||
defaultExpanded: {};
|
||||
|
||||
/** On change. */
|
||||
onChange: ReactTableFunction;
|
||||
|
||||
/**
|
||||
* Default: string
|
||||
* Adding a -striped className to ReactTable will slightly color odd numbered rows for legibility
|
||||
* Adding a -highlight className to ReactTable will highlight any row as you hover over it
|
||||
*/
|
||||
className: string;
|
||||
|
||||
/** Default: {} */
|
||||
style: object;
|
||||
|
||||
/** Global Column Defaults */
|
||||
column: Partial<GlobalColumn>;
|
||||
|
||||
/** Array of all Available Columns */
|
||||
columns?: Array<Column<ResolvedData>>;
|
||||
|
||||
/** Expander defaults. */
|
||||
expanderDefaults: Partial<ExpanderDefaults>;
|
||||
|
||||
/** Privot defaults. */
|
||||
pivotDefaults: Partial<PivotDefaults>;
|
||||
|
||||
/** The content rendered inside of a padding row */
|
||||
PadRowComponent: () => React.ReactNode;
|
||||
|
||||
/** Server-side callbacks */
|
||||
onFetchData: (state: any, instance: any) => void;
|
||||
|
||||
/** Control callback for functional rendering */
|
||||
children: (
|
||||
state: FinalState<ResolvedData>,
|
||||
makeTable: () => React.ReactElement,
|
||||
instance: Instance<ResolvedData>
|
||||
) => React.ReactNode;
|
||||
}
|
||||
|
||||
export interface ControlledStateOverrideProps {
|
||||
/** Default: undefined */
|
||||
page: number | undefined;
|
||||
|
||||
/** Default: undefined */
|
||||
pageSize: number | undefined;
|
||||
|
||||
/** Default: undefined */
|
||||
pages: number | undefined;
|
||||
|
||||
/** Default: undefined */
|
||||
sorting: number;
|
||||
|
||||
/** Default: [] */
|
||||
sorted: SortingRule[];
|
||||
|
||||
/** Default: [] */
|
||||
filtered: Filter[];
|
||||
|
||||
/** Default: [] */
|
||||
resized: Resize[];
|
||||
|
||||
/** Default: {} */
|
||||
expanded: {};
|
||||
|
||||
/** Sub component */
|
||||
SubComponent: SubComponentFunction;
|
||||
}
|
||||
|
||||
export interface PivotingProps {
|
||||
/** Default: undefined */
|
||||
pivotBy: string[];
|
||||
|
||||
/** Default: 200 */
|
||||
pivotColumnWidth: number;
|
||||
|
||||
/** Default: _pivotVal */
|
||||
pivotValKey: string;
|
||||
|
||||
/** Default: _pivotID */
|
||||
pivotIDKey: string;
|
||||
|
||||
/** 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 }
|
||||
* @example { 5: { 9: true }, 10: true }
|
||||
*/
|
||||
expandedRows: ExpandedRows;
|
||||
|
||||
/** Default: ??? - Pivoting State Callbacks */
|
||||
onExpandRow: ReactTableFunction;
|
||||
}
|
||||
|
||||
export interface ExpandedRows {
|
||||
[idx: number]: boolean | ExpandedRows;
|
||||
}
|
||||
|
||||
export interface DerivedDataObject {
|
||||
_index: number;
|
||||
_nestingLevel: number;
|
||||
_subRows: any;
|
||||
_original: any;
|
||||
[p: string]: any;
|
||||
}
|
||||
|
||||
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 {
|
||||
getProps: ComponentPropsGetterRC | ComponentPropsGetterC | ComponentPropsGetter0;
|
||||
getTableProps: ComponentPropsGetter0;
|
||||
getTheadGroupProps: ComponentPropsGetter0;
|
||||
getTheadGroupTrProps: ComponentPropsGetter0;
|
||||
getTheadGroupThProps: ComponentPropsGetterC;
|
||||
getTheadProps: ComponentPropsGetter0;
|
||||
getTheadTrProps: ComponentPropsGetter0;
|
||||
getTheadThProps: ComponentPropsGetterC;
|
||||
getTheadFilterProps: ComponentPropsGetter0;
|
||||
getTheadFilterTrProps: ComponentPropsGetter0;
|
||||
getTheadFilterThProps: ComponentPropsGetterC;
|
||||
getTbodyProps: ComponentPropsGetter0;
|
||||
getTrGroupProps: ComponentPropsGetterR | ComponentPropsGetter0;
|
||||
getTrProps: ComponentPropsGetterR | ComponentPropsGetter0;
|
||||
getTdProps: ComponentPropsGetterRC | ComponentPropsGetterR;
|
||||
getTfootProps: ComponentPropsGetter0;
|
||||
getTfootTrProps: ComponentPropsGetter0;
|
||||
getTfootTdProps: ComponentPropsGetterC;
|
||||
getPaginationProps: ComponentPropsGetter0;
|
||||
getLoadingProps: ComponentPropsGetter0;
|
||||
getNoDataProps: ComponentPropsGetter0;
|
||||
getResizerProps: ComponentPropsGetter0;
|
||||
}
|
||||
|
||||
export interface ComponentProps {
|
||||
TableComponent: React.ReactType;
|
||||
TheadComponent: React.ReactType;
|
||||
TbodyComponent: React.ReactType;
|
||||
TrGroupComponent: React.ReactType;
|
||||
TrComponent: React.ReactType;
|
||||
ThComponent: React.ReactType;
|
||||
TdComponent: React.ReactType;
|
||||
TfootComponent: React.ReactType;
|
||||
ExpanderComponent: React.ReactType;
|
||||
AggregatedComponent: React.ReactType;
|
||||
PivotValueComponent: React.ReactType;
|
||||
PivotComponent: React.ReactType;
|
||||
FilterComponent: React.ReactType;
|
||||
PaginationComponent: React.ReactType;
|
||||
PreviousComponent: React.ReactType;
|
||||
NextComponent: React.ReactType;
|
||||
LoadingComponent: React.ReactType;
|
||||
NoDataComponent: React.ReactType;
|
||||
ResizerComponent: React.ReactType;
|
||||
}
|
||||
|
||||
export interface TextProps {
|
||||
/** Default: 'Previous' */
|
||||
previousText: React.ReactNode;
|
||||
|
||||
/** Default: 'Next' */
|
||||
nextText: React.ReactNode;
|
||||
|
||||
/** Default: 'Loading...' */
|
||||
loadingText: React.ReactNode;
|
||||
|
||||
/** Default: 'No rows found' */
|
||||
noDataText: React.ReactNode | React.ComponentType;
|
||||
|
||||
/** Default: 'Page' */
|
||||
pageText: React.ReactNode;
|
||||
|
||||
/** Default: 'of' */
|
||||
ofText: React.ReactNode;
|
||||
|
||||
/** Default: 'rows' */
|
||||
rowsText: string;
|
||||
}
|
||||
|
||||
export interface GlobalColumn extends
|
||||
Column.Basics,
|
||||
Column.CellProps,
|
||||
Column.FilterProps,
|
||||
Column.FooterProps,
|
||||
Column.HeaderProps {
|
||||
}
|
||||
|
||||
export namespace Column {
|
||||
/** Basic column props */
|
||||
interface Basics {
|
||||
/** 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 */
|
||||
interface CellProps {
|
||||
/**
|
||||
* Default: undefined
|
||||
* A function that returns a primitive, or JSX / React Component
|
||||
*
|
||||
* @example 'Cell Value'
|
||||
* @example ({data, column}) => <div>Cell Value</div>,
|
||||
*/
|
||||
Cell: TableCellRenderer;
|
||||
|
||||
/**
|
||||
* Set the classname of the `td` element of the column
|
||||
* @default string
|
||||
*/
|
||||
className: string;
|
||||
|
||||
/**
|
||||
* Set the style of the `td` element of the column
|
||||
* @default {}
|
||||
*/
|
||||
style: object;
|
||||
|
||||
/**
|
||||
* @default () => ({})
|
||||
*/
|
||||
getProps: ReactTableFunction;
|
||||
}
|
||||
|
||||
/** Configuration of a columns header section */
|
||||
interface HeaderProps {
|
||||
/**
|
||||
* Default: undefined
|
||||
* A function that returns a primitive, or JSX / React Component
|
||||
*
|
||||
* @example 'Header Name'
|
||||
* @example ({data, column}) => <div>Header Name</div>,
|
||||
*/
|
||||
Header: TableCellRenderer;
|
||||
|
||||
/**
|
||||
* Set the classname of the `th` element of the column
|
||||
* @default string
|
||||
*/
|
||||
headerClassName: string;
|
||||
|
||||
/**
|
||||
* Default: {}
|
||||
* Set the style of the `th` element of the column
|
||||
*/
|
||||
headerStyle: object;
|
||||
|
||||
/**
|
||||
* Default: (state, rowInfo, column, instance) => ({})
|
||||
* A function that returns props to decorate the `th` element of the column
|
||||
*/
|
||||
getHeaderProps: ReactTableFunction;
|
||||
}
|
||||
|
||||
/** Configuration of a columns footer section */
|
||||
interface FooterProps {
|
||||
/**
|
||||
* Default: undefined
|
||||
* A function that returns a primitive, or JSX / React Component
|
||||
*
|
||||
* @example 'Footer Name'
|
||||
* @example ({data, column}) => <div>Footer Name</div>,
|
||||
*/
|
||||
Footer: TableCellRenderer;
|
||||
|
||||
/**
|
||||
* Default: string
|
||||
* Set the classname of the `td` element of the column's footer
|
||||
*/
|
||||
footerClassName: string;
|
||||
|
||||
/**
|
||||
* Default: {}
|
||||
* Set the style of the `td` element of the column's footer
|
||||
*/
|
||||
footerStyle: object;
|
||||
|
||||
/**
|
||||
* Default: (state, rowInfo, column, instance) => ({})
|
||||
* A function that returns props to decorate the `th` element of the column
|
||||
*/
|
||||
getFooterProps: ReactTableFunction;
|
||||
}
|
||||
|
||||
/** Filtering related column props */
|
||||
interface FilterProps {
|
||||
/** 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: ... */
|
||||
Filter: FilterRender;
|
||||
}
|
||||
}
|
||||
|
||||
export interface ExpanderDefaults {
|
||||
/** Default: false */
|
||||
sortable: boolean;
|
||||
|
||||
/** Default: false */
|
||||
resizable: boolean;
|
||||
|
||||
/** Default: false */
|
||||
filterable: boolean;
|
||||
|
||||
/** Default: 35 */
|
||||
width: number;
|
||||
}
|
||||
|
||||
export interface PivotDefaults {
|
||||
/** Will be overriden in methods.js to display ExpanderComponent */
|
||||
render: TableCellRenderer;
|
||||
}
|
||||
|
||||
export interface Column<D = any> extends
|
||||
Partial<Column.Basics>,
|
||||
Partial<Column.CellProps>,
|
||||
Partial<Column.FilterProps>,
|
||||
Partial<Column.FooterProps>,
|
||||
Partial<Column.HeaderProps> {
|
||||
/**
|
||||
* Property name as string or Accessor
|
||||
* @example: 'myProperty'
|
||||
* @example ["a.b", "c"]
|
||||
* @example ["a", "b", "c"]
|
||||
* @example {"a": {"b": {"c": $}}}
|
||||
* @example (row) => row.propertyName
|
||||
*/
|
||||
accessor?: Accessor<D>;
|
||||
|
||||
/**
|
||||
* Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
|
||||
* @example 'myProperty'
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* No description
|
||||
* @example (values, rows) => _.round(_.mean(values))
|
||||
* @example (values, rows) => _.sum(values)
|
||||
*/
|
||||
aggregate?: Aggregator;
|
||||
|
||||
/**
|
||||
* Default: undefined - A hardcoded width for the column. This overrides both min and max width options
|
||||
*/
|
||||
width?: number;
|
||||
|
||||
/**
|
||||
* Default: undefined - A maximum width for this column.
|
||||
* @default undefined
|
||||
*/
|
||||
maxWidth?: number;
|
||||
|
||||
/**
|
||||
* Turns this column into a special column for specifying expander and pivot column options.
|
||||
* If this option is true and there is NOT a pivot column, the `expanderDefaults` options will be applied on top of the column options.
|
||||
* If this option is true and there IS a pivot column, the `pivotDefaults` options will be applied on top of the column options.
|
||||
* Adding a column with the `expander` option set will allow you to rearrange expander and pivot column orderings in the table.
|
||||
* 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) and the rendering of the expander itself.
|
||||
*/
|
||||
expander?: boolean;
|
||||
|
||||
/** Header Groups only */
|
||||
columns?: Array<Column<D>>;
|
||||
|
||||
/**
|
||||
* 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<D = any> {
|
||||
/** Sorted data. */
|
||||
data: D[];
|
||||
|
||||
/** The column. */
|
||||
column: Column<D>;
|
||||
}
|
||||
|
||||
export interface RowRenderProps extends Partial<RowInfo> {
|
||||
/** Whenever the current row is expanded */
|
||||
isExpanded?: boolean;
|
||||
|
||||
/** The current cell value */
|
||||
value?: any;
|
||||
}
|
||||
|
||||
export interface RowInfo {
|
||||
/** Materialized row of data */
|
||||
row: any;
|
||||
|
||||
/** The post-accessed values from the original row */
|
||||
rowValues: any;
|
||||
|
||||
/** The index of the row */
|
||||
index: number;
|
||||
|
||||
/** The index of the row relative to the current page */
|
||||
viewIndex: number;
|
||||
|
||||
/** The size of the page */
|
||||
pageSize: number;
|
||||
|
||||
/** The index of page */
|
||||
page: number;
|
||||
|
||||
/** The nesting depth (zero-indexed) */
|
||||
level: number;
|
||||
|
||||
/** The nesting path of the row */
|
||||
nestingPath: number[];
|
||||
|
||||
/** A boolean stating if the row is an aggregation row */
|
||||
aggregated: boolean;
|
||||
|
||||
/** A boolean stating if the row is grouped by Pivot */
|
||||
groupedByPivot: boolean;
|
||||
|
||||
/** An array of any expandable sub-rows contained in this row */
|
||||
subRows: any[];
|
||||
|
||||
/** Original object passed to row */
|
||||
original: any;
|
||||
}
|
||||
|
||||
export interface CellInfo extends RowInfo, Pick<ControlledStateOverrideProps, "resized"> {
|
||||
/* true if this row is expanded */
|
||||
isExpanded: boolean;
|
||||
|
||||
/* the cell's column */
|
||||
column: Column;
|
||||
|
||||
/* materialized value of the cell */
|
||||
value: any;
|
||||
|
||||
/* true if the column is pivoted */
|
||||
pivoted: boolean;
|
||||
|
||||
/* true if this column is an expander */
|
||||
expander: boolean;
|
||||
|
||||
/* true if the column is visible */
|
||||
show: boolean;
|
||||
|
||||
/* resolved width of the cell */
|
||||
width: number;
|
||||
|
||||
/* resolved maxWidth of the cell */
|
||||
maxWidth: number;
|
||||
|
||||
/* resolved tdProps from `getTdProps` for this cell */
|
||||
tdProps: any;
|
||||
|
||||
/* resolved column props from 'getProps' for this cell's column */
|
||||
columnProps: any;
|
||||
|
||||
/* resolved array of classes for the cell */
|
||||
classes: string[];
|
||||
|
||||
/* resolved styles for this cell */
|
||||
styles: object;
|
||||
}
|
||||
|
||||
export interface FinalState<D = any> extends TableProps<D> {
|
||||
frozen: boolean;
|
||||
startRow: number;
|
||||
endRow: number;
|
||||
padRows: number;
|
||||
hasColumnFooter: boolean;
|
||||
hasHeaderGroups: boolean;
|
||||
canPrevious: boolean;
|
||||
canNext: boolean;
|
||||
rowMinWidth: number;
|
||||
|
||||
allVisibleColumns: Array<Column<D>>;
|
||||
allDecoratedColumns: Array<Column<D>>;
|
||||
pageRows: DerivedDataObject[];
|
||||
resolvedData: DerivedDataObject[];
|
||||
sortedData: DerivedDataObject[];
|
||||
headerGroups: any[];
|
||||
}
|
||||
|
||||
export const ReactTableDefaults: TableProps;
|
||||
export default class ReactTable<D> extends React.Component<Partial<TableProps<D>>> { }
|
||||
|
||||
export interface Instance<D = any> extends ReactTable<D> {
|
||||
context: any;
|
||||
props: Partial<TableProps<D>>;
|
||||
refs: any;
|
||||
state: FinalState<D>;
|
||||
filterColumn(...props: any[]): any;
|
||||
filterData(...props: any[]): any;
|
||||
fireFetchData(...props: any[]): any;
|
||||
getDataModel(...props: any[]): any;
|
||||
getMinRows(...props: any[]): any;
|
||||
getPropOrState(...props: any[]): any;
|
||||
getResolvedState(...props: any[]): any;
|
||||
getSortedData(...props: any[]): any;
|
||||
getStateOrProp(...props: any[]): any;
|
||||
onPageChange: PageChangeFunction;
|
||||
onPageSizeChange: PageSizeChangeFunction;
|
||||
resizeColumnEnd(...props: any[]): any;
|
||||
resizeColumnMoving(...props: any[]): any;
|
||||
resizeColumnStart(...props: any[]): any;
|
||||
sortColumn(...props: any[]): any;
|
||||
sortData(...props: any[]): any;
|
||||
}
|
||||
}
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "6.10.3",
|
||||
"name": "react-table-v6",
|
||||
"version": "6.11.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "6.10.3",
|
||||
"name": "react-table-v6",
|
||||
"version": "6.11.0",
|
||||
"description": "A fast, lightweight, opinionated table and datagrid built on React",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/react-tools/react-table#readme",
|
||||
"homepage": "https://github.com/tannerlinsley/react-table/tree/v6#readme",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/react-tools/react-table.git"
|
||||
"url": "git+https://github.com/tannerlinsley/react-table.git"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user